bài 2 cơ chế làm việc của css
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (7.37 MB, 42 trang )
Bài 2
Cơ chế làm việc của CSS
NHẮC LẠI BÀI TRƯỚC
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
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
Bài 2 - Cơ chế làm việc của CSS 2
MỤC TIÊU BÀI HỌC
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 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
Bài 2 - Cơ chế làm việc của CSS 3
CÁCH ÁP DỤNG CSS
3 cách áp dụng CSS trong XHTML:
CSS
Bài 2 - Cơ chế làm việc của CSS
CSS
Linked Inline Embedded
4
INLINE
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ẻ
Bài 2 - Cơ chế làm việc của CSS
Giới hạn áp dụng trong thẻ được chèn
Nặng cho file HTML
Không có tính linh động
Lộn xộn giữa nội dung và trình bày
5
Định nghĩa dưới dạng
thuộc tính của thẻ
EMBEDDED
<head>
<style type="text/css">
h1 {font-size: 16px;}
p {color:blue;}
</style>
</head>
Embedded
Định nghĩa trong thẻ
<head> của trang
<head>
<style type="text/css">
h1 {font-size: 16px;}
p {color:blue;}
</style>
</head>
Bài 2 - Cơ chế làm việc của CSS
Định nghĩa style tập trung
Dùng lại được cho nhiều thẻ
Giới hạn áp dụng trong trang
Ghi đè style trong file CSS được Linked
6
LINKED
<head>
<link href="my_style_sheet.css" media="screen"
rel="stylesheet" type="text/css" />
</head>
<head>
<link href="my_style_sheet.css" media="screen"
rel="stylesheet" type="text/css" />
</head>
Bài 2 - Cơ chế làm việc của CSS 7
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
Linked
Có tính kế thừa
Phạm vi áp dụng: toàn bộ các trang trong website
Bài 2 - Cơ chế làm việc của CSS
Phạm vi áp dụng: toàn bộ các trang trong website
Thiết kế, chỉnh sửa dễ dàng
Áp dụng được nhiều file CSS
8
Cấu trúc & Quy tắc khai báo CSS
CẤU TRÚC ĐỊNH NGHĨA STYLE
Selector
Câu lệnh
Là thẻ, id, lớp,…
Bài 2 - Cơ chế làm việc của CSS
Thuộc tính : Giá trị
10
Là thẻ, id, lớp,…
Các thuộc tính và
kiểu được CSS quy
định sẵn
ĐỊNH NGHĨA SELECTOR THEO THẺ
Đị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 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;}
CÂY PHÂN CẤP THẺ CỦA TRANG
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 12
ĐỊNH NGHĨA SELECTOR THEO THẺ
CSS:
p span 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>
Bài 2 - Cơ chế làm việc của CSS 13
CSS:
p span 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>
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)
ĐỊNH NGHĨA SELECTOR THEO THẺ
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 14
ĐỊ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>
Bài 2 - Cơ chế làm việc của CSS 15
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>
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
ID & CLASS (LỚP)
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 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>
CLASS
Đị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 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
Bài 2 - Cơ chế làm việc của CSS 17
ĐỊNH NGHĨA SELECTOR THEO CLASS
CSS:
p {font-family: Helvetica, sans-serif;}
.specialtext {font-weight:bold;}
XHTML:
<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
CSS:
p {font-family: Helvetica, sans-serif;}
.specialtext {font-weight:bold;}
XHTML:
<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>
18
ĐỊNH NGHĨA SELECTOR THEO ID
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
Bài 2 - Cơ chế làm việc của CSS 19
ĐỊNH NGHĨA SELECTOR THEO ID
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>
Bài 2 - Cơ chế làm việc của CSS 20
SỰ KHÁC BIỆT GIỮA CLASS & ID
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
XHTML (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
Bài 2 - Cơ chế làm việc của CSS
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
XHTML (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
21
SELECTOR SAO (*)
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ó 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 * 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ó 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"
Bài 2 - Cơ chế làm việc của CSS 22
SELECTOR THUỘC TÍNH
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ể
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ể
Bài 2 - Cơ chế làm việc của CSS 23
Pseudo-Class (lớp giả)
PSEU-DO CLASS
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
Bài 2 - Cơ chế làm việc của CSS
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
25
