css的引入与选择器

<!-- 内联式引入 -->
<div style="width: 400px; height:400px; background:pink ;">内容</div>
<div style="width: 400px; height:400px; background:pink ;">内容</div>

1.2嵌入式，头部引入

使用style标签引入，其内部就是css的书写区域
style标签建议放在head标签中，可以减少重绘重排
优点：样式统一在style中，可以通过选择器控制一个或多个元素，便于维护和修改；实现了结构和样式相分离；减少代码冗余

<!-- 头部引入 -->
<style>
    div{
        width:400px;
        height:400px;
        background:pink;
    }
    p{
        width: 200px;
        height:200px;
        background:goldenrod
    }
</style>

1.3外部引入

创建一个新的css文件用来书写样式
通过link标签将css文件引入到当前网页中（link标签的使用位置和style一致）
link标签：rel：stylesheet，link引入的css和当前html文档进行关联；href，css的路径
优点：一个文件可以控制多个网页，便于维护

<!-- 外部引入 -->
<link rel="stylesheet" href="./03_外部引入.css">

2.基础选择器

2.1id选择器

给被选择的元素添加一个id值属性，值是独一无二的
id值在当前网页中不许重复，id或者class都必须以字母开头，不许有汉字，不能有带有广告的英文单词
除第一位外后面可以跟数字，连字符（_，-），见名之意
多个单词出现推荐小驼峰命名法，或者连字符连接
用 “ #id值 ”来选择拥有当前id值的元素
id选择器只能选择当前网页中的一个或零个元素

<!-- id选择器 -->
<style>
    #content{
        width:600px;
        height:200px;
        background:pink;
    }

</style>
<body>
    <div>
        <p id="content">内容1</p>
        <p>内容2</p>
        <p>内容3</p>
        <p id="font">内容4</p>
    </div>
</body>

2.2类选择器

想要同时选择一个或多个元素，可以给元素取一个相同的类名
设置class属性，值的取名规则和id一致
用“ .class值 ”来选择拥有当前class值的元素
如果一个元素想要有多个类名，则写在同一个class中用空格隔开
用类选择器的要多，因为类的优先级低于id的，所有通常用id选择器做层叠效果

<!-- 类选择器 -->
<style>
    .content{
        height:100px;
        background:pink;
    }
    .font{
        font-size:30px;
    }
</style>
<body>
    <div>
        <p class="content">内容1</p>
        <p>内容2</p>
        <p class="font">内容3</p>
        <p class="content font">内容4</p>
    </div>
</body>

2.3标签名选择器

直接在css中使用标签名来选择元素（会选中当前页面中所有使用这个标签的元素）
标签名选择器一般不会独立使用，会和其他选择器组成复杂选择器使用

<!-- 标签名选择器 -->
<style>
    p{
        width:100px;
        height:100px;
        background:pink;
    }
</style>
<body>
    <div>
        <p>con1</p>
        <p>con1</p>
        <h2>con1</h2>
        <p>con1</p>
        <div>con1</div>
    </div>

2.4通配符选择器

通配符选择器就是“ * ”号，代表匹配网页中的所有元素
常用在控制所有元素、清除默认样式
要控制所有元素性能不好，通常很少使用

<!-- 通配符选择器 -->
<style>
    * {
        color:pink;
    }
</style>

<div>
    <p>p1</p>
    <p>p2</p>
    <h2>h2</h2>
    <p>p3</p>
    <div>div1</div>
</div>

2.5 !important

作用是设置某一个样式规则的，优先级最高
一般不使用，主要用来救急

<style>
    .content{
        width: 600px;
        height: 100px;
        background-color:pink !important; /* !important作用指定某一样式的优先级最高 */
    }
</style>

<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p class="content" style="background:red;">3</p>
    </div>
</body>

3.优先级

!important > 行内样式 > id选择器 > 类选择器 > 标签名选择器 > 通配符 > 默认 > 继承

4.复杂选择器

4.1后代选择器

后代选择器使用空格间隔开，用来选择某个元素下的所有后代元素，无论嵌套在多少层内

<style>
    .test {  /* 后代选择器 */
        color:pink;
        width: 100px;
        height: 100px;
    }
</style>

<div>
    <ol class="test">
        <li>1</li>
        <li>2</li>
    </ol>
    <ol>
        <li>3</li>
        <li>4</li>
    </ol>
</div>

4.2子代选择器

子代选择器使用“ > ”好间隔开，用来选择某个元素的直接子元素，不会选择嵌套在更深层级的

<style>
    .a > p {
        width: 30px;
        height: 30px;
        color: blueviolet; /* 字的颜色会继承 */
        background-color: red;
    }
</style>
<div class="a">
    <p>
        111
        <span>span</span>
    </p>
    <p>222</p>
    <p>333</p>
</div>

4.3相邻兄弟选择器

相邻兄弟选择器用“ + ”间隔

<style>
    .title + p {
        color: coral;
    }

    /* h2不会被选上，因为它没有紧贴着test */
    .test + h2 {
        color: red;
    }
</style>

<div>
    <h1 class="title">标题h1</h1>
    <p>内容1</p>
    <p class="test">内容2</p>
    <p>内容3</p>
    <h2>标题2</h2>
</div>

4.4通用兄弟选择器

相邻兄弟选择器用“ ~ ”间隔

<style>
    .content > .title ~ p {
        background-color: red;
    }

    .title ~ h2 {
        background-color: aqua;
    }
</style>

<div class="content">
    <h1 class="title">标题</h1>
    <p>内容1</p>
    <p>内容2</p>
    <p>内容3</p>
    <h2>标题2</h2>
</div>

4.5交集选择器

由两个选择器直接连接构成，选择二者各自范围内的交集
第一个一般是标签名选择器或类选择器，第二个必须是类别选择器或者ID选择器，两个选择器之间不能有空格，必须连续书写

<style>
.page p.test1 {
        color: white;
        background-color: red;
    }
    .page p#test2 {
        background-color: aqua;
    }
</style>

<div class="page">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p class="test1">5</p>
    <p>6</p>
    <p id="test2">7</p>
    <p>8</p>
</div>

4.6群组选择器

将多个选择器使用逗号隔开，可以同时对多个选择器设置样式
如果对个元素有相同的样式，方法有两种：使用一个共同的类名；使用群组选择器
如果多个元素有相同的样式，也有不同的样式，可以把相同的样式提炼到一个群组选择器中，其他的各自写各自的

<!-- 一 -->
<style>
    .list1 li,
    .list2 li 
    {
        width: 300px;
        height: 80px;
        background-color: bisque;
    }
</style>

<!-- 二 -->
<style>
    .item
    {
        width: 300px;
        height: 80px;
        background-color: bisque;
    }
    .list1 {
        color: blue;
    }
    .list2{
        color: brown;
    }
</style>