css--引用样式、选择器

引用样式

css 的引用有三种，行间式、内嵌式、外链式

行间式
<div style="width:200px;height:200px"></div>

行间式最大的特点就是写在标签上面，级别最高，缺点是容易影响阅读，修改比较麻烦

内嵌式
<head>
    <style>
        div{height: 100px;width: 100px;background: red;}
    </style>
</head>

内嵌式最大的特点就是嵌入在 html 文件里，级别中等，缺点是影响 html 文件大小

外链式
<head>
    <link rel="stylesheet" type="text/css" href="2.css">
</head>

最大的特点就是引入外面的 css 文件，级别最低，href 为文件的位置，rel 和 type 告诉引用的是 css 文件，固定写法。

css 选择器

全选符*
<style>
    *{height: 100px;width: 100px;background: red;}
</style>

会将html、body都选中，权重最低

标签选择器
<style>
    div{height: 100px;width: 100px;background: red;}
</style>

通过标签的分类来选择 html 元素，权重比全选符高

类（class）选择器
<html>
<head>
    <style>
        .abc{height: 100px;width: 100px;background: red;}
    </style>
</head>
    <body>
        <div></div>
        <div class="abc"></div>
    </body>
</html>

我们可以定义分类，然后通过我们定义的分类去给予样式，权重比标签选择器高，通过点获取

id选择器
<html>
<head>
    <style>
        #abc{height: 100px;width: 100px;background: red;}
    </style>
</head>
    <body>
        <div></div>
        <div id="abc"></div>
    </body>
</html>

权重最高的选择器，我们可以给元素设定一个唯一的 id 值，通过 # 号获取 id 选择器

后代选择器

<style>
    .busy .zou{height: 100px;width: 100px;background: red;}
</style>

选择class 为 busy 下面的，class 为zou的所有标签，后代选择器中间用空格隔开，可以使用 id、标签、全选符

<style>
    * #zou{height: 100px;width: 100px;background: red;}
</style>

群组选择器

<head>
<style>
    p,div{color:red;}
</style>
</head>
    <body>
        <div>divdivdivdivdiv</div>
        <p class="abc">pppppp</p>
    </body>
</html>

把我们想要定义相同样式的标签放在一起，中间通过逗号隔开

子级选择器

<html>
<head>
<style>
    .zou>.busy{color:red;}
</style>
</head>
    <body>
        <div class="zou">divdivdivdivdiv
            <div class="busy">busy</div>
        </div>
        <p class="busy">pppppp</p>
    </body>
</html>

子级选择器通过 > 符合选择下面的标签，子级选择器最大的特点是可以选择到下面的第一层元素，不会选择到其他无关的元素

 

posted @ 2022-02-12 22:18  邹邹很busy。  阅读(122)  评论(0)  编辑  收藏  举报