C04_CSS - WordPress.com
Download
Report
Transcript C04_CSS - WordPress.com
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ề
màu sắc, khoảng cách, vị trí, biên, lề, con trỏ.
3
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
Phân loại : Có 3 loại
◦ Inline style
◦ Internal 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 <head> (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
Á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:
<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>
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
8
Áp dụng CSS vào trang HTML
Dùng inline style:
Ví dụ:
<BODY>
<P style = “color:aqua ; font-Style:italic; textAlign:center”>
This paragraph has an inline style applied to it
<P> This paragraph is displayed in the default style.
<P> Can you see the <SPAN style = color:red>
difference </SPAN> in this line
</BODY>
9
Áp dụng CSS vào trang HTML
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.
Làm cho các đoạn mã dư thừa, khó bảo trì
10
Á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 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
trong cặp tag <head>
◦ 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
Áp dụng CSS vào trang HTML
Cách 2: Nhúng style sheet (Internal Style)
Cú pháp:
<Head>
<Style TYPE=”text/css”>
TagName{property1:v1;property2:v2 …}
(lặp lại cho mỗi tag có thuộc tính cần định dạng)
</Style>
</Head>
◦
.
12
Áp dụng CSS vào trang HTML
<html>
<head>
<style type="text/css">
B {text-transform: lowercase; font-size:18px}
P { border: silver thick solid; backgroundcolor:turquoise;}
</style>
</head>
<body>
<p>Mỗi đoạn sẽ có viền
<b>Đậm</b> màu bạc
</p>
</body>
</html>
13
Áp dụng CSS vào trang HTML
<HTML>
<HEAD>
<STYLE TYPE=”text/css”>
H1,H2 { color: limegreen; font-family: Arial }
</STYLE>
</HEAD>
<BODY>
<H1>This is the H1 element</H1>
<H2>This is the H2 element</H2>
<H3>This is the H3 element with its default style as
displayed in the browser</H3>
</BODY>
</HTML>
14
Áp dụng CSS vào trang HTML
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:
h1, h2, h3 {
margin-left: 10px;
font-size: 150%;
...
}
15
Á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 {
color:#0000FF;
text-transform:uppercase; }
16
Áp dụng CSS vào trang HTML
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.
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
Á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ú pháp:
<Head>
<Link Rel=StyleSheet Type=”text/css”
tập tin.css”>
</Head>
Href=”tên
18
Áp dụng CSS vào trang HTML
Ví dụ:
<html>
<head>
<title>Ví dụ</title>
<link rel=”stylesheet” type=”text/css”
href=“style.css” />
</head>
<body>
<p> Welcome To WallPearl’s Blog </p>
</body>
</html>
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 }
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)
20
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).
selector {property: value}
Nếu nhãn có nhiều từ nên đặt nhãn vào trong
dấu nháy kép
p {font-family: "sans serif"}
Nếu thẻ có nhiều thuộc tính thì các thuộc tính sẽ
được ngăn cách bởi dấu (;).
p {text-align:center;color:red}
21
Cú pháp của CSS
Khi thẻ chọn có nhiều thuộc tính thì nên để mỗi
thuộc tính ở trên một dòng riêng biệt.
p{
text-align: center;
color: black;
font-family: arial
}
22
Cú pháp của CSS
Phần tử chọn Selector: Các đối tượng mà chúng
ta sẽ áp dụng các thuộc tính trình bày.
Các loại
◦
Dùng thẻ HTML
◦
Sử dụng CLASS
◦
Sử dụng ID
23
Cú pháp của CSS
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á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
Cú pháp của CSS
25
Cú pháp của CSS
Phần tử chọn Selector HTML
Body {color: black} /*Phần chữ trong thẻ body sẽ có
màu đen*/
p {text-align: center} /*tất cả các thẻ <P> 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
Cú pháp của CSS
Dùng CLASS làm phần tử chọn
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 mỗi lớp vào một vị trí
cần thiết trên trang web. Có 2 cách dùng:
◦
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ú pháp của CSS
Dùng CLASS làm phần tử chọn
Cú pháp:
<STYLE>
.ClassName{property1:v1; property2:v2;…}
</STYLE>
◦ Trong phần <Body>, đánh dấu phần nằm trong lớp.
Cú pháp:
<TagName Class=”ClassName”>
Nội dung
</TagName>
28
Cú pháp của CSS
Dùng CLASS làm phần tử chọn
Ví dụ:
<HTML>
<HEAD>
<STYLE>
.water{color:blue}
.danger{color:red}
</STYLE>
</HEAD>
<BODY>
<P class=“water”>test water
<P class=“danger”>test danger
</BODY></HTML>
29
Cú pháp của CSS
Dùng CLASS làm phần tử chọn
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:
<style type ="text/css">
.trai {text-align: left}
.phai {text-align: right}
.giua {text-align: center}
</style>
30
Cú pháp của CSS
Dùng CLASS làm phần tử chọn
Tiếp theo, trong trang HTML sử dụng như sau:
<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 sai:
<p class="trai" class="phai">Đây là đoạn định nghĩa
sai</p>
<td class="trai">Ví dụ này không hoạt động</td>
31
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:
<p class="giua">Đoạn này canh lề giữa.</p>
<table border=1 width =500>
<tr><td class="giua">Câu này canh giữa. </td>
</tr>
</table>
33
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 }
<h3 class="warning highlight">Danger</h3>
<p class="highlight">An important point.</p>
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:
<style>
TagName#IDName{property1:v1;
property2:v2;…}
</style>
◦ Trong tag Body nhập cú pháp:
<TagName ID=IDName>
Nội dung
</TagName>
38
Cú pháp của CSS
Dùng ID làm phần tử chọn
Ví dụ :
<HTML>
<HEAD><TITLE> ID Selectors</TITLE>
<STYLE>
p#control {color: red;font-weight:bold; text-indent:18pt}
p{color: magenta;text-indent:0pt}
</STYLE>
</HEAD>
<BODY>
<p id=control> A hardware device that allows the user to make electronic
copies of graphics or text.
<p>Short for picture element. A pixel refers to the small dots that make up
an image on the screen.
</BODY></HTML>
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ẻ
đầu tiên có ID là xyz:
#xyz {color: green}
Khi sử dụng:
<p id="xyz">Đoạn văn bản</P>
◦
Các thẻ khác không sử dụng được
<p id = “xyz”>Đoạn văn bản </p> không có hiệu lực
41
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
Selectors)
Được sử dụng đối với các kiểu liên kết, ngoài ra
còn được sử dụng cho các mục đích khác như
bổ sung hiệu ứng cho các thẻ.
Sức mạnh của loại phần tử này sẽ được phát
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 liên
kết mà có thể áp dụng cho một trang.
43
Cú pháp của CSS
Các phần tử chọn CLASS giả lập (Pseudo Class
Selectors)
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
Cú pháp của CSS
Các phần tử chọn CLASS giả lập (Pseudo Class
Selectors)
Có thể viết các luật cho mỗi phần tử chọn lớp và
chúng có thể ứng dụng đến toàn bộ các liên kết
Có thể kết hợp các phần tử chọn trong một lớp,
lớp này cho phép tạo ra kiểu đa liên kết.
a.main:link
a.subnav:link
a.footer:link
45
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:
value}
a.red:visited {color: #FF0000}
<a class="red" href=“www.vimaru.edu.vn">CSS
Syntax</a>
47
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</a>
49
Cú pháp của CSS
50
Cú pháp của CSS
:first-line Pseudo-element
<style type="text/css">
p {font-size: 12pt}
p:first-line {color: #0000FF; font-variant: small-
caps}
</style>
◦ <p>Some text that ends up on two or more
lines</p>
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}
<p>The first words of an article.</p>
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}
<p class="article">A paragraph in an
article</p>
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}
<p>The first words of an article</p>
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
nháy kép:
◦
h1:after {content: "header note"} Kết quả: Câu
“hearder note” xuất hiện sau h1
56
Cú pháp của CSS
Descendant Selectors
Trong một số trường hợp cần áp dụng luật cho
thẻ nằm trong một thẻ khác -> sử dụng
descendant selector
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
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
Tính thừa kế
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 } ...
◦
<p>Sample paragraph with <b>bold</b> text.</p>
59
Cú pháp của CSS
Giải quyết xung đột
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
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
có nội dung như sau (3):
p { color:#333; text-align:left; width:500px }
Trong thẻ <style> giữa thẻ <head> cũng có một
đoạn CSS liên quan (2):
p { background-color:#FF00FF; text-align:right;
width:100%; height:150px }
Trong phần nội dung trang web đó cũng có sử
dụng CSS nội tuyến (1):
<p style=”height:200px; text-align:center;
border:1px solid #FF0000; color:#000” }
63
Cú pháp của CSS
Ví dụ: Từ khóa !important
Khi thực thi CSS trình duyệt sẽ đọc hết tất cả các
nguồn chứa style rồi sẽ tổng hợp lại vào một
CSS ảo và nếu có sự trùng lắp các thuộc tính
CSS thì nó sẽ lấy thuộc tính CSS có mức ưu tiên
cao hơn.
Như ví dụ trên chúng ta sẽ thấy CSS cuối cùng
mà phần tử p nhận được là:
p { background-color:#FF00FF; width:100%;
height:200px; text-align:center; border:1px solid
#FF0000; color:#000 }
64
Cú pháp của CSS
Ví dụ: Từ khóa !important để giải quyết
p {width:500px; text-align:left !important; color:#333
!important }
p { background-color:#FF00FF; width:100%; height:150px
!important; text-align:right; }
<p style=”text-align:center; height:200px; border:1px solid
#FF0000; color:#000” }
Phần CSS sẽ tác động lên thuộc tính p là:
p { background-color:#FF0000; width:100%; height:150px
!important; text-align:left !important; border:1px solid
#FF0000; color:#333 !important }
Lưu ý: Cùng một thuộc tính cho một selector thì nếu cả
hai thuộc tính đều đặt !important thì cái sau được lấy.
65
Cú pháp của CSS
Chiều dài và đơn vị đo
in, cm, mm: inches, centimeters và millimeters.
pt, pc: points và picas. 72 points bằng một inch và một
pica bằng 12 point
em: liên quan đến kích thước font và lấy độ rộng của kí
tự “M”
ex: liên quan kích thước font và có chiều cao của kí tự
‘x’
px: pixels.
66
Background
Màu nền (thuộc tính background-color):
Thuộc tính background-color giúp định màu nền
cho một thành phần trên trang web.
Các giá trị mã màu của background-color cũng
giống như color nhưng có thêm giá trị
transparent để tạo nền trong suốt.
Ví dụ:
body { background-color:cyan}
h1 { background-color:red }
h2 { background-color:orange}
67
CÁC THUỘC TÍNH ĐỊNH DẠNG
Background
Ảnh nền (thuộc tính background-image):
Màu nền : background-color
body { background-color:cyan }
h1 { background-color:red }
Ảnh nền: background-image
background-image:url(logo.jpg)
Ví dụ:
body { background-image:url(logo.png) }
h1 { background-color:red }
h2 { background-color:orange }
p { background-color: FDC689 }
68
Background
Ví vụ: file background.css và file html
body {
background-image:url(logo.jpg)
}
h2 { background-color:orange }
p { background-color: FDC689 }
<html>
<head>link rel="stylesheet" type="text/css" href="background.css"
/></head>
<body>
<p>Welcome To MyWebsite </p>
<h2>Hạnh phúc và thành đạt trong cuộc sống</h2>
</body> </html>
69
Background
Lặp lại ảnh nền (thuộc tính background-repeat):
Thuộc tính này có 4 giá trị:
◦
◦
◦
◦
repeat-x: Chỉ lặp lại ảnh theo phương ngang.
repeat-y: Chỉ lặp lại ảnh theo phương dọc.
repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc
định.
no-repeat: Không lặp lại ảnh.
Ví dụ:
body { background-image:url(logo.png);
background-repeat:no-repeat;
}
70
Background
Khóa ảnh nền: background-attachment
Thuộc tính này có 2 giá trị:
◦
◦
scroll: Ảnh nền sẽ cuộn cùng nội dung trang web.
fixed: Cố định ảnh nền (mờ bất động).
Định vị ảnh nền: background-position
Mặc định ảnh nền nằm ở góc trên, bên trái
màn hình.
Background-position:5cm 2cm
Ảnh được định vị 5cm từ trái và 2cm từ
trên.
71
Background
Định vị ảnh nền (thuộc tính backgroundposition):
Background-position sẽ dùng một cặp 2 giá trị để
biểu diễn tọa độ đặt ảnh nền.
Có khá nhiều kiểu giá trị cho thuộc tính position.
Như đơn vị chính xác như centimeters, pixels,
inches,… hay các đơn vị qui đổi như %, hoặc
các vị trí đặt biệt như top, bottom, left, right.
72
Background
Thuộc tính background rút gọn
Ví dụ: Chúng ta có thể nhóm lại đoạn CSS sau”
◦ background-color:transparent;
◦ background-image: url(logo.png);
◦ background-repeat: no-repeat;
◦ background-attachment: fixed;
◦ background-position: right bottom;
Rút gọn:
background:transparent url(logo.png) no-repeat fixed
right bottom;
73
THIẾT LẬP VĂN BẢN
74
THIẾT LẬP VĂN BẢN
Đặt màu cho một đoạn văn bản
Để đặt màu cho một đoạn văn bản chúng ta có
thể dùng thuộc tính: color: #mã màu;
p{
color: #333333;
}
75
THIẾT LẬP VĂN BẢN
Đặt màu nền cho đoạn văn bản.
Bạn có thể đặt màu nền (background) cho đoạn
văn bản bằng thuộc tính background-color: #mã
màu;
p{
background-color: #FFFF00;
}
76
THIẾT LẬP VĂN BẢN
Căn chỉnh khoảng cách giữa các ký tự.
Khoảng cách giữa các ký tự trong một đoạn văn
bản có thể được tăng hoặc giảm bởi thuộc tính
letter-spacing: khoảng cách;
h3 {
letter-spacing: 2em;
}
h1 {
letter-spacing: -3em;
}
77
THIẾT LẬP VĂN BẢN
Căn chỉnh khoảng cách giữa các dòng.
Thuộc tính line-height: khoảng cách; sẽ giúp
bạn căn chỉnh khoảng cách giữa các dòng trong
một đoạn văn bản.
p{
line-height: 150%; // line-height: 15px;
}
78
THIẾT LẬP VĂN BẢN
Dóng hàng
Để gióng hàng cho một đoạn văn bản chúng ta
sẽ dùng thuộc tính text-align: vị trí;
p{
text-align: left; /* left | center | right */
}
79
THIẾT LẬP VĂN BẢN
Trang hoàng thêm cho đoạn văn bản.
Một đường gạch chân hoặc đường gạch ngang
dòng văn bản sẽ làm cho đoạn văn bản của bạn
thêm sinh động. Để tô điểm thêm cho đoạn văn
bản chúng ta sẽ dùng thuộc tính textdecoration: thuộc tính;
h3 { text-decoration: underline; /* Gạch chân */}
h2 { text-decoration: line-through; /* Gạch ngang */}
h1 { text-decoration: overline; /* kẻ trên */}
80
THIẾT LẬP VĂN BẢN
Chỉnh vị trí của đoạn văn bản (indent).
Thuộc tính text-indent: vị trí; sẽ căn chỉnh vị trí
của dòng văn bản theo chiều ngang.
h1 {
text-indent: -2000px; /* text-indent: 30px; */
}
81
THIẾT LẬP VĂN BẢN
Điều kiển các ký tự trong một đoạn văn bản.
Bạn có thể điều khiển toàn bộ đoạn văn bản là
chữ hoa hay chữ thường bởi thuộc tính texttransform: kiểu chữ;
p.uppercase { text-tranform: uppercase;}
p.lowercase { text-tranform: lowercase; }
p.capitalize { text-tranform: capitalize; }
82
THIẾT LẬP VĂN BẢN
Đặt hướng cho đoạn văn bản.
Hướng của đoạn văn bản có thể từ trái qua phải
hay từ phải qua trái chúng ta có thể điều khiển
bởi thuộc tính direction: hướng;
div.rtl { direction: rtl; /* Right to left */ }
div.ltr { direction: ltr; /* Left to right */ }
83
THIẾT LẬP VĂN BẢN
Tăng khoảng cách giữa các từ.
Khoảng cách giữa các từ có thể được tăng bởi
thuộc tính word-spacing: khoảng cách;
word-spacing: 30px;
84
THIẾT LẬP VĂN BẢN
Làm mất tác dụng của đường bao của một thẻ
HTML.
Để làm mất tác dụng đường bao của một thẻ
HTML chúng ta dùng thuộc tính white-space:
giá trị;
p{
white-space: nowrap;
}
Thuộc tính white-space sẽ làm cho toàn bộ
đoạn văn bản ở trên một dòng.
85
THIẾT LẬP FONT
86
THIẾT LẬP FONT
87
THIẾT LẬP FONT
Đặt font cho đoạn văn bản.
Sử dụng thuộc tính font-family:
p{
font-family: Arial, Tahoma, Verdana, sans-serif;
}
Thông thường bạn cần phải khai báo họ của font
ở cuối (trong ví dụ trên thì sans-serif là chỉ tới 1
họ font) để trong trường hợp máy của người
duyệt Web không có các font như mình đã đặt thì
nó sẽ lấy font mặc định của họ font trên.
88
THIẾT LẬP FONT
Đặt đoạn văn bản sử dụng font nhãn caption.
p.caption {
font: caption;
}
89
THIẾT LẬP FONT
Đặt kích thước font cho đoạn văn bản.
Sử dụng thuộc tính font-size:
h1 {
font-size: 20px;
}
h3 {
font-size: 12px;
}
90
THIẾT LẬP FONT
Định lại kích thước font bằng thuộc tính fontsize-ajust:
p {
font-size-ajust: 0.60;
}
91
THIẾT LẬP FONT
Đặt kiểu font cho đoạn văn bản.
Chữ đậm, chữ nghiêng,... được đặt với thuộc
tính font-style:
p {
font-style: italic; /* normal | italic | oblique */
}
92
THIẾT LẬP FONT
Đặt kiểu font cho đoạn văn bản.
Chữ đậm, chữ nghiêng,... được đặt với thuộc
tính font-style:
p { font-style: italic; /* normal | italic | oblique */}
Muốn hiển thị font ở dạng small-caps hoặc ở
dạng normal thì chúng ta sẽ sử dụng thuộc tính
font-variant. Thuộc tính này có hai giá trị normal
và small-caps
p { font-variant: normal; /* normal | small-caps */}
93
THIẾT LẬP FONT
Đặt độ đậm nhạt của font.
Dùng thuộc tính font-weight:. Chúng ta có thể
đặt giá 3 loại giá trị cho thuộc tính này 1.
normal(bình thường), 2. bold(đậm), 3. 300(đặt
dạng số)
h3 {
font-weight: bold;
}
94
THIẾT LẬP FONT
Khai báo các thuộc tính font ở dạng
shorthand.
p{
font: italic small-caps 900 12px arial;
}
95
BOX
MODEL
– MÔ HÌNH HỘP
2.5. Box
Model
Box model (mô hình hộp) mô tả cách mà CSS định dạng khối không gian
bao quanh một thành phần. Gồm padding (vùng đệm), border (viền) và
margin (canh lề) và các tùy chọn.
p{width:200px; margin:30px 20px; padding:20px 10px; border:1px solid
#000; text-align:justify }
<p> Trong CSS, box model (mô hình hộp) mô tả cách mà CSS định dạng
khối không gian bao quanh một thành phần. </p>
96
© Dương Thành Phết-www.thayphet.net
Khoa CNTT Trường CĐ CNTT TP.HCM
96
BOX
MODEL
– MÔ HÌNH HỘP
2.6. Margin
& Padding
Thuộc tính margin:
Dùng canh lề trang hay thành phần này với thành phần
khác
Cú pháp như sau:
margin:<margin-top>|<margin-right>|<marginbottom>|<margin-left>
Hoặc:
margin:<value1>|< value2>
body { margin:80px 30px 40px 50px; border:1px solid #FF0000 }
#box1 { margin:50px 30px 20px 40px; border:1px solid #00FF00 }
97
BOX
MODEL
– MÔ HÌNH HỘP
2.6. Margin
& Padding
Thuộc tính padding:
Dùng để định khoảng cách giữa phần nội dung và viền của
một đối tượng
Cú pháp: Tương tự margin.
Padding:<padding-top>|<padding-right>|<paddingbottom>|<padding-left>
98
Mô hình hộp (Box Model)
Ví dụ: Chúng ta có một đoạn HTML sau:
<p> Trong CSS, box model (mô hình hộp) mô tả
cách mà CSS định dạng khối không gian bao
quanh một thành phần.
</p>
Phần CSS :
p { width:200px;
margin:30px 20px;
padding:20px 10px;
border:1px solid #000;
text-align:justify }
99
BOX
MODEL
– MÔ HÌNH HỘP
2.7. Khung
viền - Border
Thuộc tính border-width
Quy định độ rộng cho viền của một đối tượng. Có các giá trị: thin
(mảnh), medium (vừa), thick (dày), hay là một giá trị đo cụ thể như pixels.
Thuộc tính border-color
Quy định màu viền cho một đối tượng. Có giá trị là đơn vị màu.
Thuộc tính border-style
Quy định kiểu viền thể hiện của một đối tượng. Có 8 kiểu viền
tương ứng với 8 giá trị: dotted, dashed, solid, double, groove, ridge, inset
và outset.
h2 { border-width:thick; border-color:#CCC; border-style:dotted }
p { border-width:5px; border-color:#FF00FF; border-style:double
10
0
Mô hình hộp (Box Model)
Chọn kiểu đường bao
Để chọn kiểu cho đường bao
chúng ta sẽ đặt lần lượt các giá
trị cho thuộc tính outline-style:
p{
outline-style: dotted;
}
Để cho gọn chúng ta cũng có
thể viết các giá trị của thuộc
tính Outline dưới dạng
shorthand như sau:
div.outline {
outline: 1px solid #000;
}
STT
outline-style
1
none
2
hidden
3
dotted
4
dashed
5
solid
6
double
7
groove
8
ridge
9
inset
10
outset
10
1
Mô hình hộp (Box Model)
Thuộc tính border style
Xác định kiểu đường của border
Tham chiếu kiểu giá trị <border-style>
với giá trị sau:
◦ none: No border.-> border-width:0
◦ dotted: đường chấm
◦ dashed: gạch nhỏ
◦ solid: đường đơn.
◦ double: đôi. Khoảng cách giữa 2 đường
và độ dày của chúng bằng giá trị border-width
◦ groove, ridge
◦ Inset, outset
STT
border-style
1
none
2
hidden
3
dotted
4
dashed
5
solid
6
double
7
groove
8
ridge
9
inset
10
outset
10
2
Mô hình hộp (Box Model)
Đặt chiều rộng cho đường viền (border)
Nếu muốn đặt chiều rộng của đường viền chúng
ta sẽ đặt giá trị cho thuộc tính border-width:
div.borerwidth {
border-width: 2px;
}
1
2
Giá trị
thin
medium
3
4
thick
length
STT
10
3
Mô hình hộp (Box Model)
Thuộc tính màu của đường viền
Để đặt màu cho đường viền chúng ta sẽ đặt
thông số màu cho thuộc tính border-color:
div.color {
border-color: #CC0000;
}
10
4
Mô hình hộp (Box Model)
Thuộc tính border
Ví dụ 1:
p{
border: solid red
}
p{
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
10
5
Mô hình hộp (Box Model)
Thuộc tính border
Ví dụ 2: định viền cho 3 thành phần h1, h2, p
như sau:
h1 {
border-width:thin;
border-color:#FF0000;
border-style:solid
}
h2 {
border-width:thick;
border-color:#CCC;
border-style:dotted }
p { border-width:5px; border-color:#FF00FF;
border-style:double }
10
6
Mô hình hộp (Box Model)
STT
Phía
1
top
2
right
3
bottom
4
left
Thuộc tính
border-top-color:
border-top-width:
border-top-style:
border-right-color:
border-right-width:
border-right-style:
border-bottom-color:
border-bottom-width:
border-bottom-style:
border-left-color:
border-left-width:
border-left-style:
10
7
BOX MODEL – MÔ HÌNH HỘP
Thuộc tính width:
Quy định chiều rộng cho một thành phần web.
p { width:700px; }
Thuộc tính max-width:
Quy định chiều rộng tối đa cho một thành phần web.
Thuộc tính min-width:
Quy định chiều rộng tối thiểu cho 1 thành phần web.
Thuộc tính height:
Quy định chiều cao cho một thành phần web.
p { height:300px }
Thuộc tính max-height:
Quy định chiều cao tối đa cho một thành phần web.
Thuộc tính min-height:
Quy định chiều cao tối thiểu cho 1 thành phần web.
108
© Dương Thành Phết-www.thayphet.net
Khoa CNTT Trường CĐ CNTT TP.HCM
10
8
CÁC THUỘC
TÍNHTÍNH
KHÁC KHÁC
CÁC
THUỘC
3.1. Float & Clear
3.2. Position
3.3. Layers
3.4. Web Standards
10
9
FLOAT
CLEAR
3.1. Float &
& Clear
Thuộc tính float
Dùng để cố định một thành phần web về bên trái hay bên phải không gian
bao quanh nó. Là một thuộc tính rất cần thiết khi dàn trang, hiển thị văn bản
thành cột, hay thực hiện việc định vị trí ảnh và text như kiểu text wrapping
của Word.
Thuộc tính float có 3 giá trị:
+ Left: Cố định phần tử về bên trái.
+ Right: Cố định phần tử về bên phải.
+ None: Bình thường
Khoa CNTT Trường CĐ CNTT TP.HCM
11
0
Lược đồ vị trí trong CSS
Thuộc tính float
Ví dụ: thực hiện float ảnh logo sang trái để phần
nội dung bên dưới tràn lên nằm cạnh logo.
#logo { float:left; }
11
1
Lược đồ vị trí trong CSS
Thuộc tính float
Ví dụ: dùng float để chia 2 cột văn bản.
.column1
{
width:45%;
float:left;
text-align:justify;
padding:0 20px;
}
.column2
{
border-right:1px
solid #000
}
11
2
Lược đồ vị trí trong CSS
Thuộc tính clear:
Thuộc tính clear là một thuộc tính thường được
gán vào các phần tử liên quan tới phần tử đã
được float để quyết định hướng xử sự của phần
tử này.
Thuộc tính clear có tất cả 4 thuộc tính:
◦
◦
◦
◦
left (tràn bên trái),
right (tràn bên phải),
both (không tràn) và
none.
11
3
LƯỢC
ĐỒ VỊ TRÍ
3.2. Position
Nguyên lý hoạt động của position
Cửa sổ trình duyệt giống như một hệ tọa độ và với position có thể đặt một
đối tượng web ở bất cứ vị trí nào trên hệ tọa độ này
114
© Dương Thành Phết-www.thayphet.net
Khoa CNTT Trường CĐ CNTT TP.HCM
11
4
Lược đồ vị trí trong CSS
Positioning
Giả sử chúng ta muốn định vị một ảnh ở vị trí
70px cách đỉnh và 90px từ bên trái tài liệu,
chúng ta sẽ viết CSS như sau:
img { position:absolute; top:70px; left:90px }
11
5
LƯỢC
ĐỒ VỊ TRÍ
3.2. Position
Absolute position:
Là sự định vị mà trong đó các thành phần được định vị
không để lại bất cứ một khoảng trống nào trong tài liệu.
Các đối tượng đã định vị tuyệt đối sẽ dùng kết hợp với
các thuộc tính top, left, right, bottom để xác định tọa độ.
Ví dụ đặt bốn ảnh ở bốn góc.
#logo1 { position:absolute; top:50px; left:70px }
#logo2 { position:absolute; top:0; right:0 }
#logo3 { position:absolute; bottom:0; left:0 }
#logo4{position:absolute; bottom:70px; right:50px }
11
6
Lược đồ vị trí trong CSS
Absolute positioning
11
7
Lược đồ vị trí trong CSS
Absolute positioning
#branding {width: 700px; height:100px; position: relative; }
#branding .tel {position: absolute; right:20px; bottom:
10px; text-align: right;}
<div id="branding">
<p class="tel">Tel: 084 031 3735725</p>
</div>
11
8
LƯỢC
ĐỒ VỊ TRÍ
3.2. Position
Relative position
Định vị tương đối cho một thành phần là sự định vị
được tính từ vị trí gốc trong tài liệu. Các thành phần đã
được định vị tương đối sẽ để lại khoảng không trong tài
liệu, sẽ nhận giá trị position là relative.
Chúng ta hãy làm lại ví dụ trên nhưng thay absolute
thành relative. Ví dụ ghi nhận lại vị trí 4 ảnh logo lúc áp
dụng thuộc tính position là none, absolute và relative rồi
rút ra nhận xét.
119
Lược đồ vị trí trong CSS
Relative positioning
Một box ở vị trị relative được sinh ra khi
position:relative. Sự dịch chuyển so với normal
flow được xác định bởi các thuộc tính 'top',
'bottom', 'left', và 'right‘.
#myBox {position: relative;left: 20px;top: 20px;}
12
0
Using CSS Positioning
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitiona
l.dtd">
<html>
<head><title> Positioning </title>
<style type="text/css">
#apples {
position: fixed;
top: 20px;
left: 10px;
width: 200px;
padding: 10px;
text-align: center;
background-color: #ccc;
border:1px dashed black;
}
12
1
Using CSS Positioning
#oranges {
position: absolute;
top: 20px;
left: 10px;
width: 200px;
padding: 10px;
text-align: center;
background-color: #333;
color: #fff;
border: 3px solid #999;
}
#container {
width:400px;
height:200px;
position:absolute;
left:200px;
top:200px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="container">
<div id="apples">APPLES</div>
<div id="oranges">ORANGES</div>
</div>
</body>
</html>
12
2
Layers
Cách đặt các thành phần web ở các lớp khác
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.
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.
12
3
Layers
Ví dụ sau chúng ta sẽ đặt 5 bức ảnh logo ở 5 lớp.
#logo1 { position:absolute; top:70px; left:50px; zindex:1 }
#logo2 { position:absolute; top:140px; left:100px;
z-index:2 }
#logo3 { position:absolute; top:210px; left:150px;
z-index:3 }
#logo4 { position:absolute; top:280px; left:200px;
z-index:4 }
#logo5 { position:absolute; top:350px; left:250px;
z-index:5 }
12
4
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;
}
#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;
}
12
5
Layering
The z-index property specifies the layers when elements overlap.
12
6
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 :
<p>Danh Sách Các Tỉnh, Thành Phố Của Việt
Nam</p>
<ul>
<li>Hà Nội</li>
<li>TP. Hồ Chí Minh</li>
<li>Đà Nẵng</li> <li>Thừa Thiên Huế</li> <li>Khánh
Hòa</li>
<li>Quãng Ninh</li>
<li>Tiền Giang</li> </ul>
12
7
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
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.
12
8
Class & ID
Nhóm các phần tử với class :
<p>Danh Sách Các Tỉnh, Thành Phố Của Việt Nam</p>
<ul>
<li class=”tp”>Hà Nội</li>
<li class=”tp”>TP. Hồ Chí Minh</li>
<li class=”tp”>Đà Nẵng</li>
<li class=”tinh”>Thừa Thiên Huế</li>
<li class=”tinh”>Khánh Hòa</li> <li class=”tinh”>Quãng
Ninh</li>
<li class=”tinh”>Tiền Giang</li>
</ul>
12
9
Class & ID
CSS tương ứng :
li.tp { color:FF0000 }
li.tinh { color:0000FF }
13
0
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 đỏ
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.
Để giải quyết vấn đề này chúng ta sẽ sử dụng
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.
13
1
Class & ID
Đoạn HTML của chúng ta bây giờ sẽ là :
<p>Danh Sách Các Tỉnh, Thành Phố Của Việt Nam</p>
<ul>
<li id=”hanoi”>Hà Nội</li>
<li id=”hcmc”>TP. Hồ Chí Minh</li>
<li id=”danang”>Đà Nẵng</li>
<li class=”tinh”>Thừa Thiên Huế</li>
<li class=”tinh”>Khánh Hòa</li>
<li class=”tinh”>Quãng Ninh</li>
<li class=”tinh”>Tiền Giang</li>
</ul>
13
2
Class & ID
Và đoạn CSS cần dùng sẽ là :
#hanoi { color:#790000 }
#hcmc { color:#FF0000 }
#danang { color:#FF00FF }
.tinh { color:#0000FF }
13
3
Thẻ
DIVUp
và Content
SPAN Areas
Setting
Chia văn bản thành các khối, có chung một định
dạng
<DIV> chia văn bản thành một khối bắt đầu từ một dòng
mới, có thể nhóm một hoặc nhiều khối phần tử.
<SPAN> tách khối nhưng không bắt đầu từ một dòng
mới, dùng để nhóm một khối phần tử
Cú pháp:
<DIV>Nội dung của khối bắt đầu từ một dòng mới
</DIV>
<SPAN>Nội dung của khối trong 1 dòng </SPAN>
13
4
Thẻ
DIVUp
và Content
SPAN Areas
Setting
Ví dụ
<body>
<div id="header">
Header content goes here.
</div>
<div id="bodyCopy">
Body copy goes here.
</div>
<div id="footer">
Footer content goes here.
</div>
</body>
13
5
Thẻ
DIVUp
và Content
SPAN Areas
Setting
DIV + ID
• Khi sử dụng tag div để nhóm các phần tử, bạn cần
thêm thuộc tính id cho mỗi nhóm.
#header {border: 1px;}
#bodyCopy {font-family: Verdana; font-size: 12pt;}
#footer {font-size: 10pt;}
13
6
Thẻ DIV và SPAN
SPAN + CLASS
Ví dụ:
<p>Không có gì quý hơn độc lập, tự do.</p>
Yêu cầu ở đây là chúng ta hãy dùng CSS tô đậm
2 từ độc lập, tự do.
Để giải quyết vấn đề này, chúng ta sẽ thêm thẻ
<span> vào đoạn HTML như sau:
<head>
<p>Không có gì quý hơn <span class=”nhanmanh”>độc
lập</span>, <span class=”nhanmanh”>tự do</span>
CSS cho yêu cầu trên:
.nhanmanh { font-weight:bold }
13
7
Thẻ DIV và SPAN
một kiểu Bubble đơn giản
1. Định dạng HTML
Ví dụ 4: Style
<div class="bubblewrapper">
<div class="comment">
Ví dụ của một kiểu bubble đơn giản, các bạn có thể ứng
dụng chúng vào ngay trong site của mình. Chúc các bạn
thành công!
</div>
<div class="commentfooter">
<span class="author">Tác giả:</span> <a
href="www.cssyeah.com" target="_blank" title="Tác
giả">CSSYeah.com</a>
</div>
</div>
13
8
Thẻ DIV và SPAN
một kiểu Bubble đơn giản
2. Định dạng CSS
Ta có định dạng CSS của kiểu bublle trên như sau:
Ví dụ 4: Style
#wrapper {
width: 400px;
margin: 0 auto;
padding: 0;
}
div.comment {
margin: 0;
padding: 10px;
background: #E8ECEF;
}
13
9
Thẻ DIV và SPAN
một kiểu Bubble đơn giản
2. Định dạng CSS
Ví dụ 4: Style
div.commentfooter {
padding: 8px 0 0 22px;
background: url(arrow-down.gif) no-repeat 20px 0 #FFFFFF;
}
span.author {
padding-left: 15px;
background: url(author.gif) no-repeat left center;
font-weight: bold;
}
div.commentfooter a {
color: #CC0000;
}
div.commentfooter a:hover,
div.commentfooter a:active {
text-decoration: none;
14
0
Thẻ DIV và SPAN
Ví dụ 5: Căn
bảng vào giữa màn hình
table.center {
width: 780px;
margin-left: auto;//thuộc tính auto là để tự
động canh giữa màn hình
margin-right: auto;
}
14
1
Menu dạng tab
Menu dạng Tab gồm 2 phần:
◦
◦
Phần 1 để chứa các tab P
Phần thứ hai là phần để chứa nội dung của các tab
Ví dụ:
Định dạng cho phần khung của tab như sau:
div #wrapper
{
margin: 50px;
padding: 0;
}
14
2
Menu dạng tab
Có thể dùng một trong ba thẻ <ul>, <ol>, <dl>.
Thường dùng thẻ <ol> bởi vì một lý do nào đó mà
trình duyệt của người xem không tải được CSS từ
Website của bạn thì họ vẫn hiểu được cấu trúc tab
của bạn. Định dạng của phần một như sau
<ol class=”tab”>
<li class=”active”>Trang chủ</li>
<a href=”gioithieu.html” title=”Giới thiệu”>Giới thiệu</a>
<a href=”sanpham.html” title=”Sản phẩm”>Sản phẩm</a>
<a href=”tintuc.html” title=”Tin tức”>Tin tức</a>
<a href=”lienhe.html” title=”Liên hệ”>Liên hệ</a>
</ol>
14
3
Menu dạng tab
Sau đó, định dạng sao cho các tab nằm trên cùng một
hàng và có hình dáng của tab.
ol.tab {
background: url(../dot.gif) repeat-x left bottom; /* ảnh 1px thay thế
border-bottom của <ol>*/
list-style: none;
margin: 0;
padding: 6px 0;
position: relative;
}
ol.tab li {
background: #F2F5FA;
border: 1px solid #D3DDED;
display: inline; /* các thẻ li ở trên một dòng */
margin-right: 5px;
padding: 0;
14
4
Menu dạng tab
Để tab của trang hiện hành có màu khác với những
tab khác, đặt cho tab đó một class là active như
sau:
ol.tab li.active {
background: #FFF;
border-bottom: 1px solid #FFF;
font-weight: bold;
padding: 5px 10px;}
Tiếp theo định dạng cho các link nằm trong thẻ
ol.tab a {
font-weight: bold;
margin: 0;
padding: 5px 10px;}
14
5
Menu dạng tab
Cuối cùng định dạng phần chứa nội dung của mỗi
tab.
div#content {
border: 1px solid #D3DDED;
border-top: none;
padding: 10px;
}
14
6
Kỹ thuật làm chữ hoa đầu dòng (Drop cap)
Drop cap là một trong những typography hay
được dùng trong các tạp chí trên giấy cũng như
các tạp chí điện tử.
Nó thường được dùng ở đầu mỗi bài báo với font
chữ lớn và màu sắc nổi trội.
14
7
Kỹ thuật làm chữ hoa đầu dòng (Drop cap)
1. Cách thứ nhất
Dùng kỹ thuật selectors trong CSS, dùng thuộc
tính :first-letter.
Ví dụ:Ta có định dạng HTML:
<p class="pdropcap">Lorem ipsum dolor sit amet
consectetuer at et Aenean ac dolor. Ligula nulla ac id
pede sit consectetuer ipsum malesuada convallis
habitant. Neque at pellentesque pharetra Aenean
accumsan orci Proin leo tellus eu. Dictumst Integer ut
adipiscing porttitor dolor Morbi ut id lorem auctor. Massa
tellus Morbi enim tellus pede vel suscipit hac sapien
Cras. Cursus velit hendrerit lobortis elit elit sed ut In.</p>
14
8
Kỹ thuật làm chữ hoa đầu dòng (Drop cap)
1. Cách thứ nhất
Dùng kỹ thuật selectors trong CSS, dùng thuộc
tính :first-letter.
Ví dụ:Ta có định dạng HTML:
Định dạng CSS:
p.pdropcap:first-letter {
float: left;
padding: 4px 8px 0 0;
display: block;
color: #336699;
font: 60px/50px Georgia, Times, serif;
}
14
9
Kỹ thuật làm chữ hoa đầu dòng (Drop cap)
2. Cách thứ hai
Trong cách thứ hai này ta sẽ dùng thêm một thẻ
<span class="dropcap"> để bao ký tự chữ hoa
ở đầu dòng
Định dạng HTML:
<p><span class="p1dropcap">N</span>orem ipsum
dolor sit amet consectetuer at et Aenean ac dolor. Ligula
nulla ac id pede sit consectetuer ipsum malesuada
convallis habitant. Neque at pellentesque pharetra
Aenean accumsan orci Proin leo tellus eu. Dictumst
Integer ut adipiscing porttitor dolor Morbi ut id lorem
auctor. Massa tellus Morbi enim tellus pede vel suscipit
hac sapien Cras. Cursus velit hendrerit lobortis elit elit
sed ut In.</p>
15
0
Kỹ thuật làm chữ hoa đầu dòng (Drop cap)
2. Cách thứ hai
Định dạng CSS:
.p1dropcap {
float: left;
padding: 4px 8px 0 0;
display: block;
color: #336699;
font: 60px/50px Georgia, Times, serif;
}
15
1
Trang trí cho danh sách có thứ tự
Chúng ta có mã nguồn HTML như sau:
<ol>
<li>
<p>This is line one</p>
</li>
<li>
<p>Here is line two</p>
</li>
<li>
<p>And last line</p>
</li>
</ol>
15
2
Kỹ thuật tải ảnh trước bằng CSS
Mục đích: Khắc phục tình trạng chờ nạp ảnh lên
trang Web
Đặt toàn bộ các ảnh mà muốn tải trước về vào
trong một thẻ CSS như sau:
<html>
<head>
<style type="text/css">
#preLoadImages {
width: 0px;
height: 0px;
background: url(../images/anh1.gif);
background: url(../images/anh2.gif);
background: url(../images/anh3.gif); ... }
</style>
</head>
15
3
Kỹ thuật tải ảnh trước bằng CSS
Sau đó đặt đoạn thẻ <div id="prLoadImages"> trên
vào ngay dưới thẻ <body> của Website của bạn.
Khi trình duyệt đọc tới thẻ <div> đó nó sẽ load
toàn bộ những ảnh được liệt kê trong danh sách
trên vào trong bộ đệm của trình duyệt.
<body>
<div id="preLoadImages"></div>
...
15
4
Fix min-height cho IE
Các trình duyệt như Firefox, Opera, Safari,... đều hiểu
được thuộc tính min-height: trong CSS, nhưng IE lại
không thể hiểu được thuộc tính đó.
Giả sử rằng chúng ta có một thẻ <div class="box">
chúng ta muốn đặt min-height cho thẻ <div> này. Khi đó
chúng phải làm như sau:
/* Cho tất cả các trình duyệt */
.box {
width:20em;
padding:0.5em;
border:1px solid #000;
min-height:8em;
height:auto;
}
/* Fix cho IE */
15
5
Fix min-height cho IE
/* Fix cho IE */
/*\*/
* html .box {
height: 8em;
}
/**/
Chúng ta cũng có thể dùng giải pháp như sau:
selector {
min-height:500px;
height:auto !important;
height:500px;
}
15
6
Đặt min-width cho IE6
Sử dụng câu lệnh điều kiện của Javascript và
nhúng vào CSS:
content {
height: 75px;
background-color: #000;
color: #fff;
width: expression(document.body.clientWidth < 742?
"740px" : document.body.clientWidth >
1202? "1200px" : "auto");
min-width: 740px;
max-width: 1200px;
}
15
7
CSS Transparency trên toàn bộ các trình duyệt
Làm cho transparent background của một thẻ nào
đó mà chúng ta muốn dùng kỹ thuật trong CSS.
Chúng ta sẽ áp dụng các thuộc tính sau cho một
phần tử HTML nào đó muốn transparent.
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
15
8
CSS Transparency trên toàn bộ các trình duyệt
opacity: 0.5; Đây là một thuộc tính rất quan trọng bởi
nó là một thuộc tính chuẩn của CSS. Nó sẽ làm việc
trên hầu hết các phiên bản của Firefox, Opera và Safari.
Thuộc tính trên rất cần thiết cho những trình duyệt hỗ
trợ các thuộc tính chuẩn của CSS.
filter:alpha(opacity=50); Thuộc tính trên được dùng
cho IE.
-moz-opacity:0.5; Nó cần thiết cho các phiên bản cũ
của Mozilla cũng như Netscape Navigator.
-khtml-opacity: 0.5; Được dùng cho phiên bản cũ của
Safari (1.x).
15
9
Kỹ thuật đưa footer xuống cuối trang
Khi chúng ta thiết kế layout của trang Web dạng
bảng (table) thì việc đưa phần footer lúc nào cũng
ở phía dưới là một việc hết sức đơn giản.
Nhưng khi bạn làm việc với layout dạng <div> thì
việc đưa phần footer lúc nào cũng ở phía dưới là
một điều rất khó khăn.
Mặc dù như vậy các Designer CSS vẫn nghĩ ra
được các thủ thuật (trick) để thực hiện việc đó.
16
0
Kỹ thuật đưa footer xuống cuối trang
Chúng ta có định dạng HTML như sau:
/* BEGIN: WRAPPER */
<div class="wrapper">
<div class="header">
<h1>CSS Sticky Footer</h1>
</div>
<div class="content">
Nội dung content...
</div>
<div class="push"></div>
</div>
/* END: WRAPPER */
/* BEGIN: FOOTER */
<div class="footer">
<p>Nội dung footer...</p>
</div>
/* END: FOOTER*/
16
1
Kỹ thuật đưa footer xuống cuối trang
Để cho phần wrapper có chiều cao 100% chúng ta định
dạng các thuộc tính CSS của nó như sau:
.wrapper {
...
min-height: 100%; /* Fix cho firefox */
height: auto !important;
height: 100%;
...
}
Khi đó phần footer sẽ bị đẩy ra ngoài trang, để cho nó
có thể nhìn thấy được ta cần phải đặt margin-bottom
của phần wrapper bằng âm.
.wrapper {
...
margin: 0 auto -4em;
16
2
Đặt dòng text vào giữa ( theo chiều cao)
Giả sử rằng bạn dùng một thẻ HTML dạng khối
(Block Element) có chiều cao xác định height:
100px;. Bây giờ bạn muốn đặt một dòng tiêu đề
có nội dung Tin mới nhất vào giữa (theo chiều
cao) của thẻ HTML đó.
Bạn có thể dùng thuộc tính padding để đẩy dòng
chữ đó vào giữa, nhưng đó không phải là giải
pháp đúng đắn nhất. Trong trường hợp này thuộc
tính line-heigh sẽ là một giả pháp tốt nhất, Chúng
ta sẽ dùng thuộc tính line-height cho thẻ HTML
đó.
16
3
Đặt dòng text vào giữa ( theo chiều cao)
Ví dụ
div.textcenter {
margin: 0;
padding: 0;
height: 100px;
line-height: 100px;
border: 1px solid #CCCCCC;
}
16
4
Hiển thị ảnh PNG trên IE
Trong tài liệu HTML
<img scr="test.png" alt="Ảnh ví dụ" title="Ảnh ví dụ" />
Để ảnh .png có thể hiển thị tốt khi bạn dùng IE để
duyệt thì bạn cần phải chèn file script vào trong
tài liệu HTML của bạn.
Giả sử rằng file script bạn để ở trong thư mục
cùng cấp với tài liệu HTML.
<script language="javascript" type="text/javascript"
src="PieNG.js">
</script>
</body>
Tiếp đó bạn copy ảnh blank.gif vào cùng thư mục
với file script.
16
5
Style cho thẻ hr
Chúng ta có đoạn mã CSS định dạng thẻ <hr> như sau:
hr {
color: red;
background: red;
border: 0;
height: 1px;
}
Thêm khoảng cách giữa đường kẻ và phần nội
dung: dùng thuộc tính margin
hr {
color: red;
background: red;
border: 0;
height: 1px;
margin: 10px 0 20px; }
16
6
CSS
cho FormForm Fields
Customizing
Form fields can be styled, just like any other aspect of a
web page.
Ex:
input {
border: 1px solid #fc0;
background-color: #fc3;
}
You can also style select menus and text areas, using the
select and textarea tags as selectors.
input, select, textarea {
border: 1px solid #fc0;
background-color: #fc3;
}
16
7
CSS
3
Customizing
Form Fields
CSS3 allow you to both achieve new design
features (animation or gradients for instance), and
achieve current design features in a much easier
way (e.g. using columns).
16
8
Một
số ModuleForm
quanFields
trọng của CSS 3
Customizing
The Box Model
Lists Module
Hyperlink Presentation
Speech Module
Backgrounds and Borders
Text Effects
Multi-Column Layout
16
9
The
Box Model
Customizing
Form Fields
CSS3 takes borders to a new level with the ability
to use gradients, rounded corners, shadows and
border images.
17
0
The
Box Model
Customizing
Form Fields
rounded corners:
.border_rounded {
background-color: #ddccb5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #897048;
padding: 10px;
width: 310px;
}
Ví dụ:
17
1
The
Box Model
Customizing
Form Fields
Gradients:
.border_gradient {
border: 8px solid #000;
-moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488
#c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-top-colors: #897048 #917953 #a18a66 #b6a488
#c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-left-colors: #897048 #917953 #a18a66 #b6a488
#c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-right-colors:#897048 #917953 #a18a66 #b6a488
#c5b59b #d4c5ae #e2d6c4 #eae1d2;
padding: 5px 5px 5px 15px;
width: 300px;
} Ví dụ:
17
2
The
Box Model
Customizing
Form Fields
Box Shadows
.border_shadow {
-webkit-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
width: 300px;
}}
Ví dụ:
17
3
The
Box Model
Customizing
Form Fields
Border Images: to repeat, or stretch a border image
as you choose.
.border_image {
-webkit-border-image: url(border.png) 27 27 27 27
round round;
-moz-border-image: url(border.png) 27 27 27 27
round round;
}
Ví dụ:
17
4
CSS3
Text Effects
Customizing
Form Fields
Text Shadow
.text_shadow {
color: #897048;
background-color: #fff;
text-shadow: 2px 2px 2px #ddccb5;
font-size: 15px;
}
Ví dụ
17
5
CSS3
Text Effects
Customizing
Form Fields
Word Wrapping
.text_wrap {
word-wrap: break-word;
}
Ví dụ
17
6
CSS3
Text Effects
Customizing
Form Fields
Web Fonts: Web Font is simply a way to use any
font in your page, being downloaded automatically
by the browser.
@font-face {
font-family: 'Name of the new font';
src:
url('http://www.designshack.net/fonts/font.ttf');
}
Ví dụ
17
7
User
Interface
Customizing
Form Fields
Resizing: allows resizable text areas
.ui_resizable {
padding: 20px;
border: 1px solid;
resize: both;
overflow: auto;
}
Ví dụ
17
8
User
Interface
Customizing
Form Fields
Box Sizing: allows you to define certain elements
to fit an area in a certain way.
.area {width: 300px;border: 10px solid
#ddccb5;height: 60px;}
.boxes {box-sizing: border-box;width:50%;height:
60px;text-align: center;border: 5px solid
#897048;padding: 2px;float:left;}
Ví dụ
17
9
User
Interface
Customizing
Form Fields
Outline: to offset the outline away from the element
– by a value you define. It differs from a border in
two ways:
◦ Outlines do not take up space
◦ Outlines may be non-rectangular
.ui_outline {width: 150px; padding: 10px;height:
70px;border: 2px solid black;outline: 2px solid
#897048;outline-offset: 15px;
}
Ví dụ
18
0
Multiple
columns
Customizing
Form using
FieldsCSS3
There are four properties which relate to the
multiple column layout in CSS3, allowing you to set
the number of columns, width, gap between each
column and a border between each:
◦
◦
◦
◦
column-count
column-width
column-gap
column-rule
18
1
Multiple
columns
Customizing
Form using
FieldsCSS3
To create a two column layout
.multiplecolumns {-moz-column-width: 130px;
-webkit-column-width: 130px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-moz-column-rule: 1px solid #ddccb5;
-webkit-column-rule: 1px solid #ddccb5;
}
Ví dụ:
18
2
Multiple
columns
Customizing
Form using
FieldsCSS3
Spanning columns: to span more than one
column – a heading, table or image for instance.
h2 {column-span: all}
Ví dụ:
18
3
Backgrounds
Customizing Form Fields
Background Size: allow you to re-use images in
several different contexts and also expand a
background to fill an area more accurately
.backgroundsize {background:
url(http://www.designshack.net/images/logo.gif);
-webkit-background-size: 137px 50px;
-khtml-background-size: 137px 50px;
-o-background-size: 137px 50px;
background-size: 137px 50px;
background-repeat: no-repeat;
padding: 60px 5px 5px 10px;
border: 3px solid #ddccb5;}
Ví dụ:
18
4
Backgrounds
Customizing Form Fields
Multiple Backgrounds: allowing you to achieve effects
which previously required more than one div.
.multiplebackgrounds {
height: 150px; width: 270px;
padding: 40px 20px 20px 20px;
background: url(top.gif) top left no-repeat,url(bottom.gif)
bottom left no- repeat,url(middle.gif) left repeat-y;}
Ví dụ:
18
5
Backgrounds
Customizing Form Fields
Background Origin: CSS3 allows you to specify
how the position of a background is calculated. The
background-origin property can be set to start
positioning from either the border, padding, or
content. This allows for greater flexibility in terms of
placing a background image.
18
6
Lists
Model Form Fields
Customizing
1. Thuộc tính list-style-type
HTML List bao gồm 2 loại:
◦ UnOrdered List (Không có thứ tụ): Danh sách các phần
tử được dánh dấu bằng các ký tự (bullets)
◦ Ordered List (có thứ tự): Danh sách các phần tử được
dánh dấu bằng Số, alphabet, số La Mã.
18
7
Lists
Model Form Fields
Customizing
1. Thuộc tính list-style-type
Code HTML
CSS
Danh sách không có thứ tự
<ul>
<li>Phần tử 1</li>
<li>Phần tử 2</li>
<li>Phần tử 3</li>
</ul>
Danh sách có thứ tự
<ol>
<li>Phần tử 1</li>
<li>Phần tử 2</li>
<li>Phần tử 3</li>
</ol>
ul,ol{list-style-type: lower-alpha}
18
8
Lists
Model Form Fields
Customizing
1. Thuộc tính list-style-type
UL { list-style: upper-roman inside } /* Any UL */
UL > UL { list-style: circle outside } /* Any UL child of a UL */
OL.alpha LI { list-style: lower-alpha } /* Any LI descendant of
an OL */ OL.alpha >
LI { list-style: lower-alpha } /* Any LI child of an OL */
Ví dụ:
18
9
Lists
Model Form Fields
Customizing
2. Loại bỏ kiểu đánh dấu
Code HTML
Danh sách không có thứ tự
<ul>
<li>Phần tử 1</li>
<li>Phần tử 2</li>
<li>Phần tử 3</li>
</ul>
Danh sách có thứ tự
<ol>
<li>Phần tử 1</li>
<li>Phần tử 2</li>
<li>Phần tử 3</li>
</ol>
CSS
ul,ol{list-style-type: none }
19
0
Lists
Model Form Fields
Customizing
3. Thay thế kiểu đánh dấu bằng hình nền
Code HTML
CSS
Danh sách không có thứ tự
<ul>
<li>Phần tử 1</li>
<li>Phần tử 2</li>
<li>Phần tử 3</li>
</ul>
Danh sách có thứ tự
<ol>
<li>Phần tử 1</li>
<li>Phần tử 2</li>
<li>Phần tử 3</li>
</ol>
list-style-image: url(icon.gif)
19
1
Lists
Model Form Fields
Customizing
4. Thuộc tính list-style-position
Thuộc tính list-style-position quy định kiểu đánh dấu được
hiển thị bên ngoài hay bên trong nội dung của phần tử
tương ứng với 2 giá trị inside và outside (mặc định).
Code HTML
Ví dụ:
ul.a, ul.b {list-style-image: url(border.png)}
/* Tạo border các các phần tử <li> */
ul.a li, ul.b li{ border: 1px solid #cfcfcf; margin-top: 7px; width: 150px }
/* Danh sách thứ nhất hiển thị với giá trị inside */
ul.a {list-style-position: inside}
/* Danh sách thứ 2 hiển thị với giá trị outside*/
ul.b {list-style-position: outsite}
19
2
Lists
Model Form Fields
Customizing
5. Các viết tắt với CSS List:
Chúng ta có gộp chung 3 thuộc tính: list-style-type, liststyle-position và list-style-image theo thứ tự tương ứng
như sau:
ul{list-style: circle inside url(icon.gif)}
19
3
Speech
Module
Customizing
Form Fields
CSS2 added support for the Aural media type which is
used for “styling” speech synthesis in aural user agents
(e.g. screen readers). The specification added several
properties to this new media type.
The current Working Draft of CSS2.1 reserves
media="speech", but explicitly does not define which
properties apply to it. Also, the aural media type has been
deprecated.
The CSS 3 Speech module removes some of the old
properties and adds new ones. All of them are now
assigned to the speech media type.
Opera is one of the most popular user agents
implementing most of the CSS 3 Speech properties.
19
4
Speech
Module
Customizing
Form Fields
#voice-volume { -xv-voice-volume: x-soft; -xv-voicebalance: right; }
#voice-balance { -xv-voice-balance: left; }
#speech-cue { cue-after: url(ding.wav); }
#voice-rate { -xv-voice-rate: x-slow; }
#voice-family { voice-family: female; }
#voice-pitch { -xv-voice-pitch: x-low; }
#speech-speak { speak: spell-out; }
19
5
Hyperlink
Presentation
Customizing
Form Fields
The module uses the XML Namespaces [NAME] identifier
http://www.w3.org/2002/06/hlink.
Examples in this document that use the namespace prefix
"hlink" all assume an xmlns declaration
xmlns:hlink="http://www.w3.org/2002/06/hlink"
19
6
Hyperlink
Presentation
Customizing
Form Fields
The hlinks Element
The hlinks element exists only to be a root element
for a document containing only hlink elements.
Issue: you could define inheritance in nested
<hlink> elements:
<hlink namespace="..."> <hlink element="a" ... />
<hlink element="b" ... /> </hlink>
19
7
Hyperlink
Presentation
Customizing
Form Fields
Example
1. The definition of the <a href="..."> element in XHTML:
<hlink namespace="http://www.w3.org/1999/xhtml"
element="a"
locator="@href"
effect="replace"
actuate="onRequest"
replacement="@target"/>
19
8
Hyperlink
Presentation
Customizing
Form Fields
Example
2. Defining <img/> in XHTML
<hlink namespace="http://www.w3.org/1999/xhtml"
element="img" locator="@src" effect="embed" actuate="onLoad"
onFailure="warn"/>
<hlink namespace="http://www.w3.org/1999/xhtml" element="img"
locator="@longdesc" effect="new" actuate="onRequestSecondary"/>
<hlink namespace="http://www.w3.org/1999/xhtml" element="img"
locator="@usemap" effect="map" actuate="onLoad"/>
19
9
Hyperlink
Presentation
Customizing
Form Fields
Example
3. Defining <object> in XHTML
<hlink namespace="http://www.w3.org/1999/xhtml"
element="object" locator="@data" effect="embed"
actuate="onLoad" onFailure="processChildren"
onSuccess="ignoreChildren"/>
20
0
Hyperlink
Presentation
Customizing
Form Fields
Example
4. Defining a new <home/> element
<hlink namespace="http://www.example.com/markup"
element="home" locator="/" effect="replace"
actuate="onRequest"/>
<hlink namespace="http://www.example.com/markup"
element="home" locator="/icons/home.png"
effect="embed" actuate="onLoad"/> In the context of this
definition, and the namespace declaration
xmlns="http://www.example.com/markup" the markup
<home/> will display a clickable icon that takes the user to
the home page.
20
1
Hyperlink
Presentation
Customizing
Form Fields
Example
5. Defining redirection:
<hlink namespace="http://www.example.com/markup"
element="redirect" locator="@href" effect="replace"
actuate="onLoad"/>
In the context of this definition and a suitable namespace
declaration, the following markup will cause the initiating
resource to be redirected:
<redirect href="whereever">This page has
moved</redirect>
20
2
Hyperlink
Presentation
Customizing
Form Fields
Example
6. Defining <html:blockquote> <hlink
namespace="http://www.w3.org/1999/xhtml"
element="blockquote" locator="@cite" effect="new"
actuate="onRequestSecondary"/>
20
3
Hyperlink
Presentation
Customizing
Form Fields
Example
7. Defining RDF
<hlink namespace="http://www.w3.org/1999/02/22-rdfsyntax-ns#" element="Description" locator="about"
effect="new" actuate="onRequestSecondary"/> <hlink
namespace="http://www.w3.org/1999/02/22-rdf-syntaxns#" locator="resource" effect="new"
actuate="onRequestSecondary"/>
20
4
Hyperlink
Presentation
Customizing
Form Fields
Use
Either this
<html hlink:definition="http://www.example.org/whatever" ...>
or this:
<html ...>
<head>
<hlink:hlink ... /> ...
</head>
20
5
Một số ví dụ
http://vnwordpress.com/web-photoshop/gioi-thieucss3/
20
6