HTML入门03

选择器

1. 通配符选择器：*
   • 通配符选择器：代表选中所有的元素
   • 权重：0

        *{
            color:red;
        }

2. 标签选择器
   • 选择这类标签
   • 权重：1

        p{
            background-color: lime;
            color: mediumblue;
        }

3. 类选择器
   • 起名字的时候在结构中用class=“名字”
   • 使用的时候：.名字
   • 可以重复使用，也可以设置多个，但中间要用空格隔开
   • 权重：10

        .a1{
            color:midnightblue
        }

4. 属性选择器
   • 选中具有某个属性 的所有元素
   • 选中某个属性名与值的所有元素,写一个值就只能对一个属性值的起作用
   • 权重：10

        [index]{
            width:100px;
            height:100px;
            background-color: orangered;
        }
        [index="i2"]{
            border:1px solid black;
        }

5. id选择器
   • 起名字的时候：再结构中用id=“名字”
   • 使用的时候："#名字"
   • 注意：在一个文档中，ID名字不能重复(相当于身份证，唯一的)
   • 权重：100

        #d1{
            width:20px;
        }

6. 子选择器
   • 连接符：>
   • 含义：选择子级的谁(第一层级的儿子元素)
   • 权重：10+后面的权重

        .main>div{
            width:100px;
            /* 权重:10+1 */
        }
        .main>.a1{
            height:100px;
            /* 权重：10+10 */
        }

7. 后代选择器
   • 连接符：空格
   • 选择后代里面所有的（不管是儿子孙子，都算后代）div
   • 权重：10+后面的权重

        .main div{
            width:100px;
            /* 权重：10+1 */
        }

8. 分组选择器
   • 符号：,
   • 作用：可以把共同的样式提取出来
   • 权重:分开看，此时是10，因为此时代表两个class

        .c1,.c2{
            width:100px;
            height: 100px;
            display: inline-block;
        }

9. 交集选择器
   • 选中同时具备某些名字的元素
   • 注意：中间没有空格，是紧紧相连的
   • 权重：相加

        /* 同时具备div标签和box1类的元素 */
        div.box1{
            color:teal;
        }
        /* 同时具备box1和box3的元素 */
        .box1.box3{
            color:red;
        }

10. 相邻兄弟选择器
    • 符号+
    • 同级情况下选中与某个元素相邻的元素
    • 注意：向下寻找
    • 权重：相加

        p+h1{
            background-color: teal;
        }

11. 通用兄弟选择器
    • 符号~
    • 选中某个元素的兄弟元素，不管想不相邻，只要是兄弟就可以
    • 注意：向下寻找
    • 权重：相加

        p~h1{
            background-color: violet;
        }

12. 伪类选择器
    • 如果全写的话要按顺序来写
    • 速记方法：LVha LV好

        /* 默认样式,:link可以省略 */
        a:link{
            color: violet;
        }
        /* 访问过后的样式 */
        a:visited{
            color: teal;
        }
        /* 鼠标划过的样式 */
        a:hover{
            color: yellow;
        }
        /* 鼠标点击 */
        a:active{
            color: black;
        }

table表格

• 结构：
  • 表格：table
    • table属性:
      • cellspacing边框到边框的距离
      • cellpadding内容到边框的距离
  • 行：tr
  • 单元格：td
  • 标题单元格：th，文字会居中加粗
  • 标题：caption，文字会居中
    CSS样式去除表格重合边框

            border-collapse:collapse;
            /* 单线边框 */

表格均分

            table-layout:fixed;

• 合并单元格：
• 跨列：在第一个th或td上添加colspan=“单元格个数”，然后删除多余单元格
• 跨行：在第一个th或td上添加rowspan=“单元格个数”，然后删除多余单元格

    <table border="1" cellspacing="0" cellpadding="50">
        <caption>表格大标题</caption>
        <!-- tr行 -->
        <tr>
            <!-- th标题，会加粗 -->
            <th colspan="2">语文</th>
            <!-- <th>数学</th> -->
            <th>英语</th>
        </tr>
        <tr>
        <!-- td单元格 -->
            <td rowspan="2">100</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr>
            <!-- <td>100</td> -->
            <td>100</td>
            <td>100</td>
        </tr>
    </table>

thead:表头
tbody:表身
tfoot：表尾
作用： 添加thead tbody tfoot的作用在于编码时，代码顺序可以打乱，而显示时会按照thead-tbody-tfoot自动扶正