css，级联样式表

1996年12月发布css1

1998年5月发布css2，随后发布了css2.1，css2.1的目标是使其适应html和xml。

直到现在css3还在开发中

《别具光芒css属性、浏览器兼容与网页布局》

video3.1

1.四种使用样式表的方式

   内联样式表：或称为行内样式表，inline style，这种在标签内以style属性标记的为行内样式，行内样式只针对标签内的元素有效，因其没有和内容相分离，不建议使用。

   嵌入样式表：或称为内部样式表，embedded style sheet，使用style标签对。在<style type="text/css"></style>中每条样式规则由选择器和声明组成：selector{property:value;property:value;...}，

   外部样式表：link style sheets，扩展名一般为.css，通过link标签导入。它的内容前后不加<style></style>标签，也不要添加注释标签。不仅可以更易于维护修改，还可以提高页面速度，因为CSS文件都能在浏览器中产生缓存。内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。

   输入样式表：或称为导入样式表，可以使用@import 把一个css文件输入到一个css文件中，或输入到<style></style>中。

   例如，输入样式表：

<style>
<!--
@import url(css1.css);
-->
</style>

 对于一些不能识别<style>标签的浏览器，使用<!---->把样式表包含起来，使用其忽略。而支持的浏览器会解读样式表。

灵活使用样式表，由于浏览器先载入html，再载入css渲染，有时为了防止首页加载出现无样式的情况，会对首页采用嵌入式样式表的方法。

2.html selector：或称为标签重定义，或类型选择符，以html标签作为selector。

<style>
P{color:red;font-size:10px;}
</style>

 

通配选择器 universal selector

用*表示所有的标签元素，也可以表示某元素的所有后代元素，如div *。 

 

类型选择器简单明确，但针对性差。通常使用类型选择器定义通用的css规则，然后再用其它方法定义特殊需求。

 

3.class selector：以自定义的类名作为selector，命名要根据显示功能，而不要根据外观。

独立class选择器：注意class1前面要加一个点

<style>
.class1{color:red}
</style>

 

也可以针对不同类型的元素重新设置css规则，如div1.class1{}。

多重class定义：一个标签可以同时定义多个class，使用空格分开。例如：<div class=“one  two”></div>

 

4.id selector：在网页中元素的id值都是唯一的，id selector用来定义某个特定的html元素的样式。id只能以字母开头。

例：注意在id1前要加#号

<style>
#id1{color:red}
</style>

 

id selector在javascript中广泛使用；

尽量少用id selector；

还有一种限定元素类型的使用方法，如div#id1{}，注意div和#之间没有空格。

 

5.关联选择器：或称为派生选择器，后代选择器（descendant selector），包含选择器，多重选择器，包含选择符，子选择器。
   动作原理是建立在文档结构树的基础上。

   selector中用空格分隔多个标签名，在网页中是后面的标签嵌在前面的标签中。它比单一选择器优先级高。

   使用子选择器可以使代码和CSS更加简洁容易阅读。

   这样做的优点在于，帮我们避免过多的id、class设置，直接对所需的元素进行定义。

例如，html选择器关联：

<style>
P EM{color:red}
</style>

 

多重选择器可以有多层，id选择器，类选择器和html选择器关联：

#menu ul li a { display:block; padding: 0px 8px; height: 26px; line-height: 26px; float:left;}
#menu ul li a:hover { background:#333; color:#fff;}

6.组合选择器：或称为组选择器，群组选择符，selector中用逗号分隔多个标签名，为了减少相同的样式规则定义的数量。

例如：

<style>
H1,H2{color:red}
</style>

 如果在使用时有个别元素需要定义独立样式，可以再加上新的定义，这可以覆盖老的定义。

分组声明是指 对于一个选择符有多条声明时，也可以分开书写。

分组选择器和分组声明综合应用，增强了css书写的灵活性。

 

7.伪类：pseudo-classes，是对html元素的各种状态和其包括的部分内容的样式的定义。它比html选择器名称上多了冒号和状态名

                            伪类（pseudo-class）可以在为HTML元素定义CSS属性的时候，将条件和事件考虑在内。
   伪是因为它们实际上并不存在于源文件或文档树中。

   格式：html标签:伪元素{property:value;property:value;...}

链接伪类：:link :visited

动态伪类：:hover :active :focus

子元素伪类： :first-child

语言伪类：:lang

 

通过类选择器和伪类，可以为不同元素中的链接定义不同的效果。

 

伪元素：pseudo-letters，向文档中插入虚构的元素以实现一些效果。伪元素只能出现在选择器的主体之后，

:first-line   首行

:first-letter 首字，first-line，first-letter可以用于任何块级标签。

:before 在元素内容之前插入其它内容

:after

 

h1:after 伪元素在元素之后添加内容。允许在元素内容的最后面插入生成内容。默认地这个伪元素是行内元素，可以使用属性 display 改变这一点。

             例：h1:after {content:url(/i/w3school_logo_white.gif)}

 

类选择器与伪元素一起使用：html标签.类选择器名:伪元素{property:value;property:value;...}

用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是：:link :visited :hover :active。抽取第一个字母是LVHA，可以记忆成LoVe HAte(喜欢讨厌)。
如果用户需要用键盘来控制，需要知道当前链接的焦点，还可以定义:focus属性。

 

例：

a:link { color: #06F; text-decoration: none; }
a:visited { color: #999; text-decoration: line-through; }
a:hover { color: #F00; text-decoration: underline; }
a:active { color: #F0F; }
注意：四种状态的顺序一定不能颠倒，否则有些不生效

 

例：首字下沉是css伪类上的又一个运用，它可以直接通过css样式表向某个选择器中的文本首字母添加特殊的样式，而不需要把首字添加一个标签或通过程序来实现，今天以制作word里的首字下沉为例来讲解，应用如下伪元素：:first-letter

段落中的首字下沉，异于其它文字：

p:first-letter { font-family: "microsoft yahei"; font-size: 40px; float: left; padding-right: 10px; line-height: 1; }

IE6只支持a的伪类，其它标签的伪类不支持，所以要想在IE6下也显示正确，需要借助js来实现

7.标签指定式的选择符

h1#content {}    /*表示所有id为content的h1标签*/
h1.p1 {}             /*表示所有class为p1的h1标签*/

标签指定式选择符的精度介于标签选择符及id/class选择符之间，是常用的选择符之一。

关联class选择器：可以为某个标签的各个类别定义样式，例如：

<style>
P.class1{color:red}
</style>

 

8.不是所有浏览器都支持的选择器

子元素选择器 child selector ：

相邻兄弟选择器 adjacent sibling selector

属性选择器 attribute selector
 

9.样式规则的优先级

   html标签会继承外层标签的部分样式规则。
    id选择器 > class选择器 > html标签选择器，单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的

10.inherit

     继承是基于文档树的， 在CSS中，许多属性都是可以继承。颜色，字体，字号等。

     要设定文档的某些默认样式属性，可以文档树的根上设定该属性，

     如某个段落的字体设置为白色，其元素的字体值不用设置或设置为inhert，它就是白色。这些属性被称之为inherited property，它会从父元素获取对应属性的经过计算与转换的值(computed value)，如果父元素和它的情形一样，它就继续往上找，最后没有就使用浏览器的默认值。

     有些可被继承的属性值已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但要注意浏览器可能用一些默认值覆盖前面的定义。

     属性值可以指定为inherit。
     很多属性是不能继承的，如margin,padding，这样设计是有好处的。

     一些浏览器对继承支持的不好，例如遇到table，就丢失了继承的属性。

     css的层叠性......

 

11.id选择器和类选择器的名称是由作者制定的，要尽量做到命名与表现分离，

11.让图片在超过规定的宽度时，自动按比例缩小

<img style="max-width:200px;height:auto;width:expression(this.width > 200?"200px":this.width);" />

12.  wrap

      http://ued.taobao.com/blog/2010/10/14/research-of-word-wrap/

http://www.youku.com/playlist_show/id_1095101.html

http://www.divcss5.com/

http://www.w3school.com.cn/css/css_intro.asp

13.边上的文字对齐

     style=ext-align:justify;text-justify:inter-ideograph

 

 

css-P是css的扩展，

 

DIV+CSS专题：十天学会DIV+CSS

http://www.aa25.cn/special/10day/index.shtml

14.CSS盒子模式的典型属性：内容(content)、填充(padding)、边框(border)、边界(margin)

     整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中width所定义的宽度仅仅是内容部分的宽度

     在IE6及以上版本和标准的浏览器当中，当设置一个盒模型的的margin:auto;时，可以让这个盒模型居中

     body，h1－h6，ul等元素默认有外边距或其它样式的。在css样式中增加一项：body {margin:0;}，就可以把body默认的外边距去掉

     块级元素的垂直相邻外边距会合并，取最大值。

     css的许多属性是可以简写的，这样便于阅读和修改，减少代码量。颜色值也可以简写的。比如颜色值为#ff6600;可以简写为#f60;两位两位一样的才可以简写，像#c2c2c2是不可以简写的。

    div居右时，要指定margin-left值为其从父容器左边开始的外边距。

 

15.块级元素和内联元素
 
     块级元素：就是一个方块，像段落一样，默认占据一行出现；
 
     内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。
 
     一般的块级元素诸如段落<p>、标题<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。

     内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........ 块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。    

     有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到想要的位置上去。而不是每次都愚蠢的另起一行。也就是说，可以用css的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块元素。display:none表示隐藏。

     例如：span不是块级，所以其宽度是依据内容的多少而定，必须设定span为BLOCK才可以设置宽度。

     display:inline;(内联)《CSS权威指南》中文字显示：任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，比如，设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。

 

16.div实践

     div1设置了float:left之后，div2中的文字足够多时它会右和下半绕div1。要解除下方环绕，要设置div2的margin-left。

     div1设置了float:left，div3设置了float:right，div2要设置margin-left和margin-right，然后才能居在div1和div3的水平中间。

 

17.ul li

     四周都有很大的空隙，而且每一行前边还有个点，这是因为标签的默认样式造成的， 改变ul的默认样式：ul { list-style: none; margin: 0px; padding: 0px; }

     大多数标签都有自己的默认样式，比如body默认外边距，ul前的圆点及左侧的内边距，另h1-h6字体大小各不相同，em默认为斜体，strong表示粗体。因为有这些默认样式，一个设计合理的页面，即使没有加载样式，也能让用户很容易阅读。但有时这些默认样式对我们没用，需要清除掉，为了方便，建议用标签重定义方式，这样可以很简单地把全局的样式给统一起来。另外页面中的图片添加链接后会默认添加个边框，ul默认情况下会在列表前添加圆点，这些都是需要去掉的。
 

 body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; }
 ul { list-style: none; }
 img { border-style: none; }

 

 

18.定位

     position:reletive

     position:absolute

示例：a:hover{position:reletive; top:1px; left:1px}; 产生鼠标滑过时向右下偏移的效果。

(1).position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）
 
(2).position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）
 
(3).父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父容器左上角。
 
(4).相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右。

(5).一个元素浮动或绝对定位后，它将自动转换为块级元素，而不论该元素本身是什么类型

19.css sprite ,称为css精灵或css雪碧

     使用一张整合的图片减少文件体积，提高请求图片的效率。

     定位图片位置的参数是以图片的左上角为原点的，称为四方连续。

20.避免使用CSS表达式（Expression）

     CSS表达式是动态设置CSS属性的强大但危险方法。

     下面的例子中，使用CSS表达式使用了JavaScript表达式，可以实现隔一个小时切换一次背景颜色 ：background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

     表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

21. 代码压缩

       在把网站项目部署到网络前考虑对CSS进行压缩，除去注释和空格以使得网页加载得更快。压缩代码可以采用一些工具，如YUI Compressor，利用它可精简CSS代码，减少文件大小以获得更高的加载速度。

 

http://zh.html.net 

 

 通过下面这个链接进入W3C CSS验证器页面： http://jigsaw.w3.org/css-validator/