CSS – Cascading Style Sheet
Trang kiểu dáng
Nội dung
Sự ra đời của CSS
Ưu nhược điểm của CSS
Cú pháp của CSS
Các loại CSS
Nhúng CSS vào trang html
1. Sự ra đời của CSS
Mã HTML
HTML phát triển như 1 hệ thống mã chung
Cho phép người dùng hiện thị các trang như nhau
HTML cung cấp định dạng mang tính cấu trúc nhưng không cho phép các nhà thiết kế điều chỉnh quá nhiều diện mạo.
Cách thức hiển thị nội dung của các thẻ HTML phụ thuộc vào trình duyệt
Đối tượng sử dụng web
Ban đầu: chỉ là các nhà khoa học, nghiên cứu  đối tượng này hầu như chỉ quan tâm đến nội dung
Ngày nay: xuất hiện đối tượng thứ 2 là các nhà thiết kế web và người sử dụng  yêu cầu cao về diện mạo, giao diện.
1. Sự ra đời của CSS
Các trình duyệt cố gắng đáp ứng nhu cầu về thẩm mỹ bằng cách bổ sung các thuộc tính mới, thẻ mới của HTML
Bảng được sử dụng như là 1 công cụ trình bày sắp xếp
Tổ chức W3C
vẫn nghiên cứu và quản lý sự phát triển thống nhất của HTML
Đồng thời, vẫn cho phép các nhà thiết kế có nhiều quyền điểu chỉnh hơn đối với diện mạo của trang web
 Sự ra đời của trang kiểu dáng - CSS
2.CSS – Cascading Style Sheet
CSS cho phép ấn định giá trị cho vài thuộc tính tới tất cả các phần tử trong trang cùng 1 lúc.
Ví dụ:
Sử dụng thẻ font, in đậm để thay đổi màu chữ, kiểu chữ, kích thước
Sử dụng css
3. Những thuận lợi khi sử dụng CSS
Giúp tiết kiệm thời gian
Các kiểu dáng rất dễ dàng thay đổi
Áp dụng các kiểu dáng triệt để hơn đối với mọi phần tử trong trang
Điều chỉnh văn bản để tạo ra một số hiệu ứng mà các thẻ HTML không làm được.
Cho phép tạo ra 1 định dạng chung cho tất cả trang trong 1 website. Chỉ cần điều chỉnh kiểu dáng 1 lần, tất cả các trang đều được cập nhật
4. Nhược điểm của CSS
Không một trình duyệt nào hỗ trợ CSS 1 cách hoàn hảo .
Để sử dụng css thì phải dành thời gian học cách sử dụng nó. Nó không quá phức tạp nhưng lại có cú pháp riêng và không phải HTML
5. Cú pháp của CSS
Gồm 3 phần: - selector - property – value
selector {property: value}
Trong đó:
Selector:
Thông thường là thành phần hoặc thẻ của HTML mà bạn muốn định nghĩa lại
Là sự liên kết giữa HTML và CSS.
Báo cho trình duyệt biết những phần nào của tài liệu HTML bị ảnh hưởng bởi các định nghĩa lại của CSS
Property: thuộc tính mà bạn muốn thay đổi
Value: mỗi một thuộc tính có thể nhận 1 hoặc nhiều hơn 1 giá trị.
Thuộc tính và giá trị được tách nhau bởi dấu : và được bao quanh bởi 1 cặp dấu {}
Nếu 1 selector có nhiều hơn 1 thuộc tính cần định nghĩa lại thì các cặp thuộc tính và giá trị được phân cách nhau bởi dấu ;
Ví dụ về CSS
p {font-family: arial}
Nếu giá trị của thuộc tính là nhiều từ thì phải đặt trong cặp dấu nháy
p {font-family: arial, "sans serif"}
Nếu 1 thuộc tính có thể nhận nhiều giá trị, thì các giá trị được cách nhau bởi 1 dấu phẩy
Định nghĩa lại nhiều thuộc tính của 1 thẻ HTML
p { text-align: center; color: black; font-family: arial, "sans serif" }
Hoặc viết xuống từng dòng để đoạn mã dễ đọc
P
{
text-align: center;
color: black;
font-family: arial, "sans serif"
}
Nhóm các selector
Nếu các selector có cùng thuộc tính và giá trị, bạn có thể nhóm chúng lại
Ví dụ:
H1,h2,h3,h4,h5,h6
{
Color: green
}
- Mỗi selector được phân cách bởi dấu phẩy
Class selector
Với class selector bạn có thể định nghĩa nhiều kiểu dáng khác nhau cho cùng 1 selector.
Ví dụ: bạn muốn sử dụng 2 kiểu đoạn văn trong tài liệu của mình
Kiểu 1: căn lề bên phải
Kiểu 2: căn lề giữa
Bạn có thể định nghĩa lại thẻ P như sau
p.right {text-align: right}
p.center {text-align: center}
Sử dụng class selector
Sử dụng class selector trong tài liệu HTML

Đoạn văn căn lề phải

Đoạn văn căn giữa

Chú ý: 1 class chỉ áp dụng cho 1 thẻ của HTML
Do đó viết như dưới đây là sai:

Đoạn văn được căn lề

Sử dụng class selector
Có thể bỏ qua tên thẻ HTML trong phần selector để định nghĩa 1 kiểu dáng
Kiểu dáng này sẽ được sử dụng cho tất cả các thẻ trong HTML
Ví dụ: .center {text-align: center}
Sử dụng:

Tiêu đề căn giữa

Đoạn văn cũng được căn giữa

Chú ý: không bắt đầu tên của class bằng số. Mozilla/Firefox không hỗ trợ điều này
Id selector
Với id selector chỉ có thể áp dụng được duy nhất cho 1 thẻ và tên của định danh phải là duy nhất trên 1 trang web.
Cách định nghĩa và sử dụng tương đồng như class
Ví dụ:
#green {color: green}

Some text

Some text

Chú ý: không bắt đầu tên của id với số
Thẻ chú thích của CSS
Cú pháp:
/* Lời chú thích */
Ví dụ:
/* Định nghĩa kiểu dáng cho thẻ p */
p
{
text-align: center;
/* màu sắc và font chữ */
color: black;
font-family: arial
}
6. Thiết lập 1 trang kiểu dáng
Các loại trang kiểu dáng: có 3 loại
Cục bộ
Bên trong
Bên ngoài
Có thể dùng bất kỳ loại nào hoặc dùng cả 3 loại trang kiểu dáng
Nếu dùng lẫn cả 3 loại kiểu dáng:
Kiểu dáng cục bộ sẽ lấn át các kiểu dáng bên trong.
Kiểu dáng bên trong sẽ lấn át các kiểu dáng bên ngoài.
Kiểu dáng cục bộ
Trong khoảng thẻ html cần định dạng, gõ style= “
Định nghĩa các thuộc tính và giá trị cần định kiểu dáng, đóng dấu ngoặc kép
Ví dụ:

Dòng văn bản được định dạng

Kiểu dáng bên trong
Ở đầu tài liệu html, giữa cặp thẻ … , chèn thêm thẻ để hoàn thành.
* Nếu có nhiều thẻ cần định nghĩa: Lặp lại từ bước 2 – 4 cho mỗi thẻ
Ví dụ 2
Kiểu dáng bên ngoài
Các trang kiểu dáng ngoài được áp dụng để tạo dáng vẻ chung cho tất cả trang của một website.
Kiểu dáng bên ngoài
Tạo trang kiểu dáng ngoài
Mở một tài liệu văn bản mới
Gõ tên các selector cần định nghĩa lại, Gõ { để đánh dấu nơi bắt đầu định nghĩa các thuộc tính
Định nghĩa các thuộc tính mong muốn, tách biệt các thuộc tính bằng dấu chấm phẩy
Gõ } để đánh dấu nơi kết thúc
Lặp lại từ bước 2 với mỗi selector cần định nghĩa.
Lưu tài liệu theo định dạng Text only với phần mở rộng là .css
Kiểu dáng bên ngoài
Sử dụng trang kiểu dáng ngoài
Khi đã tạo được một trang kiểu dáng, hãy kết nối nó tới mỗi trang được định dạng theo trang kiểu dáng đó.
Trong phần của mỗi trang html cần áp dụng trang kiểu dáng, gõ

Chú ý:
Khi có sự thay đổi với trang kiểu dáng, tất cả những trang được tham chiếu sẽ tự động cập nhật
Các kiểu dáng cục bộ sẽ lấn át các kiểu dáng bên trong. Kiểu dáng bên trong lại lấn át kiểu dáng được dùng từ một trang bên ngoài
Ví dụ minh họa