Công cụ thiết kế Web - CSS

ChChChChươươươươngngngng 3.3.3.3. MMMMỘỘỘỘTTTT SSSSỐỐỐỐ CÔNGCÔNGCÔNGCÔNG 
 CCCCỤỤỤỤ THITHITHITHIẾẾẾẾTTTT KKKKẾẾẾẾ WEBSITEWEBSITEWEBSITEWEBSITE
 Bộ môn CNTT – Khoa Tin họcthương mại
 –Trường ĐH Thương Mại
 Email: cntt@vcu.edu.vn
 NNộộii dungdung
•• NgônNgôn ngngữữ đđáánhnh ddấấuu HTMLHTML
•• PHP,PHP, JavascriptJavascript
•• MMộộtt ssốố côngcông ccụụ hhỗỗ trtrợợ thithiếếtt kkếế websitewebsite
9/3/2009 Công cụ thiết kế Web - CSS 2
 3.1.3.1. NgônNgôn ngngữữ đđáánhnh ddấấuu HTMLHTML
3.1.1.3.1.1. TTổổngng quanquan vvềề HTMLHTML
3.1.2.3.1.2. CCáácc ththẻẻ ccủủaa HTMLHTML 
3.1.3.3.1.3. SSửử ddụụngng FrontpageFrontpage thithiếếtt kkếế webweb ttĩĩnhnh
3.1.4.3.1.4. ĐĐịịnhnh ddạạngng websitewebsite vvớớii CSSCSS
9/3/2009 Công cụ thiết kế Web - CSS 3
 CSSCSS
•• CSS=CascadingCSS=Cascading StyleStyle Sheet:Sheet: MMẫẫuu quyquy đđịịnhnh ccááchch
 ththứứcc ththểể hihiệệnn ccáácc ththẻẻ HTMLHTML
•• StyleStyle đưđượợcc đưđưaa vvààoo HTMLHTML 4.04.0 đđểể gigiảảii quyquyếếtt mmộộtt ssốố
 vvấấnn đđềề..
•• GiGiúúpp titiếếtt kikiệệmm đưđượợcc rrấấtt nhinhiềềuu ththờờii giangian vvàà côngcông ssứứcc
 chocho viviệệcc thithiếếtt kkếế web.web.
•• CCóó ththểể đđịịnhnh nghnghĩĩaa nhinhiềềuu stylestyle vvààoo mmộộtt ththẻẻ HTMLHTML 
 (Cascading)(Cascading)
9/3/2009 Công cụ thiết kế Web - CSS 4
 CCáácc loloạạii stylestyle
•• CCóó 44 loloạạii style:style:
 –– InlineInline StyleStyle (Style(Style đưđượợcc quiqui đđịịnhnh trongtrong 11 ththẻẻ HTMLHTML ccụụ ththểể))
 –– InternalInternal StyleStyle (Style(Style đưđượợcc quiqui đđịịnhnh trongtrong phphầầnn ccủủaa
 11 trangtrang HTMLHTML ))
 –– ExternalExternal StyleStyle (style(style đưđượợcc quiqui đđịịnhnh trongtrong filefile .CSS.CSS ngongoààii))
 –– BrowserBrowser DefaultDefault ((thithiếếtt llậậpp mmặặcc đđịịnhnh ccủủaa trtrììnhnh duyduyệệtt))
•• ThThứứ ttựự ưưuu tiêntiên:: MMứứcc ưưuu tiêntiên gigiảảmm ddầầnn ttừừ trêntrên xuxuốốngng
9/3/2009 Công cụ thiết kế Web - CSS 5
 CCááchch chchèènn CSSCSS
•• ĐĐặặtt trongtrong ……
•• VVớớii InternalInternal style:style:
 >
 <!<!----
 NNộộii dungdung đđịịnhnh nghnghĩĩaa stylestyle
 ---->>
9/3/2009 Công cụ thiết kế Web - CSS 6
 CCááchch chchèènn CSSCSS ((tttt))
•• VVớớii ExternalExternal style:style:
 –– ĐĐịịnhnh nghnghĩĩaa stylestyle trongtrong filefile riêngriêng ((ththưườờngng ccóó đđuôiuôi .CSS).CSS)
 –– NhNhúúngng filefile CSSCSS đđãã đđịịnhnh nghnghĩĩaa vvààoo trangtrang web:web:
 <link<link hrefhref==““đđịịaa chchỉỉ file"file" relrel="="stylesheetstylesheet"" 
 type="text/type="text/csscss">">
•• VVớớii InlineInline style:style:
 >
9/3/2009 Công cụ thiết kế Web - CSS 7
KhaiKhai bbááoo vvàà ssửử ddụụngng stylestyle
 ChChúú ýý khikhi viviếếtt stylestyle
•• StyleStyle phânphân bibiệệtt chchữữ hoahoa,, chchữữ ththưườờngng
•• ĐĐểể ghighi chchúú trongtrong stylestyle ssửử ddụụngng::
 /*/*
 ĐĐooạạnn ghighi chchúú
 */*/
9/3/2009 Công cụ thiết kế Web - CSS 9
 KhaiKhai bbááoo stylestyle
selectorselector {{
 Property1:Property1: Value1;Value1; 
 Property2:Property2: Value2;Value2;
}}
9/3/2009 Công cụ thiết kế Web - CSS 10
 StyleStyle áápp ddụụngng chocho ththẻẻ ccụụ ththểể
•• TrTrưườờngng hhợợpp 11 ththẻẻ:: ĐĐặặtt selectorselector llàà tên_thtên_thẻẻ
 pp {{
 color:color: red;red;
 }}
•• KhaiKhai bbááoo đđồồngng ththờờii nhinhiềềuu ththẻẻ:: ViViếếtt danhdanh ssááchch têntên ththẻẻ
 phânphân ccááchch bbởởii ddấấuu phphảảyy
 h1,h2,h3,h4,h5,h6{h1,h2,h3,h4,h5,h6{
 fontfont--family:arialfamily:arial;;
 }}
9/3/2009 Công cụ thiết kế Web - CSS 11
 TTạạoo llớớpp
•• GGắắnn vvớớii ththẻẻ ccụụ ththểể:: ĐĐặặtt selectorselector llàà tên_thtên_thẻẻ.tên_l.tên_lớớpp
 p.loai1{p.loai1{
 color:redcolor:red;;
 }}
 p.loai2{p.loai2{
 color:bluecolor:blue;;
 }}
•• KhôngKhông ggắắnn vvớớii ththẻẻ ccụụ ththểể:: bbỏỏ phphầầnn tên_thtên_thẻẻ đđii,, gigiữữ llạạii ddấấuu chchấấmm::
 .loai3{.loai3{
 color:greencolor:green;;
 }}
9/3/2009 Công cụ thiết kế Web - CSS 12
 SSửử ddụụngng llớớpp
•• ĐĐặặtt thuthuộộcc ttíínhnh classclass ccủủaa ththẻẻ==““tên_ltên_lớớpp””::
 >
•• VVíí ddụụ::
 >ĐĐooạạnn nnààyy mmààuu đđỏỏ
 Style>Style khôngkhông ccóó hihiệệuu llựựcc
 >TiêuTiêu đđềề mmààuu xanhxanh
9/3/2009 Công cụ thiết kế Web - CSS 13
 ĐĐịịnhnh danhdanh
•• TTươươngng ttựự nhnhưư class.class. ThayThay ddấấuu chchấấmm (.)(.) ththàànhnh ddấấuu ththăăngng (#).(#).
•• ChoCho ththẻẻ ccụụ ththểể:: tên_thtên_thẻẻ##đđịịnh_danhnh_danh{{……}}
•• TTổổngng ququáátt:: ##đđịịnh_danhnh_danh{{……}}
•• VVíí ddụụ::
 p#doan1{p#doan1{
 color:redcolor:red;;
 }}
 #loai2{#loai2{
 color:bluecolor:blue;;
 }}
9/3/2009 Công cụ thiết kế Web - CSS 14
 SSửử ddụụngng đđịịnhnh danhdanh
•• MMỗỗii đđịịnhnh danhdanh llàà duyduy nhnhấấtt trêntrên trangtrang
•• ĐĐặặtt thuthuộộcc ttíínhnh idid ccủủaa ththẻẻ == đđịịnh_danhnh_danh
 >
•• VVíí ddụụ::
 >ĐĐooạạnn nnààyy mmààuu đđỏỏ
 >TiêuTiêu đđềề xanhxanh
9/3/2009 Công cụ thiết kế Web - CSS 15
MMộộtt ssốố trtrưườờngng hhợợpp ccụụ ththểể
 CSSCSS BasicBasic
1.1. CSSCSS BackgroundBackground
2.2. CSSCSS TextText
3.3. CSSCSS FontFont
4.4. CSSCSS BorderBorder
5.5. CSSCSS MarginMargin
6.6. CSSCSS PaddingPadding
7.7. CSSCSS ListList
9/3/2009 Công cụ thiết kế Web - CSS 17
 CSSCSS AdvancedAdvanced
1.1. CSSCSS DimensionDimension
2.2. CSSCSS ClassificationClassification
3.3. CSSCSS PositioningPositioning
4.4. CSSCSS PseudoPseudo--classclass
5.5. CSSCSS PseudoPseudo--elementelement
6.6. CSSCSS MediaMedia TypesTypes
9/3/2009 Công cụ thiết kế Web - CSS 18
 CSSCSS chocho nnềềnn
9/3/2009 Công cụ thiết kế Web - CSS 19
 CSSCSS chocho nnềềnn ((tttt))
9/3/2009 Công cụ thiết kế Web - CSS 20
 CSSCSS vvàà chocho bbảảnn
9/3/2009 Công cụ thiết kế Web - CSS 21
 CSSCSS vvàà chocho bbảảnn ((tttt))
9/3/2009 Công cụ thiết kế Web - CSS 22
 CSSCSS vvàà fontfont
9/3/2009 Công cụ thiết kế Web - CSS 23
 CSSCSS vvàà fontfont ((tttt))
9/3/2009 Công cụ thiết kế Web - CSS 24
 CSSCSS vvàà fontfont ((tttt))
9/3/2009 Công cụ thiết kế Web - CSS 25
 CSSCSS vvàà fontfont ((tttt))
9/3/2009 Công cụ thiết kế Web - CSS 26
 CSSCSS vvàà đưđườờngng viviềềnn
9/3/2009 Công cụ thiết kế Web - CSS 27
9/3/2009 Công cụ thiết kế Web - CSS 28
9/3/2009 Công cụ thiết kế Web - CSS 29
9/3/2009 Công cụ thiết kế Web - CSS 30
9/3/2009 Công cụ thiết kế Web - CSS 31
9/3/2009 Công cụ thiết kế Web - CSS 32
9/3/2009 Công cụ thiết kế Web - CSS 33
 Ví dụ
 .Item {
A.bar1 { cursor: hand;
 COLOR: #6fa37e; font-family: .VnArial;
 FONT-FAMILY: "verdana"; font-size: 14;
 FONT-SIZE: 12pt; font-style: normal;
 FONT-WEIGHT: bold; background-color:#006666;
 TEXT-DECORATION: none color:ffffeb
} }
A.bar1:hover { .Item2 {
 COLOR: red; cursor: hand;
 FONT-SIZE: 13pt font-family: .VnArial;
} font-size: 14;
A.bar2 { font-style: normal;
 COLOR: #003300; background-color:#FFFFFF;
 FONT-FAMILY: ".VnTime"; color:blue
 FONT-SIZE: 12pt; }
 FONT-WEIGHT: bold; .colorbook {
 TEXT-DECORATION: none font-family: .Arial;
} font-size: 16;
A.bar2:hover { font-style: normal;
 COLOR: red; background-color:#000000;
 FONT-SIZE: 13pt color:#ffffff
} }
 9/3/2009 Công cụ thiết kế Web - CSS 34
 §¨ng ký
9/3/2009 Công cụ thiết kế Web - CSS 35