You are on page 1of 31

TRNG I HC KHOA HC T NHIN KHOA CNG NGH THNG TIN B MN CNG NGH PHN MM ------

CSS
Mn hc: Pht trin ng dng Web vi HTML, CSS, Javascript + PHP

Ni dung
2

Gii thiu v CSS


CSS = Casscading Style Sheets Dng m t cch hin th cc thnh phn trn trang WEB S dng tng t nh dng TEMPLATE

C th s dng li cho cc trang web khc C th thay i thuc tnh tng trang hoc c site nhanh chng (cascading)

Gii thiu v CSS V d

Ni dung
5

nh ngha Style
Kiu 1
<tag style = property1:value1; property2:value2; propertyN:valueN;></tag>

Kiu 2
SelectorName { property1:value1; property2:value2; propertyN:valueN;}

<tag class = SelectorName> </tag>

V d:
<h1 style= color : blue; font-family : Arial; > DHKHTN </h1>

V d:

.TieuDe1 { color: red; font-family: Verdana, sans-serif; } <h1 class=TieuDe1> DHKHTN </h1>

nh ngha Style Ghi ch


Ging Ghi ch trong C++ S dng /*Ghi ch*/ V d : .SelectorName property1:value1; /*Ghi property2:value2; /*Ghi propertyN:valueN;}

chu chu

{ 1*/ 2*/

Ni dung
8

Phn loi CSS

Gm 3 loi CSS
Inline

Style Sheet (Nhng CSS vo tag HTML) Embedding Style Sheet (Nhng CSS vo trang web) External Style Sheet (Lin kt CSS vi trang web)

Inline Style Sheet

nh ngha style trong thuc tnh style ca tng tag HTML. Theo c php kiu 1.
<tag style = property1:value1;propertyN:valueN;> . </tag>

Khng s dng li c.

V d:

<H1 STYLE="color: yellow">This is yellow</H1>

Embedding Style Sheet

Cn gi l Internal Style Sheet hoc Document-Wide Style Sheet nh ngha style theo c php kiu 2. Trang HTML c ni dung nh sau:

<head> <style type=text/css >


<!-SelectorName { property1:value1; property2:value2; propertyN:valueN;} -->

</style> </head>

Embedding Style Sheet


<HTML> <HEAD>
<TITLE> Embedded Style Sheet </TITLE> <STYLE TYPE="text/css"> <!-P {color: red; font-size: 12pt; font-family: Arial;} H2 {color: green;}

--> </STYLE>

</HEAD> <BODY BGCOLOR="#FFFFFF">


<H2>This is green</H2> <P>This is red, Garamond.</P> 12 pt. and

</BODY> </HTML>

External Style Sheet


Mi style u lu trong file c phn m rng l *.CSS. File CSS: lu tr nhiu style theo c php kiu 2.
Trong file HTML: lin kt bng tag link. C php:

<head> <link rel=stylesheet href=URL type="text/css"> </head>

Trang HTML : Lin kt bng tag style vi @import url. C php

<head> <style type=text/css media="all | print | screen" > @import url(URL); </style> </head>

External Style Sheet


Trong tp tin MyStyle.CSS
H2 { FONT-WEIGHT: bold;

Trong trang Web : demo.htm


<html> <head> <title>Cass</title> <link HREF="MyStyle.css" REL="stylesheet" > </head> <body> <h2>This is an H2 </h2>

FONT-SIZE: 16pt;
COLOR: white; FONT-STYLE: italic; FONT-FAMILY: Arial; BACKGROUND-COLOR: red; font-color: white }

</body>
</html>

So snh, nh gi
Inline Style Sheet Khai bo C php Kiu 1 <p style=color:red;> Test </p> Embedding Style Sheet Kiu 2 <style type=text/css> .TieuDe1{color: red;} </style> <p class=TieuDe1> Test </p> D dng qun l Style theo tng ti liu web. Khng cn ti thm cc trang thng tin khc cho style External Style Sheet Kiu 2 <link rel=stylesheet href=main.css /> <p class=TieuDe1> Test </p> C th thit lp Style cho nhiu ti liu web. Thng tin cc Style c trnh duyt cache li

u im

D dng qun l Style theo tng tag ca ti liu web. C u tin cao nht

Khuyt im

Cn phi Khai bo li thng tin style trong tng ti liu Web v cc ti liu khc mt cch th cng. Kh cp nht style

Cn phi khai bo li thng tin style cho cc ti liu khc trong mi ln s dng

Tn thi gian download file *.css v lm chm qu trnh bin dch web trnh duyt trong ln u s dng

u tin

Th t u tin p dng nh dng khi s dng cc loi CSS ( u tin gim dn) :
1. 2. 3.

4.

Inline Style Sheet Embedding Style Sheet External Style Sheet Browser Default

Ni dung
18

Selector

L tn 1 style tng ng vi mt thnh phn c p dng nh dng Cc dng selectors

HTML element selectors Class selectors ID selectors


V d: .TieuDe1 { color: red; font-family: Verdana, sans-serif; } <h1 class=TieuDe1> DHKHTN </h1>

....

Selector trong CSS


Loi element

M t phm vi nh hng
nh dng p dng cho ND tt c cc tag Element trong ti liu Web nh dng p dng cho ND tt c cc tab c thuc tnh id trong t liu Web nh dng p dng cho ND tt c cc tab c thuc tnh class trong t liu Web nh dng p dng cho ND cc tag Element c thuc tnh class tng ng nh dng p dng cho ND mt nhm cc tag trong ti liu. nh dng p dng cho ND cc th c lng trong mt th cha no

V d
h1 {color: red;}
/* ND ca th <h1> b nh dng mu ch= */

#id

#test {color: green;}


/* ND ca bt k tag c thuc tnh id=test u b nh dng mu ch=xanh l */

.class

.note {color: yellow;}


/* ND ca bt k tag c thuc tnh class=note u b nh dng mu ch=vng*/

element . class

h1.note {text-decoration: underline;}


/* ND ca cc th <h1> c thuc tnh class=note u b nh dng gch chn */

Grouping

h1,h2,h3 {background-color: orange;}


/* ND ca cc th <h1> <h2> <h3> u b nh dng mu nn = mu cam */

Contextual

p strong {color: purple;}


/* ND ca cc th <strong> nm trong th <p> u b nh dng mu ch=mu ta */

Pseudo Class Pseudo element

nh dng c p dng da vo trng thi ca cc Element. (Khng xut hin trong m lnh HTML)

Selector trong CSS - Element

C hiu ng trn tt c element cng loi tag V d :

Selector trong CSS


Loi
element

M t phm vi nh hng
nh dng p dng cho ND tt c cc tag Element trong ti liu Web nh dng p dng cho ND tt c cc tab c thuc tnh id trong t liu Web nh dng p dng cho ND tt c cc tab c thuc tnh class trong t liu Web nh dng p dng cho ND cc tag Element c thuc tnh class tng ng nh dng p dng cho ND mt nhm cc tag trong ti liu. nh dng p dng cho ND cc th c lng trong mt th cha no

V d
h1 {color: red;}
/* ND ca th <h1> b nh dng mu ch= */

#id

#test {color: green;}


/* ND ca bt k tag c thuc tnh id=test u b nh dng mu ch=xanh l */

.class

.note {color: yellow;}


/* ND ca bt k tag c thuc tnh class=note u b nh dng mu ch=vng*/

element . class

h1.note {text-decoration: underline;}


/* ND ca cc th <h1> c thuc tnh class=note u b nh dng gch chn */

Grouping

h1,h2,h3 {background-color: orange;}


/* ND ca cc th <h1> <h2> <h3> u b nh dng mu nn = mu cam */

Contextual

p strong {color: purple;}


/* ND ca cc th <strong> nm trong th <p> u b nh dng mu ch=mu ta */

Pseudo Class Pseudo element

nh dng c p dng da vo trng thi ca cc Element. (Khng xut hin trong m lnh HTML)

Selector trong CSS ID rules

C hiu ng duy nht trn mt element c ng id. V d :

Selector trong CSS


Loi element M t phm vi nh hng nh dng p dng cho ND tt c cc tag Element trong ti liu Web nh dng p dng cho ND tt c cc tab c thuc tnh id trong t liu Web nh dng p dng cho ND tt c cc tab c thuc tnh class trong t liu Web nh dng p dng cho ND cc tag Element c thuc tnh class tng ng nh dng p dng cho ND mt nhm cc tag trong ti liu. nh dng p dng cho ND cc th c lng trong mt th cha no V d h1 {color: red;} /* ND ca th <h1> b nh dng mu ch= */ #test {color: green;} /* ND ca bt k tag c thuc tnh id=test u b nh dng mu ch=xanh l */ .note {color: yellow;} /* ND ca bt k tag c thuc tnh class=note u b nh dng mu ch=vng*/ h1.note {text-decoration: underline;} /* ND ca cc th <h1> c thuc tnh class=note u b nh dng gch chn */ h1,h2,h3 {background-color: orange;} /* ND ca cc th <h1> <h2> <h3> u b nh dng mu nn = mu cam */ p strong {color: purple;} /* ND ca cc th <strong> nm trong th <p> u b nh dng mu ch=mu ta */

#id

.class

element . class

Grouping

Contextual

Pseudo Class Pseudo element

nh dng c p dng da vo trng thi ca cc Element. (Khng xut hin trong m lnh HTML)

Selector trong CSS Class rules

C hiu ng trn tt c cc loi tag c cng gi tr thuc tnh class. V d :

Selector trong CSS


Loi element M t phm vi nh hng nh dng p dng cho ND tt c cc tag Element trong ti liu Web nh dng p dng cho ND tt c cc tab c thuc tnh id trong t liu Web nh dng p dng cho ND tt c cc tab c thuc tnh class trong t liu Web nh dng p dng cho ND cc tag Element c thuc tnh class tng ng nh dng p dng cho ND mt nhm cc tag trong ti liu. nh dng p dng cho ND cc th c lng trong mt th cha no V d h1 {color: red;} /* ND ca th <h1> b nh dng mu ch= */ #test {color: green;} /* ND ca bt k tag c thuc tnh id=test u b nh dng mu ch=xanh l */ .note {color: yellow;} /* ND ca bt k tag c thuc tnh class=note u b nh dng mu ch=vng*/ h1.note {text-decoration: underline;} /* ND ca cc th <h1> c thuc tnh class=note u b nh dng gch chn */ h1,h2,h3 {background-color: orange;} /* ND ca cc th <h1> <h2> <h3> u b nh dng mu nn = mu cam */ p strong {color: purple;} /* ND ca cc th <strong> nm trong th <p> u b nh dng mu ch=mu ta */

#id

.class

element . class

Grouping

Contextual

Pseudo Class Pseudo element

nh dng c p dng da vo trng thi ca cc Element. (Khng xut hin trong m lnh HTML)

Kt hp Element v Class

V d :

Selector trong CSS


Loi element M t phm vi nh hng nh dng p dng cho ND tt c cc tag Element trong ti liu Web nh dng p dng cho ND tt c cc tab c thuc tnh id trong t liu Web nh dng p dng cho ND tt c cc tab c thuc tnh class trong t liu Web nh dng p dng cho ND cc tag Element c thuc tnh class tng ng nh dng p dng cho ND mt nhm cc tag trong ti liu. nh dng p dng cho ND cc th c lng trong mt th cha no V d h1 {color: red;} /* ND ca th <h1> b nh dng mu ch= */ #test {color: green;} /* ND ca bt k tag c thuc tnh id=test u b nh dng mu ch=xanh l */ .note {color: yellow;} /* ND ca bt k tag c thuc tnh class=note u b nh dng mu ch=vng*/ h1.note {text-decoration: underline;} /* ND ca cc th <h1> c thuc tnh class=note u b nh dng gch chn */ h1,h2,h3 {background-color: orange;} /* ND ca cc th <h1> <h2> <h3> u b nh dng mu nn = mu cam */ p strong {color: purple;} /* ND ca cc th <strong> nm trong th <p> u b nh dng mu ch=mu ta */

#id

.class

element . class

Grouping

Contextual

Pseudo Class Pseudo element

nh dng c p dng da vo trng thi ca cc Element. (Khng xut hin trong m lnh HTML)

Contextual Selection

nh dng c p dng cho ni dung trong chui tag theo ng th t V d :

Selector trong CSS


Loi element M t phm vi nh hng nh dng p dng cho ND tt c cc tag Element trong ti liu Web nh dng p dng cho ND tt c cc tab c thuc tnh id trong t liu Web nh dng p dng cho ND tt c cc tab c thuc tnh class trong t liu Web nh dng p dng cho ND cc tag Element c thuc tnh class tng ng nh dng p dng cho ND mt nhm cc tag trong ti liu. nh dng p dng cho ND cc th c lng trong mt th cha no V d h1 {color: red;} /* ND ca th <h1> b nh dng mu ch= */ #test {color: green;} /* ND ca bt k tag c thuc tnh id=test u b nh dng mu ch=xanh l */ .note {color: yellow;} /* ND ca bt k tag c thuc tnh class=note u b nh dng mu ch=vng*/ h1.note {text-decoration: underline;} /* ND ca cc th <h1> c thuc tnh class=note u b nh dng gch chn */ h1,h2,h3 {background-color: orange;} /* ND ca cc th <h1> <h2> <h3> u b nh dng mu nn = mu cam */ p strong {color: purple;} /* ND ca cc th <strong> nm trong th <p> u b nh dng mu ch=mu ta */

#id

.class

element . class

Grouping

Contextual

Pseudo Class Pseudo element

nh dng c p dng da vo trng thi ca cc Element. (Khng xut hin trong m lnh HTML)

Pseudo Class

nh dng da vo trng thi ca lin kt, s kin chut. C th kt hp vi Selector khc.