bài 2 cơ chế làm việc của css - giáo trình fpt

Bài 2Cơ 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, CSSCách thiết kế layout trang webLàm quen với cấu trúc một trang webLà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, CSSCách thiết kế layout trang webLàm quen với cấu trúc một trang webLà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 webCấu trúc & Quy tắc khai báo CSSPseudo-Class (lớp giả)Tính kế thừa trong CSSKhai báo giá trị màu sắc và số trong CSS

Cách áp dụng CSS cho trang webCấu trúc & Quy tắc khai báo CSSPseudo-Class (lớp giả)Tính kế thừa trong CSSKhai báo giá trị màu sắc và số trong CSS


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ạngthuộc tính của thẻ


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ạngthuộ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>


Đị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>


Các style được định nghĩatrong 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


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,…


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 styleh1, h2, h3, h4, h5, h6 {color:blue; font-weight:bold;}h3 {font-style: italic;}

Định nghĩa theo ngữ cảnhdiv p {color:red;}


Đị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 styleh1, h2, h3, h4, h5, h6 {color:blue; font-weight:bold;}h3 {font-style: italic;}

Định nghĩa theo ngữ cảnhdiv 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 trongthẻ nào


ĐỊ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>


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


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 conNếu muốn viết một định nghĩa để thẻ được địnhhướ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;}


ĐỊ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



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


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 webVí dụ:

<div id="header">nội dung</div>

Thuộc tính class: dùng để định nghĩa một kiểu địnhdạngVí 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 webVí dụ:

<div id="header">nội dung</div>

Thuộc tính class: dùng để định nghĩa một kiểu địnhdạngVí dụ:

<div class="navigationbar">nội dung</div>

CLASS

Định dạng cụ thể vùng/thẻ tài liệuMang tính chất kế thừa, sử dụng lại nhiều lần vớinhiều vùng/thẻ trên trangĐược gắn với thẻ XHTMLCó thể áp dụng nhiều class trên một thẻ XHTMLSử dụng ký tự . ở đầu định nghĩa style

Định dạng cụ thể vùng/thẻ tài liệuMang tính chất kế thừa, sử dụng lại nhiều lần vớinhiều vùng/thẻ trên trangĐược gắn với thẻ XHTMLCó thể áp dụng nhiều class trên một thẻ XHTMLSử dụng ký tự . ở đầu định nghĩa style


ĐỊNH NGHĨA SELECTOR THEO CLASSCSS: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>


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ừaSử dụng ký tự # ở đầu định nghĩa style


ĐỊNH NGHĨA SELECTOR THEO IDCSS: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

ID có sức mạnh hơn Class:ID chỉ được gắn với một thẻ (thường là div) trênXHTML (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ềulầ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ậptrình JavaScript


ID có sức mạnh hơn Class:ID chỉ được gắn với một thẻ (thường là div) trênXHTML (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ềulầ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ậptrình JavaScript

21

SELECTOR SAO (*)

Selector * hay còn gọi là selector đa năng, mangnghĩ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êntrang sẽ có màu xanh

Hay dùng để đại diện cho một thẻ không xác địnhp * em {font-weight:bold;} -> dấu * đại diệncho "bất cứ thẻ con nào của p"

Selector * hay còn gọi là selector đa năng, mangnghĩ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êntrang sẽ có màu xanh

Hay dùng để đại diện cho một thẻ không xác địnhp * em {font-weight:bold;} -> dấu * đại diệncho "bất cứ thẻ con nào của p"


SELECTOR THUỘC TÍNH

Selector cho một thẻ với thuộc tính xác địnhimg[title] {border: 2px solid blue;} -> áp dụngcho mọi thẻ img có định nghĩa thuộc tính titleimg[alt="Dartmoor-view of countryside"] {border:3pxgreen 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 địnhimg[title] {border: 2px solid blue;} -> áp dụngcho mọi thẻ img có định nghĩa thuộc tính titleimg[alt="Dartmoor-view of countryside"] {border:3pxgreen 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

Pseudo-class là class phổ biến nhất được sử dụngvới các thẻ XHTMLCó tác dụng khi có sự kiện di chuột quaSử dụng tất cả những thành phần với Pseudo-classđể tạo hiệu ứng rolloverMột số trình duyệt sẽ không chấp nhận Pseudo-classnếu như không tuân thủ thứ tự khai báo:

LinkVisitedHoverActive


Pseudo-class là class phổ biến nhất được sử dụngvới các thẻ XHTMLCó tác dụng khi có sự kiện di chuột quaSử dụng tất cả những thành phần với Pseudo-classđể tạo hiệu ứng rolloverMột số trình duyệt sẽ không chấp nhận Pseudo-classnếu như không tuân thủ thứ tự khai báo:

LinkVisitedHoverActive

25

PSEU-DO CLASS

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>

:FOCUSinput:focus {border: 1px solid blue;}


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>

:FOCUSinput:focus {border: 1px solid blue;}

26

PSEU-DO CLASS

x:first-letterp: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."}


x:first-letterp: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."}

27

Tính kế thừa trong CSS

TÍNH KẾ THỪA TRONG CSS

Tính kế thừa là mối quan hệ giữa phần tử cha vàphần tử con trong CSSTối ưu hóa dung lượng của file .cssSử 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ănbảnÁp dụng được cho nhiều vùng trên một trangSử dụng lại cho nhiều dự án khác


Tính kế thừa là mối quan hệ giữa phần tử cha vàphần tử con trong CSSTối ưu hóa dung lượng của file .cssSử 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ănbảnÁp dụng được cho nhiều vùng trên một trangSử dụng lại cho nhiều dự án khác

29

TÍNH KẾ THỪA TRONG CSSCSS: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 chothẻ body thì nhiều thẻ nằmtrong body sẽ kế thừa giá trị

các thuộc tính này

TÍNH KẾ THỪA TRONG CSS

Các thẻ con có thể định nghĩa lại giá trị các thuộctính kế thừaCác thẻ con không định nghĩa lại giá trị các thuộctính kế thừa sẽ mặc nhiên nhận các giá trị kế thừaKế thừa là khả năng mạnh mẽ của CSS, tuy nhiêncũng cần dùng cẩn thận vì nó có thể đặt nhữngthuộ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ị)

Các thẻ con có thể định nghĩa lại giá trị các thuộctính kế thừaCác thẻ con không định nghĩa lại giá trị các thuộctính kế thừa sẽ mặc nhiên nhận các giá trị kế thừaKế thừa là khả năng mạnh mẽ của CSS, tuy nhiêncũng cần dùng cẩn thận vì nó có thể đặt nhữngthuộ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

Cách áp dụng các style từ trên xuống dưới từ mộtcấp bậc của hệ thống phân cấp trong trang tới cấpbậc tiếp theoLà 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 giaodiện tối ưuQuy 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ínhQuy tắc 2: phân loại theo trật tự và trọng lượngQuy tắc 3: sắp xếp theo tính chuyên biệtQuy tắc 4: sắp xếp theo trật tự

Cách áp dụng các style từ trên xuống dưới từ mộtcấp bậc của hệ thống phân cấp trong trang tới cấpbậc tiếp theoLà 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 giaodiện tối ưuQuy 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ínhQuy tắc 2: phân loại theo trật tự và trọng lượngQuy tắc 3: sắp xếp theo tính chuyên biệtQuy tắc 4: sắp xếp theo trật tự



Quy tắc 1:• Khi mỗi trang được tả, trình duyệt xem xét mỗi thẻ trong trang để

tìm những định nghĩa áp dụng cho nó

Quy tắc 2:• Trình duyệt tuần tự kiểm tra năm nguồn, thiết lập mọi thuộc tính

phù hợp trong quá trình đó• Giá trị của thuộc tính được thiết lập cuối cùng trong quá trình này

quyết định hình thức• Từ khoá !important:

– Đứng sau một khoagnr trống, sau style muốn trở nên quan trọng,đứng trước dấu ;

Quy tắc 1:• Khi mỗi trang được tả, trình duyệt xem xét mỗi thẻ trong trang để

tìm những định nghĩa áp dụng cho nó

Quy tắc 2:• Trình duyệt tuần tự kiểm tra năm nguồn, thiết lập mọi thuộc tính

phù hợp trong quá trình đó• Giá trị của thuộc tính được thiết lập cuối cùng trong quá trình này

quyết định hình thức• Từ khoá !important:

– Đứng sau một khoagnr trống, sau style muốn trở nên quan trọng,đứng trước dấu ;



Quy tắc 3:• Tính chuyên biệt xác định độ cụ thể của định nghĩa

Quy tắc 4:• Nếu hai định nghĩa có trọng lượng chính xác như nhau,

định nghĩa ở cấp bậc thấp nhất trong phân lớp ghi đègiá trị

Quy tắc 3:• Tính chuyên biệt xác định độ cụ thể của định nghĩa

Quy tắc 4:• Nếu hai định nghĩa có trọng lượng chính xác như nhau,

định nghĩa ở cấp bậc thấp nhất trong phân lớp ghi đègiá trị


KHAI BÁO GIÁ TRỊ MÀU SẮC VÀ SỐ TRONG CSS

GIÁ TRỊ SỐ

Sử dụng giá trị số để miêu tả độ dài của tất cảnhững yếu tố trong trang2 giá trị: tuyệt đối và tương đối


GIÁ TRỊ TUYỆT ĐỐI

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

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


GIÁ TRỊ TƯƠNG ĐỐI

Em được lấy từ độ rộng của ký tự trong font, vì vậykích thước của nó thay đổi tùy thuộc vào font màbạn sử dụng.

Em được lấy từ độ rộng của ký tự trong font, vì vậykích thước của nó thay đổi tùy thuộc vào font màbạn sử dụng.


GIÁ TRỊ TƯƠNG ĐỐI

Có hai lợi ích quan trọng cho việc sử dụng kíchthước tương đối như em cho font chữ:

Tận dụng khả năng kế thừaNế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íchthước font trong menu View của Internet Explorer

Có hai lợi ích quan trọng cho việc sử dụng kíchthước tương đối như em cho font chữ:

Tận dụng khả năng kế thừaNế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íchthước font trong menu View của Internet Explorer


GIÁ TRỊ MÀU SẮC

Hệ nhị phân (#RRGGBB and #RGB).Phần trăm RGB (R%, G% B%).Tên màu (red, green, blue…).


PHỤ LỤC B: THUỘC TÍNH CỦA CSS

Hãy xem Phụ lục B để biết các thuộc tính của CSSXuyên suốt quá trình học tập, làm việcTự thực hành với những thuộc tính đơn giảnTự nghiên cứu


TỔNG KẾT

Có ba cách định nghĩa style cho trang là inline,embbed và linkedTrong đị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ànhphần con khác nhau trên trang webGiá trị gán cho các thuộc tính có thể ở dạng tươngđối hoặc tuyệt đốiPhụ lục B của sách mô tả đầy đủ các thuộc tính CSS

Có ba cách định nghĩa style cho trang là inline,embbed và linkedTrong đị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ànhphần con khác nhau trên trang webGiá trị gán cho các thuộc tính có thể ở dạng tươngđối hoặc tuyệt đốiPhụ 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 - giáo trình fpt

Documents