|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
属性值就追加上去,重复的属性值就以最后一个为准。这里要注意的是,样式的先后不是根据页面上应用的名字顺序,而是样式表里的样式顺序。
网页制造poluoluo文章简介:CSS英文教程:CSS语法:Syntax.
Syntax
TheCSSsyntaxismadeupofthreeparts:aselector,apropertyandavalue:
selector{property:value}TheselectorisnormallytheHTMLelement/tagyouwishtodefine,thepropertyistheattributeyouwishtochange,andeachpropertycantakeavalue.Thepropertyandvalueareseparatedbyacolon,andsurroundedbycurlybraces:
body{color:black}Note:Ifthevalueismultiplewords,putquotesaroundthevalue:
p{font-family:"sansserif"}Note:Ifyouwanttospecifymorethanoneproperty,youmustseparateeachpropertywithasemicolon.Theexamplebelowshowshowtodefineacenteralignedparagraph,witharedtextcolor:
p{text-align:center;color:red}Tomakethestyledefinitionsmorereadable,youcandescribeonepropertyoneachline,likethis:
p
{
text-align:center;
color:black;
font-family:arial
}
Grouping
Youcangroupselectors.Separateeachselectorwithacomma.Intheexamplebelowwehavegroupedalltheheaderelements.Allheaderelementswillbedisplayedingreentextcolor:
h1,h2,h3,h4,h5,h6
{
color:green
}
TheclassSelector
WiththeclassselectoryoucandefinedifferentstylesforthesametypeofHTMLelement.
Saythatyouwouldliketohavetwotypesofparagraphsinyourdocument:oneright-alignedparagraph,andonecenter-alignedparagraph.Hereishowyoucandoitwithstyles:
p.right{text-align:right}
p.center{text-align:center}YouhavetousetheclassattributeinyourHTMLdocument:
<pclass="right">Thisparagraphwillberight-aligned.</p>
<pclass="center">Thisparagraphwillbecenter-aligned.</p>Note:Toapplymorethanoneclasspergivenelement,thesyntaxis:
<pclass="centerbold">Thisisaparagraph.</p>Theparagraphabovewillbestyledbytheclass"center"ANDtheclass"bold".
YoucanalsoomitthetagnameintheselectortodefineastylethatwillbeusedbyallHTMLelementsthathaveacertainclass.Intheexamplebelow,allHTMLelementswithclass="center"willbecenter-aligned:
.center{text-align:center}Inthecodebelowboththeh1elementandthepelementhaveclass="center".Thismeansthatbothelementswillfollowtherulesinthe".center"selector:
<h1class="center">Thisheadingwillbecenter-aligned</h1>
<pclass="center">Thisparagraphwillalsobecenter-aligned.</p>
DoNOTstartaclassnamewithanumber!ThisisonlysupportedinInternetExplorer.
AddStylestoElementswithParticularAttributes
YoucanalsoapplystylestoHTMLelementswithparticularattributes.
Thestylerulebelowwillmatchallinputelementsthathaveatypeattributewithavalueof"text":
input[type="text"]{background-color:blue}
TheidSelector
YoucanalsodefinestylesforHTMLelementswiththeidselector.Theidselectorisdefinedasa#.
Thestylerulebelowwillmatchtheelementthathasanidattributewithavalueof"green":
#green{color:green}Thestylerulebelowwillmatchthepelementthathasanidwithavalueof"para1":
p#para1
{
text-align:center;
color:red
}DoNOTstartanIDnamewithanumber!ItwillnotworkinMozilla/Firefox.
CSSComments
Commentsareusedtoexplainyourcode,andmayhelpyouwhenyoueditthesourcecodeatalaterdate.Acommentwillbeignoredbybrowsers.ACSScommentbeginswith"/*",andendswith"*/",likethis:
/*Thisisacomment*/
p
{
text-align:center;
/*Thisisanothercomment*/
color:black;
font-family:arial
}
支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是IE7或者是火狐,您的网站都能很好的兼容。 |
|