003-CSS核心属性

  1. 文本大小 {font-size:12px/14px/16px}

    说明:
    1)属性值为数值型时,必须给属性值加单位,属性值为0时除外。
    2)单位还可以是pt,9pt=12px;
    3)为了减小系统间的字体显示差异,IE Netscape Mozilla的浏览器制作商于1999年召开会议,共同确定16px/ppi为标准字体大小默认值,即1em.默认情况下,1em=16px,0.75em=12px; 1rem 相对于根元素的倍数
    4)使用绝对大小关键字

       xx-small   =9px
       x-small    =11px
       small      =13px
       medium     =16px
       large      =19px
       x-large    =23px
       xx-large   =27px
    
  2. 文字颜色{color: white}
    说用十六进制表示颜色值:

       0  1  2  3  4   5  6  7  8  9
       0  1  2  3  4   5  6  7  8  9  A  B  C  D  E  F

    颜色模式:

       光色模式 R         G      B
               FF        00     00

    颜色值的缩写:

       当表示三原色的三组数字同时相同时,可以缩写为三位;
       当用十六进制表示颜色值时,需要在颜色值前加“#”
    
    
  3. 文本字体{font-family: “字体1”, “字体2”}

       说明:
           *当字体是中文字体时需加引号;
           *当英文字体中有空格时需加引号如“Times New Roman”;
           Windows中文版本操作系统下,中文默认字体为宋体或者新宋体,英文字体默认为Arial.
     
     
       加粗 {font-weight: bold/normal/100-900}     
       倾斜 {font-style: italic/oblique}
           1)在css规范中把字体的粗细分为9个等级,分别从100-900,
           其中100对应最轻的字体变形,而900对应最重的字体变形。
           100-500常规字体600-900加粗字体
    
    
  4. 对齐方式

    水平/垂直:

       {text-align:left/right/center/justify(justify个别浏览器不兼容,)
       {vertical-align:top/bottom/middle/baseline;}(只有inline-block(能设置大小,默认排在一行)元素类型支持)
    
    
  5. 行高

       说明:
           1)当单行文本的行高等于容器高时,可实现单行文本在容器中垂直方向居中对齐;
           2) 当单行文本的行高小于容器高时,可实现单行文本在容器中垂直中齐以上任意位置.
           3) 当单行文本的行高大于容器高时,可实现单行文本在容器中垂直中齐以下任意位置.(IE6及以下版本存在浏览器兼容问题)
    
  6. 文本修饰

     text-decoration:
         说明:none:没有修饰
         underline:添加下划线
         overline:添加上划线
         line-through:添加删除线
         blink:闪烁(不兼容)
    
    
  7. 首行缩进

    {text-indent}说明:

       1)text-indent可以取负值;
       2)text-indent属性只对第一行起作用。

    字间距{letter-spacing:value;}

       控制英文字母或汉字的字距。

    词间距{word-spacing:value;}

       控制英文单词词距。
    
    
  8. 文字方向文本流控制{layout-flow:horizontal/vertical-ideographic;}说明:

     1)horizontal:自左向右
     2)vertical-ideographic:自上而下
    
    
  9. 文字属性 {font: bold italic 16px/1.5 Arial}

    font属性的简写:字号,行高,
    字体说明:font的属性值应按以下次序书写(各个属性之间用空格隔开)
    顺序: font-style     font-weight     font-size / line-height      font-family
    
    
  10. 列表样式定义列表符号样式:

     1)list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块 )none(去掉列表符号);
     2)使用图片作为列表符号:list-style-image:url(所使用图片的路径及全称);
     3)定义列表符号位置:list-style-position:outside/inside;list-style:none;简写
    
    
    
  11. 边框属性border:3px solid red;

       边框border:线型(solid/dashed/dotted/double/none) 粗细(数值+单位) 颜色;    
       线型:solid:实线,dashed:虚线,dotted:点状线,double:双线,none:没有边框;    
        border-width:边框的粗细;    
        border-style:边框的线形;     
        border-color:边框的颜色;  
        border-top:上边框    
        border-bottom:下边框    
        border-left:左边框    
        border-right:右边框
    
  12. 背景属性)

     1)背景颜色语法:选择符{background-color:颜色值;}
       
     2)背景图片的设置语法:background-image:url(背景图片的路径及全称);
        插入图片:属于网页内容,也就是结构。
        背景图:属于网页的表现,背景图上可以显示文字、插入图片、表格等。
       
     3)背景图片的显示原则       
        1)容器尺寸等于图片尺寸,背景图片正好显示在容器中;       
        2)容器尺寸大于图片尺寸,背景图片将默认平铺,直至铺满元素;        
        3)容器尺寸小于图片尺寸,只显示容器/元素/范围以内的背景图。
    
     4)背景图片平铺属性语法:
            {background-repeat:no-repeat/repeat/repeat-x/repeat-y }
            no-repeat:不平铺
            repeat:平铺
            repeat-x:横向平铺
            repeat-y :纵向平铺
    
     5)背景图片的位置语法:
         选择符{background-position:left/center/right/数值 top/center/bottom/数值;}
         background-position:值1    值2;
         水平方向上的对齐方式(left/center/right)或值    
         垂直方向上的对齐方式(top/center/bottom)或值两个值 :第一个值表示水平位置的值,第二个值:表示垂直的位置。当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置都在中间。 
         
     注:当元素小图片大,写图片的某个位置时:说明:向右方向,向下方向是负值
    
    
  13. CSS继承概念:
  • 所谓继承,就是父元素的规则也会适用于子元素。继承得来的规则没有特殊性。比如给body设置为color:Red;那么他内部的元素如果没有其他的规则设置,也都会变成红色。

      
      内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font-family、font-size、font-style、font-weight、text-decoration、text-transform.块状元素可继承:text-indent和text-align。
      列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。
      表格元素可继承:border-collapse。
    原文作者:Petrichor
    原文地址: https://segmentfault.com/a/1190000017035027
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞