汇聚建站资源 - 点亮博客价值 » CSS

Htmldog权威CSS入门指点十八章（十八）- 如何更快的学习CSS【完结】

ximicc — Sun, 04 Jul 2010 06:22:29 +0000

学习任何东西都是一样，从小学、中学、大学，除了学习知识外就是去学习方法！

要想掌握CSS, 首先要学会HTML，我们刚开始是从零开始学习的，花了一个月时间学习HTML，没有老师，书就是我们唯一的老师，也没有上网的条件！一个月过后，我们就开始学习CSS，刚开始看的第一本CSS书是《CSS网页样式设计》看了几天后发现根本看不懂！之后换了一本《HTML参考大全》，这本书是网页制作师案头常备之书！之所以更换这本书来学习CSS，是因为这里面有一部分是CSS，就成了我们的CSS启蒙书。看了几段后，觉得外国人写的教程很有条理，由浅入深，一步一步引领你们向前走，让你们明白他们们在说什么，而不是象国内的书讲的深浅不一，缺乏条理，好象怕你们不知道他们很有学问！就象前面所说的那本书《CSS网页样式设计》当时看了，对于初学CSS的我们来说，真的不知道它们在说什么！

再来谈一下学习过程中的细节，因为一个样式它们是不可能脱离HTML页的，HTML不与样式结合的话, CSS就失去了存在的意义。所以一般书中都会举一个例子，然后让你们上机测试效果，这是笔者想让你们有对样式表CSS有一个初步的印象，告诉你们CSS能做什么。一个小例子：“麻雀虽小，五脏俱全”，你们可能看不懂每一个语句的真正意思。但是你们可以记得例子的模式，以后在实践中不断地用，不断用的过程就是不断记的过程，所以不能恢心，不能总认为自己记忆力不好，但不管你们骑的是牛也好，千里马也罢，只要有恒心，一定会到达终点。

阅读一本书，一般来说第一次要先把整个书通读一遍，不理解的也要往下看，在往下看的过程中你们也许会找到那个问题的答案。看完后你们有一个大概的印象，但一定有很多不明白的地方，没关系，继续往下看。

第二遍你们就要边看边做学习笔记了，把你们认为是重点的部分写上，还有，你们觉得有疑问的部分也要记下，带着疑问看下去，如果没有答案，你们可以去 BBS上发一个贴子，好心人还是很多的，提示一句：“一定要学会如何去问问题！” 这里就不说了。你们还要上机去练习书上的例子，最让你们困惑的：“一是记不住，二是对概念的理解有误（这一条可能是书译的不好，另外就是你们的理解不对）”，对于第一条你们就要树立信心，坚持再坚持下去。当你们到达终点时你们回发现一切都是顺理成章的事。因为你们努力了，努力了就会有回报，有结果。

有好多人也看了，但是没有什么进步，我们分析主要有以下几个原因：

原因一：压力不够，因为有不少人比如美工学CSS，因为是看别人学，所以学之，不学就没优势！这样的压力是很小的，学不好还有美工这碗饭。

原因二：只是业余学习，这样学还只是玩一玩，因为你们不一定非要以这门技术吃饭。

原因三：方法不对，有的人只是在看教程，但他们不动手去做，我们以前就是看的太多，做的太少，所以有了实践你们才能把理论的东西揉进去。

喜欢的就爱屋及乌被雷了就诛连九族

2010/06/30 -- Htmldog权威CSS入门指点十八章（十四）- CSS网页布局 (0)
2010/07/03 -- Htmldog权威CSS入门指点十八章（十七）- CSS的优先级特性 (0)
2010/07/02 -- Htmldog权威CSS入门指点十八章（十六）- CSS的伪元素 (0)
2010/07/01 -- Htmldog权威CSS入门指点十八章（十五）- CSS的@规则 (0)
2010/06/29 -- Htmldog权威CSS入门指点十八章（十三）- CSS中的display属性 (0)

Htmldog权威CSS入门指点十八章（十七）- CSS的优先级特性

ximicc — Sat, 03 Jul 2010 06:12:09 +0000

假如同个元素有两个或以上冲突的CSS规则，浏览器有一些基本的规则来决定哪一个非常非凡而胜出。

它可能不像其它那么重要，大部分案例你不需要担心冲突，但大型而且复杂的CSS文件，或有很多CSS文件组成的，可能产生冲突。

选择器一样的情况下后面的会覆盖前面的属性。比如：

p { color: red; }
p { color: blue; }

p元素的元素将是蓝色，因为遵循后面的规则。然而，你不可能经常用相同的选择器冲突达到目的，当你使用嵌套选择器，合理的冲突来了。比如：

div p { color: red; }
p { color: blue; }

也许你看起来p元素在div元素里面的颜色是蓝色，就像后面p元素的规则，但是第一个选择器的特性却是红色。基本上，一个选择器越多特性，样式冲突的时候将显示它的样式。

一组嵌套选择器的实际特性可以计算出来。基本的，使用ID选择器的值是100，使用class选择器的值是10，每个 html选择器的值是1。它们加起来就可以计算出特性的值。

　　p的特性是1（一个html选择器）
　　div p的特性是2（两个html选择器）
　　.tree的特性是10（1个class 选择器）
　　div p.tree的特性是1 1 10=12，（两个html选择器，一个class选择器）
　　#baobab的特性是100（1个ID选择器）
　　body #content .alternative p的特性是112（两个html选择器，一个ID选择器，一个类选择器）

按照上面的规则，div p.tree的特性比div p高，body #content .alternative p又比它们两个都高。

喜欢的就爱屋及乌被雷了就诛连九族

2010/07/04 -- Htmldog权威CSS入门指点十八章（十八）- 如何更快的学习CSS【完结】 (0)
2010/07/02 -- Htmldog权威CSS入门指点十八章（十六）- CSS的伪元素 (0)
2010/07/01 -- Htmldog权威CSS入门指点十八章（十五）- CSS的@规则 (0)
2010/06/30 -- Htmldog权威CSS入门指点十八章（十四）- CSS网页布局 (0)
2010/06/29 -- Htmldog权威CSS入门指点十八章（十三）- CSS中的display属性 (0)

Htmldog权威CSS入门指点十八章（十六）- CSS的伪元素

ximicc — Fri, 02 Jul 2010 06:09:35 +0000

伪元素吸附在选择上和pseudo classes伪类很像，像这样：

selector:pseudoelement{property: value;}

First letters and First lines 首字母和首行

first-letter伪元素作用到元素的第一个字母，first-line作用到元素的顶行。你可以，例如为段落创建一个drop caps和首行加粗。

p:first-letter {
font-size: 3em;
float: left;
}
p:first-line {
font-weight: bold;
}

Before and after 前后

before和after用来联系content属性不使用HTML确定一个元素的内容位置。

content属性值可以是：open-quote,close-quote,no-open-quote,no-close- quote，在引号标记里关闭任何字符串或使用url(imagename)图片。

blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
li:before {
content: "POW: "
}
p:before {
content: url(images/jam.jpg)
}

听起来不错吧，可惜大部分用户不能体会到before或after的效果，因为IE不支持。

喜欢的就爱屋及乌被雷了就诛连九族

2010/07/04 -- Htmldog权威CSS入门指点十八章（十八）- 如何更快的学习CSS【完结】 (0)
2010/07/03 -- Htmldog权威CSS入门指点十八章（十七）- CSS的优先级特性 (0)
2010/07/01 -- Htmldog权威CSS入门指点十八章（十五）- CSS的@规则 (0)
2010/06/30 -- Htmldog权威CSS入门指点十八章（十四）- CSS网页布局 (0)
2010/06/29 -- Htmldog权威CSS入门指点十八章（十三）- CSS中的display属性 (0)

Htmldog权威CSS入门指点十八章（十五）- CSS的@规则

ximicc — Thu, 01 Jul 2010 06:04:21 +0000

At-rules分装不同的CSS规则，应用在特定场合。

Importing

import@规则引用另外的样式。例如，假如你想添加另外样式到现在的样式，可以这样：

@import url(addonstyles.css);

这很像使用link元素连接CSS到HTML，本质上说有一个内容样式像下面：

<style type="text/css" media="all">@import url(monkey.css);style>

这是为了照顾老版本浏览器，比如Netscape4不支持@规则所以不能链接样式表，已经构建好标签的HTML页面会失去样式表提供的功能。

Media types

media@规则应用内容使用特定媒体，比如打印，例如：

@media print {
body {
font-size: 10pt;
font-family: times new roman, times, serif;
}
#navigation {
display: none;
}

媒体形式：

　　all，所有媒体。
　　aural，言语合成器。
　　handheld，移动设备
　　print，打印
　　 projection，投影
　　screen，电脑屏幕
　　你还可以使用braille,embossed,tty或者tv。

注意：说了这么多，IE只支持all,screen和print。

Charachter sets 字符设定

charset@规则简单设定外部样式里的编码。它出现在样式的最上面例如：

@charset "ISO-8859-1";

Font faces 字体外观

font-face@规则用来具体描述字体，可以在CSS里嵌入外部字体。

它需要font-family描述符引用字体，它的值可以是字体的名称或是新命名一个。嵌入一个字体，使用src描述符。其他添加到font-face@规则里的描述符将影响正在使用的内含字体，例如假如你添加 font-weight: bold粗体到@规则，font-family的src只能运用到带有font-family属性的选择器里，而且选择器里font-weight属性同样设置成bold。

@font-face {
font-family: somerandomfontname;
src: url(somefont.eot);
font-weight: bold;
}
p {
font-family: somerandomfontname;
font-weight: bold;
}

如上面的例子，段落里的字体将是somefont的字体（假如p选择器没有font-weight: bold，那字体就不是somefont）。

嵌入字体还凑合着用，因为Mozilla浏览器不支持也没有计划添加这个功能。只有IE有分寸的支持，但这也不是说可以直接使用，IE浏览器嵌入字体，你还需要微软WEFT软件，它提供Truetype字体转换成压缩的OpenType字体（只有这个你才能使用URI指定）。由于这个限制（显得非常复杂）兼容性，最好不要使用系统没有的字体。

Pages

page@规则服务页面媒体，是个高级方式应用于打印媒体样式。它定义了页面块，在盒模型上扩展，所以你可以定义单一页面的大小和表现。

应用page@规则有许多规定，比如没有padding和border，而且也不上我们说的电脑屏幕，所以pixels和ems单位不被答应使用。

有许多特定属性可以使用，比如size，可以设定portrait纵向,landscape横向,auto自动或长度。marks属性可以用来定义裁剪标志：

@page {
size: 15cm 20cm;
margin: 3cm;
marks: cross;
}

页面媒体里的伪标签

有三种伪标签用来链接特定page@规则，如下形式：@page :pseudo-class {stuff}。

:first应用到页面媒体里的第一页

:left和:right应用到左边和左边页面。这可能用在指定有非常大margin的左边页面和有非常大margin的右边页面。

还有一些页面@规则，比如page-breaks页面中断和named pages页面命名，但这些@规则在浏览器里很难工作，你也许浪费了许多时间阅读这篇文章，不过这些都是不错的想法。

喜欢的就爱屋及乌被雷了就诛连九族

2010/07/04 -- Htmldog权威CSS入门指点十八章（十八）- 如何更快的学习CSS【完结】 (0)
2010/07/03 -- Htmldog权威CSS入门指点十八章（十七）- CSS的优先级特性 (0)
2010/07/02 -- Htmldog权威CSS入门指点十八章（十六）- CSS的伪元素 (0)
2010/06/30 -- Htmldog权威CSS入门指点十八章（十四）- CSS网页布局 (0)
2010/06/29 -- Htmldog权威CSS入门指点十八章（十三）- CSS中的display属性 (0)

Htmldog权威CSS入门指点十八章（十四）- CSS网页布局

ximicc — Wed, 30 Jun 2010 05:59:40 +0000

使用CSS布局非常简单，假如你习惯使用tables布局，可能开始时有点困难，但其实很轻易，事实上只是观念的不同。你需要把网页的每个部分看成独立的块，你可以绝对或相对定位块。

Positioning 定位

positon属性可以指定元素为absolute,relative,static或是fixed。static是元素默认属性，按 HTML出现的先后顺序。relative比较像static，但元素可以使用top,right,bottom和left设定初始属性。absolute把元素从HTML里面拉出，一切由它自己决定，在这里，绝对定位元素可以使用top,right,bottom,left定位在任何地方。

fixed行为像absolute，但它绝对定位的元素参照浏览器窗口与网页没有关系。所以，理论上，fixed元素可以固定在屏幕上当页面滚动时。为什么说是理论上的？因为IE7以下的浏览器不支持。

使用绝对定位布局

可以使用绝对定位创建传统的两列布局，如下：

<div id="navigation">
<ul>
<li><a href="this.html">Thisa>li>
<li><a href="that.html">Thata>li>
<li><a href="theOther.html">The Othera>li>
ul>
div>
<div id="content">
<h1>Ra ra banjo banjoh1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.p>
<p>(Ra ra banjo banjo)p>
div>

上面加上CSS：

#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#content {
margin-left: 10em;
}

上面导航条设定在左边，宽度是10em。因为导航条是绝对定位，所以流动的页面上什么也不动，需要设定内容的左边margin等于导航条的宽度。

真是简单。你没有限制这两列的距离，使用聪明的布局，你可以随心所欲安排许多块。假如你想添加第三列，比如：

#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#navigation2 {
position: absolute;
top: 0;
right: 0;
width: 10em;
}
#content {
margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */
}

最后阶段去绝对定位元素，因为它们独立存在，无法正确了解它们哪里结束。假如你使用上面的例子，所有的页面有小的导航条和大的内容区域到可以，但是，非凡是宽度和大小使用相对值，你必须经常放弃定位的希望，比如位于元素最下面的底部布局。假如你想定位底部，采用浮动模式比绝对定位好。

Floating 浮动

浮动元素可以在一条线上移动。浮动一般使用在定位页面里的小型元素，但也可使用在大块里，比如导航。上面的HTML例子使用下面CSS：

#navigation {
float: left;
width: 10em;
}
#navigation2 {
float: right;
width: 10em;
}
#content {
margin: 0 10em;
}

假如你不希望接下来的元素包围浮动对象，可以使用 clear属性。clear:left清除浮动在左边的元素，clear:right清除浮动在右边的元素，clear:both清除所有。假如你想添加底部footer，可以像下面：

#footer {
clear: both;
}

footer将在所有列下面，不管它们的长度如何。

这篇介绍了定位和浮动的基本情况，强调页面的大块，但记住，上面方法可以运用到块里面的任何元素。通过组合使用position,floating,margins,padding和border，你可以表现出任何网页设计，table布局能做的CSS没有什么不能做。

使用表格布局的理由就是考虑古老的浏览器。CSS的优势在于拥有很高的可用性，而且体积上只有使用table布局的部分大小。

喜欢的就爱屋及乌被雷了就诛连九族

2010/07/04 -- Htmldog权威CSS入门指点十八章（十八）- 如何更快的学习CSS【完结】 (0)
2010/07/03 -- Htmldog权威CSS入门指点十八章（十七）- CSS的优先级特性 (0)
2010/07/02 -- Htmldog权威CSS入门指点十八章（十六）- CSS的伪元素 (0)
2010/07/01 -- Htmldog权威CSS入门指点十八章（十五）- CSS的@规则 (0)
2010/06/29 -- Htmldog权威CSS入门指点十八章（十三）- CSS中的display属性 (0)

Htmldog权威CSS入门指点十八章（十三）- CSS中的display属性

ximicc — Tue, 29 Jun 2010 05:56:13 +0000

操作HTML元素的诀窍在于明白它们工作的方法在于没有特定的形式。一些由标签组成的大部分页面可以设定任何样式。浏览器默认的样式里的大部分html元素由字体样式、margin,padding组成，本质上是显示类型。

Display属性基本上分为inline,block,和 none。inline就像它的本意——显示为inline的元素为行。strong,anchor锚和em强调元素默认是行。block元素前后换行。标题和段落元素是块元素。none，意思不显示元素，在可用性上可以实现漂亮的效果，交替样式或hover效果的高级运用。

设定表现可以更好运用在网页制作上。

h1 {
display: inline;
font-size: 2em;
}
#header p {
display: inline;
font-size: 0.9em;
padding-left: 2em;
}

设定标题h1为行元素，可以和后面的元素在同一行。

#navigation, #seeAlso, #comments, #standards {
display: none;
}

面的代码可以使用在打印样式里，比如在导航使用，可以在打印时不显示导航这些无关紧要的东西。

Display:none和 visibility:hidden;的不同在于display:none完全取消元素的显示，visibility:hidden保持元素位置但视觉上的内容不可见。例如，假如3的第二段设置为display:none，第一段将仅跟在第三段，假如设置为visibility:hidden，段落间就会空出。

明白表格相关的表现属性值最好的方法想象html表格。table是最初的表现，你可以使用table-row模拟table-cell模拟td。

Display属性更进一步，可以通过使用 table-column, table-row-group, table-column-group, table-header-group, table-footer-group and table-caption。现在可以直接使用columns构建表格，比在html中使用行构建快速。

最后，inline-table设定表格前后不换行。

使用CSS表格会严重损害可用性。HTML应该用来传递语意，所以假如你有表格数据，那可以使用HTML表格。使用CSS表格仅仅会产生糟糕的数据假如没有CSS数据将不可读。

其他表现形式

list-item列表项目，就像期待HTML里的li元素。它们需要嵌套在元素里面显示。

run-in元素的表现形式由它的父元素决定。IE和Mozilla都不支持。

compat根据上下阿文决定表现形式，同样IE和Mozilla都不支持。

maker仅仅使用在:before和:after伪元素，设定content属性的表现。

content属性默认表现就是maker，所以它只有在覆盖原来属性时才有用。

content属性，它的默认就是maker，所以只有在覆盖原来属性时使用。

喜欢的就爱屋及乌被雷了就诛连九族

2010/07/04 -- Htmldog权威CSS入门指点十八章（十八）- 如何更快的学习CSS【完结】 (0)
2010/07/03 -- Htmldog权威CSS入门指点十八章（十七）- CSS的优先级特性 (0)
2010/07/02 -- Htmldog权威CSS入门指点十八章（十六）- CSS的伪元素 (0)
2010/07/01 -- Htmldog权威CSS入门指点十八章（十五）- CSS的@规则 (0)
2010/06/30 -- Htmldog权威CSS入门指点十八章（十四）- CSS网页布局 (0)

Htmldog权威CSS入门指点十八章（十二）- CSS的背景图片

ximicc — Mon, 28 Jun 2010 05:52:58 +0000

背景图片Background Images有许多属性可以操作。幸运的是，可以使用background处理所有：

body {
background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}

上面合并了下面属性：

background-color出现在前面。

background-image图片的位置。

background- repeat图片重复的形式。背景图片可以重复repeat（这就像建筑用的瓦片一样），repeat-x在x轴（左右）重复，repeat-y在y轴（上下）重复，no-repeat不重复只显示一个。

background-position可以使用 top,center,bottom,left,right或任何可以看到的组合，比如above在上面。

可以为大部分html元素设置背景图片，不只是整个页面（body），可以用来制作简单但效果显著的美化，比如圆角等等不同的边角外形。

使用背影图片非常简单，而且可以使用在页面的任何地方。许多人喜欢使用色彩鲜艳的图片作为背景的页面，带给用户判读前台文字困难加大。这是一个极端的例子，但事实上，大部分对用户友好、可读性强的文本是白色背景上显示黑色，或是黑色背景显示白色（建议使用柔和的颜色做为背景，减少刺眼的颜色）

所以，最佳使用背景图片的位置要么是上面没有内容要么是背景非常淡，这样同样有利于减少图片大小，因为使用更少的颜色（建议使用索引色格式，比如 GIF）。

喜欢的就爱屋及乌被雷了就诛连九族

2010/07/04 -- Htmldog权威CSS入门指点十八章（十八）- 如何更快的学习CSS【完结】 (0)
2010/07/03 -- Htmldog权威CSS入门指点十八章（十七）- CSS的优先级特性 (0)
2010/07/02 -- Htmldog权威CSS入门指点十八章（十六）- CSS的伪元素 (0)
2010/07/01 -- Htmldog权威CSS入门指点十八章（十五）- CSS的@规则 (0)
2010/06/30 -- Htmldog权威CSS入门指点十八章（十四）- CSS网页布局 (0)

Htmldog权威CSS入门指点十八章（十一）- CSS的属性缩写

ximicc — Sun, 27 Jun 2010 05:45:43 +0000

一些CSS属性答应使用一串值代替许多属性，值使用空格分开。

margin,pdding和border-width答应合并 margin-top-width, margin-right-width, margin-bottom-width等等，形式像这样：property:top right bottom left;逆时针顺序。

所以下面的：

p {
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 20px;
}

可以写成：

p {
border-width: 1px 5px 10px 20px;
}

border-width,border-color,border-style同样可以合并到一起，例如：

p {
border: 1px red solid;
}

同样可以运用到border-top,border-right等等。假如只使用两个值（比如margin: 1em 10em;），第一个值包括顶部和底部，第二个值包括左右。

字体属性同样可以使用font属性合并。

p {
font: italic bold 1em/1.5 courier;
}

上面”/1.5″是 line-height的值。

把它们总结在一起，试下下面的代码：

p {
font: 1em/1.5 "Times New Roman", times, serif;
padding: 3em 1em;
border: 1px black solid;
border-width: 1px 5px 5px 1px;
border-color: red green blue yellow;
margin: 1em 5em;
}

推荐大家使用缩写形式，促进CSS代码的精简、优化！

喜欢的就爱屋及乌被雷了就诛连九族

2010/07/04 -- Htmldog权威CSS入门指点十八章（十八）- 如何更快的学习CSS【完结】 (0)
2010/07/03 -- Htmldog权威CSS入门指点十八章（十七）- CSS的优先级特性 (0)
2010/07/02 -- Htmldog权威CSS入门指点十八章（十六）- CSS的伪元素 (0)
2010/07/01 -- Htmldog权威CSS入门指点十八章（十五）- CSS的@规则 (0)
2010/06/30 -- Htmldog权威CSS入门指点十八章（十四）- CSS网页布局 (0)

Htmldog权威CSS入门指点十八章（十）- CSS中的伪类

ximicc — Sat, 26 Jun 2010 05:40:53 +0000

在CSS中，如果对于相同元素有针对不同条件的定义，宜将最一般的条件放在最上面，并依次向下，保证最下面的是最特殊的条件。这样，浏览器在显示元素时，才会从特殊到一般、逐级向上验证条件，才会使你的每一个CSS语句都起到效果。

老外总结了一个便于记忆的“爱恨原则”（LoVe/HAte），即四种伪类的首字母：LVHA即正确的顺序：a:link、 a:visited、a:hover、a:active。实际上，从CSS的“就近原则”也可以看出这个特点。在Dreamweaver中“新建CSS规则”对话框中，复合内容中的顺序也是一致的。请你注重一些CSS伪类属性不被所有浏览器支持，但有四个伪类可以安全使用在链接上。

伪类像是指定选择器状态或关联选择器的门闩。它们的形式如：selector:pseudo class { property: value; }，在选择器和伪属性之间使用冒号。

　　link 没有点击过的链接
　　visited以点击过的链接
　　active获得焦点时的链接（比如在点击时）
　　 hover 鼠标在链接上面

a.snowman:link {
color: blue;
}
a.snowman:visited {
color: purple;
}
a.snowman:active {
color: red;
}
a.snowman:hover {
text-decoration: none;
color: blue;
background-color: yellow;
}

尽管CSS里可以省略它们，但维护不同颜色的链接对于新手是个很好的练习。由于伪类（相比hover）不是经常使用，作为公用属性是非常不幸的特性。由于这样，它不像以前那么重要，但假如为最优用户响应考虑，应该使用它。

传统默认，文本链接是蓝色，访问后是紫色，理论上可以使用很多不同颜色效果，但，再次，逐渐广泛使用CSS，使得链接变得不再普通，平均用户也不再认为链接必须是蓝色或紫色。

除了链接其他元素也可以使用hover伪类。不幸的是，ie7以下的浏览器不支持，这样有许多漂亮的效果不能在IE上实现。

喜欢的就爱屋及乌被雷了就诛连九族

2010/07/04 -- Htmldog权威CSS入门指点十八章（十八）- 如何更快的学习CSS【完结】 (0)
2010/07/03 -- Htmldog权威CSS入门指点十八章（十七）- CSS的优先级特性 (0)
2010/07/02 -- Htmldog权威CSS入门指点十八章（十六）- CSS的伪元素 (0)
2010/07/01 -- Htmldog权威CSS入门指点十八章（十五）- CSS的@规则 (0)
2010/06/30 -- Htmldog权威CSS入门指点十八章（十四）- CSS网页布局 (0)

Htmldog权威CSS入门指点十八章（九）- CSS的分组和嵌套

ximicc — Sat, 26 Jun 2010 05:25:24 +0000

Grouping 分组

当许多选择器有同样属性时，可以使用逗号组合它们。例子：

h2 {
color: red;
}
.thisOtherClass {
color: red;
}
.yetAnotherClass {
color: red;
}

上面的可以写成这样：

h2, .thisOtherClass, .yetAnotherClass
{
color: red;
}

Nesting 嵌套

假如CSS结构良好，不需要使用很多class或ID选择器。这是因为 CSS可以设定选择器里面选择器的属性。例子：

#top {
background-color: #ccc;
padding: 1em
}
#top h1 {
color: #ff0;
}
#top p {
color: red;
font-weight: bold;
}

假如你碰到下面这样的形式，记得处理掉你网页上的class或ID。

<div id="top">
<h1>Chocolate curryh1>
<p>This is my recipe for making curry purely with chocolatep>
<p>Mmm mm mmmmmp>
div>

这是由于，通过使用空格分离选择器，我们可以设定IDtop里面的h1颜色为#ff0，p是red和blod。这可能比较复杂，因为嵌套可以多级使用，所以需要多加练习。

喜欢的就爱屋及乌被雷了就诛连九族

2010/07/04 -- Htmldog权威CSS入门指点十八章（十八）- 如何更快的学习CSS【完结】 (0)
2010/07/03 -- Htmldog权威CSS入门指点十八章（十七）- CSS的优先级特性 (0)
2010/07/02 -- Htmldog权威CSS入门指点十八章（十六）- CSS的伪元素 (0)
2010/07/01 -- Htmldog权威CSS入门指点十八章（十五）- CSS的@规则 (0)
2010/06/30 -- Htmldog权威CSS入门指点十八章（十四）- CSS网页布局 (0)

汇聚建站资源 - 点亮博客价值 » CSS

Htmldog权威CSS入门指点十八章（十八）- 如何更快的学习CSS【完结】

喜欢的就爱屋及乌 被雷了就诛连九族

Htmldog权威CSS入门指点十八章（十七）- CSS的优先级特性

喜欢的就爱屋及乌 被雷了就诛连九族

Htmldog权威CSS入门指点十八章（十六）- CSS的伪元素

喜欢的就爱屋及乌 被雷了就诛连九族

Htmldog权威CSS入门指点十八章（十五）- CSS的@规则

喜欢的就爱屋及乌 被雷了就诛连九族

Htmldog权威CSS入门指点十八章（十四）- CSS网页布局

喜欢的就爱屋及乌 被雷了就诛连九族

Htmldog权威CSS入门指点十八章（十三）- CSS中的display属性

喜欢的就爱屋及乌 被雷了就诛连九族

Htmldog权威CSS入门指点十八章（十二）- CSS的背景图片

喜欢的就爱屋及乌 被雷了就诛连九族

Htmldog权威CSS入门指点十八章（十一）- CSS的属性缩写

喜欢的就爱屋及乌 被雷了就诛连九族

Htmldog权威CSS入门指点十八章（十）- CSS中的伪类

喜欢的就爱屋及乌 被雷了就诛连九族

Htmldog权威CSS入门指点十八章（九）- CSS的分组和嵌套

喜欢的就爱屋及乌 被雷了就诛连九族

喜欢的就爱屋及乌被雷了就诛连九族

喜欢的就爱屋及乌被雷了就诛连九族

喜欢的就爱屋及乌被雷了就诛连九族

喜欢的就爱屋及乌被雷了就诛连九族

喜欢的就爱屋及乌被雷了就诛连九族

喜欢的就爱屋及乌被雷了就诛连九族

喜欢的就爱屋及乌被雷了就诛连九族

喜欢的就爱屋及乌被雷了就诛连九族

喜欢的就爱屋及乌被雷了就诛连九族

喜欢的就爱屋及乌被雷了就诛连九族