css基本样式

1.CSS基本样式

1.CSS背景

    背景颜色:background-color
    背景图片:backgorund-image
    背景重复:background-repeat
    背景吸附:background-attachment:fixed | scroll
    背景位置:background-position: x y       //背景位置有两个参数,第一个参数表示离x轴的距离,y表示离y轴的距离
    简写 background: color image repeat  position

    background-size: x y;             //x表示宽度，y表示高度
    background-size:cover;         //此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小。

2.CSS文本

     颜色的设置：
                     十六进制：#ff0000;
                       rgb值：rgb(255,0,0)
                     颜色名称：color:red    
    文本对齐方式：
                   text-align：right/left/center
       文本修饰：
                   text-decoration:underline/overline/line-through
       文本缩进：
                   text-indent:2em;

3.CSS字体
   
    font-family:Helvetica,Microsoft YaHei              //字体设置
    font-size：16px                                    //字体大小
    font-style:normal | italic                        //字体风格
    font-weight:normal | bold | lighter               //字体粗细
    line-height：2                                    //行高设置

4.CSS链接

    这四个链接状态是：

                  a:link - 正常，未访问过的链接
                  a:visited - 用户已访问过的链接
                  a:hover - 当用户鼠标放在链接上时
                  a:active - 链接被点击的那一刻

   *若单独设置几个链接，必须遵守如下规则：

                  a:hover 必须跟在 a:link 和 a:visited后面
                  a:active 必须跟在 a:hover后面

5.表格(了解)

   border-collapse 属性设置表格的边框被折叠成一个单一的边框

   table{border-collapse:collapse}      //表格显示为单线条边框

   //可以在td,th设置这个两个属性

   colspan:value    //跨越的列
   rowspan:value   //跨越的行
   表格行
                  

          
表格头部
          
          

                  
表格数据
          
   

6.轮廓属性（不怎么用）

      轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
      p{ outline:1px solid pink}

     透明：
           opacity：0.5         //取值0~1

     可见设置：
     visibility:hidden|visible          //当设置为hidden时，不可见，但占位依然在

     //不可见，占位也不在         
      display:none;                 

7.边框

    border-width  边框的宽度
    border-style   边框的样式
    border-color 边框的颜色

    可以简写成
    border： width style color
    p{border:1px solid #333}

    *边框-单独设置各边
   p{
     border-top:1px solid #ccc;
    }

8.css列表样式(针对ul)

   list-style:none;                    //列表样式
   list-style-type:circle|square       //样式类型（空心圆、实心矩形）
   list-style-image:url("xxx")         //样式风格（图片、图标）

2. CSS样式的继承

继承:是子元素对父元素的继承

1.width和height
   width
   如果子元素不设置宽度，默认情况下继承父元素的宽度

   height
   如果父元素不设置高度，默认情况下父元素继承子元素的高度

2.css可以继承的属性

   文本相关属性:color,text-align,text-decoration,text-transform,text-indent(内联标签不能设置此属性)
   字体相关属性:font-family,font-style,font-size,font-weight,line-height
   列表相关属性:list-style
   表格相关属性:border-collapse
   其他属性:cursor,visibility