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 @   邹邹很busy。  阅读(124)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
历史上的今天：
2020-02-12 docker--docker-Compose 安装与使用
点击右上角即可分享
微信分享提示

目录导航