Để thiết kế theme hay chỉnh sửa lại theme cho blog thì bạn nhất thiết phải biết về CSS. Nhưng nói là biết về CSS thì rộng quá nên bây giờ chúng ta sẽ bắt đầu từ từ tìm hiểu và chinh phục CSS. Để chinh phục thành công một điều gì đó trước tiên bạn cần biết nó là gì đã. Nào, chúng ta hãy bắt đầu.
CSS là gì?
CSS là chữ viết tắt của cụm từ tiếng Anh "Cascading Style Sheet", là kiểu thiết kế sử dụng nhiều lớp định dạng chồng lên nhau. CSS được tổ chức World Wide Web (W3C) giới thiệu vào năm 1996. Cách đơn giản nhất để hiểu CSS là hãy coi nó như một phần mở rộng của HTML để giúp đơn giản hóa và cải tiến việc thiết kế cho các trang web.
Một tiện ích của CSS là bạn chỉ phải định nghĩa các Style (kiểu dáng, định dạng, v.v..) một lần và các trình duyệt có thể áp dụng các Style này nhiều lần trong một văn bản. Ví dụ: nếu bạn muốn một số Tiêu đề của bài viết trên blog của bạn có nét Chữ đậm và Màu xanh, thì thay vì phải lập lại các giá trị Chữ đậm và Màu xanh này cho từng tiêu đề, bạn chỉ cần định nghĩa Chứ đậm và Màu xanh thành một Style và Style này sẽ được áp dụng cho tất cả các tiêu đề mà bạn muốn.
Ưu điểm của CSS
- CSS có thể tách riêng phần định dạng ra khỏi nội dung một trang web, do đó nó sẽ rất thuận tiện khi bạn muốn thay đổi giao diện của một trang web.
- CSS là một sợi chỉ xuyên suốt trong quá trình thiết kế một website bởi vì nó cho phép nhà thiết kế kiểm soát toàn bộ giao diện, kiểu cách và sự sắp đặt của nhiều trang hay nhiều đối trong một lần định nghĩa. Để thay đổi tổng thể hay nhiều đối tượng có cùng Style, bạn chỉ cần thay đổi Style đó và lập tức tất cả các thành phần áp dụng Style đó sẽ thay đổi theo. Nó giúp bạn tiết kiệm công sức rất nhiều.
- Do định nghĩa các Style có thể được tách riêng ra khỏi nội dung của trang web, chúng được các trình duyệt load một lần và sử dụng cho nhiều lần, do đó nó giúp các trang web nhẹ hơn và chạy nhanh hơn.
Các đặc tính cơ bản của CSS
- CSS quy định cách hiển thị của các thẻ HTML bằng cách quy định các thuộc tính của các thẻ đó (font chữ, màu sắc). Để cho thuận tiện bạn có thể đặt toàn bộ các thuộc tính của thẻ vào trong một file riêng có phần mở rộng là ".css", thường người ta hay đặt tên nó là stylesheet.css.
CSS nó phá vỡ giới hạn trong thiết kế Web, bởi chỉ cần một file CSS có thể cho phép bạn quản lí định dạng và layout trên nhiều trang khác nhau. Các nhà phát triển Web có thể định nghĩa sẵn thuộc tính của một số thẻ HTML nào đó và sau đó nó có thể dùng lại trên nhiều trang khác.
- Có thể khai báo CSS bằng nhiều cách khác nhau. Bạn có thể đặt đoạn CSS của bạn phía trong thẻ <Head>…</Head>, hoặc ghi nó ra một file riêng với phần mở rộng ".css", ngoài ra bạn còn có thể đặt chúng trong từng thẻ HTML riêng biệt.
Thứ tự xếp lớp
Style nào sẽ được áp dụng khi có nhiều hơn một style được chỉ định cho một thành phần HTML? Tùy vào từng cách đặt khác nhau mà mức độ ưu tiên cho nó cũng khác nhau. Mức độ ưu tiên này tuân theo thứ tự sau:
1. Style nội tuyến - Style đặt trong từng thẻ HTML riêng biệt.
2. Stylet bên trong - Style đặt bên trong cặp thẻ <Head> … </Head>.
3. Style bên ngoài - Style đặt trong các file riêng có đuôi ".css".
4. Style theo mặc định của trình duyệt.
- CSS có tính kế thừa và tính kết hợp
Tính kế thừa
Giả sử rằng ở đầu file styleshet.css bạn khai báo cho Body có các thuộc tính sau:
body {
font: Arial, Verdana;
background: #FF6600;
}
Nhưng trong trường hợp bạn muốn khai báo cho các đối tượng nhỏ hơn nằm trong đó như Sidebar:
#sidebar {
with: 300px;
padding: 10px;
font: Tahoma, Verdana;
}
Sau đoạn khai báo này thì Sidebar sẽ có thuộc tính:
#sidebar {
background: #FF6600;
with: 300px;
padding: 10px;
font: Tahoma, Verdana;
}
Như vậy, Sidebar đã kế thừa thuộc tính background của Body, và trong đó thuộc tính font là Tahoma đã đè lên thuộc tính font Arial ở lần khai báo trước.
Tính kết hợp
Có thể định nghĩa nhiều CSS cùng một thuộc tính thay vì phải định nghĩa riêng lẻ từng cái một.
Ví dụ:
h1, h2, h3, h4 {
Font-family: Tahoma, arial;
Color: #D4D4D4;
}
Thay cho việc định nghĩa riêng biệt cho từng cái.
h1{
Font-family: Tahoma, arial;
Color: #D4D4D4;
}
h2 {
Font-family: Tahoma, arial;
Color: #D4D4D4;
}
……………………………
h4 {
Font-family: Tahoma, arial;
Color: #D4D4D4;
}
Post a Comment
Post a Comment