WebCourse - CSS

Chuyn C s d liu v WEB
Bai 3
CSS Casscading Style Sheets
Khoa CNTT H.KHTN

2009 Khoa Cng ngh thng tin
Chuyn c s d liu v WEB Bi 3 :CSS Casscading Styte Sheet
Ni dung
Gii thiu CSS nh ngha Style S dng v Phn loi CSS Selector trong CSS v phm vi nh hng
2009 Khoa CNTT - HKHTN
Ni dung
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 1
Mt style xut hin nhiu ni trn trang mt / nhiu trang web

CSS
Gii thiu v CSS V d 2

Style hng
Style xanh
Thay i cch trnh by ca ton b trang web

CSS
Gii thiu CSS

tng ca CSS: Tch ri phn ni dung khi phn hin th ca mt trang web
Mt s li ch khi s dng CSS

c lp thnh phn ni dung vi thnh phn trnh by ca mt trang web Vic vit code cho trang web tr nn d dng D dng to nn s thay i giao din cho ton b trang web (site-wide changes) Vic hin th (download) trang web s nhanh hn D dng cho php ngi s dng customize thnh style mong mun (style swichers)
Ni dung
nh ngha style - Kiu 1

nh ngha v s dng trc tip trong cc th HTML C php:
<tag style = "property1: value1; property2: value2; "> D liu
</tag> Trong : tag : th HTML property1, property2, ...: thuc tnh value1, value2, ...: gi tr ca thuc tnh
nh ngha style - Kiu 1 - V d

HTML Browser
nh ngha style - Kiu 2

Khai bo
selector_name { property1: value1 ; property2: value2 ; ... } selector_name: quy nh phm vi nh hng ca style. property1, property1 : thuc tnh value1, value2 : gi tr
S dng
Tu loi ca selector_name m c cch s dng khc nhau. V d: <tag class="selector_name">
...
<tag/>
nh ngha style - Kiu 2- Mt v d

HTML Browser
nh ngha Style Ghi ch

Ging ghi ch trong C++ S dng: /*Ghi chu */ V d :
.TieuDe1 { background-color: green; /*nn mu xanh */ color: yellow; /*ch mu vng */
font-weight: bold; /*ch m */

}
Ni dung
S dng v Phn loi CSS Phn loi

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)
S dng v Phn loi CSS - Inline Style Sheet

nh ngha style trong thuc tnh style ca tng tag HTML. Theo c php kiu 1. Khng s dng li c.
S dng v Phn loi CSS - Embedding Style Sheet

Cn gi l Internal Style Sheet hoc Document-Wide Style Sheet Mi nh ngha type nm trong tag <style> ca trang HTML. nh ngha style theo c php kiu 2.
Trang HTML c ni dung nh sau: <head> <style type=text/css media="all | print | screen" > style rules style rules </style> </head>
Embedding Style Sheet - V d
S dng v Phn loi CSS - 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 - V d

mystyle.css
Sample1.html
Sample2.html
S dng v Phn loi CSS So snh, nh gi

Inline Style Sheet Khai bo 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 Cn phi khai bo li thng tin style cho cc ti liu khc trong mi ln s dng
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 Tn thi gian download file *.css v lm chm qu trnh bin dch web trnh duyt trong ln u s dng
C php s dng
u im
D dng qun l Style theo tng tag ca ti liu web.
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
S dng CSS
mystyle.css
Sample1.html
Mu no y ?
S dng CSS
mystyle.css
Sample1.html \\
S dng v Phn loi CSS u tin

Th t u tin p dng nh dng khi s dng cc loi CSS ( u tin gim dn) :
1. Inline Style Sheet 2. Embedding Style Sheet (Internal Style Sheet)
3. External Style Sheet

4. Browser Default
Ni dung
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 ....
Selector trong CSS - Element (1)

Khai bo
tag_name { property1: value1 ; property2: value2 ; ... } tag_name: tn cc th HTML
S dng
Stlye s c hiu ng trn tt c cc th tag_name
V d:
h1 { background-color:green; }
Selector trong CSS - Element
Selector trong CSS - Element
Selector trong CSS - ID rules (2)

Khai bo
#id { property1: value1; property2: value2; ... } id: gi tr id ca mt th mun p dng style V d: #title { background-color:green; }
S dng
Stlye s c hiu ng trn tt c cc th m c gi tr ca thuc tnh id = id.
Mun s dng th phi khai bo gi tr cho thuc tnh id ca th.

Gi tr ca id thng duy nht
V d:
<div id="title"> ..... </div>
Selector trong CSS - ID rules
Selector trong CSS ID rules
Selector trong CSS - Class rules

Khai bo
.class_name{ property1: value1; property2: value2; ... } V d: V d:
S dng
Stlye s c p dng trn tt c cc th m c gi tr ca thuc tnh class = class_name.
.bkgr_style{
background-color:green; }
<p class="bkgr_style"> ..... </p>
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 Class rules
Selector trong CSS - Kt hp Element v Class

Khai bo
tag_name .class_name{ property1: value1; property2: value2; ... } V d: h1.veryimportant { V d: <h1 class="veryimportant"> ..... </h1>
S dng
Style s c p dng cho cc th c tn l tag_name ng thi gi tr ca thuc tnh class = class_name
backgroundcolor:yellow;
}
Selector trong CSS Kt hp Element v Class
Selector trong CSS - Contextual Selection

Khai bo
tag1 tag2{ property1: value1; property2: value2; ... } V d: div b {
S dng
Style s c p dng nu ni dung nm trong cc th lng nhau theo ng th t tag1 tag2 V d: <div> <b>
background-color: yellow;
}
....
</b> </div>
Selector trong CSS - Contextual Selection - phc tp
Selector trong CSS - Contextual Selection - phc tp
Firefox
Internet Explorer
Chrome
Selector trong CSS Pseudo Class

nh dng da vo trng thi ca lin kt, s kin chut. C th kt hp vi Selector khc.
Selector trong CSS - Pseudo classes
Selector trong CSS Pseudo Element

nh dng cho k t u tin, cho dng vn bn u tin
:first-letter, :first-line C th kt hp vi Selector khc.
V d
Selector trong CSS Pseudo Element
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 2009 Khoa CNTT - HKHTN trong m lnh HTML)
Tham kho
http://www.w3schools.com/css/default.asp
Firefox Add-ons: Web Developer 1.1.6

https://addons.mozilla.org/en-US/firefox/addon/60 Cng c s dng xem cc thng tin ca mt trang web:
Cookies
Images
Forms CSS
Q&A

WebCourse - CSS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WebCourse - CSS

Uploaded by

Copyright:

Available Formats

Chuyn C s d liu v WEB

Khoa CNTT H.KHTN

Chuyn c s d liu v WEB Bi 3 :CSS Casscading Styte Sheet

2009 Khoa CNTT - HKHTN

Chuyn c s d liu v WEB Bi 3 :CSS Casscading Styte Sheet

2009 Khoa CNTT - HKHTN

Chuyn c s d liu v WEB Bi 3 :CSS Casscading Styte Sheet

Gii thiu v CSS

2009 Khoa CNTT - HKHTN

Chuyn c s d liu v WEB Bi 3 :CSS Casscading Styte Sheet

Gii thiu v CSS V d 1

Mt style xut hin nhiu ni trn trang mt / nhiu trang web

Chuyn c s d liu v WEB Bi 3 :CSS Casscading Styte Sheet

Gii thiu v CSS V d 2

Thay i cch trnh by ca ton b trang web

Chuyn c s d liu v WEB Bi 3 :CSS Casscading Styte Sheet

Gii thiu CSS

2009 Khoa CNTT - HKHTN

Chuyn c s d liu v WEB Bi 3 :CSS Casscading Styte Sheet

Mt s li ch khi s dng CSS

2009 Khoa CNTT - HKHTN

Chuyn c s d liu v WEB Bi 3 :CSS Casscading Styte Sheet

2009 Khoa CNTT - HKHTN

Chuyn c s d liu v WEB Bi 3 :CSS Casscading Styte Sheet

nh ngha style - Kiu 1

2009 Khoa CNTT - HKHTN

Chuyn c s d liu v WEB Bi 3 :CSS Casscading Styte Sheet

nh ngha style - Kiu 1 - V d

2009 Khoa CNTT - HKHTN

Chuyn c s d liu v WEB Bi 3 :CSS Casscading Styte Sheet

nh ngha style - Kiu 2

Chuyn c s d liu v WEB Bi 3 :CSS Casscading Styte Sheet

nh ngha style - Kiu 2- Mt v d

2009 Khoa CNTT - HKHTN

Chuyn c s d liu v WEB Bi 3 :CSS Casscading Styte Sheet

nh ngha Style Ghi ch

font-weight: bold; /*ch m */

Chuyn c s d liu v WEB Bi 3 :CSS Casscading Styte Sheet

2009 Khoa CNTT - HKHTN

Chuyn c s d liu v WEB Bi 3 :CSS Casscading Styte Sheet

S dng v Phn loi CSS Phn loi

2009 Khoa CNTT - HKHTN

Chuyn c s d liu v WEB Bi 3 :CSS Casscading Styte Sheet

S dng v Phn loi CSS - Inline Style Sheet

2009 Khoa CNTT - HKHTN

Chuyn c s d liu v WEB Bi 3 :CSS Casscading Styte Sheet

S dng v Phn loi CSS - Embedding Style Sheet

Chuyn c s d liu v WEB Bi 3 :CSS Casscading Styte Sheet

Embedding Style Sheet - V d

2009 Khoa CNTT - HKHTN

Chuyn c s d liu v WEB Bi 3 :CSS Casscading Styte Sheet

S dng v Phn loi CSS - External Style Sheet

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

Chuyn c s d liu v WEB Bi 3 :CSS Casscading Styte Sheet

External Style Sheet - V d

2009 Khoa CNTT - HKHTN

Chuyn c s d liu v WEB Bi 3 :CSS Casscading Styte Sheet

S dng v Phn loi CSS So snh, nh gi

Embedding Style Sheet Kiu 2

External Style Sheet Kiu 2

D dng qun l Style theo tng tag ca ti liu web.

2009 Khoa CNTT - HKHTN

Chuyn c s d liu v WEB Bi 3 :CSS Casscading Styte Sheet

2009 Khoa CNTT - HKHTN

font-weight: bold; /ch m /