Transcript p - nvidia
CSS
Nội dung
Các khái niệm cơ bản
Áp dụng CSS vào trang HTML
Cú pháp CSS
Một số đơn vị đo sử dụng trong CSS
Kế thừa thuộc tính trong CSS
Các nhóm thuộc tính trong CSS
Các khái niệm cơ bản
Cascading style sheets (CSS): mẫu định dạng phân
tầng
CSS là một chuẩn để định dạng các tài liệu HTML,
XHTML, XML.
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
Giúp các nhà thiết kế Web có thêm nhiều lựa chọn về
màu sắc, khoảng cách, vị trí, biên, lề, con trỏ cho
trang web
Các khái niệm cơ bản
CSS phá bỏ rào cản HTML bằng cách cho phép có
thêm nhiều đặc tả thuộc tính chuẩn để phục vụ cho
việc dàn trang và định dạng
Những thuộc tính này được áp dụng vào trong tài liệu
mà không phá vỡ cấu trúc HTML sẵn có
CSS làm tăng sự nhất quán (về định dạng) và tăng tốc
độ tải trang web (các tập tin CSS chỉ tải ở lần đầu tiên
khi truy cập vào trang web)
3 cách áp dụng CSS vào trong tài liệu
- Inline style (sử dụng thuộc tính style của thẻ để
định nghĩa style)
- Internal style sheet (định nghĩa style bên
trong thẻ <head> của tài liệu)
- External style sheet (liên kết đến một tập tin
*.css chứa toàn bộ style sử dụng trong tài liệu)
Sử 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 đó theo cú pháp như sau:
<thẻ style=“thuộc tính:giá trị; thuộc tính:giá trị;….”>
Nội dung
</thẻ>
•Ví dụ:
<b style="color:navy;">Màu xanh nước biển.</b>
Sử dụng Inline style:
Một inline style áp dụng cho bất cứ thẻ nào
và chỉ có tác dụng trên chính thẻ đó.
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 và thiếu sự nhất quán toàn cục trên
toàn site
Làm cho các đoạn mã dư thừa, khó bảo trì
Sử dụng Internal style sheet
Áp dụng style thống nhất cho toàn trang web
Định nghĩa một khối (phân biệt bởi các thẻ
<style type= “text/css”> và </style>) được đặt
trong phần head của tài liệu.
Khối này là một tập các style rule (qui tắc về
kiểu dáng), trong đó mỗi qui tắc định nghĩa style
cho một phần tử hay một nhóm các phần tử
HTML.
Sử dụng Internal style sheet
<html>
<head>
<style type="text/css">
b {text-transform: lowercase; font-size:100 px}
p { border: silver thick solid; background-color:
turquoise;} </style>
</head>
<body>
<p> Đoạn này sẽ có viền <b>Đậm</b> màu bạc </p>
</body>
</html>
Sử dụng External style sheet
Áp dụng cho toàn bộ website
Tạo một tập tin có phần mở rộng là .css bên ngoài tài liệu
HTML, sử dụng thẻ <link> trong phần <head> để liên kết
tập tin này vào trang HTML
<link rel="stylesheet" type=”text/css”
href=”mystyles.css”>
Style sheet được liên kết chứa những khai báo về style,
hoạt động giống như Internal style sheet, chỉ khác là
những style rule không nằm trong cặp thẻ <style type
=”text/css”></style>.
Sử dụng External style sheet
Cú pháp của CSS gồm 3 thành phần
Bộ chọn (Selector)
Thuộc tính (Property)
Giá trị (Value)
Cú pháp của CSS được thể hiện như sau:
Selector
{
Thuộc tính 1: giá trị;
……………….
Thuộc tính n: giá trị;
}
Sử dụng External style sheet
Bộ chọn (Selector) thường là tên các thẻ HTML
Mỗi một thuộc tính cần phải có một giá trị
Một thuộc tính và giá trị của nó được phân cách nhau bởi
dấu hai chấm “:”
Hai cặp thuộc tính-giá trị được phân cách nhau bởi dấu
chấm phẩy “;”.
Toàn bộ các cặp thuộc tính-giá trị của một thẻ HTML
được đặt trong cặp dấu ngoặc nhọn {…}.
Ví dụ:
Bộ chọn:
Các thuộc tính:
p{
text-align: center;
color: black;
font-family: "sans serif"
}
Đặt giá trị trong cặp dấu
nháy kép “…” khi giá trị là
chuỗi các từ liên tiếp
Gom nhóm các bộ chọn
CSS cung cấp cú pháp cho phép gom nhóm nhiều bộ chọn
cùng lúc
Giúp người thiết kế có thể thiết lập giá trị cho các thuộc
tính chung giống nhau của nhiều bộ chọn khác nhau cùng
lúc
Giúp giảm kích thước tập tin css giảm thời gian tải
trang web
Ví dụ: h1, h2, h3, h4, h5, h6
Các bộ chọn được phân cách
nhau bằng dấu phẩy “,”
{
color: green
}
Thiết lập thuộc tính color cho
các bộ chọn có giá trị là green
Bộ chọn(Selector)
Các loại bộ chọn trong CSS
Bộ chọn HTML (HTML selector)
Bộ chọn lớp (Class selector)
Bộ chọn ID (Identity selector)
Bộ chọn hậu duệ/con cháu (Descendant
selector)
Bộ chọn thẻ con (Child selector)
Bộ chọn thuộc tính (Attribute selector)
Bộ chọn lớp giả (Pseudo class selector)
Bộ chọn HTML(HTML selector)
Là bộ chọn đơn giản nhất, dùng các phần tử HTML làm phần
tử chọn
Ví dụ: Định dạng tất cả các siêu liên kết trong toàn bộ trang
web không có đường gạch chân
<style type=”text/css”>
a{
/*Bỏ đường gạch chân của các hypelink*/
text-decoration: none;
}
</style>
Bộ chọn lớp (Class selector)
Bằng việc tạo ra các lớp (class), có thể định
nghĩa nhiều kiểu thể hiện khác nhau cho cùng
một thẻ HTML và áp dụng các lớp này vào một
vị trí cần thiết trên trang web
Có 2 cách định nghĩa bộ chọn lớp
– Định nghĩa bộ chọn lớp cho một thẻ cụ thể
– Định nghĩa bộ chọn lớp không xác định thẻ
cụ thể (khi cần áp dụng một lớp cho nhiều thẻ
khác nhau)
Bộ chọn lớp (Class selector)
Bộ chọn lớp cho một thẻ cụ thể
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
– Đoạn văn canh lề phải
Khi đó có thể định nghĩa 3 lớp riêng biệt (cho thẻ p) cho 3
loại đoạn văn này như sau:
p.trai {text-align: left}
p.phai {text-align: right}
p.giua {text-align: center}
Bộ chọn lớp (Class selector)
Áp dụng vào trang html
<p class="trai">Đoạn văn này được canh lề trái.</p>
<p class="phai">Đoạn văn này được canh lề phải.</p>
<p class="giua">Đoạn văn này được canh lề giữa.</p>
Áp dụng không hợp lệ
<p class="trai" class="phai">Đây là đoạn áp dụng sai</p>
<td class="trai">Áp dụng sai thẻ</td>
Bộ chọn lớp (Class selector)
Bộ chọn lớp không xác định thẻ 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 (nếu thẻ đó cũng chấp nhận thuộc
tính này) 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 nhiều thẻ
khác nhau:
.giua { text-align="center”; }
<p class="giua">Đoạn này canh lề giữa.</p>
<td class="giua">Nội dung trong cột này được canh
giữa.</td>
Bộ chọn lớp (Class selector)
Đ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
Vídụ:
.warning { color: red }
.highlight { background-color: yellow }
<h3 class="warning highlight">Danger</h3>
<p class="highlight">An important point.</p>
Bộ chọn ID (ID selector)
Định danh (ID) cũng cho phép chia các thẻ thành
nhiều loại khác nhau
Một bộ chọn 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
Cú pháp định nghĩa bộ chọn ID như sau:
[<tên thẻ>]#<id của thẻ> { property: value; …}
Bộ chọn ID (ID selector)
Ví dụ 1: Đoạn mã dưới đây có thể áp dụng cho thẻ
<p> có id là para1
p#para1
{
text-align: center;
color: red
}
Khi sử dụng như sau:
<p id="para1">Đoạn văn bản</p>
Bộ chọn ID (ID selector)
Ví dụ 2: Đoạn mã dưới đây có thể có hiệu lực cho thẻ
đầu tiên có id là xyz
#xyz {color: red}
Khi sử dụng:
<p id="xyz">Đoạn văn bản có hiệu lực </p>
<b id=“xyz”>Đoạn văn bản không có hiệu lực </b>
Descendant Selector
Descendant Selector: Dùng để chọn một thành phần/thẻ nằm bên
trong một thành phần/thẻ khác
Ví dụ: Chỉ áp dụng style cho thẻ p nằm trong thẻ div
<html>
<head>
<style type="text/css">
div p {color:red; font-weight: bold;}
</style>
</head>
<body>
<div> <p>Đoạn văn bản có hiệu lực </p>
<b><p> parapraph </p></b>
</div>
<p>Đoạn văn bản không có hiệu lực </p>
</body>
</html>
Child selector
Child Selector: Dùng để chọn thành phần/thẻ con của
một thành phần/thẻ khác
Cú pháp: thẻ > thẻ > … {thuộc tính: giá trị; …}
Ví dụ 1: Chọn các thẻ p là con của thẻ div
div > p { color: red; }
Ví dụ 2: Chọn các thẻ b là con của thẻ p và thẻ p này
lại là thẻ con của thẻ div
div > p > b { color: red; }
Attribute Selector
Attribute Selector: Cho phép chọn các phần tử/thẻ dựa
vào thuộc tính của các phần tử/thẻ
Cú pháp
Mô tả
E[attr]
Chọn phần tử E có thuộc tính là attr mà không quan tâm tới
giá trị của thuộc tính này là gì
E[attr=“value”]
Chọn phần tử E có thuộc tính là attr được thiết lập giá trị xác
định là value
E[attr~="value"]
Chọn phần tử E với thuộc tính attr mà trong danh sách các
giá trị của thuộc tính attr có chứa giá trị là value
E[attr^="value"] Chọn phần tử E với thuộc tính attr có giá trị bắt đầu là value
E[attr$="value"] Chọn phần tử E với thuộc tính attr có giá trị kết thúc là value
E[attr*="value"] Chọn phần tử E với thuộc tính attr có chứa giá trị là value
E[attr|="value"]
Chọn phần tử E với thuộc tính attr mà giá trị thuộc tính attr có
dạng “value-?”
Attribute Selector
Ví dụ 1: Chọn các thẻ p có chứa thuộc tính title
p[title] { color: red; } /*không quan tâm đến giá trị của title*/
<p title=“xyz”> paragraph 1</p>
<p title=“abc”> paragraph 2</p>
Ví dụ 2: Chọn các thẻ có định nghĩa thuộc tính title là
“xyz”
[title=“xyz”] { color: red; } /*không xác định cụ thể thẻ nào*/
<p title=“xyz”> paragraph </p>
<b title=“xyz”> bold text </b>
Attribute Selector
Ví dụ 3: Chọn các thẻ h3 nếu trong danh sách các giá trị
của thuộc tính class có chứa giá trị class2
h3[class~="class2"] { font-weight: bold }
<h3 class="class2"> Thẻ này được chọn </h3>
<h3 class="class1 class2"> Thẻ này cũng được chọn </h3>
Ví dụ 4: Chọn các thẻ a có giá trị của thuộc tính href kết
thúc là “.html”
a[href$=".html] { cursor: url(weblink.cur) }
Ví dụ 5: Chọn thẻ p có thuộc tính foo có dạng “bar-?”
p[foo|="bar"] { background-color: yellow }
<p foo="bar-foo"> Thẻ này được chọn </p>
<p foo="foo-bar"> Thẻ này không được chọn </p>
Pseudo class selector (PCS)
Thông thường mỗi style được áp dụng cho một phần tử
dựa trên vị trí của nó trên document tree (nghĩa là phần tử
đó phải tồn tại trong tài liệu HTML)
Nhưng trong thực tế, có những yêu cầu về định dạng cho
các phần tử không nằm trong document tree. Ví dụ như:
định dạng cho các trạng thái của link, định dạng cho ký tự
đầu tiên của đoạn văn bản…
CSS đưa ra khái niệm pseudo-class (lớp giả) và pseudoelement (phần tử giả) cho phép định dạng cho các phần
tử (thẻ) dựa trên các thông tin nằm bên ngoài document
tree
PCS: Pseudo class
• CSS Pseudo-class: Dùng để thêm vào các hiệu
ứng đặc biệt cho một số bộ chọn. Cho phép bộ chọn
có thể chọn được các phần tử mà không cần quan tâm
đến tên, thuộc tính hay nội dung của phần tử được
chọn
Cú pháp
– Cú pháp của pseudo-class
selector:pseudo-class {property: value}
– Kết hợp CSS class và pseudo-class
selector.CSS-class:pseudo-class {property: value}
PCS: Pseudo class (:first-child)
:first-child pseudo-class: Lớp ảo cho phép
chọn phần tử con đầu tiên của một phần tử
khác (để quy định style cho phần tử con này)
Ví dụ: Chọn phần tử p đầu tiên nằm bên
trong phần tử div, quy định khoản thụt vào
đầu dòng và in đậm cho thẻ p đầu tiên bên
trong thẻ div
PCS: Pseudo class (:first-child)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div > p:first-child {text-indent: 10pt; font-weight: bold;}
</style>
</head>
<body>
<div>
<p>Đây là đoạn <em>văn bản</em> thứ 1</p>
<p>Đây là đoạn <em>văn bản</em> thứ 2</p>
</div>
<span> <p>Đây là đoạn <em>văn bản</em> thứ 3</p></span>
<div>
<p>Đây là đoạn <em>văn bản</em> thứ 4</p>
<p>Đây là đoạn <em>văn bản</em> thứ 5</p>
</div>
</body>
</html>
PCS: Pseudo class (Anchor)
Anchor pseudo-class: Lớp ảo định nghĩa style cho các
trạng thái của link.
Có 4 trạng thái của link:
– link : Link chưa được mở (unvisited link)
– visited : Link đã được mở (visited link)
– hover : Link đang được rê chuột bên trên (mouse over
link)
– active : Link đã được chọn (selected link)
Chú ý: Khi thiết lập style cho link, phải đảm bảo
– Trạng thái hover phải đặt sau trạng thái link và visited
– Trạng thái active phải đặt sau trạng thái hover
PCS: Pseudo class (Anchor)
• Ví dụ 1: Chỉ sử dụng pseudo class
<html>
<head>
<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
</head>
<body>
<p><b><a href=“#" target="_blank">This is a
link</a></b></p>
</body>
</html>
Trạng thái
link
visited
hover
active
Kết quả
PCS: Pseudo class (Anchor)
• Ví dụ 2: Kết hợp CSS class và pseudo class
<html>
<head>
<style type="text/css">
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {background: #66ff66}
a.two:link {color: #ff0000; text-decoration: none}
a.two:visited {color: #0000ff; text-decoration: none}
a.two:hover {text-decoration: underline}
</style>
</head>
<body>
<p><b><a class="one" href="#“ target="_blank">Using style one</a></b></p>
<p><b><a class="two" href="#“ target="_blank">Using style two</a></b></p>
</body>
</html>
PCS: Pseudo class (:focus)
• :focus pseudo-class: Lớp ảo cho phép định nghĩa style của
phần tử khi phần tử đang được “focus”
• Chú ý: Lớp ảo này không hoạt động với IE
• Ví dụ: (sử dụng FireFox để chạy thử ví dụ này)
<html>
<head>
Link sẽ chuyển sang màu
<style type="text/css">
xanh lá cây khi “focus”
a:link {color: #FF0000}
chuyển đển link này
a:focus {color: #00FF00}
</style>
</head>
<body>
<p>
<b><a href=“#" target="_blank">This is a link</a></b></p>
</body>
</html>
PCS: Pseudo class (:lang)
• :lang pseudo-class: Lớp ảo cho phép định nghĩa style cho các ngôn ngữ
khác nhau trong tài liệu
• Chú ý: Lớp ảo này không hoạt động với IE
• Ví dụ:
<html>
<head>
<style type="text/css">
q:lang(en) {quotes: “(" “)"; color: red;}
:lang(vi) {color: blue}
</style>
</head>
<body>
<p lang=“vi”>Lớp ảo <q lang=“en”> :lang pseudo-class </q> cho phép định
nghĩa style cho các ngôn ngữ khác nhau </p>
</body>
</html>
PCS: Pseudo element
• CSS pseudo-element: Dùng để thêm vào các hiệu
ứng đặc biệt cho một số bộ chọn. Cho phép chọn và
định dạng cho các phần văn bản đặc biệt trong tài liệu
(phần không được hỗ trợ bởi các thành phần của
document tree)
• Cú pháp
– Cú pháp của pseudo-element
selector:pseudo-element {property: value}
– Kết hợp CSS class với pseudo-element
selector.CSS-class:pseudo-element {property: value}
letter)
• :first-leter pseudo element: Phần tử giả dùng để quy định style cho ký tự đầu
tiên của paragraph
• Ví dụ
<html>
<head>
<style type="text/css">
p:first-letter { color: #ff0000; font-size:xx-large }
</style>
</head>
<body>
<p>
You can use the :first-letter pseudo-element to add a special effect to the first letter
of a text!
</p>
</body>
</html>
PCS: Pseudo element (:first-letter)
Một số thuộc tính của :first-leter pseudo element
font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align
text-transform
line-height
float
clear
PCS: Pseudo element (:first-line)
• :first-line pseudo element: Phần tử giả dùng để quy định style cho dòng
đầu tiên của paragraph
• Ví dụ
<html>
<head>
<style type="text/css">
p:first-line { color: #ff0000; font-variant: small-caps }
</style>
</head>
<body>
<p>
You can use the :first-line pseudo-element to add a pecial
effect to the first line of a text!
</p>
</body>
</html>
PCS: Pseudo element (:first-line)
Một số thuộc tính của :first-line pseudo element
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
PCS: Pseudo element (:before)
• :before pseudo element: Phần tử giả dùng để chèn một vài nội dung
(content) phía trước nội dung của một thành phần
• Chú ý: Phần tử giả này không hoạt động với IE
• Ví dụ
<html>
<head>
<style type="text/css">
h1:before { content: url(smiley.gif) }
</style>
</head>
<body>
<h1>This is a header</h1>
<p> The :before pseudo-element can be used to insert some content before
the content of an element.</p>
</body>
</html>
PCS: Pseudo element (:after)
• :after pseudo element: Phần tử giả dùng để chèn một
vài nội dung (content) phía sau nội dung của một thành
phần
• Chú ý: Phần tử giả này không hoạt động với IE
• Ví dụ:
<head>
<style type="text/css">
h1:after { content: url(smiley.gif) }
</style>
</head>
<body>
<h1>This is a header</h1>
<p> The :after pseudo-element can be used to insert some
content after the content of an element.
</p>
</body>
Một số đơn vị đotrong CSS
Đơn vị đo lường (Measurements)
Đơn vị
Mô tả
%
phần trăm
in
inch
cm
centimeter
mm
millimeter
em
1em = kích thước font chữ hiện tại
ex
pt
1ex = 1 x-height của font (x-height = chiều cao
ký tự ‘x’)
point (1 pt = 1/72 inch)
pc
pica (1 pc = 12 points)
px
pixel (1 điểm trên màn hình)
Một số đơn vị đo trong CSS
Đơn vị về màu sắc (Colors)
Đơn vị
Mô tả
color_name
Tên màu (ví dụ: red, green, blue…)
rgb(x,x,x)
Giá trị RGB (ví dụ: rgb(255,0,0) Màu đỏ)
rgb(x%, x%, x%)
Giá trị RGB theo phần trăm
#rrggbb
Một số ở dạng thập lục (VD: #FF0000 màu đỏ)