仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 699|回复: 7
打印 上一主题 下一主题

[DIV+CSS] 来讲讲:CSS英文教程:CSS语法

[复制链接]
再现理想 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:41:05 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

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或者是火狐,您的网站都能很好的兼容。
再现理想 该用户已被删除
沙发
 楼主| 发表于 2015-1-17 23:42:29 | 只看该作者
每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
山那边是海 该用户已被删除
板凳
发表于 2015-1-25 19:36:49 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
因胸联盟 该用户已被删除
地板
发表于 2015-2-3 20:02:39 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
小魔女 该用户已被删除
5#
发表于 2015-2-9 06:55:57 | 只看该作者
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
若相依 该用户已被删除
6#
发表于 2015-2-27 04:44:20 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
爱飞 该用户已被删除
7#
发表于 2015-3-8 22:42:14 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
小妖女 该用户已被删除
8#
发表于 2015-3-23 05:00:47 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-4-29 02:22

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表