仓酷云

标题: DIV教程之英文教程:五种CSS挑选器范例 [打印本页]

作者: 因胸联盟 时间: 2015-1-15 23:59
标题: DIV教程之英文教程:五种CSS挑选器范例
Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。
poluoluo文章简介：英文教程:五种CSS选择器范例.
CSScommandsareusuallygroupedinthecurlybracestomakeasetofrules.FollowingarethevariouswaysavailabletoattachthesesetofruleswithHTMLcode.

Selector(insimplewords)meanshowyounamethesesetofrules.

1CLASSSelectORS

ClassselectorsisthesimplestformofselectorswhereyouassignyourownmeaningfulnametothesetofCSSrules.Tocreateaclassselectoryousimplyneedtowritenameoftheclassfollowedbyaperiod.
(Aclassnamecannotstartwithanumberorasymbolasitisnotsupportedbyvariousbrowsers.)
Forexample,

p.big{font-weight:bold;font-size:12px;}
.center{text-align:center;}
AndthisHTML:

<pclass="big">Thisparagraphwillberenderedbold.www.webjx.com</p>
Youcanapplymorethanoneclasstoagivenelement.
AndthisHTML:

<pclass="centerbig">Thisparagraphwillberenderedbold.</p>
Intheaboveexample.bigand.centerarenameofCSSclassesandtheseclassesareappliedtoPtaginHTML.
IfclassnameisfollowedbyHTMLelementinyourCSScodelikep.biginaboveexampleitmeansthatthisclasswillworkonPtagonly.
OtherwiseyoucanapplytheCSSclassonanyelement.
It’sagoodpracticetoaddHTMLelementbeforeclassnameinCSSifyouarewritingCSSrulesforaparticularelement(ItaddsmoreclaritytoCSScode.

2IDSelectORS

IDselectorsworklikeclassselectors,exceptthattheycanonlybeusedononeelementperpagebecausetheyworkwithIDofthehtmlelement.TheidselectorisdefinedasidoftheHTMLelementfollowedbya#symbol.
Forexample,

p#navigation{width:12em;color:#666;font-weight:bold;}
AndthisHTML:

<pid="navigation">Thisparagraphwillberenderedbold.www.webjx.com</p>
AsagoodpracticeIDselectorsmustbeusedifyouarewritingtheCSScodeforasingleHTMLelementonly.IDselectorsarewellsupportedacrossstandards-compliantbrowsers.

3TAGSelectOR

TagselectorisanothersimplemethodofCSSrulesimplementation.YoucanusethisselectortoredefinetherulesforaparticularHTMLelement.
Forexample:

p{color:#999;font-weight:bold;}
IntheaboveexampleCSScodewillbeautomaticallyappliedoneveryptag.

4DESCENDENTSelectORS

Descendentselectorsspecifythatstylesshouldonlybeappliedwhentheelementinquestionisadescendent(forexample,achild,oragrandchild)ofanotherelement.
Forexample,

h3em{color:white;background-color:black;}
AndthisHTML:

<h3>Thisis<em>emphasized</em>www.webjx.com</h3>
Intheaboveexampleemisdescendentofh3element.Abovecssrulewillautomaticallybeappliedonallemelementsinsideh3elementintheHTMLcode.Descendentselectorsarewellsupportedacrossstandards-compliantbrowsers.

5GROUPINGSelectORS

Youcanalsospecifythesamesetofrulesformorethanoneselctor,likethis:

p,h1,h2{text-align:left;}
Justplaceacommabetweeneachone.
Youcanevengetmorecomplex,andgroupmultipleclassandidselectors:

p.navigation,h1#title{font-weight:bold;}
DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称，中文译作“层叠样式表单”。

作者: 愤怒的大鸟 时间: 2015-1-17 23:52
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

作者: 简单生活 时间: 2015-1-26 23:46
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

作者: 只想知道 时间: 2015-2-5 04:38
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

作者: 不帅 时间: 2015-2-11 05:48
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

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

作者: 若天明 时间: 2015-3-11 01:57
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 若相依 时间: 2015-3-24 22:27
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

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