第2周 CSS3基础语法与盒模型

第一节 CSS3 基础入门

　　1、CSS3 简介

　　　　CSS 用来给 HTML 标签添加样式的语言

　　　　背诵 CSS 非常重要　　　

　　2、CSS3 书写的位置

　　　　1 内嵌式

　　　　　　在 <head> </head> 标签对中，书写<style></style> 标签对，里面书写 css 语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    样式-->
    <style>
        h1 {
            color : red;
        }
    </style>
</head>
<body>
   <h1>我是猪</h1>
</body>
</html>

　　　　2 外链式

　　　　　　可以将 css 单独保存为 .css 文件，然后使用<link> 标签引入它

外链式的优点：多个html 网页，可以公用一个 css 样式文件　　

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="./css/css.css">

    <title>Document</title>
</head>
<body>
    <h1>我是一个主标题</h1>
    <h1>我是一个主标题</h1>
    <h1>我是一个主标题</h1>
    <h1>我是一个主标题</h1>

</body>
</html>

　　　　3、导入式【不常用】

　　　　4、行内式【不常用】

# 样式可以直接通过 style 属性写在标签身上
 <h2 style="color: red">我是猫</h2>
 
 # 行内式牺牲了样式表批量设置样式的能力

　　3、CSS3 书写的语法

　　css3 的注释 command + /

第二节 CSS3 选择器

　　1、传统的css2.1 选择器

　　　　1、标签选择器和

　　　　　　1、它直接使用元素的标签当做选择器，将选择页面上所有改种标签　

　　　　　　2、选择页面上所有的该种标签，无论这个标签的深浅

　　　　　　3、标签选择器 “覆盖面” 非常大，所以通常用于标签的初始化

　　　　2、id 选择器

　　　　标签可以有 id 属性，是这个标签的唯一标识

　　　　　　eg : <p id = "para1"> 我是一个段落</p>

　　　　id 的名字只能由字母、数字、下划线、短横构成，且不能以数字开头，字母区分大小写，但习惯一般为小写字母

　　　　CSS选择器可以使用井号 # 前缀，选择指定的 id 的标签

#para1 {
    color: green;
    font-size: 30px ;
}

　　　　2、class 选择器

# 使用.元素
eg : <h2 class="aaa">我是h2标签</h2>

.aaa {
    color: blue;
    font-size: 100px;
}

如果有多个类名，用逗号分隔每个 class。

eg ： 为 class="hometown" 的所有 <p> 元素设置样式：

p.hometown
{ 
　　background-color:yellow;
}

　　　　3、复合选择器

　　　　　　1 后代选择器

　　　　2 后代选择器可以有很多空格，隔开好几代

　　　　2 交集选择器

　　　　选择有 .spec 类的h3标签

　　 3 并集选择器

 <div class="fs">
       我是div
       <p>我是div内部的p <span>我是span</span></p>
       <p>我是div内部的p <span>我是span</span></p>
   </div>
    <p class="fs">我是p <span>我是span</span></p>
    <p class="fs">我是p <span>我是span</span></p>
    <h3>我是h3</h3>

div.fs {
    color: green;
}

div.fs p span {
    color: indianred;
}

p.fs {
    color: green;
    font-style: italic
}

h3 {
    color: green;
    font-size: 50px;
}

　　4 伪类

　　　　指定要选择的元素的特定状态

　　　　超级链接拥有4个特殊状态

　　a 标签的伪类书写，要按照”爱恨准则“的顺序，否则会有伪类不生效

a:link {
    color: dodgerblue;
}

a:visited {
    color: darkgoldenrod;
}

a:hover {
    background-color: gold;
}

a:active {
    font-size: 50px;
}

<body>
    <a href="http://www.baidu.com">百度</a>
</body>

　　2、CSS3 新增选择器

　　　　1、元素关系选择器

　　　　1、子选择器

　　　　　　当使用 > 符号fenge

　　　　2、相邻兄弟选择器

　　　　　　相邻兄弟选择器（+）结余两个选择器之间，当第二个元素紧跟第一个元素后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中

　　　　　　说白了，a+b就是选中”紧跟在a后面的一个b“

　　　　3、通用兄弟选择器

　　　　　　通用兄弟选择器（~）， a ~ b 选中 a 元素之后所有同层 b 元素

　　　　2、序号选择器

　　　　　　1、:first-child

　　　　　　　　选择第一个子元素，下面的例子就表示选择 .box1 盒子中第一个 p

　　　　　2、:last-child

　　　　　　　选择最后一个子元素，比如下面的例子就是表示选择 .box1 盒子中最后一个 p

　　　　 3、:nth-child()

　　　　　　可以选择任意序号的子元素

　　　　　　:nth-child() 可以写成 an + b 的形式，表示从 b 开始每 a 个选择一个，注意不能写成 b + an

　　　　　　: 2n + 1 等价于 odd, 表示奇数

　　　　　　：2n 等价于 even，表示偶数

　　　　4、: nth-of-type()

　　　　　　选择同种标签指定序号的子元素

　　　　5、:nth-last-child() 和 :nth-last-of-type()

　　　　　　都是倒数选择

　　　　练习题：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <style>
            thead {
                color: red;
            }
            tbody tr:nth-child(odd){
                color: green;
            }
            tbody tr:nth-child(even){
                color: orange;
            }
        </style>
    <title>Document</title>
</head>
<body>
    <table  border="1" cellpadding="0" width="200">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年纪</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>男</td>
                <td>12</td>
            </tr>
            <tr>
                <td>2</td>
                <td>张三</td>
                <td>男</td>
                <td>12</td>
            </tr>
            <tr>
                <td>3</td>
                <td></td>
                <td>男</td>
                <td>12</td>
            </tr>
            <tr>
                <td>4</td>
                <td>张三</td>
                <td>男</td>
                <td>12</td>
            </tr>
        </tbody>
    </table>

</body>
</html>