Tải bản đầy đủ (.pdf) (31 trang)
  1. Trang chủ
    2. >>
  2. Công Nghệ Thông Tin
    3. >>
  3. Quản trị Web

bài giảng thiết kế web - chương7 - css

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 (2.54 MB, 31 trang )

CASCADING STYLE SHEET-CSS
CHNGăVII
I. GIIăTHIU
 Bngăkiuă(styleăsheet) nhm tho mn nhu cu
– Thm m
– 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
tt c các đi tng trên trang
 Tin ích ca CSS :
– Tit kim thi gian
– 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 đó
– Có th dùng các CSS cùng vi JavaScript đ to các hiu
ng đc bit
 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
– Phi mt thi gian đ hc cách s dng
II. PHÂNăLOI-CÁCHăTO
1. Phânăloiă: Có 3 loi
– Inline style
– Internal style
– External style
a) Inline style: Là 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
thuc tính
style bên trong tag mun đnh dng
Cú pháp:
<TagNameăStyle=”property1:value1;property2:ă
value2;ă…”>

Ni dung vn bn mun đnh dng


</TagName>

 Ví d :
<BODY>
<P style = “color:aqua ; font-Style:italic; text-
Align: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>
b) 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 bng mu trên
thì đt trong tag đc đnh ngha trong phn
head
Cú pháp:
<Head>
<Style TYPE=”text/css”>
TagName
{property1:value1;property2:valueă2ă…}
(lp li cho mi tag có thuc tính cn đnh dng)
</Style>
</Head>

<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>
c) External style :
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.
 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:ăvalue1;ăproperty2:value2;…}
– Lu tp tin vi đnh dng Text Only và có
phn m rng .css
 Ví d:
To tp tin Sheet1.css

H2 {color:blue; font-style:italic}
P{text-align:justify; text-indent:8pt;
font:10pt/15ptă“MyriadăRoman”,”Verdana”}

 Cách dùng External style:
Cú pháp:
<Head>
<LinkăRel=StyleSheetăType=”text/css”ă Href=”tênă
tpătin.css”>
</Head>
Víăd:
<HTML>
<HEAD><TITLE> Changing the rules</TITLE>
<LINK REL=stylesheet HREF=”
sheet1.css”
TYPE=”text/css”>
</HEAD>
<BODY>
<H2> Changing the rules is fun</H2>
<P> Changing the rules may not be such fun
<H2>The H2 element again</H2>
</BODY>
</HTML>
III. 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
dng kiu mu hiu qu hn
Cú pháp:
<STYLE>
.ClassName{property1:ăvalue1;ăproperty2:value2;…}
</STYLE>
Trong phn <Body>, đánh du phn nm trong lp bng cú
pháp:
<TagNameăClass=”ClassName”>Niădungă</TagName>
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>
IV. NHăCÁCăTAGăRIÊNGăBIT
Dùng áp dng cho mt phn t riêng bit trên trang Web
Cú pháp:
<style>
TagName#IDName{property1: value1;
property2:value2;…}
</style>
Trong tag Body nhp cú pháp:
<TagNameăID=IDName>ăNiădung</TagName>
 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>
V. TOăCÁCăTAGăTÙYăÝ
 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à
cp hàng
 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
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
vn bn và các yu t trong hàng khác gn các tag: B,
Font…
 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
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
1. TOăTAGăCPăKHIăTÙYăÝ
Cú pháp:
Bng cách thêm mt CLASS hoc ID vào tag DIV và đnh
mu cn có

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;…}ă
vi ClassName là tên lp s s dng. hoc:
DIV#Idname{property1:ăvalue1;ăproperty2:value2;…}
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
Ti đu phn vn bn mun đnh dng, ta nhp
cú pháp
<DIVăClass=”ClassName”ăIDname=”Idname”>
Niădungă
</DIV>
(bên trong có th cha các tag <P> hoc <H1>)

 Víădă:ă
<HTML>
<HEAD><TITLE> ID Selectors</TITLE>
<STYLE>

DIV.control{background:magenta;font-size:28pt}
DIV#intro{color: magenta;text-indent:0pt;font-weight:bold}
</STYLE>
</HEAD>
<BODY>

<DIV class='control'>A hardware device that allows the user to
make electronic copies of graphics or text.</DIV>

<DIV ID='intro'>Short for picture element. A pixel refers to the
small dots that make up an image on the screen. </DIV>
</BODY>

</HTML>
2. 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
Cú pháp:
Trong phn Style, nhp cú pháp:
SPAN.Clname{property1:ăvalue1;ăproperty2:value2;…}
Hoc:
SPAN#IDname{property1:ăvalue1;ăproperty2:value2;…}
Áp dng tag trong hàng tu ý vào trang HTML: Ti đu
đon vn bn mun đnh dng, nhp cú pháp:
<SPANăClass=”classname”>
niădungăvnăbn
</SPAN>
Hoc:
<SPANăID=”IDName”>ă
Niădungăvnăbn
</SPAN>

 Víădă:ă
<HTML>
<HEAD><TITLE> ID Selectors</TITLE>
<STYLE>

SPAN.control{background:magenta;font-size:200%}
SPAN#intro{font-variant:small-caps;color: orange;font-
weight:bold}
</STYLE>
</HEAD>
<BODY>


<SPAN class='control'>A </SPAN><SPAN
style="color:red">
hardware device that allows the user to make
electronic copies of graphics or text.</span>

<SPAN ID='intro'>Short for picture element. A pixel refers to the
small dots that make up an image on the screen. </SPAN>
</BODY>
</HTML>
VI. CÁCăTHUCăTÍNHăNHăDNG
NHăDNGăVNăBN
Chn b font:
font-family:ăfamilyname1,ăfamilyname2…
To ch nghiêng:
Font-style: italic
To ch đm:
Font-weight: bold
nh c ch:
Font-size: xx-smallăhocăx-small, small, medium,
large, x-large, xx-largeăhocăFont-size:12ptă(giáătrăcă
th)
Có th đnh dng các thuc tính ch nghiêng, đm và c
ch cùng mt lúc:
Font: italic bold size
 Màu ca ch:
Color:ăcolorNameăhocă#rrggbb
 Màu nn ca ch:
Background:colorNameăhocă#rrggbbă
 nh khong các gia các t, các ký t:
Word-spacing:n (n: khong cách gia các t, tính

bng pixel)
Letter-spacing:n (n: khong cách gia các t, tính
bng pixel)
 Canh l cho vn bn:
Text-Align: left, right, center, justify
 Thay đi dng ch:
Text-transform: capitalize, uppercase,
lowercase

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Tải bản đầy đủ ngay
×