Trong lĩnh vực xây dựng, chúng ta có trang trí nội thất; trong lĩnh vực thẩm mỹ – làm đẹp, chúng ta có kỹ thuật make-up; còn trong lĩnh vực thiết kế web chúng ta có CSS. Đây chỉ là một định nghĩa giàu hình ảnh của mình thôi nhưng cũng rất thực tế thực tế đấy nhỉ?
Cascading Style Sheets (CSS) là một ngôn ngữ phong cách sử dụng để mô tả cái nhìn và định dạng của một tài liệu viết bằng một ngôn ngữ đánh dấu. Trong khi thường xuyên nhất được sử dụng để thay đổi style của các trang web và giao diện người sử dụng viết bằng HTML và XHTML, ngôn ngữ có thể được áp dụng cho bất kỳ loại tài liệu XML, bao gồm cả XML, SVG và XUL. Cùng với HTML và JavaScript, CSS là một công nghệ nền tảng được sử dụng bởi hầu hết các trang web để tạo ra các trang web trực quan hấp dẫn, giao diện người dùng cho các ứng dụng web, và giao diện người sử dụng cho nhiều ứng dụng di động.
CSS được thiết kế chủ yếu để cho phép tách nội dung tài liệu từ trình bày tài liệu, bao gồm các yếu tố như bố trí, màu sắc và phông chữ. Sự tách biệt này có thể cải thiện khả năng tiếp cận nội dung, cung cấp sự linh hoạt hơn và kiểm soát trong các đặc điểm kỹ thuật của đặc điểm trình bày, cho phép nhiều trang HTML để chia sẻ định dạng bằng cách xác định CSS có liên quan trong một tập tin .css riêng biệt, và giảm độ phức tạp và lặp đi lặp lại trong nội dung cấu trúc, chẳng hạn như bảng ngữ nghĩa không đáng kể mà đã được sử dụng rộng rãi để định dạng trang trước khi render CSS phù hợp đã có sẵn trong tất cả các trình duyệt chính . CSS làm cho nó có thể tách hướng dẫn trình bày từ các nội dung HTML trong một tập tin hoặc kiểu phần riêng biệt của file HTML. Đối với mỗi phần tử HTML phù hợp, nó cung cấp một danh sách các hướng dẫn định dạng.
Sự tách biệt giữa các định dạng và nội dung làm cho nó có thể trình bày các trang đánh dấu trong cùng một phong cách khác nhau cho phương pháp vẽ khác nhau, chẳng hạn như trên màn hình, trong in ấn, bằng giọng nói (khi đọc ra bởi một trình duyệt hoặc màn hình đọc bài phát biểu dựa trên) và trên Chỗ đỗ xe dựa trên các thiết bị xúc giác. Nó cũng có thể được sử dụng để hiển thị các trang web khác nhau tùy thuộc vào kích cỡ màn hình hoặc thiết bị mà nó đang được xem. Trong khi các tác giả của một trang web thường liên kết với một file CSS bên trong file đánh dấu, người đọc có thể chỉ định một phong cách khác nhau, chẳng hạn như một tập tin CSS được lưu trữ trên máy tính của riêng mình, để ghi đè lên một trong các tác giả đã xác định. Nếu tác giả hoặc người đọc đã không liên kết các tài liệu cho một phong cách trang, phong cách mặc định của trình duyệt sẽ được áp dụng. Một ưu điểm khác của CSS là sự thay đổi mang tính thẩm mỹ trong thiết kế đồ họa của một tài liệu (hoặc hàng trăm tài liệu) có thể được áp dụng một cách nhanh chóng và dễ dàng, bằng cách chỉnh sửa một vài dòng trong một tập tin, chứ không phải một quá trình mất thời gian.
2. Có bao nhiêu cách chèn CSS vào HTML?
Để chèn CSS vào HTML có 3 các khac nhau, môi các đặt có sự ưu tiên khác nhau.
- Cách thứ nhất: Inline CSS -Chèn CSS trực tiếp trên một đối tượng nhất định bằng thuộc tính style:
Ví dụ:
<span style="font-weight:italic;text-decoration:underline;color:#333333;"><p>This paragraph is styled with CSS.</p></span>
- Cách thứ hai: Internal CSS -Đặt CSS ở đầu trang Web để áp dụng kiểu dáng cho toàn bộ trang , chỉ cần đặt đoạn CSS vào trong cặp thẻ <style> rồi đặt vào trong phần header của Web (giữa <head> và </head>):
Ví dụ:
<head>
<style type="text/css">
body {font-family:Arial;color:#000FFF;}
</style>
</head>
- Cách thứ ba: External CSS -Đặt các thuộc tính CSS vào một file riêng biệt với đuôi mở rộng là *.css
Đoạn mã để gọi tập tin CSS ngoại <link rel="stylesheet" type="text/css" href="style.css"/>
Trong 3 cách trên mức độ ưu tiên giảm dần từ trên xuông dưới Inline CSS -> Internal CSS -> External CSS. Nếu giả sử bạn chèn đoạn mã CSS <p style="color:red">Hello World</p> và p{color:blue} ở stylesheet ngoại (External CSS) thì đoạn văn bản sẽ hiển thị màu đỏ chứ không hiển thị màu xanh.
3.Quy ước cách viết CSS
Cú pháp cơ bản của CSS Selector { property:value; }
+ Selector: Các đối tượng mà chúng ta sẽ áp dụng các thuộc tính trình bày. Nó là
các tag HTML, class hay id (chúng ta sẽ học về 2 thành phần này ở bài học sau).
Ví dụ: body, h2, p, img, #title, #content, .username,…
Trong CSS ngoài viết tên selector theo tên tag, class, id. Chúng ta còn có thể
viết tên selector theo phân cấp như để chỉ các ảnh ở trong #entry, chúng ta viết
selector là #entry img, như vậy thì các thuộc tính chỉ định sẽ chỉ áp dụng riêng cho
các ảnh nằm trong #entry.
Khi viết tên cho class, đôi khi sẽ có nhiều thành phần có cùng class đó, ví dụ
như thẻ img và thẻ a cùng có class tên vistors nhưng đây lại là hai đối tượng khác
nhau, 1 cái là ảnh của người thăm, 1 cái là liên kết tới trang người thăm. Nên nếu khi viết CSS ta ghi là .visitors { width:50 } thì sẽ ảnh hưởng tới cả hai thành phần.
Nên trong trường hợp này, nếu bạn có ý dùng CSS đó chỉ riêng phần ảnh thì chỉ
nền ghi là img .visitors thôi.
Một lối viết tên selector nữa đó là dựa trên tên các thuộc tính có trong
HTML. Ví dụ trong HTML ta có đoạn mã như vầy: <input name=”Search”
type=”Text” value=”Key Word”>. Để áp dụng thuộc tính CSS cho riêng ô tìm
kiếm này chúng ta sẽ dùng selector input[name=”Search”].
Ngoài việc viết tên selector cụ thể, chúng ta cũng có thể dùng một selector
đại diện như * { color:red } sẽ tác động đến tất cả các thành phần có trên trang web
làm cho chúng có text màu đỏ.
+ Property: Chính là các thuộc tính quy định cách trình bày. Ví dụ: backgroundcolor, font-family, color, padding, margin,…
Mỗi thuộc tính CSS phải được gán một giá trị. Nếu có nhiều hơn một thuộc
tính cho một selector thì chúng ta phải dùng một dấu ; (chấm phẩy) để phân cách
các thuộc tính. Tất cả các thuộc tính trong một selector sẽ được đặt trong một cặp
ngoặc nhọn sau selector.
Ví dụ: body { background:#FFF; color:#FF0000; font-size:14pt }
Để dễ đọc hơn, bạn nên viết mỗi thuộc tính CSS ở một dòng. Tuy nhiên, nó
sẽ làm tăng dung lượng lưu trữ CSS của bạn.
Ví dụ: body { background:#FFF; bolor:#FF0000; font-size:14pt }
Đối với một trang web có nhiều thành phần có cùng một số thuộc tính,
chúng ta có thể thực hiện gom gọn lại như sau:
h1 { color:#0000FF;
text-transform:uppercase } h2 {
color:#0000FF;
text-transform:uppercase;
}
h3 {
color:#0000FF;
text-transform:uppercase;
}
h1, h2, h3 {
color:#0000FF;
text-transform:uppercase;
}
+ Value: Giá trị của thuộc tính. Ví dụ: như ví dụ trên value chính là #FFF dùng để
định màu trắng cho nền trang. Đối với một giá trị có khoảng trắng, bạn nên đặt tất cả trong một dấu ngoặc kép.
Ví dụ: font-family:”Times New Roman”
Đối với các giá trị là đơn vị đo, không nên đặt một khoảng cách giữa số đo
với đơn vị của nó.
Ví dụ: width:100 px.
Nó sẽ làm CSS của bạn bị vô hiệu trên Mozilla/Firefox hay Netscape.
Chú thích trong CSS:
Cũng như nhiều ngôn ngữ web khác. Trong CSS, chúng ta cũng có thể viết chú
thích cho các đoạn code để dễ dàng tìm, sửa chữa trong những lần cập nhật sau.
Chú thích trong CSS được viết như sau /* Nội dung chú thích */
Ví dụ:
/* Màu chữ cho trang web */
body {
color:red
}
