仓酷云

标题: 来讲讲：CSS英文教程:CSS语法 [打印本页]

作者: 再现理想 时间: 2015-1-15 23:41
标题: 来讲讲：CSS英文教程:CSS语法
属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。
网页制造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或者是火狐，您的网站都能很好的兼容。

作者: 再现理想 时间: 2015-1-17 23:42
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: 山那边是海 时间: 2015-1-25 19:36
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

作者: 因胸联盟 时间: 2015-2-3 20:02
以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

作者: 小魔女 时间: 2015-2-9 06:55
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

作者: 若相依 时间: 2015-2-27 04:44
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

作者: 爱飞 时间: 2015-3-8 22:42
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

作者: 小妖女 时间: 2015-3-23 05:00
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

欢迎光临仓酷云 (http://www.ckuyun.com/)