4.1.1. Khái niệm
CSS (Cascading Style Sheet) là một ngơn ngữ quy định cách trình bày cho các tài liệu HTML trên trang web.
- CSS giúp hạn chế tối thiểu việc làm rối mã HTML của trang Web bằng cách tách phần định dạng ra khỏi HTML. Điều này khiến cho mã nguồn của trang Web được gọn gàng hơn đồng thời cũng giúp cho việc cập nhật nội dung trang web dễ dàng hơn.
- CSS tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, tránh phải lặp lại việc định dạng cho các trang Web giống nhau. giúp tiết kiệm được nhiều thời gian và công sức trong thiết kế web
- Do CSS được hỗ trợ bởi tất cả các trình duyệt giúp cho trang web hiển thị hầu như giống nhau trên các hệ thống khác nhau.
4.1.2. Cú pháp CSS
Cấu trúc của một luật CSS gồm 2 phần: bộ chọn (selector) và khai báo (declaration).
Bộ chọn{ thuộc tính: giá trị;}
- Bộ chọn: là các đối tượng sẽ được áp dụng các thuộc tính trình bày. Các đối
- Khai báo: bao gồm thuộc tính quy định cách trình bày (property) và giá trị thuộc tính (value) viết cách nhau bằng dấu “:”. Phần khai báo phải được đặt trong cặp ngoặc { }
Ví dụ 1:
- Có thể dùng nhiều khai báo cho bộ chọn, mỗi một khai báo phải được viết cách nhau bằng dấu chấm phẩy “;”. Mỗi một khai báo nên để trên một dòng để dễ đọc và dễ bảo trì.
- Để ghi chú trong CSS, sử dụng dấu /* */ /* ghi chú */
Ví dụ 2:
h1 {
background: red;/* màu nền:đỏ */
color: blue; /* màu chữ:xanh */
}
* Cách viết bộ chọn: Bảng 4.1. Cách viết bộ chọn
Bộ chọn Ví dụ Mô tảphạmvi ảnh hƣởng
* *{color:blue;}
Định dạng áp dụng cho nội dung tất cả các thẻ html trong tài liệu web
thẻ01 p{color:blue;}
Định dạng áp dụng cho nội dung tất cả các thẻ <thẻ01> trong tài liệu web
thẻ01 thẻ02 div p{color:blue;}
Định dạng áp dụng cho nội dung tất cả các thẻ <thẻ02> nằm bên trong thẻ <thẻ01> trong tài liệu web
thuộc tính giá trị thuộc tính khai báo
thẻ01,thẻ02 div,p{color:blue;}
Định dạng áp dụng cho nội dung tất cả các thẻ <thẻ01> và <thẻ02> trong tài liệu web
thẻ01+thẻ02 div+p{color:blue;}
Định dạng áp dụng cho nội dung tất cả các thẻ <thẻ02> được đặt kế và sau thẻ <thẻ01> trong tài liệu web
thẻ01>thẻ02 div>p{color:blue;}
Định dạng áp dụng cho nội dung tất cả các thẻ <thẻ02> có thẻ cha là <thẻ01> trong tài liệu web
.class .tieude{color:blue;}
Định dạng áp dụng cho nội dung tất cả các thẻ có cùng tên class trong tài liệu web
#id #footer{color:blue;}
Định dạng áp dụng cho nội dung tất cả các thẻ có tên id trong tài liệu web
thẻ01~thẻ02 ul~p{color:blue;}
Định dạng áp dụng cho nội dung tất cả các thẻ <thẻ02> khi có <thẻ01> ở trước
:first-child ul li :first-child{ color:blue;}
Định dạng áp dụng cho phần tử đầu tiên trong danh sách
:last-child ul li :last-child{ color:blue;}
Định dạng áp dụng cho phần tử cuối cùng trong danh sách
:nth-child ul li:nth-child(3n) { color:blue;} /* (3n): các phần tử chọn sẽ là 3x1, 3x2, 3x3,…*/ Định dạng áp dụng cho phần tử có điều kiện thứ tự cố định trong danh sách
Bảng 4.2. Bảng đơn vị đo Đơn vị Mô tả % Phần trăm in Inch (1 inch = 2.54 cm) cm Centimeter mm Millimeter
em 1 em ~ kích thước font hiện hành pt Point (1 pt = 1/72 inch)
pc Pica (1 pc = 12 pt)
px Pixels (điểm ảnh trên màn hình máy tính)
4.1.4. Phân loại CSS
CSS được phân thành 3 loại như sau:
- Inline Style (CSS cục bộ): style được qui định trong 1 thẻ HTML cụ thể. - Internal Style Sheet (CSS nội tuyến): style được qui định trong phần
<head> của 1 tài liệu HTML.
- External Style Sheet (CSS ngoại tuyến): style được qui định trong file .CSS ngoài.
Thứ tự ưu tiên sử dụng giữa các loại CSS: Inline Style, Internal Style Sheet, External Style Sheet.
Nếu một số thuộc tính được thiết lập cho cùng một bộ chọn với các chuẩn định dạng khác nhau (sử dụng loại CSS khác nhau), thì các giá trị sẽ kế thừa từ CSS có độ ưu tiên cao hơn.
Như vậy, Inline Style có độ ưu tiên cao nhất, nghĩa là nó sẽ ghi đè lên chuẩn định dạng đặt trong thẻ <head> của Internal style sheet , hoặc trong External style sheet.
4.1.5. Tạo và sử dụng Internal style sheet
Internal style sheet dùng để định nghĩa các style dùng chung trong một trang web. Các style này chỉ được áp dụng trên chính trang chứa nó. Các luật CSS phải đặt trong thẻ <style> và đặt trong phần <head>.
- Cú pháp: <style type=„text/css‟> bộ chọn {thuộc tính:giá trị;} … </style> Ví dụ 3:
Hiển thị trên trình duyệt:
4.1.6. Tạo và sử dụng External style sheet
External style sheet được sử dụng khi muốn áp dụng style cho nhiều trang web khác nhau trong cùng một website. Thực chất External style sheet là một tập tin văn bản chứa các luật CSS có phần mở rộng là .CSS. Việc lưu file CSS riêng giúp dễ dàng thay đổi giao diện trang web bằng cách thay đổi thông qua một file duy nhất.
- Khai báo trong tập tin .css theo cú pháp:
bộ chọn {thuộc tính:giá trị;}
- Để sử dụng file CSS này, trong tài liệu HTML cần phải khai báo liên kết đến file CSS theo cú pháp:
<head>
<link href=“địa chỉ file css” rel=“stylesheet” type=“text/css” > </head>
* Lưu ý:
- Thẻ <link> này phải được đặt trong thẻ <head></head>
- File CSS khơng được chứa bất kỳ thẻ HTML nào. Ví dụ 4:
Tạo file teststyle.css:
Liên kết file teststyle.css vào trong tài liệu HTML:
Hình 4.3. Nội dung file test.html
Hiển thị trên trình duyệt:
Hình 4.4. Kết quả ví dụ 4
4.1.7. Tạo và sử dụng Inline style
Inline Style là style được định nghĩa trực tiếp trong thẻ HTML. Inline Style chỉ có tác dụng trong thẻ HTML được khai báo.
Để định nghĩa inline style chỉ cần thêm thuộc tính “style” vào thẻ tương ứng. Thuộc tính “style” có thể chứa bất kỳ thuộc tính CSS nào.
- Cú pháp:
Ví dụ 5:
<body>
<p style="color: blue; margin-left: 20px">
Đây là đoạn văn bản sử dụng Inline style
</p> </body>
Hiển thị trên trình duyệt:
Hình 4.5. Kết quả ví dụ 5 4.1.8. Lớp (Class)
Lớp (hay còn gọi là Class) dùng để chỉ một lớp các đối tượng có chung các thuộc tính. Các đối tượng trong cùng một lớp có tính thừa kế lẫn nhau.
Trong một thẻ có thể có chứa nhiều thuộc tính lớp, mỗi lớp phải ngăn cách nhau bằng một khoảng trắng.
Lớp có thể sử dụng lặp lại nhiều lần trong cùng một tài liệu HTML. - Cú pháp trong CSS:
[tên thẻ].tênlớp {thuộc tính: giá trị}
Có thể tạo lớp để áp dụng cho nhiều thẻ khác nhau bằng cách bỏ tên thẻ ở đầu:
.tên lớp {thuộc tính: giá trị}
- Cú pháp trong HTML:
<tên thẻ class=„tên lớp‟>
* Lưu ý:
+ Tên lớp chỉ được phép chứa chữ cái, chữ số, dấu gạch dưới ( _ ), dấu gạch nối ( - ).
+ Tên lớp không nên bắt đầu bằng chữ số, không được phép chứa khoảng trắng.
Ví dụ 6:
Hiển thị trên trình duyệt:
4.1.9. Định danh (ID)
Định danh (cịn gọi là ID) có chức năng tương tự như lớp nhưng định danh chỉ dùng để xác định một đối tượng duy nhất nào đó trên trang HTML. Do đó trong một trang HTML mỗi đối tượng chỉ có duy nhất một định danh. - Cú pháp trong CSS:
[tên thẻ]#tên định danh{thuộc tính: giá trị}
Có thể tạo lớp để gắn vào nhiều thẻ bằng cách bỏ tên thẻ ở đầu:
#tên định danh{thuộc tính: giá trị}
- Cú pháp trong HTML:
<tên thẻ id=„tên định danh‟>
* Lưu ý
+ Tên định danh chỉ được phép chứa chữ cái, chữ số, dấu gạch dưới (_), dấu gạch nối ( - ).
+ Tên định danh không nên bắt đầu bằng chữ số, không được phép chứa khoảng trắng.
Hiển thị trên trình duyệt:
Hình 4.7. Kết quả ví dụ 7 4.2. ĐỊNH DẠNG VĂN BẢN BẰNG CSS
4.2.1. Thuộc tính font
Các thuộc tính font cho phép thay đổi font chữ, cở chữ, kiểu chữ, độ đậm của chữ.
Thuộc tính font-family:
Dùng định nghĩa một danh sách ưu tiên các font sẽ được dùng để hiển thị văn bản.
- Cú pháp:
{ font-family: tên font; }
Có 2 loại loại font:
+ Loại tổng quát : serif , sans-serif, monospace + Loại cụ thể : 1 font cụ thể
Nên sử dụng nhiều font, để nếu khơng có font này, trình duyệt sẽ dùng font khác.
Ví dụ 8: quy định font chữ dùng cho trang web là Times New Roman, Tohama, sans-serif
body { font-family: “Times New Roman”,Tohama,sans-serif }
Thuộc tính font-style:
Dùng thiết lập các kiểu chữ in thường, in nghiêng, in xiên cho văn bản. - Cú pháp:
{ font-style: giá trị; }
Các giá trị:
+ normal: thiết lập kiểu chữ in thường + italic: thiết lập kiểu chữ in nghiêng + oblique: thiết lập kiểu chữ in xiên
Ví dụ 9: thiết lập các kiểu chữ in nghiêng cho các thành phần h1 h1 { font-style:italic; }
Thuộc tính font-weight:
Dùng thiết lập font chữ in đậm cho văn bản. - Cú pháp:
{ font-weight: giá trị; }
Các giá trị:
+ normal: thiết lập kiểu dạng thường
+ bold: thiết lập kiểu chữ in đậm Ví dụ 10: thiết lập các kiểu chữ in đậm cho các thành phần p
p {font-weight:bold ; } Thuộc tính font-size:
Dùng thiết lập kích thước font. - Cú pháp:
{ font-size: giá trị; }
Các giá trị: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger hoặc giá trị số (%, px, em,…)
Ví dụ 11: thiết lập các cở chữ 1.5em cho các thành phần p p {font-size: 1.5em ; } Thuộc tính font-variant: Dùng đổi thành chữ in nhỏ. - Cú pháp: { font-variant:small-caps;} Ví dụ 12: <!DOCTYPE html>
Hình 4.8. Kết quả ví dụ 12 4.2.2. Thuộc tính text
Các thuộc tính định dạng ký tự bao gồm: color, text-decoration, text- transform, text-align, text-indent.
Thuộc tính color:
Dùng thiết lập màu chữ. - Cú pháp:
{ color: màu; }
Màu có thể xác định theo: tên màu, giá trị RGB hoặc giá trị HEX Thuộc tính background-color: thiết lập màu nền
- Cú pháp:
{ background-color: màu; }
Màu có thể xác định theo: tên màu, giá trị RGB hoặc giá trị HEX Thuộc tính text-align:
Dùng thiết lập canh chỉnh văn bản trong một thành phần. - Cú pháp:
{ text-align: giá trị; }
Các giá trị: left, right, center, justify Thuộc tính text-indent:
Dùng thiết lập khoảng cách lề cho dòng đầu văn bản trong một thành phần.
- Cú pháp:
{ text-indent: giá trị; }
Các giá trị: giá trị sốhoặcgiá trị % Thuộc tính text-transform:
- Cú pháp:
{ text-transform: giá trị; }
Các giá trị:
+ capitalize: dạng chữ đầu viết hoa + uppercase: dạng chữ in + lowercase: dạng chữ thường Thuộc tính text-decoration: Dùng tạo hiệu ứng chữ. - Cú pháp: { text-decoration: giá trị; } Các giá trị:
+ underline: chữ có đường gạch chân + line-through: chữ có đường gạch xuyên + overline: chữ có đường gạch đầu
+ none: chữ bình thường Thuộc tính letter-spacing: Dùng định khoảng cách giữa các ký tự. - Cú pháp: { letter-spacing: giá trị; } Thuộc tính word-spacing: Dùng định khoảng cách giữa các từ. - Cú pháp: { word-spacing: giá trị; } Thuộc tính line-height:
Dùng thiết lập chiều cao của một dòng. - Cú pháp:
{ line-height: giá trị; } Thuộc tính text-shadow:
- Cú pháp:
{ text-shadow: h-offset v-offset blur color;}
Các giá trị:
+ h-offset: khoảng cách shadow theo chiều ngang + v-offset: khoảng cách shadow theo chiều dọc + blur: độ mờ của shadow
+ color: màu của shadow
ví dụ: text-shadow: 0px 5px 5px #999999; Ví dụ 13:
Hiển thị trên trình duyệt:
Hình 4.9. Kết quả ví dụ 13
4.3. ĐỊNH DẠNG DANH SÁCH BẰNG CSS
Các thuộc tính định dạng danh sách bao gồm: list-style-type, list-style- position, list-style-image.
4.3.1. Thuộc tính list-style-type:
Dùng thay đổi kiểu hoa thị, kiểu số thứ tự của danh sách. - Cú pháp:
{ list-style-type: giá trị; }
Các giá trị: disc, circle, square, decimal, decimal-leading-zero, upper- alpha, lower-alpha, upper-roman, lower-roman, none.
Hình 4.10. Các kiểu list style
4.3.2. Thuộc tính list-style-image:
Dùng thay đổi kiểu hoa thị của danh sách bằng một hình ảnh. - Cú pháp:
{ list-style-image:url(địa chỉ hình);} 4.3.3. Thuộc tính list-style-position:
Dùng thiết lập vị trí của hoa thị, số thứ tự vào phía trong hay phía ngồi của đoạn văn bản trong danh sách.
- Cú pháp:
{ list-style-position: giá trị; } Các giá trị:
+ inside: hoa thị, số thứ tự nằm vào phía trong đoạn
+ outside: giá trị mặc định. Hoa thị, số thứ tự nằm phía ngồi đoạn Ví dụ 14:
<!DOCTYPE html>
Hiển thị trên trình duyệt:
Hình 4.11. Kết quả ví dụ 14
4.4. ĐỊNH DẠNG THÀNH PHẦN
4.4.1. Thuộc tính background
Các thuộc tính background dùng để xác định hiệu ứng màu nền, hình nền cho các thành phần HTML.
Thuộc tính background bao gồm: + background-color: thiết lập màu nền + background-image: thiết lập hình nền
+ background-repeat: quy định cách lặp lại hình nền + background-position: xác định vị trí hình nền + background-attachment: cố định hình nền
Thuộc tính background-color: thiết lập màu nền cho thành phần HTML - Cú pháp: { background-color:màu; }
Màu có thể xác định theo: tên màu, giá trị RGB hoặc giá trị HEX - Ví dụ 8: thiết lập màu nền cho trang web là màu xanh
body { background-color:cyan; }
Thuộc tính background-image: thiết lập hình nền cho thành phần HTML - Cú pháp: { background-image:url(địa chỉ file hình); }
- Ví dụ 9: đặt hình logo.png làm hình nền cho trang web body {background-image:url(logo.png); }
* Có thể đặt nhiều hình nền cho một thành phần html, các hình nền được phân cách bằng dấu phẩy.
body {background-image:url(logo.png), url(paper.png); }
Thuộc tính background-size: quy định lại kích thước hình nền. Thuộc tính này được sử dụng kèm với thuộc tính background-image.
- Cú pháp: {background-size: giá trị;}
Các giá trị size:
+ giá trị 1 thành phần: xác định chiều rộng cho hình, chiều cao tự động điều chỉnh theo.
+ giá trị 2 thành phần: xác định chiều rộng và chiều cao cho hình nền + contain: chia tỷ lệ hình nền càng lớn càng tốt (chiều rộng và chiều
vùng chứa mà có thể có một số vùng của vùng chứa khơng bị ảnh nền che phủ.
+ cover: chia tỷ lệ hình nền để vùng chứa được bao phủ hồn tồn bởi hình nền. Một số phần của hình nền có thể khơng hiển thị trong vùng chứa.
- Ví dụ 9: đặt hình banner.png làm hình nền và tự điều chỉnh cho hình bao phủ tồn phần header của trang web
header {background-image:url(banner.png); background-size: cover;} Thuộc tính background-repeat: quy định cách lặp lại hình nền. Thuộc tính
này được sử dụng kèm với thuộc tính background-image. - Cú pháp: {background-repeat: giá trị repeat;}
Các giá trị repeat:
+ repeat: giá trị mặc định. Hình nền được lặp lại theo cả chiều ngang và đứng
+ repeat-x: hình nền chỉ được lặp lại theo chiều ngang + repeat-y: hình nền chỉ được lặp lại theo chiều đứng + no-repeat: hình nền khơng lặp lại
Thuộc tính background-position: xác định vị trí hiển thị hình nền. Thuộc
tính này được sử dụng kèm với thuộc tính background-image và background- repeat.
- Cú pháp: {background-position: vị trí;}
Các vị trí hiển thị hình nền: + left top: góc trên bên trái + left center: ở giữa bên trái + left bottom: góc dưới bên trái + right top: góc trên bên phải + right center: ở giữa bên phải + right bottom: góc dưới bên phải + center top: ở giữa bên trên
+ center center: ở giữa theo cả hai chiều ngang và đứng + center bottom: ở giữa bên dưới
left top center top right top