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.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/