来讲讲：CSS进门教程:CSS挑选器

只看该作者 · 发表于 2015-1-15 23:25:35

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

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

x

你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。
网页制造poluoluo文章简介：上节课我们讲了一下CSS经由过程甚么体例往把持页面，假如不记得，我来帮人人回想一下，统共有四种体例行内体例、内嵌体例、链接体例、导进体例，人人经由过程这四种体例就能够完成CSS对HTML页面款式的把持，假如要让这些款式对HTML页面中的元素完成一对一，一对多大概多对一的控
上节课我们讲了一下CSS经由过程甚么体例往把持页面，假如不记得，我来帮人人回想一下，统共有四种体例行内体例、内嵌体例、链接体例、导进体例，人人经由过程这四种体例就能够完成CSS对HTML页面款式的把持，假如要让这些款式对HTML页面中的元素完成一对一，一对多大概多对一的把持，这就必要用到CSS选择器，HTML页面中的元素就是经由过程CSS选择器举行把持的。

CSS选择器共有三种：标签选择器、ID选择器、类选择器。

为了前面的对选择器的注释更简单了解，在这里先打个比方，假如把你所处的情况视为HTML页面的话，情况里的每个人则相称于HTML页面内标签元素，每一个人都有一个ID(身份证)，那末html中的每个标签也都有本人的ID，人人都晓得ID是独一的，不成能反复。

【标签选择器】
一个完全的HTML页面是有良多分歧的标签构成，而标签选择器，则是决意哪些标签接纳响应的CSS款式，(在年夜情况中你大概出于分歧的地位，可是不论怎样，你老是穿戴统一套衣服，这件衣服就是由标签选择器事前给你限制好的，不论走到那里都是这身衣服)好比，在style.css文件中对p标签款式的声明以下：

p{

font-size:12px;

background:#900;

color:090;

}

则页面中一切p标签的背景都是#900(白色)，笔墨巨细均是12px，色彩为#090(绿色)，这在前期保护中，假如想改动全部网站中p标签背景的色彩，只必要修正background属性就能够了，就这么简单！

【ID选择器】
ID选择器在某一个HTML页面中只能利用一次(固然也能够用好几回，不外就不切合W3C尺度了，那页面也就不是尺度页面喽~，我们的目标不就是为了做尺度的页面么，以是倡议人人不要在统一个html页面中多个标签具有配合的ID)，就像在你所处的情况中，你只要一个ID(身份证)，不成能反复！信任人人也能看出来，ID选择器更具有针对性，如：
先给某个HTML页面中的某个p标签起个ID，代码以下：

<pid="one">此处为p标签内的笔墨</p>

在CSS中界说ID为one的p标签的属性，就必要用到#，代码以下：

#one{

font-size:12px;

background:#900;

color:090;

}

如许页面中的某个p就会是CSS中界说的款式。

【类选择器】
这类选择器更简单了解了，就是使页面中的某些标签(能够是分歧的标签)具有不异的款式，就像国庆中某个方阵中，一定都是分歧的人，却均穿白色衣服，手中高举花环，款式都是一样的，假如想让这一类人都有配合的款式，该怎样做呢~呵呵，和ID选择器的用法相似，只不外把id换做class，以下：

<pclass="one">此处为p标签内的笔墨</p>

假如我还想让div标签也有不异的款式，怎样办呢？加上一样的class就能够了，以下

<divclass="one">此处为p标签内的笔墨</div>

如许页面中但凡加上class="one"的标签，款式都是一样的喽~CSS界说的时分和ID选择器差未几，只不外把#换成.，以下

.one{

font-size:12px;

background:#900;

color:090;

}

增补:一个标签能够有多个类选择器的值，分歧的值用空格分隔，如：

<divclass="oneyellowleftStyle">此处为p标签内的笔墨</div>

如许我们能够将多个款式用到统一个标签中，固然也能够，ID和class一块用

<divid="div1"class="oneyellowleftStyle">此处为p标签内的笔墨

</div>

【通用选择器】
到这里，前三种基础的选择器说完了，可是还必要给人人先容一个CSS选择器中功效最壮大可是用的起码的一种选择器“通用选择器”

*{此处为CSS代码}

壮大的地方是由于他对父级中的一切HTML标签举行款式界说，可对具有配合款式的标签款式举行界说(有点小学数学中的提取公因式)，如许能够年夜年夜精简代码；既然有这么壮大的功效为何是用的起码呢，一样仍是由于他的壮大，他是对父级元素内的一切标签举行界说，以是只需你界说了，那末父级内里的一切的标签，甭管有无需要，也都相称于加上了通用选择器内里的代码了，能这么说人人不克不及够完整了解，不妨，我给人人举个例子，请看上面

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<title>无题目文档</title>

<styletype="text/css">



</style>

</head>

<body>

<divid="div1">

<p>这里是p标签地区</p>

<div>这里是a标签地区</div>

</div>

<divid="div2">

<p>这里是p标签地区</p>

<div>这里是a标签地区</div>

</div>

</body>

</html>

人人运转一下下面的例子，div1内里的两个标签是否是款式一样，这就是通用选择器的壮大的地方，不论内里有几个标签城市将款式加到一切标签内，假如div1内里得一切的标签都有一部分不异的CSS代码，那末能够把这部分代码提掏出来，用通用选择器来界说，如许能够年夜年夜缩减代码，可是假如div1内里只需有一个和其他元素没有不异的代码，就不克不及用通用选择器来界说，这也就是CSS通用选择器不天真的一点。如今人人分明为何通用选择器是选择器内里功效最壮大的但又是用的起码的选择器了吧~~呵呵

关于通用选择器另有一个不能不提的用法，就是为了包管作出的页面可以兼容多种扫瞄器，以是要对HTML内的一切的标签举行重置，会将上面的代码加到CSS文件的最顶端

*{margin:0;padding:0;}

为何要这么用呢，由于每种扫瞄器都自带有CSS文件，假如一个页面在扫瞄器加载页面后，发明没有CSS文件，那末扫瞄器就会主动挪用它自己自带的CSS文件，可是分歧的扫瞄器自带的CSS文件又都纷歧样，对分歧标签订义的款式纷歧样，假如我们想让做出的页面可以在分歧的扫瞄器显现出来的效果都是一样的，那末我们就必要对对HTML标签重置，就是下面的代码了，可是如许也有欠好的中央，由于HTML4.01中有89个标签，以是相称于在页面加载CSS的时分，先对这89个标签都加上了{margin:0;padding:0;}，在这里我不倡议人人这么做，由于89个标签中必要重置的标签是很多数，没有需要将一切的标签都重置，必要哪些标签重置就让哪些标签重置就能够了，以下

body,div,p,a,ul,li{margin:0;padding:0;}

假如还必要dl、dt、dd标签重置，那就在下面加上就能够了，以下

body,div,p,a,ul,li,dl,dt,dd{margin:0;padding:0;}

用到那些就写那些，这点也能够看作权衡页面重构师制造页面程度的上下，和是不是专业的一个方面到这里人人更应当分明这句话“通用选择器是功效最壮大可是用的起码的选择器”了吧~^_^

OK！选择器的内容我向人人应当都分明了，前面就持续解说一下“选择器的个人声
明”和“选择器的嵌套”

【选择器的个人声明】
在我们利用选择器的时分，有些标签款式是一样的，大概某些标签都有配合的款式属性，我们能够将这些标签个人声明，分歧的标签用“,”分隔，好比：

h1,h2,h3,h4,h5,h6{color:#900;}

#one,#three,.yellow{font-size:14px;}
#one{background:#ccc;}
#three{background:#ccc;}
.yellow{background:#ccc;}

和小学的提取公因式差未几，把配合的部分提掏出来，这么做的优点，不异的部分配合界说，分歧的部分独自界说，包管作风一致，款式修正天真，这也是优化CSS代码的一块，要记着哟~

【选择器的嵌套】
选择器也是能够嵌套的，如：

#div1pa{color:#900;}/*意义是在ID为div1
内的p标签内的链接a标签的笔墨色彩为白色*/

如许的优点就是不必要在独自的为ID为div1的标签内的p标签内的a标签独自界说class选择器大概ID选择器，CSS代码不就少了嘛~一样也是CSS代码优化的一块。

到这里，基础的选择器说完了，可是还必要给人人先容一个“通用选择器”

*{此处为CSS代码}

好，这节课次要解说了三种CSS代码选择器、选择器的声明、选择器的嵌套三块常识，要把握好，假如有不懂，能够留言。</p>
一般来说还需要用Photoshop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。

只看该作者 · 发表于 2015-1-17 22:39:27

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

只看该作者 · 发表于 2015-1-22 06:52:02

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

只看该作者 · 发表于 2015-1-30 23:40:20

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

只看该作者 · 发表于 2015-2-6 17:19:20

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

只看该作者 · 发表于 2015-2-17 19:19:42

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

只看该作者 · 发表于 2015-3-5 22:49:20

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

仓酷云 · 发表于 2015-3-12 16:35:51

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

只看该作者 · 发表于 2015-3-20 00:41:01

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来讲讲：CSS进门教程:CSS挑选器

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

相关帖子