CSS về cơ bản được sử dụng để làm gì?

Phạm vi

Trong bài viết này, chúng ta sẽ thảo luận về các điểm sau-

• CSS là gì?, và một lịch sử ngắn gọn về CSS
• Sau đó, chúng ta sẽ tìm hiểu về Cú pháp CSS và sẽ thảo luận về một số yếu tố được sử dụng phổ biến nhất cùng với các ví dụ
• Chúng ta cũng sẽ tìm hiểu cách nhập CSS vào HTML, mô hình hộp trong CSS
• Chúng tôi sẽ kết thúc bài viết bằng cách thảo luận về các ứng dụng của CSS cùng với những ưu điểm của nó

Bài viết này giả định người đọc đã có hiểu biết cơ bản về HTML, hoặc người đọc có thể tham khảo HTML

CSS hoặc Cascading Style Sheet hoặc trụ cột thứ hai của sự phát triển giao diện người dùng sau HTML là ngôn ngữ được sử dụng để mô tả cách trình bày của các trang web, bao gồm bố cục của trang, phông chữ của các phần tử và màu sắc, hoạt ảnh, v.v. Do đó làm cho trang web của chúng tôi đẹp cho người dùng

• xếp tầng. có nghĩa là các kiểu có thể rơi (hoặc xếp tầng) từ biểu định kiểu này sang biểu định kiểu khác. Nghĩa là, có thể có nhiều tệp CSS được liên kết với cùng một tài liệu HTML, trong đó tệp cuối cùng quan trọng nhất
• Phong cách. Thêm Tạo kiểu cho các thẻ HTML của chúng tôi
• trang tính. Viết mã phong cách của chúng tôi trong các tài liệu khác nhau

CSS được thiết kế để tạo biểu định kiểu cho trang web. Nó là độc lập, tôi. e. , nó có thể được sử dụng với bất kỳ ngôn ngữ đánh dấu dựa trên XML nào

Lịch sử của Cascading Style Sheet (CSS)

• 1994. Cascading Style Sheet lần đầu tiên được đề xuất bởi Hakon Wium Lie vào ngày 10 tháng 10
• 1996. Cuối cùng, Cascading Style Sheet đã được xuất bản vào ngày 17 tháng 11 với người có ảnh hưởng Bert Bos, sau đó anh trở thành đồng tác giả của Cascading Style Sheet
• 1996. Cascading Style Sheet đã trở thành chính thức với CSS và được xuất bản vào tháng 12

Biểu định kiểu xếp tầng (CSS) Cú pháp

 Selector {
 Property_1 : value;
 Property_2 : value;
 Property_3 : value;
}
Thí dụ
    h1{
        Text-align: left;
        color: blue;
    }
    #select {
        color: red;
    }

Ở đây, vai trò của Bộ chọn là chọn phần tử bạn muốn nhắm mục tiêu. Một số bộ chọn cơ bản là thẻ, id và lớp. Bạn có thể đã nhận thấy cú pháp trong CSS, cú pháp này tạo thành một cặp khóa-giá trị, trong đó khóa. tài sản. Bao gồm nền, màu sắc, cỡ chữ, v.v. Và giá trị là giá trị được gán cho các thuộc tính
Vì vậy, một câu hỏi chắc hẳn đang xuất hiện trong đầu bạn là-
CSS hoạt động như thế nào?
CSS mang lại phong cách cho trang web của bạn bằng cách cung cấp các tùy chọn kiểu khác nhau cho phần tử HTML, Ví dụ-

    This is a paragraph.

chúng ta có thể tạo Tiêu đề bằng cách sử dụng
thẻ trong HTML. Nhưng làm thế nào để chúng ta làm cho nó trông hấp dẫn? 
Nếu bạn muốn đặt màu tiêu đề thành màu đỏ và căn giữa trang web mà mọi người đang xem, bạn sẽ sử dụng mã CSS như
h1{
color: red;
text-align:center;
}
Trong trường hợp này, h1 (tiêu đề) được gọi là bộ chọn. Về cơ bản, trong mã CSS, chúng ta cần chỉ định phần tử nào sẽ diễn ra kiểu dáng CSS
Bộ chọn được viết ở bên trái với dấu ngoặc nhọn và trong thông tin giữa các dấu ngoặc nhọn được gọi là khai báo, chứa các giá trị cho các thuộc tính đã chỉ định được áp dụng cho bộ chọn
Trong ví dụ đã cho, "color" và "text-align" là các thuộc tính trong khi "red" và "center" lần lượt là các giá trị của chúng. Kể từ đây
{
color: red;
text-align:center;
}
Mã là một tuyên bố. Những nguyên tắc cơ bản này cũng có thể được áp dụng để thay đổi các thuộc tính khác, chẳng hạn như-



body{
    background-color:grey;
}
Đoạn mã trên sẽ làm cho toàn bộ trang web có màu nền xám

Trong lập trình, một bình luận là một lời giải thích có thể đọc được về mã. Tầm quan trọng của bình luận là làm cho mã nguồn dễ hiểu hơn đối với con người

Vì vậy, tương tự, chúng ta cũng có thể thêm nhận xét trong mã CSS. Hãy để chúng tôi lấy một ví dụ để giải thích điều này hơn nữa

/*
  This is a comment on styling the body of the page.
  Multiple comments can be made too.
*/
body {
  font-family: Sans-serif;
  font-size: 50 em  /* 1em = 10px */
}
Các dòng bên trong /* và */ là các chú thích CSS và điều này giúp viết một loạt các dòng giải thích mã sẽ không được thực thi. Do đó, nhận xét trong CSS cho phép ai đó đọc tệp CSS để hiểu lý do đằng sau dòng mã CSS cụ thể

Bộ chọn

Bộ chọn trong CSS được sử dụng để chọn nội dung cụ thể mà bạn muốn tạo kiểu. Trong CSS có nhiều loại bộ chọn được sử dụng để chọn nội dung HTML, chẳng hạn như

• Bộ chọn phần tử
• Bộ chọn phổ quát
• bộ chọn id
• Bộ chọn lớp

Bộ chọn phần tử

Bộ chọn phần tử không là gì ngoài cách cung cấp kiểu dáng cho phần tử HTML đã chọn

cú pháp

element {
    property : value
}
Thí dụ
________số 8
Đoạn mã trên sẽ triển khai màu 'RedRedRed' cho nền của đoạn văn
Bộ chọn phổ quát
Dấu hoa thị (*) được sử dụng để xác định bộ chọn chung. Nó được sử dụng để chọn tất cả nội dung của Trang HTML. Ví dụ,-
Trong khi chọn một phần tử HTML, nếu chúng ta sử dụng dấu hoa thị, thuộc tính giá trị sẽ được triển khai trên toàn bộ trang HTML, bất kể mối quan hệ cha-con của các thẻ HTML
chúng ta hãy lấy mã HTML được nhúng với nội dung CSS
Đầu vào

  
    
  

  
    
      This is a header!
      

        

           div parent to p parent to span 
        
        
          
div parent to span parent to h3
        
      

    
  

đầu ra
Ở đây, mã
    h1{
        Text-align: left;
        color: blue;
    }
    #select {
        color: red;
    }

0
Được sử dụng để cung cấp màu nền cho toàn bộ trang HTML. Nhưng trái lại,
    h1{
        Text-align: left;
        color: blue;
    }
    #select {
        color: red;
    }

1
thực hiện màu 'đỏ' trên toàn bộ
hoặc thẻ đoạn văn
    h1{
        Text-align: left;
        color: blue;
    }
    #select {
        color: red;
    }

2
Mã cuối cùng triển khai màu 'Vàng' và 'Cam' để trải dài một phần của đoạn văn, trong khi toàn bộ h3 (tiêu đề 3) được chuyển thành màu Cam do dấu (*)
Bộ chọn ID
Bộ chọn ID là toán tử được sử dụng phổ biến nhất, được sử dụng để đặt kiểu cho Id đã cho. Thuộc tính Id là một giá trị thuộc tính duy nhất trong HTML. Chúng tôi biểu thị bộ chọn Id bằng (#)
cú pháp
Thí dụ
Đầu vào
    h1{
        Text-align: left;
        color: blue;
    }
    #select {
        color: red;
    }

3
đầu ra
Ở đây, h1 và h2 lần lượt được liên kết với ID thứ nhất và thứ hai. Dựa trên điều này, chúng tôi đã sửa đổi CSS của mình để tạo đầu ra đã cho
Bộ chọn lớp
Bộ chọn lớp chọn phần tử có thuộc tính lớp được chỉ định. Để chọn phần tử từ một lớp cụ thể, chúng tôi sử dụng (. ) theo sau là tên lớp
cú pháp
Thí dụ
    h1{
        Text-align: left;
        color: blue;
    }
    #select {
        color: red;
    }

3
đầu ra



Ở đây, h1 và h2 tương ứng được liên kết với Lớp thứ nhất và thứ hai. Dựa trên điều này, chúng tôi đã sửa đổi CSS của mình để tạo đầu ra đã cho

Nhập CSS vào HTML

Tổng cộng có ba cách chèn CSS vào trang HTML. những cách là

• CSS nội tuyến
• CSS nội bộ
• CSS bên ngoài

Đến với phân khúc đầu tiên đó là

CSS nội tuyến

Đó là một cách để thêm một phong cách độc đáo cho một yếu tố cụ thể

Để sử dụng Kiểu nội tuyến, bạn có thể thêm thuộc tính kiểu trong thẻ HTML có liên quan, sau đó bên trong thuộc tính kiểu, bạn có thể cung cấp các kiểu khác nhau

cú pháp

    h1{
        Text-align: left;
        color: blue;
    }
    #select {
        color: red;
    }

5
Hãy làm cho mọi thứ rõ ràng hơn bằng cách lấy một ví dụ
    h1{
        Text-align: left;
        color: blue;
    }
    #select {
        color: red;
    }

6
đầu ra
CSS nội bộ
CSS nội bộ được sử dụng trong một trang HTML duy nhất. Để chèn CSS nội bộ, chúng tôi đặt toàn bộ kiểu CSS bên trong thẻ đầu của HTML bằng cách sử dụng
tiêu đề một
tiêu đề hai
đầu ra
Nhưng chèn CSS inline hay internal hay internal đều không hiệu quả. Nếu chúng ta muốn sử dụng cùng một CSS cho nhiều trang web thì sao? . Vì vậy, để tránh vấn đề đó, chúng tôi có CSS ​​bên ngoài
CSS bên ngoài
Như đã thảo luận ở trên, với sự trợ giúp của CSS bên ngoài, chúng tôi sử dụng đi sử dụng lại cùng một tệp CSS. Cách chúng tôi làm là tạo một tệp CSS và liên kết nó với HTML bên trong thẻ bằng thetag
cú pháp
    h1{
        Text-align: left;
        color: blue;
    }
    #select {
        color: red;
    }

5
Ở đây, trong href, chúng tôi cung cấp đường dẫn của tệp CSS mà chúng tôi muốn sử dụng cho Trang HTML của mình. Ở đây trong href, chúng tôi cung cấp đường dẫn của tệp CSS mà chúng tôi muốn sử dụng cho Trang HTML của mình. Thí dụ. Đầu vào
    h1{
        Text-align: left;
        color: blue;
    }
    #select {
        color: red;
    }

8
tên_tệp. css
    h1{
        Text-align: left;
        color: blue;
    }
    #select {
        color: red;
    }

9
đầu ra
Đến đây, chúng ta kết thúc quá trình chèn CSS

Đường viền CSS

Thuộc tính đường viền cho phép chỉ định đường viền xung quanh phần tử sẽ trông như thế nào. Có tổng cộng ba thuộc tính của đường viền mà chúng ta có thể thay đổi

• Màu viền
• Kiểu viền
• Chiều rộng biên giới

Thuộc tính màu viền

Thuộc tính Border Color cho phép chúng ta thay đổi màu viền của đường viền bao quanh phần tử

Với sự trợ giúp của thuộc tính màu đường viền, chúng ta có thể thay đổi riêng màu của bên trái, bên phải, bên trên và bên dưới của đường viền bao quanh phần tử

Để làm như vậy, chúng tôi có các thuộc tính nhất định trong thuộc tính màu đường viền nhắm mục tiêu đến một khu vực cụ thể của đường viền, được liệt kê bên dưới-

• màu viền trái
• viền-phải-màu
• màu viền trên cùng
• đường viền xuống màu

Hãy để chúng tôi làm cho mọi thứ rõ ràng hơn bằng cách lấy một ví dụ

Đầu vào

    This is a paragraph.

0
đầu ra
Tôi hy vọng ví dụ làm cho mọi thứ rõ ràng ngay bây giờ. nụ cười. Tiếp theo, chúng ta có Thuộc tính kiểu viền
thuộc tính kiểu viền
Trong ví dụ trên

    This is a paragraph.

1
Bạn có thể nhận thấy trong cả lớp_1 và lớp_2, chúng tôi đã sử dụng đường viền. 1px solid;, vậy solid này có nghĩa là gì?
Để trả lời câu hỏi, thuộc tính border-style giúp bạn tạo các kiểu khác nhau cho đường viền bao quanh phần tử
Một số thuộc tính kiểu viền là
không ai. Không có viền, tương đương với border-width=0
chất rắn. Đường viền dưới dạng một đường liền nét
cú pháp

    This is a paragraph.

2
Hãy lấy ví dụ giải thích nội dung trên
Đầu vào




    This is a paragraph.

3
đầu ra

Mô hình hộp CSS

Một trang web có thể được chia thành các vùng chứa khác nhau để thiết kế từng thành phần riêng biệt và đây là lúc mô hình hộp CSS phát huy tác dụng. Với sự trợ giúp của mô hình hộp CSS, chúng ta có thể tạo thiết kế và bố cục của trang web. Nó được sử dụng như một bộ công cụ để định kiểu bố cục của các phần tử khác nhau

Vậy, CSS Box Model thực hiện kiểu dáng như thế nào?

Các thuộc tính được mô hình hộp CSS sử dụng để tạo kiểu dáng và thiết kế bố cục web là

• biên giới. Thuộc tính này giúp che nội dung hoặc phần đệm và cũng cho phép chúng tôi đặt màu, chiều rộng và kiểu của đường viền
• Nội dung. Thuộc tính này giúp hiển thị văn bản và hình ảnh, có thể được tùy chỉnh bằng thuộc tính width & height
• lề. Thuộc tính này giúp tạo không gian xung quanh phần tử xung quanh đường viền
• đệm. Thuộc tính này cung cấp khoảng cách giữa đường viền của phần tử và nội dung của nó

Hãy để chúng tôi thảo luận về từng khu vực một cách riêng biệt,

• Vùng lề Vùng này bao gồm đường viền và lề của phần tử, kích thước của hộp lề được đặt bằng cách sử dụng thuộc tính chiều cao hộp lề và chiều rộng hộp lề. Việc sử dụng vùng lề là để tách các phần tử khỏi các phần tử lân cận của chúng
• Vùng viền Đây là vùng giữa lề và phần đệm của hộp. Kích thước của Vùng viền được đặt bằng cách sử dụng chiều rộng và chiều cao của đường viền
• Khu vực đệm Khu vực này bao gồm phần đệm được cung cấp cho phần tử, là không gian xung quanh phần tử, kích thước của vùng đệm có thể được đặt bằng cách sử dụng chiều rộng của hộp đệm và chiều cao của hộp đệm
• Khu vực nội dung Khu vực này bao gồm hình ảnh, văn bản hoặc các loại nội dung đa phương tiện khác. Vùng nội dung được giới hạn bởi cạnh nội dung và kích thước của nó được đặt bằng cách sử dụng chiều cao và chiều rộng của hộp nội dung

Bây giờ, trước khi đặt chiều cao và chiều rộng của một phần tử trong CSS, chúng ta cần hiểu mô hình hộp CSS hoạt động như thế nào và phép tính liên quan gì trong khi đặt thuộc tính chiều cao và chiều rộng

Trong khi đặt chiều cao và chiều rộng của phần tử, chúng ta cần đặt chiều cao và chiều rộng của vùng nội dung nơi phần tử sẽ được đặt. Cuối cùng, chúng ta cần thêm đường viền, lề và phần đệm để tính kích thước đầy đủ của phần tử

Chúng ta hãy lấy một ví dụ,

    This is a paragraph.

4
Vì vậy, tổng chiều rộng của phần tử có thể được tính như
TotalElementWidth=chiều rộng+đệm phải+đệm trái+viền phải+viền trái+lề phải+lề tráiTổng Chiều rộng phần tử =chiều rộng + đệm phải + đệm trái +viền phải +viền trái +lề phải +lề tráiTotalElementWidth=chiều rộng+đệm phải+đệm trái+viền phải+viền trái+lề phải+ 
Do đó, tổng chiều rộng của phần tử
sẽ là
TotalWidth=60px(chiều rộng)+16px(đệm trái+đệm phải)+2px(biên trái+biên phải)+0px(lề trái+lề phải)=78px. Tổng Chiều rộng = 60px (chiều rộng) + 16px (phần đệm trái + phần đệm phải) + 2px (viền trái + viền phải) + 0px (lề trái + lề phải) = 78px. TotalWidth=60px(chiều rộng)+16px(đệm trái+đệm phải)+2px(biên trái+biên phải)+0px(lề trái+lề phải)=78px
Tương tự, chúng ta có thể tính tổng chiều cao của phần tử bằng
TotalElementHeight=chiều cao+đệm dưới+đệm trên cùng+đường viền dưới+đường trên+lề dưới+lề trênTổng chiều cao phần tử =chiều cao + đệm dưới + đệm trên + đường viền dưới + đường viền trên + lề dưới + lề trênTotalElementHeight=chiều cao+đệm dưới+đệm trên cùng+đường viền dưới+đường viền trên+lề dưới+ 
Do đó, tổng chiều cao của phần tử
sẽ là
TotalHeight=45px(chiều cao)+16px(toppadding+bottompadding)+2px(topborder+bottomborder)+0px(topmargin+bottommargin)=63px. Tổng Chiều cao = 45px (chiều cao) + 16px (phần đệm trên + phần đệm dưới) + 2px (viền trên + viền dưới) + 0px (lề trên + lề dưới) = 63px. TotalHeight=45px(chiều cao)+16px(toppadding+bottompadding)+2px(topborder+bottomborder)+0px(topmargin+bottommargin)=63px
Hãy để chúng tôi lấy một mã HTML/CSS ví dụ để giải thích mô hình hộp CSS
Đầu vào

    This is a paragraph.

5
đầu ra
Tôi hy vọng ví dụ này đã giúp bạn hiểu rõ về cách thức hoạt động của mô hình hộp CSS

CSS cũ vẫn được sử dụng, bạn có thể tò mò tại sao lại như vậy. face_with_raised_eyebrow. cũng có rất nhiều ứng dụng của CSS do đó CSS ​​vẫn còn phổ biến, một số trong số đó là

Xử lý tệp hình ảnh

Khi nói đến Xử lý hình ảnh, CSS cung cấp các thư viện kiểu dáng giúp xuất cả hình ảnh và XML sang trình duyệt. Với sự trợ giúp của CSS, hình ảnh đầu ra có thể được nhận ở các định dạng khác nhau như png, jpeg và gif, có thể được sửa đổi thêm theo yêu cầu. Về cơ bản, tính năng này của CSS giúp tạo hình thu nhỏ, cắt ảnh, hình mờ, v.v.

Đại diện cho người dùng cuối và phía máy chủ

Tệp CSS có thể tương tác trực tiếp với phía máy chủ và phần cuối của người dùng cho mục đích tạo kiểu giao diện trang web, cho phép tạo biểu diễn web tốt hơn từ phía người dùng

Ưu điểm của CSS

CSS chịu trách nhiệm chăm sóc giao diện của một trang web;

Hãy để chúng tôi thảo luận về những lợi thế điểm khôn ngoan. bắt đầu với,

• Bảo trì dễ dàng. Để thực hiện bất kỳ thay đổi toàn cầu nào hoặc chỉ đơn giản là thay đổi kiểu, tất cả các phần tử được nhắm mục tiêu trong các trang web sẽ được cập nhật tự động

• Độc lập nền tảng. Script of CSS cung cấp nền tảng độc lập nhất quán và cũng có thể hỗ trợ tất cả các trình duyệt mới nhất

• CSS tiết kiệm thời gian. CSS giúp tiết kiệm thời gian nhờ khả năng sử dụng lại của nó, nhờ đó bạn có thể viết CSS cho một trang HTML và cũng có thể sử dụng nó cho các trang HTML khác

• Tiêu chuẩn web toàn cầu. Các tiêu chuẩn web toàn cầu yêu cầu sử dụng nhiều CSS hơn vì các thuộc tính HTML không được dùng nữa, Vì vậy, nên sử dụng CSS trong tất cả các trang HTML để làm cho chúng tương thích với các trình duyệt trong tương lai

Sự kết luận

Tôi hy vọng bạn thích đọc về CSS, đây là yêu cầu cơ bản nhất để phát triển web. Hãy để chúng tôi tóm tắt lại những điều chúng tôi đã học được cho đến nay,

Tại sao CSS về cơ bản được sử dụng để làm gì?

CSS cơ bản là gì?

3 công dụng của CSS là gì?