Está en la página 1de 46

Pht trin ng dng Web

CSS Casscading Style Sheets


Ths. Trn Th Bch Hnh

Khoa CNTT H.KHTN


2011 Khoa Cng ngh thng tin

Pht trin ng dng Web - 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 Box Model v nh v

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - 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 Box Model v nh v

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

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)

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

Gii thiu v CSS V d

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - 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 Box Model v nh v

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

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>

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

nh ngha Style Ghi ch


Ging Ghi ch trong C++ S dung /*Ghi ch*/ V d : SelectorName { property1:value1; /*Ghi chu 1*/ property2:value2; /*Ghi chu 2*/ propertyN:valueN;}

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - 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 Box Model v nh v

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

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)

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

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.
<tag style = property1:value1;propertyN:valueN;> . </tag>

Khng s dng li c. V d:
<H1 STYLE="color: yellow">This is yellow</H1>

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

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" >
<!-SelectorName { property1:value1; property2:value2; propertyN:valueN;} -->

</style> </head>

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

S dng v Phn loi CSS - 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, 12 pt. and Garamond.</P>

</BODY> </HTML>

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

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>
2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

S dng v Phn loi CSS - External Style Sheet


Trong tp tin MyStyle.CSS
H2 { FONT-WEIGHT: bold; FONT-SIZE: 16pt; COLOR: white; FONT-STYLE: italic; FONT-FAMILY: Arial; BACKGROUND-COLOR: red; font-color: white }

Trong trang Web : demo.htm


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

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

S dng v Phn loi CSS So snh, nh gi


Inline Style Sheet Embedding Style Sheet External Style Sheet

Khai bo C php

Kiu 1
<p style=color:red;> Test </p>

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

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

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

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

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 3. External Style Sheet 4. Browser Default

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - 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 Box Model v nh v

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

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>

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

Selector trong CSS


Loi
Universal Element #id .class Element . class Grouping Contextual Pseudo Class Pseudo Element Child & adjacent sibling Attribute

Selector
* div #itemid .class div .class div, span div span a:hover div:firstletter div > span div + span a[attr] a[attr='x'] a[class~='x'] a[lang|='en']

ngha
Tt c cc th <div> Th c id=itemid Cc th c thuc tnh class=class Cc th <div> c thuc tnh class=class Th <div> v <span> Th <span> lng trong th <div>

Th span c th cha l <div> Th <span> c th ng trc l <div> Th <a> c thuc tnh Th <a> c thuc tnh Th <a> c thuc tnh Th <a> c thuc tnh attr attr c gi tr x class l danh sch c cha gi tr x lang bt u vi gi tr en

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

Selector trong CSS - Element


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

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

Selector trong CSS ID rules


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

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

Selector trong CSS Class rules


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

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

Selector trong CSS Kt hp Element v Class


V d :

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

Selector trong CSS - Contextual Selection


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

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

Selector trong CSS Pseudo Class


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

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

Selector trong CSS Pseudo Element


nh dng da vo v tr u tin ca k t, ca dng vn bn :first-letter, :first-line C th kt hp vi Element khc

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

Selector trong CSS Pseudo Element

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - 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 Box Model v nh v

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

Box Model

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

Box Model - Standard

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

Box Model - IE6

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

Margin Collapsing

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

Margin Collapsing (tt)

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

Margin Collapsing (tt)

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

Margin Collapsing (tt)

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

nh v
Flow (default) Relative Absolute Float

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

Relative position

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

Absolute position

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

Float position

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

Float position (tt)

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

Float position (tt)

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

Float position (tt)

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

Float position (tt)

2011 Khoa CNTT - HKHTN

Pht trin ng dng Web - CSS Casscading Styte Sheet

Ti liu tham kho


CSS Cheat Sheet Andy Budd, CSS Mastery - Advanced Web Standard Solutions, Second Edition, 2009

2011 Khoa CNTT - HKHTN