PART II:

Casscading Style Sheet - CSS

1

NỘI DUNG

 CSS là gì?  Một số đặc tính cơ bản của CSS  Áp dụng CSS  Cú pháp – Cách tạo CSS  Background  Thiết lập văn bản  Tạo Menu  Một số chức năng khác

2

Định nghĩa CSS

 CSS (Cascading Style Sheets) là cách mà chúng ta thêm các kiểu hiển thị (font chữ, kích thước, màu sắc...) cho một tài liệu Web viết bằng HTML, XHTML, XML, SVG, hay UML,… .

 CSS mở rộng ngôn ngữ HTML truyền thống với hơn 70 thuộc tính về kiểu dáng có thể áp dụng cho các thẻ HTML

 Các nhà lập trình Web có thêm nhiều lựa chọn về

3

màu sắc, khoảng cách, vị trí, biên, lề, con trỏ.

Một số đặc tính cơ bản của CSS

 Tiện ích của CSS

◦Tách riêng nội dung và định dạng, làm cho mã nguồn

gọn gàng hơn,

◦Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang,

tránh lặp lại việc định dạng các trang giống nhau.

◦Tiết kiệm thời gian:Khi thay đổi định dạng trong CSS, các trang sử dụng CSS sẽ tự động cập nhật sự thay đổi đó.

◦Kết hợp với JavaScript để tạo hiệu ứng đặc biệt

4

Một số đặc tính cơ bản của CSS

 Bất lợi của CSS:

◦Một số trình duyệt không chấp nhận CSS hoàn toàn ◦Phải mất thời gian để học cách sử dụng

5

Một số đặc tính cơ bản của CSS

Mô hình 3 lớp trong phát triển WEB

6

Một số đặc tính cơ bản của CSS

◦Inline style Inline style

◦Internal style Internal style

◦External style External style

 Mức độ ưu tiên của CSS sẽ theo thứ tự sau.

◦Style đặt trong từng thẻ HTML riêng biệt (inline style) ◦Style đặt trong phần (Internal style) ◦Style đặt trong file mở rộng .css (External Style) ◦Style mặc định của trình duyệt

 Mức độ ưu tiên sẽ giảm dần từ trên xuống dưới.

7

Phân loại : Có 3 loại  Phân loại : Có 3 loại

Áp dụng CSS vào trang HTML

 Dùng inline style: là cách dùng style ngay trong câu lệnh, chỉ cần bổ sung thêm thuộc tính STYLE vào sau một phần tử HTML nào đó.

 Cú pháp:

Nội dung

 Ví dụ:

Màu xanh nước biển.

This is a paragraph

8

Áp dụng CSS vào trang HTML

Dùng inline style: Ví dụ:

Align:center”> This paragraph has an inline style applied to it

This paragraph is displayed in the default style.

Can you see the

difference in this line

9

Áp dụng CSS vào trang HTML

 Một inline style áp dụng cho bất cứ thẻ nào và

 Dùng inline style làm cho tài liệu rõ ràng hơn nhưng có thể dẫn đến việc viết mã quá nhiều.

 Làm cho các đoạn mã dư thừa, khó bảo trì

10

chỉ có tác dụng trên chính thẻ đó.

Áp dụng CSS vào trang HTML

 Cách 2: Nhúng style sheet (Internal Style)  Internal style : Là bảng mẫu thích hợp cho trang

trong cặp tag

◦Sử dụng: Trong phần body, nội dung nào muốn sử dụng định dạng theo Style sheet đã tạo ở trên thì đặt trong tag được định nghĩa trong phần head

◦.

11

riêng lẻ với nhiều văn bản. ◦Cách tạo: Taọ bảng mẫu chung trên phần đầu trang

Áp dụng CSS vào trang HTML

 Cách 2: Nhúng style sheet (Internal Style) Cú pháp:  Cú pháp: Head> <

◦.

12

Áp dụng CSS vào trang HTML

Mỗi đoạn sẽ có viền Đậm màu bạc

13

Áp dụng CSS vào trang HTML

This is the H1 element

This is the H2 element

This is the H3 element with its default style as displayed in the browser

14

Áp dụng CSS vào trang HTML

h1, h2, h3 { margin-left: 10px; font-size: 150%; ... }

15

Cách3: Nhiều Stylesheet  Trong trường hợp mà có một số thẻ có cùng định dạng, chúng ta có thể gộp chúng lại với nhau. Giả sử như sau:

Áp dụng CSS vào trang HTML

Nhiều Stylesheet  Ví dụ: h1 { color:#0000FF;

text-transform:uppercase }

h2 { color:#0000FF;

text-transform:uppercase; }

h3 { color:#0000FF;

text-transform:uppercase; }

h1, h2, h3 {

16

color:#0000FF; text-transform:uppercase; }

Áp dụng CSS vào trang HTML

 Bảng kiểu này sẽ được áp dụng và ảnh hưởng cho tất cả

các trang của một website.

17

Cách 4: Bên ngoài-External Là một bảng kiểu được lưu trữ thành một file bên ngoài và được liên kết với trang HTML.

Áp dụng CSS vào trang HTML

 Cách tạo:

◦Tạo một tập tin văn bản mới ◦Nhập tên các tag muốn định dạng thuộc tính theo mẫu: TagName{property1:v1;property2:v2;…}

◦Lưu tập tin với định dạng Text Only và có phần mở

rộng .css

Cách dùng External style::  Cách dùng External style

 Cú pháp:

18

Áp dụng CSS vào trang HTML

Ví dụ:

href=“style.css” />

Welcome To WallPearl’s Blog

19

Áp dụng CSS vào trang HTML

Ví dụ: Sau đó hãy tạo một file style.css với nội dung: body { background-color:#FFF }



p { color:#00FF00 }

20

Lưu ý:  Để lưu 1 file với 1 đuôi khác .txt trong Notepad chúng ta chọn Save as type là All Files. Có thể chọn Encoding là UTF-8, nếu bạn chú thích CSS bằng tiếng Việt. Trong CSS chúng ta còn có thể sử dụng thuộc tính @import để nhập một file CSS vào CSS hiện hành. Cú pháp: @import url(link)

Cú pháp của CSS

 Cú pháp của CSS được chia làm 3 phần, phần thẻ chọn (selector), phần thuộc tính (property), phần nhãn (value).

 Nếu nhãn có nhiều từ nên đặt nhãn vào trong

selector {property: value}

dấu nháy kép

 Nếu thẻ có nhiều thuộc tính thì các thuộc tính sẽ

p {font-family: "sans serif"}

được ngăn cách bởi dấu (;).

21

p {text-align:center;color:red}

Cú pháp của CSS

 Khi thẻ chọn có nhiều thuộc tính thì nên để mỗi

p { text-align: center; color: black; font-family: arial }

22

thuộc tính ở trên một dòng riêng biệt.

Cú pháp của CSS

 Phần tử chọn Selector: Các đối tượng mà chúng

 Các loại

◦ Dùng thẻ HTML

◦ Sử dụng CLASS

◦ Sử dụng ID

23

ta sẽ áp dụng các thuộc tính trình bày.

Cú pháp của CSS

 Cách làm này là cứng nhắc nhất trong 3 cách nhưng nó là cách tốt nhất để đảm bảo tính nhất quán của việc định dạng suốt tài liệu.

 Dùng thẻ HTML làm phần từ chọn thường được dùng là định dạng các siêu liên kết trong tài liệu.

24

Phần tử chọn Selector HTML  Dùng các phần tử HTML làm phần tử chọn là cách tốt nhất để áp dụng CSS nếu muốn tất cả các phần tử thuộc một kiểu nào đó xuất hiện với cùng một định dạng

Cú pháp của CSS

25

Cú pháp của CSS

 Body {color: black} /*Phần chữ trong thẻ body sẽ có

màu đen*/

 p {text-align: center} /*tất cả các thẻ

trong trang

HTML sẽ được canh giữa.*/

 p /*canh giữa, chữ màu đỏ, font arial*/

{ text-align: center;color: red;

font-family: arial

}

26

Phần tử chọn Selector HTML

Cú pháp của CSS

 Bằng việc tạo ra các lớp (CLASS), có thể định

Dùng CLASS làm phần tử chọn

nghĩa nhiều kiểu thể hiện khác nhau cho cùng

một thẻ HTML và áp dụng mỗi lớp vào một vị trí

◦ Các CLASS gắn với 1 thẻ cụ thể

◦ Các CLASS không gắn với một thẻ cụ thể (có thể

gắn với hầu như tất cả các thẻ)

27

cần thiết trên trang web. Có 2 cách dùng:

Cú pháp của CSS

Dùng CLASS làm phần tử chọn  Cú pháp:

◦Trong phần , đánh dấu phần nằm trong lớp. Trong phần , đánh dấu phần nằm trong lớp. Cú pháp:  Cú pháp:

Nội dung Nội dung

28

Cú pháp của CSS

”>test water water”>test water ”>test danger danger”>test danger

29

Cú pháp của CSS

 Ví dụ: Trên trang web có 3 loại đoạn văn:

◦ Đoạn văn canh lề trái, đoạn văn canh lề giữa và

đoạn văn canh lề phải. Khi đó có thể định nghĩa 3

lớp riêng biệt cho 3 loại đoạn văn này như sau:

Dùng CLASS làm phần tử chọn

Cú pháp của CSS

 Tiếp theo, trong trang HTML sử dụng như sau:

Đoạn văn này được canh lề trái.

Đoạn văn này được canh lề phải.

Đoạn văn này được canh lề giữa.

 Áp dụng sai:

Đây là đoạn định nghĩa

sai

Ví dụ này không hoạt động

31

Dùng CLASS làm phần tử chọn

Cú pháp của CSS

Các CLASS gắn với tất cả các thẻ

 Có thể tạo ra một lớp mà lớp đó có thể gắn vào hầu

như các thẻ trong trang web bằng cách bỏ tên thẻ ở

đầu đi nhưng nhớ giữ lại dấu chấm (.)

 Ví dụ: định nghĩa một lớp "giua" có thể gắn với bất cứ

thẻ nào:

.giua { text-align="center“; }

32

Cú pháp của CSS

Các CLASS gắn với tất cả các thẻ

 Trong trang HTML ta sử dụng như sau:

33

Đoạn này canh lề giữa.

Câu này canh giữa.

Cú pháp của CSS

Đa lớp (Multi class)

 Một thẻ có thể được gán nhiều lớp bằng cách chỉ ra

danh sách tên các lớp được phân cách nhau bằng

khoảng trắng

.warning { color: red }

.highlight { background-color: yellow }

Danger

An important point.

34

Cú pháp của CSS

35

Cú pháp của CSS

36

Cú pháp của CSS

Dùng ID làm phần tử chọn  Định danh(ID) cũng cho phép chia các thẻ thành nhiều

loại khác nhau.

 Một lớp có thể áp dụng nhiều lần ở nhiều vị trí trên

trang web

 Định danh 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.  Qui tắc cho Style dùng ID làm phần tử chọn bắt đầu

bằng dấu thăng (#)

37

Cú pháp của CSS

Dùng ID làm phần tử chọn Cú pháp::  Cú pháp ◦Trong tag Body nhập cú pháp: Trong tag Body nhập cú pháp:

ID=IDName>>

Nội dung Nội dung

38

Cú pháp của CSS

Dùng ID làm phần tử chọn Ví dụ : Ví dụ :

A hardware device that allows the user to make electronic

A hardware device that allows the user to make electronic

copies of graphics or text. copies of graphics or text. Short for picture element. A pixel refers to the small dots that make up

Short for picture element. A pixel refers to the small dots that make up an image on the screen. an image on the screen.

39

Cú pháp của CSS

40

Cú pháp của CSS

Dùng ID làm phần tử chọn

 Đoạn mã dưới đây có thể có hiệu lực cho thẻ

#xyz {color: green}

 Khi sử dụng:

Đoạn văn bản

◦ Các thẻ khác không sử dụng được

Đoạn văn bản

không có hiệu lực

41

đầu tiên có ID là xyz:

Cú pháp của CSS

42

Cú pháp của CSS

Các phần tử chọn CLASS giả lập (Pseudo Class

 Được sử dụng đối với các kiểu liên kết, ngoài ra

Selectors)

còn được sử dụng cho các mục đích khác như

 Sức mạnh của loại phần tử này sẽ được phát

bổ sung hiệu ứng cho các thẻ.

huy đối với các liên kết đó là sự kết hợp của các

phần tử với phần tử lớp để tạo ra các kiểu đa

43

liên kết mà có thể áp dụng cho một trang.

Cú pháp của CSS

Các phần tử chọn CLASS giả lập (Pseudo Class

 Phần tử lớp giả lập liên kết bắt đầu bằng dấu neo

(anchor), tiếp theo là dấu “:”, cuối cùng là tên lớp giả lập.

Một số phần tử lựa chọn lớp giả lập liên kết qui ước như

sau:

a:link: Bổ sung kiểu cho các liên kết chưa bấm

a:visited: bổ sung kiểu cho liên kết đã được viếng thăm

a:hover: bổ sung kiểu khi di chuột qua liên kết

a:active: bổ sung kiểu khi kích chuột vào liên kết

44

Selectors)

Cú pháp của CSS

Các phần tử chọn CLASS giả lập (Pseudo Class

 Có thể viết các luật cho mỗi phần tử chọn lớp và

Selectors)

 Có thể kết hợp các phần tử chọn trong một lớp,

chúng có thể ứng dụng đến toàn bộ các liên kết

a.main:link

a.subnav:link

a.footer:link

45

lớp này cho phép tạo ra kiểu đa liên kết.

Cú pháp của CSS

Dynamic Pseudo Class Selectors

Selector

Mục đích

:hover

Áp dụng cho các luật khi di chuyển chuột qua phân tử

:active

Áp dụng khi click chuột vào một đối tượng

:focus

Áp dụng khi một phần tử đang được focus

46

Cú pháp của CSS

Kết hợp lớp CSS và Pseudo Class  Cú pháp: selector.class:pseudo-class {property:

a.red:visited {color: #FF0000} CSS

Syntax

47

value}

Cú pháp của CSS

48

Cú pháp của CSS

Kết hợp lớp CSS và Pseudo Class

 Cú pháp: selector:pseudo-element {property: value}

 Để áp dụng kiểu khác nhau đến dòng đầu tiên trong paragraph, sử dụng cú pháp phần tử giả lập: p:first-line

 Nếu muốn bổ sung nội dung sau hoặc trước một phần tử, cần phải định nghĩ nội dung trong tờ kiểu dáng.

 Ví dụ: p:first:line {color:red;}

href="http://www.vimaru.edu.vn">Vimaru

49

Cú pháp của CSS

50

Cú pháp của CSS

:first-line Pseudo-element ◦

Some text that ends up on two or more

lines

51

Cú pháp của CSS

:first-line Pseudo-element  Một số thuộc tính của first-line

◦ font properties ◦ color properties ◦ background properties ◦ word-spacing ◦ letter-spacing ◦ text-decoration ◦ vertical-align ◦ text-transform ◦ line-height ◦ clear

52

Cú pháp của CSS

:first-letter Pseudo-element p {font-size: 12pt} p:first-letter {font-size: 200%; float: left}

The first words of an article.

 Sử dụng lớp CSS với Pseudo-element

◦ Cú pháp: selector.class:pseudo-element {property:

value}

◦ Ví dụ:p.article:first-letter {color: #FF0000}

A paragraph in an

article

53

Cú pháp của CSS

54

Cú pháp của CSS

Đa phần tử giả lập

p {font-size: 12pt}

p:first-letter {color: #FF0000; font-size: 200%}

p:first-line {color: #0000FF}

The first words of an article

55

Cú pháp của CSS

Các phần tử chọn phần tử giả lập (Pseudo Element

Selectors)

 Để sinh ra nội dung sử dụng phần lựa chọn giả

lập trước và sau, chúng ta định nghĩa phần tử

đến luật sẽ được áp dụng, phần tử giả lập trước,

sau, thuộc tính nội dung, và nội dung trong dấu

◦ h1:after {content: "header note"} Kết quả: Câu

“hearder note” xuất hiện sau h1

56

nháy kép:

Cú pháp của CSS

 Trong một số trường hợp cần áp dụng luật cho

Descendant Selectors

thẻ nằm trong một thẻ khác -> sử dụng

 Ví dụ

◦ div p {color:red;} /* chỉ có thẻ p nằm trong thẻ div

ảnh hưởng bởi các luật

57

descendant selector

Cú pháp của CSS

Chaining Selectors

 Rất nhiều mẫu selector có thể được kết hợp để tạo

thành các luật cụ thể hơn

◦ div p a.definition { color: green }

◦ div p a.definition:hover { color: red }

 Rule đầu áp dụng liện kết có class="definition" mà liên

kết này nằm trong phần tử p, ngay bản thân p nằm

trong phần tử div

 Rule 2 thay đổi liên kết sang màu đỏ khi di chuyển

chuột qua liên kết

58

Cú pháp của CSS

 Một vài thuộc tính định dạng được thừa kế theo mặc định.

Có nghĩa là các phần tử con thừa kế giá trị định dạng của

các phần tử cha. Nhung thuộc tính này như color, font và

text-align

◦ p { color: red } ...

◦

Sample paragraph with bold text.

59

Tính thừa kế

Cú pháp của CSS

 Ví dụ 1

◦ b { font-size: 12pt; } /* không có xung đột*/

◦ p b { color: red; }

 Ví dụ 2:

◦ b { font-size: 12pt; } /* xung đột thuộc tính font-size */

◦ p b { font-size: 14pt; color: red; }

60

Giải quyết xung đột

Cú pháp của CSS

Giải quyết xung đột

 Xác định tất cả các luật áp dụng cho phần tử.

 Sắp xếp theo thứ tự và mức độ quan trọng (dựa vào từ

khóa !important).

 Sắp xếp dựa vào nét riêng biệt

 Sử dụng thứ tự định nghĩa luật, luật cuối cùng được sử

dụng

61

Cú pháp của CSS

Từ khóa !important

 Từ khóa !important có thể được sử dụng trong khai báo

kiểu để đảo ngược thứ tự của tác giả và sheet định

dạng người dùng



/* in the user's style sheet */

◦ p { color: red; font-size: 18pt !important; }



/* in the author's style sheet */

◦ p { color: green; font-size: 12pt; }

62

Cú pháp của CSS

Ví dụ: Từ khóa !important  Trong một trang web có liên kết tới file style.css

 Trong thẻ border: 3px solid #999; }

APPLES

ORANGES

Layers

 Cách đặt các thành phần web ở các lớp khác

 Với mục đích này, bạn sẽ gán cho mỗi phần tử một con số. Theo đó, phần tử có số cao hơn sẽ nằm trên, phần tử có số thấp hơn sẽ nằm dưới.

123

nhau với thuộc tính z-index. Nói đơn giản hơn thì đó là cách bạn đặt một thành phần này lên trên một thành phần khác.

Layers

Ví dụ sau chúng ta sẽ đặt 5 bức ảnh logo ở 5 lớp.

 #logo2 { position:absolute; top:140px; left:100px;

#logo1 { position:absolute; top:70px; left:50px; z- index:1 }

 #logo3 { position:absolute; top:210px; left:150px;

z-index:2 }

 #logo4 { position:absolute; top:280px; left:200px;

z-index:3 }

 #logo5 { position:absolute; top:350px; left:250px;

z-index:4 }

124

z-index:5 }

#oranges { position: absolute; top: 50px: left: 50px: width: 200px; padding: 10px; text-align: center; background-color: #333; color: #fff; border: 3px solid #999; z-index: 2; }

Layering  Example: #apples { position: absolute; top: 20px; left: 20px; width: 200px; padding: 10px; text-align: center; background-color: #ccc; border:1px dashed black; z-index: 1; }

125

Layering

The z-index property specifies the layers when elements overlap.

126

Class & ID

 Nhóm các phần tử với class :  Ví dụ chúng ta có một đoạn mã HTML sau đây :

Danh Sách Các Tỉnh, Thành Phố Của Việt Nam

• Hà Nội
• TP. Hồ Chí Minh
• Đà Nẵng
• Thừa Thiên Huế
• Khánh

  Hòa

• Quãng Ninh
• Tiền Giang

127

Class & ID

 Nhóm các phần tử với class :  Yêu cầu đặt ra là làm thế nào để tên các thành

128

phố là màu đỏ và tên các tỉnh là màu xanh da trời. Để giải quyết vấn đề này chúng ta sẽ dùng một thuộc tính HTML là class để tạo thành 2 nhóm là thành phố và tỉnh.

Class & ID

 Nhóm các phần tử với class :

Danh Sách Các Tỉnh, Thành Phố Của Việt Nam

• Hà Nội
• TP. Hồ Chí Minh
• Đà Nẵng
• Thừa Thiên Huế
• Khánh Hòa
• Quãng

  Ninh

• Tiền Giang

129

Class & ID

 CSS tương ứng : li.tp { color:FF0000 } li.tinh { color:0000FF }

130

Class & ID

Nhận dạng phần tử với id:  Ví dụ: Cũng với đoạn HTML như ví dụ về class.  Nhưng yêu cầu đặt ra là Hà Nội sẽ có màu đỏ

 Để giải quyết vấn đề này chúng ta sẽ sử dụng

sậm, TP. Hồ Chí Minh màu đỏ, Đà Nẵng màu đỏ tươi còn các tỉnh khác màu xanh da trời.

131

thuộc tính HTML là id để nhận dạng mỗi thành phố và dùng class để nhóm các tỉnh.

Class & ID

 Đoạn HTML của chúng ta bây giờ sẽ là :

Danh Sách Các Tỉnh, Thành Phố Của Việt Nam

• Hà Nội
• TP. Hồ Chí Minh
• Đà Nẵng
• Thừa Thiên Huế
• Khánh Hòa
• Quãng Ninh
• Tiền Giang

132

Class & ID

 Và đoạn CSS cần dùng sẽ là :

#hanoi { color:#790000 } #hcmc { color:#FF0000 } #danang { color:#FF00FF } .tinh { color:#0000FF }

133

Thẻ DIV và SPAN Setting Up Content Areas

 Chia văn b n thành các kh i, có chung m t đ nh

ộ ị ố ả



135