CSS总结(1)

CSS
    1.作用:为了弥补HTML标签属性的不足,作为HTML标签属性的补充,可以作用于任何HTML标签属性。
    2.选择符:#Id具有唯一性只作用于这一个元素;.class在HTML中定义一些元素为一组，从而通过class定义的CSS属性作用于这一组;还可以通过元素的名称来定义CSS,作用于整个HTML中的这些元素。
 *CSS具有就近原则,谁离元素近,谁对元素起作用。
    3.语法:选择符{属性:属性值;....;属性:属性值;}
 1)平级:根据"，"来分割选择符，那么选择符后面的CSS作用于前面的所有的选择符。*可以把共同的属性抽象出来，作为公用。
 2)层级
    (1)要求：html元素必须就有层级关系
           (2)作用：把共同的属性抽象出来，作为公用,同时继承
  .a {}
  .a .b{}//a里面的b
  .a .b .c{}//a里面的b里面的c。b将会继承a中的属性，c将会继承b中的属性
  #a {}
  #a #b{}//首先继承#a,然后应用#b
  #a #b #c{}//首先继承#a,然后继承#b,结果#c
 3)组合语法: 通过HTML元素的class属性指定多个类别。
    .a {}
    .b {}
    <div class = "a b"></div>//运用了a和b的所有属性
 4)属性
    (1) font:复合属性，修饰字体
  font-style|font-variant: normal|small-caps(小型的大写字母字体)|font-weight|font-size|line-height|font-family
  text-decoration(用来装饰文本)|text-transform(英文的转换)|letter-spacing(字体之间的间距)|text-align(文本对齐方式)
    (2)背景属性: background-color(背景颜色)|background-image(背景图片)|background-position(背景图片位置)
  *可以利用background-position来切割图片，这个技术被称为CSS Sprite
    (3)盒子模型:HTML中块级元素都有盒子模型
  块级元的素特征是长度和父容器一样,例如div;内敛元素的特征是长度和内容的长度一样, 内敛元素width和height不起作用,例如span。
  *块级元素和内敛元素在一定情况下可以相互转换。
  外补丁：margin:元素和元素之间的距离,分上下左右;若有四个属性值,按顺时针读取;若有两个,第一个代表上下,第二个代表左右。margin:1px auto //使其居中
  内补丁：padding:内容和元素之间的距离，分为上下左右。
  定位：position:absolute;是元素脱离文档流，使用坐标来定位。
        left:离左边原点的距离。
        top:离上边原点的距离。
        实际的宽度==2padding+2bordder+内容宽度
  边框：可以定义块级元素的边框的样式，颜色，大小，还可以单定义上下左右边框。
    (4)float:让块级元素div在父容器中可以左右浮动，从而脱离文档流，而后面的元素会占用移动元素原来的位置。移动的元素碰到父容器的边框停止浮动。
  要求：*width和height必有有一个（一般情况下使用width）。能够浮动的元素是块级元素。
        *要浮动的元素必有一个父容器，只能在父容器中浮动。
               *要浮动的元素宽度的和不能大于等于父容器。
               *要浮动的元素都必须有float属性。
               *使用clear:both来关闭非流式，使得后续的元素还按照文档流的方式进行布局。
    (5)list:list-style:none(不用任何样式修饰ul);list-style-image:url(url)(自定义图片修饰ul);list-style-type(选择类型修饰)
 5)网页的布局方式
    (1)流式模式(默认的布局方式):谁写在前先显示谁。
    (2)非流式模式:可以按照坐标来定位元素的位置。
    6技巧
 遮罩
    -moz-opacity:0.1;/*Firefox*/
    opacity:0.1;/*Opera*/
    filter:alpha(opacity=10); /*IE*/

转载于:https://www.cnblogs.com/zyh-bg/archive/2012/07/27/2612451.html