CSS [Cascading Style Sheets] are files that describe how HTML elements are displayed on the screen, paper, etc. With HTML, you can have either embedded styles or styles can be defined in an external stylesheet. For embedding the styles, the tags are used. The external stylesheets are stored in files with the .css extension. With the external CSS, you can include it on multiple HTML pages to update the style of those pages. Even a single CSS file can be used to style a complete website.
Tóm tắt lịch sử
CSS1 được phát hành vào năm 1996 với Bert Bos là đồng tác giả. Nhóm làm việc CSS bắt đầu giải quyết các vấn đề chưa được giải quyết trong CSS1. Điều này dẫn đến việc tạo ra CSS2 vào tháng 11 năm 1997, được xuất bản dưới dạng khuyến nghị của W3C vào ngày 12 tháng 5 năm 1998. Phiên bản này đã thêm hỗ trợ cho các thiết bị dành riêng cho phương tiện như máy in, phông chữ có thể tải xuống, bảng và định vị phần tử. Tháng 6 năm 1999, CSS3 trở thành đề xuất của W3C. Điều này đã chia tài liệu thành các mô-đun trong đó mỗi mô-đun có các tính năng mở rộng được xác định trong CSS2
Cách sử dụng tệp CSS
Để sử dụng tệp CSS, bạn đưa nó vào phần đầu của tài liệu HTML. Bạn sử dụng thẻ link để gộp file như hình bên dưới
thuộc tính href của thẻ liên kết chứa đường dẫn đến tệp CSS. Bằng cách này, các kiểu áp dụng có trong tệp CSS đi kèm sẽ được áp dụng cho tài liệu HTML
Cú pháp CSS
Quy tắc CSS bao gồm hai thành phần, bộ chọn và khai báo. Bộ chọn trỏ đến một phần tử trong tài liệu HTML. Nó có thể là thẻ phần tử, tên lớp, tên id, nhiều thẻ hiển thị phân cấp, v.v. Một khai báo chứa định nghĩa kiểu bao gồm thuộc tính và giá trị. Thuộc tính xác định thuộc tính của phần tử mà bạn muốn thay đổi và giá trị xác định giá trị mới của nó. Mỗi quy tắc CSS có thể có nhiều khai báo. Sau đây là một ví dụ về quy tắc CSS
h1{
font-weight: 700;
color: forestgreen;
}
Trong ví dụ trên, chúng ta có h1 làm bộ chọn để chọn tất cả các thẻ h1 trong tài liệu HTML. Quy tắc có hai khai báo, một cho trọng lượng phông chữ và một cho màu sắc. trọng lượng phông chữ và màu sắc là các thuộc tính và 700 và màu xanh lá cây là các giá trị của chúng tương ứng
Ví dụ sử dụng CSS
Phần sau đây hiển thị tài liệu HTML mẫu và biểu định kiểu được sử dụng để tạo kiểu cho nó. Hình ảnh so sánh cũng được thêm vào để so sánh các tài liệu HTML được tạo kiểu và thuần túy
Tài liệu HTML
CSS Test
Test document to test CSS
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium officia similique illum magni explicabo,
tempore neque nulla laborum voluptas sint molestias libero et corporis omnis asperiores incidunt,
perferendis
sed aut!
List of items
Item 1
Item 2
Item 3
Item 4
Item 5
Biểu định kiểu CSS
body{
background-color: lightblue;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.content-wrapper{
padding: 10px 30px;
}
p{
text-align: justify;
}
h1{
text-align: center;
}
.highlight{
font-weight: 700;
color: forestgreen;
}
h1, h2{
font-weight: 400;
}
ul li{
list-style-type: square;
margin-bottom: 10px;
margin-left: 50px;
}
So sánh đầu ra
Phía bên trái của hình ảnh hiển thị tài liệu HTML mà không áp dụng các kiểu và phía bên phải hiển thị tài liệu HTML với các kiểu được áp dụng