day3-关于样式-19-1-10

table表格下有三个语义化标签？

    <tHead> 
    <tBody>
    <tFoot>

    注：这三个标签在表格中不会产生任何效果，只是用来表示语义化的，定义表格的头、主体、尾。
        这三个语义化标签，可加可不加，浏览器会自动进行添加。

CSS边框？

    border-style : 边框的样式
        solid : 实线
        dashed : 虚线
        dotted : 点线

    border-width : 边框的大小

    border-color : 边框的颜色    

CSS复合样式?

    一个CSS属性只控制一种样式，叫做单一样式。
    一个CSS属性控制多种样式，叫做复合样式。        

    background-color : red;   单一样式
    background-image : url(1.jpg);  单一样式

    background : red url(1.jpg);  复合样式

    font : 字体的复合写法

    border:10px green solid; 复合样式
        border-left : 10px green solid ;  左边框
        border-right : 10px green solid ;  右边框
        border-top : 10px green solid ;  上边框
        border-bottom : 10px green solid ;  下边框
        border-right : none;  不设置右边框
        颜色中有一个叫做 : transparent值 (透明的意思)

    注：
        1. 背景和边框的复合样式，抒写不分先后顺序。
        2. 尽量要么都写复合，要么都写单一，尽量不要混写。如果非要混写，那么一定要先写复合样式再写单一样式。
        3. 字体的复合样式，是有先后顺序的。
            字体 : 最少写两个 size和family

                weight style size family;  √
                style weight size family;  √
                weight style size/line-height family √
                字符的复合写法，是不能把颜色加进去的    

CSS文字样式?
     font-family  :  定义字体类型
         衬线字体与无衬线字体
         多字体的设置 : 宋体 , 黑体 , 楷体 , 目的是字体的一个备选方案，如果计算机中没有对应的字体，会选择后面的字体。
         注：当字体中存在空格的时候，要用引号引起来

     font-size  :  定义字体大小
         默认大小 : 16px
         可以设置单词写法：small、large等 (不建议写单词)
         注：尽量都写偶数的数值：10px 12px 14px 16px 18px 20px....
    
     font-weight  :  定义字体粗细
        两种模式 : 正常、加粗
        值 :  1. normal  (正常)  bold  (加粗)         (用的多) 
              2. 100 200 ...  900   100 ... 500 (正常)   600 ... 900 (加粗)  (用的少)

     font-style  :  定义字体样式
         两种默认 : 正常、斜体
        值：italic斜体 | normal正常

     color  :  定义字体颜色

段落样式？    
     text-decoration  :  定义文本装饰
         underline : 下划线
         overline : 上划线
         line-through : 删除线
         none : 不添加任何装饰线
         line-through overline underline : 添加多个修饰

     text-transform  :  定义文本大小写（针对英文）
         uppercase : 全部转大写
         lowercase : 全部转小写
         capitalize : 把首字母进行大写    

     text-indent  :  定义文本缩进    （针对中文）
         首行缩进
         新的尺寸单位 : em 相对单位   1em === font-size的大小 
                 16px ->  1em  
                 20px ->  1em

     text-align  :   定义文本对齐方式（针对英文）
                 center 居中对齐
                 justify 两端点对齐
                 left 左对齐
                 right 右对齐
                 这个属性可以让一段文字再容器中 靠左 右 居中 对齐

     line-height  :  定义行高
                 一段文字的高度，行高默认是有值得，但是值跟文字的大小发生变化
                 值：1 2px |  或者字体大小的倍数

                 注：小技巧，如果想让一段文字上下居中 只要让行高和容器高度相同

     letter-spacing  :  定义字间距    

     word-spacing   :  定以词间距 （针对英文）

      强制折行 （针对英文）
          word-break： break-all 强烈折行
          break-warp： break-word  不那么强烈的折行

CSS选择符
    1.tag选择符
        div{} p{}
    2.id选择符
        css： #elem{}
        html： id="elem"
        注：在一个页面中，id值是唯一的
        命名规范： 语义化命名 字母 - _
                    数字（命名的第一位不能是数字）
        命名方式：    
                1.驼峰式 rightSideBar（小驼峰） RightSideBar(大驼峰)
                2.下划线式： mod_news_tab
                3.短线式：mod-news-tab
    3.class选择符
        css： .elem{}
        html class="elem"
        注：选择器可以复用 可以添加多个class样式
            多个样式的时候，样式的优先级根据css决定，而不是class属性中的顺序。
            标签+class的写法
    4.分组选择符（群组选择符）

        css： div, p , h1 {}
    5.包含选择符
        ul li {color:red;}
        p.box{border:1px red solid;} 找p标签有class为box的元素
        p .box {border:1px red solid;} 找p标签内有class为box的后代元素
    6.通配选择符
        *{} 操作所有标签（慎用）
    7.伪类选择器
    CSS伪类选择器用于向某些选择器添加特殊效果
        添加不上初始样式的时候，可以通过伪类后续添加
        选择器：:hover ->鼠标移入的伪类选择器
                :link -> 未访问的连接状态
                    清楚浏览器缓存数据 crtl+shift+delete
                ：visited 已访问的连接状态
                ：active鼠标按下

        注：1，link visited只能给a标签加 ，hover，active可以给所有标签加
            2， 如果四个伪类都生效，一定要注意顺序：L V H A
            3.一般网站只这样去设置 a{ color :red;} a:hover{color:yellow;}
CSS继承
    color是可以被继承的
        font-size line-height font-weight....
    border是不可以被继承
        width height background ...
    和文本相关可以被继承 和布局有关的不能被继承
    以上是默认行为，手动继承 inherit值，例如： border：inherit； 意思就是border的样式来自于祖先标签
样式优先级    
    1.相同样式优先级
        当设置相同样式时，后面的优先级比较高，但不建议出现重复设置样式的情况
    2.内部样式与外部样式
        内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写入的引入方式优先级高
    3.单一样式优先级
    style行间> id > class > tag >默认继承
    4.! important : 非正规写法 ，hack写法 （慎用）
    5. 标签+类与单类
        p{}
        .box{}
        p.box{} 优先级最高
    6.分组优先级
        分组选择符与单一选择符的优先级相同，靠后的优先级高。
    7.包含优先级
        包含选择符的优先级相对比较复杂，可以利用“约分法”来比较包含选择符的优先级的高低