Cú pháp CSS

Nhìn qua ví dụ trên ít nhiều chúng ta cũng thấy được mối tương đồng giữa cácthuộc tính trong HTML và CSS cho nên nếu bạn đã học qua HTML thì cũng sẽrất dễ dàng tiếp thu CSS. Đó là một chút lợi thế của câu chuyện hành trình màPearl đã nói ở bài trước. Nhưng không sao cả, bây giờ hãy nhìn vào ví dụ củachúng ta và các bạn xem nó có giống với cấu trúc sau không nhé.
Nội dung trích xuất từ tài liệu:
Cú pháp CSS2.1.CúphápCSS:ĐểtìmhiểucúphápCSSchúngtahãythửxemmộtvídụsau.Vídụ:Đểđịnhmàunềnchomộttrangweblàxanhnhạt(lightcyan)chúngtadùngcodesau:+TrongHTML:+TrongCSS:body{backgroundcolor:#00BFF3;}NhìnquavídụtrênítnhiềuchúngtacũngthấyđượcmốitươngđồnggiữacácthuộctínhtrongHTMLvàCSSchonênnếubạnđãhọcquaHTMLthìcũngsẽrấtdễdàngtiếpthuCSS.ĐólàmộtchútlợithếcủacâuchuyệnhànhtrìnhmàPearlđãnóiởbàitrước.Nhưngkhôngsaocả,bâygiờhãynhìnvàovídụcủachúngtavàcácbạnxemnócógiốngvớicấutrúcsaukhôngnhé.CúphápCSScơbản:Selector{property:value;}Trongđó:+Selector:Cácđốitượngmàchúngtasẽápdụngcácthuộctínhtrìnhbày.NólàcáctagHTML,classhayid(chúngtasẽhọcvề2thànhphầnnàyởbàihọcsau).Vídụ:body,h2,p,img,#title,#content,.username,…TrongCSSngoàiviếttênselectortheotêntag,class,id.Chúngtacòncóthểviếttênselectortheophâncấpnhưđểchỉcácảnhởtrong#entry,chúngtaviếtselectorlà#entryimg,nhưvậythìcácthuộctínhchỉđịnhsẽchỉápdụngriêngchocácảnhnằmtrong#entry.Khiviếttênchoclass,đôikhisẽcónhiềuthànhphầncócùngclassđó,vídụnhưthẻimgvàthẻacùngcóclasstênvistorsnhưngđâylạilàhaiđốitượngkhácnhau,1cáilàảnhcủangườithăm,1cáilàliênkếttớitrangngườithăm.NênnếukhiviếtCSStaghilà.visitors{width:50}thìsẽảnhhưởngtớicảhaithànhphần.Nêntrongtrườnghợpnày,nếubạncóýdùngCSSđóchỉriêngphầnảnhthìchỉnềnghilàimg.visitorsthôi.MộtlốiviếttênselectornữađólàdựatrêntêncácthuộctínhcótrongHTML.VídụtrongHTMLtacóđoạnmãnhưvầy:body{background:#FFF;color:#FF0000;fontsize:14pt}Đểdễđọchơn,bạnnênviếtmỗithuộctínhCSSởmộtdòng.Tuynhiên,nósẽlàmtăngdunglượnglưutrữCSScủabạn.Vídụ:body{background:#FFF;color:#FF0000;fontsize:14pt}Đốivớimộttrangwebcónhiềuthànhphầncócùngmộtsốthuộctính,chúngtacóthểthựchiệngomgọnlạinhưsau:h1{color:#0000FF;texttransform:uppercase}h2{color:#0000FF;texttransform:uppercase;}h3{color:#0000FF;texttransform:uppercase;}=>h1,h2,h3{color:#0000FF;texttransform:uppercase;}+Value:Giátrịcủathuộctính.Vídụ:nhưvídụtrênvaluechínhlà#FFFdùngđểđịnhmàutrắngchonềntrang.Đốivớimộtgiátrịcókhoảngtrắng,bạnnênđặttấtcảtrongmộtdấungoặckép.Vídụ:fontfamily:”TimesNewRoman”Đốivớicácgiátrịlàđơnvịđo,khôngnênđặtmộtkhoảngcáchgiữasốđovớiđơnvịcủanó.Vídụ:width:100px.NósẽlàmCSScủabạnbịvôhiệutrênMozilla/FirefoxhayNetscape.ChúthíchtrongCSS:Cũngnhưnhiềungônngữwebkhác.TrongCSS,chúngtacũngcóthểviếtchúthíchchocácđoạncodeđểdễdàngtìm,sửachữatrongnhữnglầncậpnhậtsau.ChúthíchtrongCSSđượcviếtnhưsau/*Nộidungchúthích*/Vídụ:/*Màuchữchotrangweb*/body{color:red}2.2.ĐơnvịCSS:TrongCSS2hỗtrợcácloạiđơnvịlàđơnvịđochiềudàivàđơnvịđogóc,thờigian,cườngđộâmthanhvàmàusắc.Tuynhiên,sửdụngphổbiếnnhấtvẫnlàđơnvịđochiềudàivàmàusắc.SauđâylàbảngliệtkêcácđơnvịchiềudàivàmàusắcdùngtrongCSS. Đơnvịchiềudài2.3.VịtríđặtCSS:ỞtrênchúngtađãtìmhiểuvềcúphápviếtCSS,nhưngcònđặtnóởđâutrongtàiliệuHTML?Trongphầnnày,Pearlxingiớithiệuvớicácbạnvềvấnđềnày.ChúngtacóbacáchkhácnhauđểnhúngCSSvàotrongmộttàiliệuHTML+Cách1:Nộituyến(kiểuthuộctính)ĐâylàmộtphươngphápnguyênthủynhấtđểnhúngCSSvàomộttàiliệuHTMLbằngcáchnhúngvàotừngthẻHTMLmuốnápdụng.Vàdĩnhiêntrongtrườnghợpnàychúngtasẽkhôngcầnselectortrongcúpháp.Lưuý:NếubạnmuốnápdụngnhiềuthuộctínhchonhiềuthẻHTMLkhácnhauthìkhôngnêndùngcáchnày.Ởvídụsauchúngtasẽtiếnhànhđịnhnềnmàutrắngchotrangvàmàuchữxanhláchođoạnvănbảnnhưsau:Vídụ^_^WelcomeToNgocanh’sBlog^_^+Cách2:Bêntrong(thẻstyle)ThậtranếunhìnkỹchúngtacũngnhậnrađâychỉlàmộtphươngcáchthaythếcáchthứnhấtbằngcáchrúttấtcảcácthuộctínhCSSvàotrongthẻstyle(đểtiệnchocôngtácbảotrì,sửachữaấymà).Cũngvídụlàmtrangwebcómàunềntrắng,đoạnvănbảnchữxanhlá,chúngtasẽthểhiệnnhưsau:Vídụbody{backgroundcolor:#FFF}p{color:#00FF00}^_^WelcomeTongocanh’sBlog^_^Lưuý:Thẻstylenênđặttrongthẻhead.Đốivớinhữngtrìnhduyệtcũ,khôngthểnhậnrathẻstyle.Theomặcđịnh,thìkhimộttrìnhduyệtkhôngnhậnramộtthẻthìnósẽhiệnraphầnnộidungchứatrongthẻ.Nhưởvídụtrên,nếutrìnhduyệtkhônghỗtrợthẻstylethì2dòngCSS:body{backgroundcolor:#FFF}p{color:#00FF00}sẽhiệnratrên ...