Css样式总结

1、继承与层叠

2、继承:这里的继承和对我们C#的继承是一样的, 其中相当一部分是跟文字的相关的，比如说颜色、字体、字号。当然还有一部分是不能继承的。例如边框、内外边距。

3、层叠: 层叠是CSS的核心机制。层叠的工作机制：当元素的同一个样式属性有多种样式值的时候，CSS就是靠层叠机制来决定最终应用哪种样式。

4、层叠规则：

5、层叠规则一：找到应用给每个元素和属性的声明。说明：浏览器在加载每个页面时，都会据此查找到每条CSS规则，并标识出所有受到影响的HTML元素。

6、层叠规则二：按照顺序和权重排序。按顺序：说明：浏览器依次检查CSS样式的来源，并设定匹配的属性，如果匹配的属性在下一个来源也有定义，则更新该属性的值，如此循环。权重排序：!import    

7、层叠规则三：按特指度排序。

    计算特指度(ICE 公式)

     I     C      E

    id   class   Element

    1.选择器中有一个ID，就在I的位置上加1；

    2.选择器中有一个类(class),就在C的位置上加1；

    3.选择器中有一个元素(标签)名，就在E的位置上加1；

    4.得到一个三位数。得到的这个数就是我们的特指度。

    例如：    I     C      E

     p        0     0      1     特指度=1

    p.largetext   0     1      1     特指度=11

    p#largetext   1     0      1     特指度=101

    body p.largetext 0     1      2     特指度=12

    body p#largetext 1     0      2     特指度=102

8、层叠规则四：顺序决定权重。说明：如果两条规则都影响到某元素的同一属性，而它们的特制度也相同，则位置最靠下的胜出。

9、样式单的基本使用方法和发展史

rel是relationship的英文缩写

stylesheet中style是样式的意思,sheet是表格之意,总起来是样式表的意思

rel="stylesheet" 描述了当前页面与href所指定文档的关系.即说明的是,

href连接的文档是一个新式表-->

10、CSS的发展史：

 CSS1.0:1996年12月，CSS1.0作为第一个正式规范面世，

     其中加入了字体、颜色等相关属性。

    CSS2.0:1998年5月，CSS2.0规范正式推出。这个版本的CSS是最广为人知

     的一个版本，以前的开发者使用的一般的就是这个版本的CSS规范。

    CSS2.1:2004年2月，CSS2.1对原来的2.0进行了一些小范围的修改，删除了

     一些浏览器支持不成熟的属性。CSS2.1可认为是CSS2.0的修订版。

    CSS3.0:2010年，CSS3规范推出，这个版本的CSS完善了前面CSS存在的一些不足。

     例如：颜色模块增加了色彩校正、透明度等功能；字体模块则增加了文字效果

            、服务器字体支持等；还增加了变形和动画模块等

11、CSS样式表的基本使用

为文档添加样式的4种方式：

1、使用内联样式：直接将样式定义到HTML元素中(写在标签里)。

  这种作用范围有限，只影响它所在的标签，而且总是覆盖嵌入样式和链接样式。

              <div style="width:200px;height:200px;"></div>

2、使用内部样式：写在<style>标签中。作用范围仅限于当前页面，内部样式覆盖链接样式，但

  也会被内联样式覆盖。

              <style type="text/css"> CSS样式</style>

3、链接样式：写在单独的CSS样式表中。链接样式的作用范围可以是整个网站。只要使用<link>

标把样式表链接到页面，相应页面就可以使用样式。

            <link href="链接表地址" rel="stylesheet" type="text/css"/>

4、@import指令导入外部样式文件：和链接样式类似。引用@import指令在某些浏览器(IE)

可能会出现“屏闪”。所以我们应该尽量的避免使用@import指令。而是尽量使用链接外部样式表。

            <style type="text/css">@import url(地址);</style>

            @import url()

12、Overflow

CSS提供了overflow,overflow-x,overflow-y这三个属性来控制

html组件不够容纳内容时的显示方式。这三个属性的功能基本相似，区别就是控制的方向不同。

overflow同时控制两个方向，overflow-x控制水平方向，overflow-y控制垂直方向。

属性值：hidden,auto

13、定位(position):CSS布局的核心是position属性,对元素应用这个属性,可以相对它在常规文档流中的位置重新定位。

(1)position属性有4个值:static(默认),relative,absolute,fixed。

(2)static:静态定位的情况下,每个元素都处在常规文档流中,它们都是块级元素,所以就会在页面上自上而下的堆叠起来。

(3)relative相对定位中的相对是指和它原来的文档流中的位置(或者默认位置)。可以用top,right,bottom,left属性值来改变它的位置。多数情况下我们用top和left就可以实现效果。

(4)absolute:绝对定位和前面3种定位完全不一样。因为绝对定位会把元素彻底从文档流中拿出来。然后再相对于其他元素定位。

(5)fixed:从完全移除文档流的角度来说,固定定位和绝对定位类似。

这是我所学到的Css总结样式，分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！