Bài 2 Cơ chế làm việc của CSS
NHẮC LẠI BÀI TRƯỚC
Bài 2 - Cơ chế làm việc của CSS
2
Nhắc lại về HTML
Định nghĩa XHTML, CSS
Cách thiết kế layout trang web
Làm quen với cấu trúc một trang web
Làm quen với những plugin kiểm tra mã XHTML và CSS trên những trình duyệt khác nhau
MỤC TIÊU BÀI HỌC
Bài 2 - Cơ chế làm việc của CSS
3
Cách áp dụng CSS cho trang web Cấu trúc & Quy tắc khai báo CSS Pseudo-Class (lớp giả)
Tính kế thừa trong CSS
Khai báo giá trị màu sắc và số trong CSS
CÁCH ÁP DỤNG CSS
Bài 2 - Cơ chế làm việc của CSS
4
3 cách áp dụng CSS trong XHTML:
CSS
Linked
Inline
Embedded
INLINE
Bài 2 - Cơ chế làm việc của CSS
5
Inline: <p style="font-size: 25pt;
font-weight:bold;
font-style: italic; color:red;">nội dung ...</p>
Inline
Style trong Embedded b ghi đè
Định nghĩa dưới dạng thuộc tính của thẻ
d
T
Không có tính linh đ ng
ộ
EMBEDDED
Bài 2 - Cơ chế làm việc của CSS
6
<head>
<style type="text/css">
h1 {font-size: 16px;} p {color:blue;}
Embedded
</style>
</head>
Định nghĩa trong thẻ
<head> của trang
ạ ượ
ề ẻ
yle r ng
LINKED
Bài 2 - Cơ chế làm việc của CSS
7
<head>
<link href="my_style_sheet.css" media="screen" rel="stylesheet" type="text/css" />
</head>
Các style được định nghĩa trong file .css riêng và được liên kết với trang, định nghĩa liên kết đặt trong thẻ <head>
/* CLASS:LIME TAG STYLES */
body.lime {background-color:#FFF;}
.lime #main_wrapper {background-color:#FFF;}
.lime #header {background-color:#507EA1;}
.lime #nav {background-color:transparent;}
.lime #content {background-color:#CFE673;}
.lime #promo {background-color:transparent;}
.lime #footer {background-color:#BFCCD6;}
LINKED
Bài 2 - Cơ chế làm việc của CSS
8
Linked
h vi áp
o
t ch
ụ
Cấu trúc & Quy tắc khai báo CSS
CẤU TRÚC ĐỊNH NGHĨA STYLE
10
Selector
Câu lệnh
Thuộc tính : Giá trị
Là thẻ, id, lớp,…
Các thuộc tính và kiểu được CSS quy định sẵn
Bài 2 - Cơ chế làm việc của CSS
ĐỊNH NGHĨA SELECTOR THEO THẺ
11
Định nghĩa style cho một selector:
h1 {color:blue; font-weight:bold;}
Định nghĩa cùng style cho nhiều selector:
h1, h2, h3, h4, h5, h6 {color:blue; font-weight:bold;}
Cùng một selector, có thể định nghĩa nhiều style
h1, h2, h3, h4, h5, h6 {color:blue; font-weight:bold;}
h3 {font-style: italic;}
Định nghĩa theo ngữ cảnh
div p {color:red;}
Bài 2 - Cơ chế làm việc của CSS
CÂY PHÂN CẤP THẺ CỦA TRANG
12
Hệ thống phân cấp này thể hiện thẻ nào lồng trong thẻ nào
Bài 2 - Cơ chế làm việc của CSS
ĐỊNH NGHĨA SELECTOR THEO THẺ
CSS:
p span em {color:green;} HTML:
<h1>Selector ngữ cảnh <em>rất</em> chọn lọc. </h1>
<p>Ví dụ này hướng dẫn cách nhắm đến một thẻ <em>cụ thể</em> bằng hệ thống phân cấp của trang.</p>
<p>Chỉ cần là thẻ con cháu <span>theo <em>thứ tự được chỉ định</em> trong selector</span>; các thẻ khác có thể nằm ở giữa và selector vẫn làm việc đúng.</p>
13
Selector em nằm trong thẻ span, và tất cả nằm trong thẻ p nên chịu tác động của định nghĩa CSS (đổi màu chữ thành xanh)
Bài 2 - Cơ chế làm việc của CSS
ĐỊNH NGHĨA SELECTOR THEO THẺ
14
Làm việc với selector con
Nếu muốn viết một định nghĩa để thẻ được định hướng phải là thẻ con (trực tiếp) của một thẻ cụ thể, sử dụng ký hiệu >
p > em {color: green;}
Bài 2 - Cơ chế làm việc của CSS
ĐỊNH NGHĨA SELECTOR THEO THẺ
CSS:
p > em {color: green;} XHTML:
<h1>Selector ngữ cảnh <em>rất</em> chọn lọc. </h1>
<p>Ví dụ này hướng dẫn cách nhắm đến một thẻ <em>cụ thể</em> bằng hệ thống phân cấp của trang.</p>
<p>Chỉ cần là thẻ con cháu <span>theo <em>thứ tự được chỉ định</em> trong selector</span>; các thẻ khác có thể nằm ở giữa và selector vẫn làm việc đúng.</p>
15
Selector em là con của p nên mới chịu tác động của thuộc tính màu sắc chữ xanh. Thẻ em thứ hai không phải là con trực tiếp nên không chịu tác động
Bài 2 - Cơ chế làm việc của CSS
ID & CLASS (LỚP)
16
Thuộc tính id: dùng để định danh (identifier) một thẻ trên trang web
Ví dụ:
<div id="header">nội dung</div>
Thuộc tính class: dùng để định nghĩa một kiểu định dạng
Ví dụ:
<div class="navigationbar">nội dung</div>
Slide 1 – XHTML: Cấu trúc nội dung web
CLASS
Bài 2 - Cơ chế làm việc của CSS
17
Định dạng cụ thể vùng/thẻ tài liệu
Mang tính chất kế thừa, sử dụng lại nhiều lần với nhiều vùng/thẻ trên trang
Được gắn với thẻ XHTML
Có thể áp dụng nhiều class trên một thẻ XHTML Sử dụng ký tự . ở đầu định nghĩa style
ĐỊNH NGHĨA SELECTOR THEO CLASS
CSS:
p {font-family: Helvetica, sans-serif;}
.specialtext {font-weight:bold;} HTML:
<h1 class="specialtext">Đây là tiêu đề có <span>cùng lớp</span> với đoạn thứ hai</h1>
<p>Thẻ này không thuộc lớp nào.</p>
<p class="specialtext">Khi một thẻ được xác định bởi một lớp, ta có thể định hướng tới thẻ đó
<span>bất kể</span> vị trí của nó trong hệ thống phân cấp.</p>
Bài 2 - Cơ chế làm việc của CSS
18
ĐỊNH NGHĨA SELECTOR THEO ID
Bài 2 - Cơ chế làm việc của CSS
19
ID không mang tính sử dụng lại nhiều lần, áp dụng để định danh cho một thẻ
ID không mang tính chất kế thừa
Sử dụng ký tự # ở đầu định nghĩa style
ĐỊNH NGHĨA SELECTOR THEO ID
Bài 2 - Cơ chế làm việc của CSS
20
CSS:
p#specialtext {font-weight:bold; font-family: Helvetica, sans-serif;} XHTML:
<p id="specialtext">Đây là văn bản đặc biệt</p>
SỰ KHÁC BIỆT GIỮA CLASS & ID
Bài 2 - Cơ chế làm việc của CSS
21
ID có sức mạnh hơn Class:
ID chỉ được gắn với một thẻ (thường là div) trên HTML (không xuất hiện nhiều lần)
Class có thể được gán với nhiều thẻ (xuất hiện nhiều lần)
Có thể sử dụng nhiều thuộc tính id trong một trang, nhưng mỗi thuộc tính có một giá trị (tên) riêng để định nghĩa.
Dùng ID để định danh các thẻ, phục vụ cho việc lập trình JavaScript
SELECTOR “SAO”(*)
Bài 2 - Cơ chế làm việc của CSS
22
Selector * hay còn gọi là selector đa năng, mang nghĩa là "bất cứ thẻ nào" -> áp dụng cho mọi thẻ
* {color:green;} -> áp style mọi nội dung trên trang sẽ có chữ màu xanh
Hay dùng để đại diện cho một thẻ không xác định p * em {font-weight:bold;} -> dấu * đại diện cho "bất cứ thẻ con nào của p"
SELECTOR THUỘC TÍNH
Bài 2 - Cơ chế làm việc của CSS
23
Selector cho một thẻ với thuộc tính xác định img[title] {border: 2px solid blue;} -> áp dụng cho mọi thẻ img có định nghĩa thuộc tính title
img[alt="Dartmoor-view of countryside"] {border:3px green solid;} -> áp dụng cho thẻ img có thuộc tính alt mang giá trị cụ thể
Pseudo-Class (lớp giả)
PSEU-DO CLASS
Bài 2 - Cơ chế làm việc của CSS
25
Pseudo-class là class phổ biến nhất được sử dụng với các thẻ XHTML
Có tác dụng khi có sự kiện di chuột qua
Sử dụng tất cả những thành phần với Pseudo-class để tạo hiệu ứng rollover
Một số trình duyệt sẽ không chấp nhận Pseudo-class nếu như không tuân thủ thứ tự khai báo:
Link Visited Hover Active
PSEU-DO CLASS
Bài 2 - Cơ chế làm việc của CSS
26
Một số thuộc tính khác của pseu-do class
:FIRST-CHILD
div.weather strong:first-child {color:red;}
ví dụ:
<div class="weather"> Thời tiết <strong>rất</strong> nóng
<strong>cực kỳ</strong> ẩm.
</div>
:FOCUS
input:focus {border: 1px solid blue;}
PSEU-DO CLASS
Bài 2 - Cơ chế làm việc của CSS
27
x:first-letter
p:first-letter {font-size:300%; float:left;}
x:first-line
p:first-line{font-variant:small-caps;}
x:before
h1.age:before {content:"Tuổi: "}
x:after
h1.age:after {content:" tuổi."}
Tính kế thừa trong CSS
TÍNH KẾ THỪA TRONG CSS
Bài 2 - Cơ chế làm việc của CSS
29
Tính kế thừa là mối quan hệ giữa phần tử cha và phần tử con trong CSS
Tối ưu hóa dung lượng của file .css
Sử dụng lại cho nhiều trang trong website
Được áp dụng nhiều nhất với những thuộc tính văn bản
Áp dụng được cho nhiều vùng trên một trang Sử dụng lại cho nhiều dự án khác
TÍNH KẾ THỪA TRONG CSS
Bài 2 - Cơ chế làm việc của CSS
30
CSS:
body,td,th {font-family: Tahoma, Geneva, sans-serif; font-size: 11px; color: #000; margin: 0px; background-color:#ffffcc;}
Khi định nghĩa thuộc tính cho thẻ body thì nhiều thẻ nằm trong body sẽ kế thừa giá trị các thuộc tính này
TÍNH KẾ THỪA TRONG CSS
Bài 2 - Cơ chế làm việc của CSS
31
Các thẻ con có thể định nghĩa lại giá trị các thuộc tính kế thừa
Các thẻ con không định nghĩa lại giá trị các thuộc tính kế thừa sẽ mặc nhiên nhận các giá trị kế thừa
Kế thừa là khả năng mạnh mẽ của CSS, tuy nhiên cũng cần dùng cẩn thận vì nó có thể đặt những thuộc tính style không mong muốn cho các thẻ con (đặc biệt là các thuộc tính về định vị)
PHÂN LỚP TRONG CSS
Bài 2 - Cơ chế làm việc của CSS
32
Cách áp dụng các style từ trên xuống dưới từ một cấp bậc của hệ thống phân cấp trong trang tới cấp bậc tiếp theo
Là một cơ chế mạnh mẽ
Giúp viết css tiết kiệm, dễ dàng, tạo ra web với giao diện tối ưu
Quy tắc phân lớp:
Quy tắc 1: tìm tất cả khai báo áp dụng cho mỗi thẻ và thuộc tính
Quy tắc 2: phân loại theo trật tự và trọng lượng Quy tắc 3: sắp xếp theo tính chuyên biệt
Quy tắc 4: sắp xếp theo trật tự
PHÂN LỚP TRONG CSS
Bài 2 - Cơ chế làm việc của CSS
33
Quy tắc 1:
Quy tắc 2:
– Đứng sau một khoảng trống, sau style muốn trở nên quan trọng, đứng trước dấu ;
PHÂN LỚP TRONG CSS
Bài 2 - Cơ chế làm việc của CSS
34
Quy tắc 3:
Quy tắc 4:
KHAI BÁO GIÁ TRỊ MÀU SẮC VÀ SỐ TRONG CSS
GIÁ TRỊ SỐ
36
Sử dụng giá trị số để miêu tả độ dài của tất cả những yếu tố trong trang
2 giá trị: tuyệt đối và tương đối
Bài 2 - Cơ chế làm việc của CSS
GIÁ TRỊ TUYỆT ĐỐI
37
Mô tả độ dài trong thế giới thực
Các thành phần của trang thường sử dụng đơn vị pixel
Bài 2 - Cơ chế làm việc của CSS
GIÁ TRỊ TƯƠNG ĐỐI
38
Em được lấy từ độ rộng của ký tự trong font, vì vậy kích thước của nó thay đổi tùy thuộc vào font mà bạn sử dụng.
Bài 2 - Cơ chế làm việc của CSS
GIÁ TRỊ TƯƠNG ĐỐI
39
Có hai lợi ích quan trọng cho việc sử dụng kích thước tương đối như em cho font chữ:
Tận dụng khả năng kế thừa
Nếu bạn không định nghĩa kích thước font với đơn vị tương đối, bạn đã vô hiệu hóa khả năng đặt kích thước font trong menu View của Internet Explorer
Bài 2 - Cơ chế làm việc của CSS
GIÁ TRỊ MÀU SẮC
40
Hệ nhị phân (#RRGGBB and #RGB). Phần trăm RGB (R%, G% B%).
Tên màu (red, green, blue…).
Bài 2 - Cơ chế làm việc của CSS
TỔNG KẾT
41
Có ba cách định nghĩa style cho trang là inline, embbed và linked
Trong định nghĩa CSS, thuộc tính bắt buộc phải có giá trị
Có các loại định nghĩa selector cho thẻ, lớp, id, *, thuộc tính, lớp giả…
Áp dụng tính kế thừa trong CSS vào những thành phần con khác nhau trên trang web
Giá trị gán cho các thuộc tính có thể ở dạng tương đối hoặc tuyệt đối
Phụ lục B của sách mô tả đầy đủ các thuộc tính CSS
Bài 2 - Cơ chế làm việc của CSS