html之CSS设计（四种引入方式、各种选择器）

文章目录

一、CSS简介
二、四种引入方式
三、CSS选择器
四、练习代码

本文主要介绍一下CSS的基本操作，四中引入方式和选择器、属性选择器的使用

一、CSS简介

1、介绍：
也叫层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。简单来说就是控制网页样式的。

2、CSS的学习方向

怎么找标签（选择器）
如何操作标签对象（element）

二、四种引入方式

1、style属性

<div style="color:red; background:yellowgreen">第一种引入方式</div>

缺点：耦合性太强了，导致独立性变弱，代码都杂糅到一起了

2、style标签

<style>
        p{
            color:red;
            font-size:40px;
        }

        a{
            text-decoration:none;
        }
    </style>

以上代码就是对p标签和a标签进行样式设置

3、链接式引入
即使用link自闭和标签引入CSS文件
首先创建一个CSS文件：

在里面写入Style标签里同样的内容，即设置样式，请参照下文的选择器部分。
然后就是将文件链接进到需要操作的html文件：

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

4、导入式引入

<style>
        @import "test1.css";
    </style>

显然以上几种方式中，链接式引入是最好用的，它不限制渲染文件的个数，修改起来也方便，独立性强不冗余

三、CSS选择器

1、选中所有标签

*{
            color:red;
        }

2、选中所有div标签

div{
	color:red;
	}

3、选中某个id下的标签

#first_p{
        font-size:40px;
    }

4、选中某个class下的标签

.class_name{
        background:aqua;
    }

5、只有class也可以精确定位

div.class_name2{
        font-size:60px;
    }

6、组合选择

#first_div,div.class_name3{
        background:darkgray;
    }

7、嵌套里的定位

.class_name4 div p{
        background:rebeccapurple;
    }

此段代码表示在类名为class_name4里的div标签里的p标签
嵌套规则：

块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
块级元素与块级元素并列、内联元素与内联元素并列。

特殊：<p>标签内加<div>标签不会有效果
span标签：
<span>标签与<div>标签非常类似，是初始状态没有任何效果的一类标签

8、属性选择器（以下都可以省略E）
即通过自定义属性来查找和定位的选择器

E[att] 匹配所有具有att属性的E元素，不考虑它的值，此处E可以省略
E[att=val] 匹配所有att属性等于“val”的E元素
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
E[attr^=val] 匹配属性值以指定值开头的每个元素
E[attr$=val] 匹配属性值以指定值结尾的每个元素
E[attr*=val] 匹配属性值中包含指定值的每个元素

四、练习代码

1、CSS选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /**{
            color:red;
        }*/

    #first_p{
        font-size:40px;
    }

    .class_name{
        background:aqua;
    }

    div.class_name2{
        font-size:60px;
    }

    #first_div,div.class_name3{
        background:darkgray;
    }

    .class_name4 div p{
        background:rebeccapurple;
    }

    .class_name4 + div{
        background:yellow;
    }
    </style>
</head>
<body>
I am in body label

<p>I just in p label</p>
<div class="class_name">I am in div label</div>
<p id="first_p" class="class_name">I have id number and class name</p>
<div class="class_name2">竟然用class精确定位到我了</div>
<div class="class_name3">组合选择1</div>
<div id="first_div">组合选择2</div>

<div>before div</div>
<div class="class_name4">
    <div>
        <a href="">打我呀</a>
        <p>I am insert p label</p>
    </div>
</div>
<div>after div</div>

</body>
</html>

CSS选择器
2、属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [viewin]{
            color:red;
        }
        [viewin="ok2"]{
            font-size:30px;
        }

        [viewin~="duo2"]{
            color:blue;
        }

        [viewin^="sao"]{
            background:pink;
        }

        [viewin$="a"]{
            background:burlywood;
        }

        [viewin*="j"]{
            background:yellow;
        }
    </style>
</head>
<body>

<!--属性选择器-->
<div viewin="ok">鸡排饭</div>
<div viewin="ok2">培根炒饭</div>
<div viewin="duo duo2 duo3">多多多</div>
<div viewin="sao1 sao2 sao3">扫扫扫</div>
<div viewin="hahaha">哈哈哈</div>
<div viewin="ghijklmn">啥值我都能匹配</div>


</body>
</html>

属性选择器