【WEB】CSS常用基础知识

最新推荐文章于 2024-07-19 15:50:46 发布

没脖子的喵先生

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量563

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/sinat_24645985/article/details/122870717

版权

CSS定义与注意事项

CSS

-了解-

层叠样式表，Cascading Style Sheets

注意事项

每个CSS样式由两部分组成 选择符(器) 和声明
声明由两部分组成属性和 属性值
声明必须放在花括号 {} 中（内部样式和外部样式），属性和属性值用 : `连接
每条声明用 ; 结束
当属性有多个属性值时，每个属性值用 空格 分开

空格和换行不影响效果

选择符{
    属性:属性值;
    属性:属性值;
}

CSS引入方式

行内样式

<div style="width:200px;height:200px">内容</div>

行内样式就是写在html标签中的 style 属性中

内部样式

<head>
    <style>
        div{
     
            width:200px;
            height:200px;
        }
    </style>
</head>

内部样式是写在 head 标签中的，用 style 标签包裹

外部样式其一

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

外部样式就是在 head 标签中，使用 link 标签链接外部CSS文件

外部样式其二

-了解-

<head>
    <style>
        @import url(mystyle.css);
    </style>
</head>

使用@import引入css文件

link 和 import 对比

link 是html标签， import 是CSS提供的，当页面加载的时候link会同页面一起加载，而import会在页面加载完成后在加载，这样就造成页面刚开始加载时候没有样式，会造成页面闪烁的BUG，同时import的兼容性不如link好

样式的优先值

根据就近原则，行内样式 > 内部样式 > 外部样式

但是当使用 important 关键字时候，优先值是最高的

CSS选择器

-重点-

标签选择器

<style>
        div{
     
            width:200px;
            height:200px;
        }
</style>

直接使用html标签

类选择器

<head>
    <style>
        .box{
     
            width:200px;
            height:200px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

在 html 标签中定义属性 class 并用 = 命名（假设为className）
若 html 存在多个className，则可以用空格连接
在 style 中使用 .className 引用
当多个class中有重复的属性时，并且权重一样时，最终结果取最后的class的属性的属性值
同样的class可以作用于多个 html 标签

id选择器

<head>
    <style>
        #box{
     
            width:200px;
            height:200px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>

在 html 标签中定义属性 id 并用 = 命名（假设为idName）
一个 html 标签中只能有一个id
在 style 中使用 #idName 引用
同样的id可以作用于多个 html 标签，但是 强烈不建议 ，因为id的作用多数用于JaveScript的调用，需要保持 唯一性

通配符选择器

<head>
    <style>
        *{
     
            padding:0;
            margin:0;
        }
    </style>
</head>

用 * 引用，表示所有标签元素，一般用于初始化，去除所有标签的自带样式，有助于自定义CSS样式

群组选择器

<head>
    <style>
        div,.className,#idName{
     
            padding:0;
            margin:0;
        }
    </style>
</head>

群组选择器只是一种写法,是各种选择器用 , 拼接的写法，并不是一种真正的选择器

当一部分标签样式相同时，可以将这些标签的公共样式提取出来，用各自的选择符（标签选择器 或 类选择器 或 id选择器 等）用 , 拼接，一同作用样式

层级选择器

<div>
        <p class="p1">
            <h3>
                <p class="p2"></p>
            </h3>
        </p>
        <p class="p3">哈哈</p>
</div>

html 是有层级关系的
div 内部的所有标签都是div的后代，同理 h3 和 class="p2" 的既是 div 的后代也是 class="p1" 的 p 标签的后代
class="p1" 和 class="p3" 是兄弟关系
class="p1" 和 class="p3" 是 div 的子代（亲儿子）

后代选择器

<head>
    <style>
        div .className #idName{
     /*选择div标签内class为className的并且内部id为idName的标签*/
            padding:0;
            margin:0;
        }
        div p{
      /*选在div标签下所有的p标签，不限制层级数量*/
            background:red
        }
    </style>
</head>
<body>
    <div>
        <p class="className">
            <h3>
                <p id="idName"></p>
            </h3>
        </p>
    </div>
</body>

当 html 标签存在层级关系时，我们一般把内侧的标签称作外侧标签的后代
后代可以多层隔代，不用紧挨着，不像 子代选择器
标签选择器，类选择器，id选择器可以混写
当存在标签不好区分但是又要指定特定标签时，作用样式时可以用 后代选择器 根据层级关系可以用 空格 连接

原理

后代选择器在运行时，是现在内部在找符合条件的外部

比如例子中，先找id是idName的标签，再往外部找class是className的的，在找符合这些条件的外侧还是div标签的

子代选择器

<head>
    <style>
        div>p{
      /*选在div标签下第一层级别p标签，class为p1
        和p3的标签*/
            background:red
        }
    </style>
</head>
<body>
    <div>
        <p class="p1">
            <h3>
                <p class="p2"></p>
            </h3>
        </p>
        <p class="p3">哈哈</p>
    </div>
</body>

选择的是亲儿子（第一层级）
用大于号 > 拼接

第一兄弟选择器

<head>
    <style>
        .p0+p{
      /*选择class=p0的标签，它的兄弟中紧跟在它后
        面的第一个元素*/
            background:red
        }
    </style>
</head>
<body>
    <div>
        <p class="p0">吼吼</p>
        <span>嘿嘿</span>
        <p class="p1">
            <h3>
                <p class="p2"></p>
            </h3>
        </p>
        <p class="p3">哈哈</p>
        <p class="p4">嘻嘻</p>
    </div>
</body>

选择的是紧跟着自己的第一个兄弟标签，不包含自己
若紧跟自己的第一个标签并不是指定的标签，则样式无效，如例子中 class="p0" 的第一个兄弟是 span ，并不是指定的 p 标签，所以样式无效

所有兄弟选择器

<head>
    <style>
        .p0~p{
      /*选择class=p0的标签，它的所有兄弟中为p标签的元素*/
            background:red
        }
    </style>
</head>
<body>
    <div>
        <p class="p0">吼吼</p>
        <span>嘿嘿</span>
        <p class="p1">
            <h3>
                <p class="p2"></p>
            </h3>
        </p>
        <p class="p3">哈哈</p>
        <p class="p4">嘻嘻</p>
    </div>
</body>

选择的是自己后面的所有兄弟元素并且是指定标签，不包含自己
例子中选择的是 class="p0" 的所有兄弟中为 p 标签的元素，并不包含自己和 span 标签

属性选择器

<head>
    <style>
        div{
     
            width: 100%;
            height: 50px;
        }
        [class]{
      /*表示只要带有class属性的即可 */
            background-color: red;
        }
        [class][id]{
     /*表示同时带有class属性和id属性的 */
            background-color: darkcyan;
        }
        div[class]{
      /*表示带有class属性的div即可 */
            background-color: rosybrown;
        }
        div [class]{
      /*表示div标签的后代中带有class属性的 */
            background-color: yellow;
        }
        div[class="box2"]{
      /*完全匹配，只有一个class且class为box2的div
            ，相当于div.box2*/