Day5 CSS基本样式和C3选择器

　　　　　　　　　　　　　　　　Day5 CSS基本样式和C3选择器

一.背景属性
 1.背景颜色
            background-color:transparent(默认值，透明);

颜色的取值：
            1)关键字  red，blue，yellow...
            2)十六进制  #ffffff :白色   #000000：黑色  #cccccc  #dddddd  #333333   #666666  #999999:灰色
                         #fff             #000           #ccc     #ddd

3)rgb(0,0,0)  三原色  0-255

4)rgba(0,0,0,.5)  a代表透明度 取值0-1  0  完全透明      1  不透明

2.背景图片
            background-image:url(); 默认值none  没有背景图
            默认水平垂直平铺

3.背景图片是否平铺
            background-repeat:repeat| no-repeat|repeat-x|repeat-y;
                              默认值   不平铺    水平平铺   垂直平铺

4.背景图片大小
            background-size: px | % | cover | contain ;

• cover     : 完全覆盖背景区域，但是有部分背景图片无法完全显示
• contain   :扩展图片到最大尺寸，但是部分背景区域可能无法完全覆盖

　　　　(设置图片用宽高,设置背景图片用size;)

5.背景定位
            background-position:0 0;
            取值：px  %  left  right  top  bottom center
            当只取一个值时，另外一个值默认为center
            右下为正值

6.背景固定
             background-attachment: scroll|fixed;
                                    　　　　  (默认 | 固定)

7.简写background
             当一个属性有多个属性值时，空格隔开,不区分先后顺序

　　　 如果不设置其中的某个值，也不会出问题，取默认值，比如 background:url('smiley.gif') no-repeat; 也是允许的。

二.字体属性
除了超链接a,其他的标签字体颜色都可以继承.需给a单独设置.
1.字体颜色 
            color: 规定文本颜色 ;
        颜色的取值：
            1)关键字  red，blue，yellow...
            2)十六进制  #ffffff :白色   #000000：黑色  #cccccc  #dddddd  #333333   #666666  #999999:灰色
                         #fff             #000           #ccc     #ddd
            3)rgb(0,0,0)  三原色  0-255
            4)rgba(0,0,0,.5)  a代表透明度 取值0-1  0  完全透明      1  不透明

2.字体样式
            font-style: 指定文本字体样式;(正常normal默认值 / 斜体italic )

　　3.字体大小

　　　　font-size:指定文本字体大小 (  一般浏览器默认为16px ,1px=1像素 )

　　　　　　 font-size:20px;

3.字体是否加粗
            font-weight :normal(默认值) | bold（加粗）;
            100-900
            400=normal
            700=bold

5.字体
            font-family:定义文本只用某个字体;
            逗号隔开多种字体
            一种字体多个单词组成，必须加引号

三.文本属性
1.文本装饰，下划线
        text-decoration: none;  默认值，无
        取值：

• underline  下换线
• overline  上划线
• line-through   删除线

2.内容水平对齐方式
        text-align: left | right | center;(内容水平居中)

3.英文大小写转换
            text-transform:none;
            text-transform: uppercase;   转换为大写
            text-transform: lowercase;   转换为小写
            text-transform: capitalize;  首字母大写

　　　　　　　 (text-transform:只对英文生效,)

4.文本首行缩进
            text-indent:指用来固定指定文本的第一行的缩进;
            取值：px  em
            px  绝对单位
            em   相对单位
            相对于父元素的字体大小  父元素 1em=16px(浏览器默认)  2em=32px  父元素10px   2em=20px
            父元素 20px  0.5em=10px                     (首行缩进两个字符)
    一个字默认16px;两个字32px;

5.
    1).行高
        一行文字垂直居中
        行高=高
        line-height: normal(默认设置合理行间距) | number | length(设置固定行间距)  ;

　　　　不允许使用负值,可以取数字  行高=数字*字体大小

2).去项目符号
        list-style-type: none;

三.关系选择器
    1）子代选择器   选择器1>选择器2{}
        选中直接子代  (用 大于号 表示)

    eg:
　　　　　　.box>span{
           color: red;　　　　　　
　　　　　　　　}

2）后代选择器   选择器1 选择器2{}
        选中所有后代  (中间用 空格 隔开)

     eg:
　　      　.box span{
           　　color: red;
     　　　　}

3）相邻兄弟选择器   选择器1+选择器2{}
        平级  挨着的后面那一个(用 加号 表示)

   eg:
　　.two+p{
            font-size: 20px;
            color: gold;
      }

4）通用兄弟选择器   选择器1~选择器2{}
        平级  后面所有的兄弟(作用于多个元素,用~表示)

  eg:.two~p{
            font-size: 20px;
            color: gold;
        }

1.overflow:溢出部分

• hidden  隐藏
• auto      自动
• scroll  滚动条

overflow: hidden;　　　　　　　　　　　　　　　　　overflow: auto;　　　　　　　　　　　　　　overflow: scroll;
　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　

　(将多余文本隐藏,图片同理)　　　　　　　　 (内容溢出显示滚动条,如果不溢出不显示滚动条)　　　　　　(显示滚动条)

2.文字溢出省略号显示  (三者缺一不可)
        1)文字在同一行显示    white-space: nowrap;

2)溢出部分隐藏     overflow: hidden;

3)文字溢出省略号显示    text-overflow: ellipsis|clip(裁剪);

　　　　　　white-space: nowrap;
            /*溢出部分隐藏*/
            overflow: hidden;
            /*文字溢出省略号显示*/
            text-overflow: ellipsis;　　　　　　

　　　　　　　　

3.设置字符之间的距离 : letter-spacing: 1px;

 letter-spacing: 1px　　　　

　　　　(字符之间间距1px)