Bài giảng môn thiết kế web - CHƯƠNG VII CASCADING CASCADING STYLE SHEET-CSS pptx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (438.5 KB, 31 trang )
CASCADING STYLE SHEET-CSS
CASCADING STYLE SHEET-CSS
CHƯƠNG VII
CHƯƠNG VII
I.
I.
GIỚI THIỆU
GIỚI THIỆU
Bảng kiểu (style sheet)
Bảng kiểu (style sheet)
nhằm thoả mản nhu cầu
nhằm thoả mản nhu cầu
–
Thẩm mỹ
Thẩm mỹ
–
Giữ tính thống nhất cho trang HTML.
Giữ tính thống nhất cho trang HTML.
–
Định dang một số tính chất thông thường cùng một lúc cho
Định dang một số tính chất thông thường cùng một lúc cho
tất cả các đối tượng trên trang
tất cả các đối tượng trên trang
Tiện ích của CSS :
Tiện ích của CSS :
–
Tiết kiệm thời gian
Tiết kiệm thời gian
–
Khi thay đổi định dạng chỉ cần thay đổi CSS, các trang
Khi thay đổi định dạng chỉ cần thay đổi CSS, các trang
khác sẽ tự động cập nhật sự thay đổi đó
khác sẽ tự động cập nhật sự thay đổi đó
–
Có thể dùng các CSS cùng với JavaScript để tạo các hiệu
Có thể dùng các CSS cùng với JavaScript để tạo các hiệu
ứng đặc biệt
ứng đặc biệt
Bất lợi của CSS:
Bất lợi của CSS:
–
Không một trình duyệt nào chấp nhận nó hoàn toàn
Không một trình duyệt nào chấp nhận nó hoàn toàn
–
Phải mất thời gian để học cách sử dụng
Phải mất thời gian để học cách sử dụng
II.
II.
PHÂN LOẠI-CÁCH TẠO
PHÂN LOẠI-CÁCH TẠO
1.
1.
Phân loại :
Phân loại :
Có 3 loại
Có 3 loại
–
Inline style
Inline style
–
Internal style
Internal style
–
External style
External style
a)
a)
Inline style
Inline style
: L
: L
à kiểu được gán cho một dòng
à kiểu được gán cho một dòng
hoặc một đoạn văn bản, bằng cách sử dụng
hoặc một đoạn văn bản, bằng cách sử dụng
thuộc tính
thuộc tính
style
style
bên trong tag muốn định dạng
bên trong tag muốn định dạng
Cú pháp
Cú pháp
:
:
<TagName Style=”property1:value1;property2:
<TagName Style=”property1:value1;property2:
value2; …”>
value2; …”>
Nội dung văn bản muốn định dạng
Nội dung văn bản muốn định dạng
</TagName>
</TagName>
Ví dụ
Ví dụ
:
:
<BODY>
<BODY>
<P style = “color:aqua”
<P style = “color:aqua”
This paragraph has an inline style applied to it
This paragraph has an inline style applied to it
<P> This paragraph is displayed in the default style.
<P> This paragraph is displayed in the default style.
<P> Can you see the <SPAN style = color:red> difference
<P> Can you see the <SPAN style = color:red> difference
</SPAN> in this line
</SPAN> in this line
</BODY>
</BODY>
b)
b)
Internal style :
Internal style :
Là bảng mẫu thích hợp cho trang riêng lẻ với nhiều văn
Là bảng mẫu thích hợp cho trang riêng lẻ với nhiều văn
bản.
bản.
–
Cách tạo: Taọ bảng mẫu chung
Cách tạo: Taọ bảng mẫu chung
trên phần đầu
trên phần đầu
trang
trang
trong cặp tag <head>
trong cặp tag <head>
–
Sử dụng: Trong phần body, nội dung nào
Sử dụng: Trong phần body, nội dung nào
muốn sử dụng định dạng theo bảng mẫu trên
muốn sử dụng định dạng theo bảng mẫu trên
thì đặt trong tag được định nghĩa trong phần
thì đặt trong tag được định nghĩa trong phần
head
head
Cú pháp:
Cú pháp:
<
<
Head>
Head>
<Style
<Style
TYPE=”text/css”
TYPE=”text/css”
>
>
TagName
TagName
{
{
property1:value1;property2:value 2 …
property1:value1;property2:value 2 …
}
}
(lặp lại cho mỗi tag có thuộc tính cần định dạng)
(lặp lại cho mỗi tag có thuộc tính cần định dạng)
</Style>
</Style>
</Head>
</Head>
<HTML>
<HTML>
<HEAD>
<HEAD>
<STYLE TYPE=”text/css”>
<STYLE TYPE=”text/css”>
H1,H2 { color: limegreen; font-family: Arial }
H1,H2 { color: limegreen; font-family: Arial }
</STYLE>
</STYLE>
</HEAD>
</HEAD>
<BODY>
<BODY>
<H1>This is the H1 element</H1>
<H1>This is the H1 element</H1>
<H2>This is the H2 element</H2>
<H2>This is the H2 element</H2>
<H3>This is the H3 element with its default style as
<H3>This is the H3 element with its default style as
displayed in the browser</H3>
displayed in the browser</H3>
</BODY>
</BODY>
</HTML>
</HTML>
c)
c)
External style
External style
:
:
Là một bảng kiểu được lưu trữ thành một file bên ngoài
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.
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ả
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.
các trang của một website.
Cách tạo
Cách tạo
:
:
–
Tạo một tập tin văn bản mới
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
Nhập tên các tag muốn định dạng thuộc tính
theo mẫu:
theo mẫu:
TagName{property1: value1; property2:value2;…}
TagName{property1: value1; property2:value2;…}
–
Lưu tập tin với định dạng Text Only và có
Lưu tập tin với định dạng Text Only và có
phần mở rộng
phần mở rộng
.css
.css
Ví dụ:
Ví dụ:
Tạo tập tin
Tạo tập tin
Sheet1.css
Sheet1.css
Body{Background-color:blue;font:Tahoma;font-size:20pt}
H2 {color:blue; font-style:italic}
P{text-align:justify; text-indent:8pt; font:10pt/15pt “Verdana”}
A:hover {text-decoration:underline;color:red}
Body{Background-color:blue;font:Tahoma;font-size:20pt}
H2 {color:blue; font-style:italic}
P{text-align:justify; text-indent:8pt; font:10pt/15pt “Verdana”}
A:hover {text-decoration:underline;color:red}
Cách dùng External style
Cách dùng External style
:
:
Kết nối tập tin HTML vớI tập tin css trong phần head
Kết nối tập tin HTML vớI tập tin css trong phần head
ta nhập nộI dung này vào
ta nhập nộI dung này vào
Cú pháp
Cú pháp
:
:
<Head>
<Head>
<Link Rel=StyleSheet Type=”text/css”
<Link Rel=StyleSheet Type=”text/css”
Href=”tên
Href=”tên
tập tin.css”>
tập tin.css”>
</Head>
</Head>
Ví dụ:
Ví dụ:
<HTML>
<HTML>
<HEAD><TITLE> Changing the rules</TITLE>
<HEAD><TITLE> Changing the rules</TITLE>
<LINK REL=stylesheet
<LINK REL=stylesheet
HREF=”
HREF=”
sheet1.css
sheet1.css
”
”
TYPE=”text/css”>
TYPE=”text/css”>
</HEAD>
</HEAD>
<BODY>
<BODY>
<H2> Changing the rules is fun</H2>
<H2> Changing the rules is fun</H2>
<P> Changing the rules may not be such fun
<P> Changing the rules may not be such fun
<H2>The H2 element again</H2>
<H2>The H2 element again</H2>
</BODY>
</BODY>
</HTML>
</HTML>
III.
III.
ĐỊNH BẢNG MẪU CHO LỚP (CLASS)
ĐỊNH BẢNG MẪU CHO LỚP (CLASS)
Có thể chia các yếu tố trong HTML thành các lớp để áp
Có thể chia các yếu tố trong HTML thành các lớp để áp
dụng kiểu mẫu hiệu quả hơn
dụng kiểu mẫu hiệu quả hơn
Cú pháp:
Cú pháp:
<STYLE>
<STYLE>
.ClassName{property1: value1; property2:value2;…}
.ClassName{property1: value1; property2:value2;…}
</STYLE>
</STYLE>
Trong phần <Body>, đánh dấu phần nằm trong lớp bằng cú
Trong phần <Body>, đánh dấu phần nằm trong lớp bằng cú
pháp:
pháp:
<TagName Class=”ClassName”>Nội dung </TagName>
<TagName Class=”ClassName”>Nội dung </TagName>
Ví dụ:
Ví dụ:
<HTML>
<HTML>
<HEAD>
<HEAD>
<STYLE>
<STYLE>
.
.
water{color:blue}
water{color:blue}
.
.
danger{color:red}
danger{color:red}
</STYLE>
</STYLE>
</HEAD>
</HEAD>
<BODY>
<BODY>
<P class=“
<P class=“
water
water
”>test water
”>test water
<P class=“
<P class=“
danger
danger
”>test danger
”>test danger
</BODY>
</BODY>
</HTML>
</HTML>
IV.
IV.
ĐỊNH CÁC TAG RIÊNG BIỆT
ĐỊNH CÁC TAG RIÊNG BIỆT
Dùng thuộc tính ID để sử dụng style
Dùng thuộc tính ID để sử dụng style
Dùng áp dụng cho một phần tử riêng biệt trên trang Web
Dùng áp dụng cho một phần tử riêng biệt trên trang Web
NgườI ta thường dùng kỹ thuật này để định nghĩa trên các
NgườI ta thường dùng kỹ thuật này để định nghĩa trên các
thực đơn
thực đơn
Cú pháp
Cú pháp
:
:
<style>
<style>
TagName#IDName{property1: value1;
TagName#IDName{property1: value1;
property2:value2;…}
property2:value2;…}
</style>
</style>
Trong tag Body nhập cú pháp:
Trong tag Body nhập cú pháp:
<TagName ID=IDName> Nội dung</TagName>
<TagName ID=IDName> Nội dung</TagName>
Ví dụ :
Ví dụ :
<HTML>
<HTML>
<HEAD><TITLE> ID Selectors</TITLE>
<HEAD><TITLE> ID Selectors</TITLE>
<STYLE>
<STYLE>
p#control {color: red;font-weight:bold; text-indent:18pt}
p#control {color: red;font-weight:bold; text-indent:18pt}
p{color: magenta;text-indent:0pt}
p{color: magenta;text-indent:0pt}
</STYLE>
</STYLE>
</HEAD>
</HEAD>
<BODY>
<BODY>
<p id=control>
<p id=control>
A hardware device that allows the user to make
A hardware device that allows the user to make
electronic copies of graphics or text.
electronic copies of graphics or text.
<p>
<p>
Short for picture element. A pixel refers to the small dots that
Short for picture element. A pixel refers to the small dots that
make up an image on the screen.
make up an image on the screen.
</BODY>
</BODY>
</HTML>
</HTML>
V.
V.
TẠO CÁC TAG TÙY Ý
TẠO CÁC TAG TÙY Ý
Có 2 loại tag chung có thể kết nối Class hay các ID để
Có 2 loại tag chung có thể kết nối Class hay các ID để
tạo các tag tuỳ ý, cần phân biệt đối tượng cấp khối và
tạo các tag tuỳ ý, cần phân biệt đối tượng cấp khối và
cấp hàng
cấp hàng
Đối tượng cấp khối như một đoạn văn, thường bắt đầu
Đối tượng cấp khối như một đoạn văn, thường bắt đầu
một dòng mới và có thể chứa các đối tượng cấp khối
một dòng mới và có thể chứa các đối tượng cấp khối
khác gồm các tag: P, H1, Body, table
khác gồm các tag: P, H1, Body, table
Đối tượng cấp hàng không tạo dòng mới, thường chứa
Đối tượng cấp hàng không tạo dòng mới, thường chứa
văn bản và các yếu tố trong hàng khác gồn các tag: B,
văn bản và các yếu tố trong hàng khác gồn các tag: B,
Font…
Font…
Các tag DIV và SPAN: có thể kết nối với các phần tử
Các tag DIV và SPAN: có thể kết nối với các phần tử
cấp khối và ID để tạo ra các tag tuỳ ý. Trong đó DIV
cấp khối và ID để tạo ra các tag tuỳ ý. Trong đó DIV
phù hợp với các đối tượng cấp khối, SPAN phù hợp với
phù hợp với các đối tượng cấp khối, SPAN phù hợp với
các đối tượng cấp hàng
các đối tượng cấp hàng
1.
1.
TẠO TAG CẤP KHỐI TÙY Ý
TẠO TAG CẤP KHỐI TÙY Ý
Cú pháp
Cú pháp
:
:
Bằng cách thêm một CLASS hoặc ID vào tag DIV và định
Bằng cách thêm một CLASS hoặc ID vào tag DIV và định
mẫu cần có
mẫu cần có
Trong phần Style hoặc một bảng mẫu bên ngoài ta nhập:
Trong phần Style hoặc một bảng mẫu bên ngoài ta nhập:
DIV.ClassName{property1: value1; property2:value2;…}
DIV.ClassName{property1: value1; property2:value2;…}
với ClassName là tên lớp sẽ sử dụng. hoặc:
với ClassName là tên lớp sẽ sử dụng. hoặc:
DIV#Idname{property1: value1; property2:value2;…}
DIV#Idname{property1: value1; property2:value2;…}
với IDName là tên định danh của tag DIV
với IDName là tên định danh của tag DIV
Áp dụng tag cấp khối tuỳ ý vào trang HTML
Áp dụng tag cấp khối tuỳ ý vào trang HTML
Tại đầu phần văn bản muốn định dạng, ta nhập
Tại đầu phần văn bản muốn định dạng, ta nhập
cú pháp
cú pháp
<DIV Class=”ClassName” IDname=”Idname”>
<DIV Class=”ClassName” IDname=”Idname”>
Nội dung
Nội dung
</DIV>
</DIV>
(bên trong có thể chứa các tag <P> hoặc <H1>)
(bên trong có thể chứa các tag <P> hoặc <H1>)
Ví dụ :
Ví dụ :
<HTML>
<HTML>
<HEAD><TITLE> ID Selectors</TITLE>
<HEAD><TITLE> ID Selectors</TITLE>
<STYLE>
<STYLE>
DIV.control{background:magenta;font-size:28pt}
DIV.control{background:magenta;font-size:28pt}
DIV#intro{color: magenta;text-indent:0pt;font-weight:bold}
DIV#intro{color: magenta;text-indent:0pt;font-weight:bold}
</STYLE>
</STYLE>
</HEAD>
</HEAD>
<BODY>
<BODY>
<DIV class='control'>
<DIV class='control'>
A hardware device that allows the user to
A hardware device that allows the user to
make electronic copies of graphics or text.</DIV>
make electronic copies of graphics or text.</DIV>
<DIV ID='intro'>
<DIV ID='intro'>
Short for picture element. A pixel refers to the
Short for picture element. A pixel refers to the
small dots that make up an image on the screen. </DIV>
small dots that make up an image on the screen. </DIV>
</BODY>
</BODY>
</HTML>
</HTML>
2.
2.
TẠO CÁC TAG TRONG HÀNG TÙY Ý
TẠO CÁC TAG TRONG HÀNG TÙY Ý
Kết nối nhiều kiểu định dạng văn bản trong một tag
Kết nối nhiều kiểu định dạng văn bản trong một tag
Cú pháp
Cú pháp
:
:
Trong phần Style, nhập cú pháp:
Trong phần Style, nhập cú pháp:
SPAN.Clname{property1: value1; property2:value2;…}
SPAN.Clname{property1: value1; property2:value2;…}
Hoặc:
Hoặc:
SPAN#IDname{property1: value1; property2:value2;…}
SPAN#IDname{property1: value1; property2:value2;…}
Áp dụng tag trong hàng tuỳ ý vào trang HTML
Áp dụng tag trong hàng tuỳ ý vào trang HTML
:
:
Tại đầu
Tại đầu
đoạn văn bản muốn định dạng, nhập cú pháp:
đoạn văn bản muốn định dạng, nhập cú pháp:
<SPAN Class=”classname”>
<SPAN Class=”classname”>
nội dung văn bản
nội dung văn bản
</SPAN>
</SPAN>
Hoặc:
Hoặc:
<SPAN ID=”IDName”>
<SPAN ID=”IDName”>
Nội dung văn bản
Nội dung văn bản
</SPAN>
</SPAN>
Ví dụ :
Ví dụ :
<HTML>
<HTML>
<HEAD><TITLE> ID Selectors</TITLE>
<HEAD><TITLE> ID Selectors</TITLE>
<STYLE>
<STYLE>
SPAN.control{background:magenta;font-size:200%}
SPAN.control{background:magenta;font-size:200%}
SPAN#intro{font-variant:small-caps;color: orange;font-
SPAN#intro{font-variant:small-caps;color: orange;font-
weight:bold}
weight:bold}
</STYLE>
</STYLE>
</HEAD>
</HEAD>
<BODY>
<BODY>
<SPAN class='control'>
<SPAN class='control'>
A </SPAN
A </SPAN
><SPAN
><SPAN
style="color:red">
style="color:red">
hardware device that allows the user to make
hardware device that allows the user to make
electronic copies of graphics or text.</span>
electronic copies of graphics or text.</span>
<SPAN ID='intro'>
<SPAN ID='intro'>
Short for picture element. A pixel refers to the
Short for picture element. A pixel refers to the
small dots that make up an image on the screen. </SPAN>
small dots that make up an image on the screen. </SPAN>
</BODY>
</BODY>
</HTML>
</HTML>
VI.
VI.
CÁC THUỘC TÍNH ĐỊNH DẠNG
CÁC THUỘC TÍNH ĐỊNH DẠNG
ĐỊNH DẠNG VĂN BẢN
ĐỊNH DẠNG VĂN BẢN
Chọn bộ font:
Chọn bộ font:
font-family: familyname1, familyname2…
font-family: familyname1, familyname2…
Tạo chữ
Tạo chữ
nghiêng
nghiêng
:
:
Font-style: italic
Font-style: italic
Tạo chữ đậm
Tạo chữ đậm
:
:
Font-weight: bold
Font-weight: bold
Định cỡ chữ
Định cỡ chữ
:
:
Font-size: xx-small hoặc x-small, small, medium,
Font-size: xx-small hoặc x-small, small, medium,
large, x-large, xx-large hoặc Font-size:12pt (giá trị cụ
large, x-large, xx-large hoặc Font-size:12pt (giá trị cụ
thể)
thể)
Có thể định dạng các thuộc tính chữ nghiêng, đậm và cở
Có thể định dạng các thuộc tính chữ nghiêng, đậm và cở
chữ cùng một lúc:
chữ cùng một lúc:
Font: italic bold size
Font: italic bold size
Màu
Màu
của
của
chữ:
chữ:
Color: colorName hoặc #rrggbb
Color: colorName hoặc #rrggbb
Màu
Màu
nền
nền
của chữ
của chữ
:
:
Background:colorName hoặc #rrggbb
Background:colorName hoặc #rrggbb
Định
Định
khoảng
khoảng
các giữa các từ, các ký tự:
các giữa các từ, các ký tự:
Word-spacing:n
Word-spacing:n
(n: khoảng cách giữa các từ, tính
(n: khoảng cách giữa các từ, tính
bằng pixel)
bằng pixel)
Letter-spacing:n
Letter-spacing:n
(n: khoảng cách giữa các từ, tính
(n: khoảng cách giữa các từ, tính
bằng pixel)
bằng pixel)
Canh lề
Canh lề
cho
cho
văn bản
văn bản
:
:
Text-Align: left, right, center, justify
Text-Align: left, right, center, justify
Thay đổi dạng chữ:
Thay đổi dạng chữ:
Text-transform: capitalize, uppercase,
Text-transform: capitalize, uppercase,
lowercase
lowercase
