css

     今天学了css，css的内容太多了，老师讲了一天，还没讲完，而且也没怎么练习，要掌握的太多了，大概总结了些。

1、外部引入：在HTML的head部分<link rel="stylesheet" type="text/css" href="http://blog.163.com/html5_12/所需的CSS文件路径">，引入外部的CSS文件；（优缺点：使用最广泛，一个css文件可控制多个页面，从整站来讲，减少代码数量，提高加载速度，便于维护。）

2、头部引入：在head部分加入<style type="text/css"></style>标签，CSS代码就写在标签内（style是表明引入文件类型的标签；type是表明文件类型；（优缺点：使用也比较多，加载速度快，一般用于访问量较大的网站或首页，但是整站代码较多，不利于维护）

3、在标签内直接写CSS:直接把css标签写在页面标签里；（优缺点：用得比较少，权重最高，代码多，加载慢，不利于维护）

4、使用@import引入css（优缺点：适合大型网站css架构）

CSS选择器

1、标签名选择器：如：p{}，即直接使用HTML标签作为选择器，在实际的应用中，我们习惯用它设置标签的一些默认属性或者和后代选择器一起使用；

2、类选择器：如  .polaris();前端开发者最常用。

特点：（1）可以给不同标签设置同一个类，从而用一条CSS命令控制几个标签，减少代码量，使页面修改简单，易维护、易改版。（2）后台工作人员几乎不会用到有关class的相关设置，不需要跟后台人员之间进行交互；（3）可以通过js等动态改变标签的classname，从而改变整个标签的样式，使前端动态效果实现起来更为容易。

命名规范：第一个字符不能使用数字，在Mozilla或firefox中不起作用。

3、ID选择器： 如：#polaris();在同一个HTML文档中不能出现两个相同的ID名称，也就是说ID具有唯一性。

4、后代选择器：如 .polaris  span  img{}，后代选择器实际上是使用多个选择器加上中间的空格来找到具体的要控制的标签。    

5、群组选择器：.polaris ， span ， img{}，实际上是对CSS的一种简化写法，是把具有相同CSS样式的不同选择器放在一起，减少代码量。

CSS选择器中的属性顺序

显示属性：display, list-style, position, float, clear

自身属性：width, height, margin, padding,border,background

文本属性：color, font, text-decoration, text-align,vertical-align, white-space, content 

 符合浏览器的渲染顺序，最终达到提高执行效率目的 

CSS优先级

所谓优先级是指CSS样式在浏览器中被解析的先后顺序。

(1) CSS不同引入方式的优先级：标签内嵌样式 > 头部书写样式 > 外部引用样式 > 浏览器默认样式。

(2) CSS选择器的优先级：id > class > tagname.

(3) 多个选择器混用时的优先级：例子.a  .b  c{}和.a  c{},它们指向的目标都是c，但是前者的优先级高于后者。

     注：当指向同一目标选择器的优先级相同时，后面的优先级大于前面的优先级；当同一个标签中定义有多个class名时，各个类选择器之间的优先级与html中的class名排列无关，而是与css文件中各个类选择器的排列有关。

选择器	特殊性 (a,b,c,d)
Style= ””	1,0,0,0
#wrapper #content {}	0,2,0,0
#content .datePosted {}	0,1,1,0
div#content {}	0,1,0,1
#content p {}	0,1,0,1
#content {}	0,1,0,0
p.comment .dateposted {}	0,0,2,1
div.comment p {}	0,0,1,2
.comment p {}	0,0,1,1
p.comment {}	0,0,1,1
.comment {}	0,0,1,0
div p {}	0,0,0,2
p {}	0,0,0,1

4、利用！important提升优先级：通过在css属性后面标明！important的方法提升该条属性的优先级。被！important注明的css属性具有最高的优先级，是不能被覆盖的。在IE6中！important具有一个BUG，就是同一组CSS属性中，！important是没有作用的。

例如： .outer{

    color:blue  !important;  color:red;

}

在IE6下文字的最终显示效果为红色，！important没有起作用。

 

字体设置

语法：

font-family：宋体，Arail,Tabhoma,sans-serif;

font-size : px | baifenshu | em;  (em的值会相对于父元素的字体大小改变。浏览器中默认的文本大小是16像素，所以1em的默认尺寸是16像素，可以通过公式将像素转换为em：px/16=em)

font-style: normal  |   italic(斜体)   |   oblique（倾斜），通常情况下italic和oblique文本在web浏览器中看上去完全一样。

font-weight : normal  |  bold  |  bolder  |  lighter  | number;(后两种不常用，只做了解)

缩写：font  :  font-style  |  font-variant  |  font-weight  |  font-size  |  font-family  ; 一般情况下我们不采用简写的形式。

color： red  |  #fff ；

text-decoration：none  |  underline  |  overline  |  line-though  |  blink  |  inherit  ;

line-height : normal  |  length ;

 

文本设置

语法:

text-indent :  px  |  em ;

text-align  :  left  |  right  |  center  |  justify(两端对齐)  ;

vertical-align  ：  top  | bottom  |  middle ；

word-spacing：px；（改变词之间的距离）；

letter-spacing：px；（改变字母之间的距离）；

背景设置

background-color：red  |  #fff；

background-img：none  |  url( ) ;

background-repeat : repeat  |  no-repeat  |  repeat-x  |  repeat-y  ;

background-position : x轴坐标值  y轴坐标值；

background-attachment：scroll  |  fixed  ；

简写：background：color  url（）  position  repeat ；

1

．什么是

CSS? 

CSS

是

CascadingStyleSheets

（层叠样式表）

的缩写。

它的作用是定义网页的外观

（例

如字体，颜色等等），它也可以和

javascript

等浏览器端脚本语言合作做出许多动态

的效果。这还不是全部，不改动

HTML

，只是通过添加不同的

CSS

规则，我们就可

以得到各种网页。

1

．什么是

CSS? 

CSS

是

CascadingStyleSheets

（层叠样式表）

的缩写。

它的作用是定义网页的外观

（例

如字体，颜色等等），它也可以和

javascript

等浏览器端脚本语言合作做出许多动态

的效果。这还不是全部，不改动

HTML

，只是通过添加不同的

CSS

规则，我们就可

以得到各种网页。