CSS基础

lzb0995

于 2023-08-02 18:45:58 发布

阅读量40

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_71500484/article/details/132068105

版权

样式表

内联样式表

指在开始标签内使用样式表

<p style="font-size:50px;">段落标签</p>
<!-- 使用内联样式表调整了字体大小 -->

内部样式表

指单在一个文件内需要使用样式的时候我们用内部样式表
需写在头部 head 中

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LiMouren</title>
    <style>
    	p{
    		color: red;
    	}
    </style>
</head>
<!--这样做在 body 中所有的 p 标签中的字体颜色都会变为红色-->

外部样式表

分为两种：

链接(HTML)

在 head 头部标签中使用

<link rel="stylesheet" href="./Test.css">
<!-- rel引用类型为样式表 href链接到一个css包含样式的文件 -->

导入(CSS)

在 head 头部标签
中的 style 标签中使用

@import url('./class1.css');
<!--导入一个CSS文件-->

两者区别

从属关系区别：
@import是CSS提供的语法规则，只有带入样式表的作用；
link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSSREL链接属性等；
加载顺序区别：
加载页面时，@import引入的样式表在页面加载完毕后被加载；
link 为同时加载；
兼容性区别：
是CSS2.1才有的语法，因此只可以在IE5+才能识别;
不存在兼容性问题;
不存在兼容性问题:
由于DOM是基于文档的，因此无法使用@import的方式插入样式;
link可以通过JS操作DOM,插入link标签来改变样式;
权重区别：
@import：小；
link: 大；

优先级

采用就近原则，行内样式 > 内部样式 > 外部样式

层叠、继承、冲突

层叠：
同一个元素，使用多个样式表修饰，所有的样式进行叠加称为叠加；
继承：
在子父关系中，文本样式可以被继承，布局样式不可以被继承（块及元素继承父的宽，行级不可以）；
冲突：
多个样式进行修饰同一个标签的时候，采用就近原则使用样式表；

选择器

标签选择器

直接在 head 头部标签中的 style 标签中使用需要调整样式的标签名就可以

p{
	color:red;
}

全局选择器

	*{
            margin: 0;
            padding: 0;
            }
<!--代表全局标签盒模型的内外边距都为0-->

class 选择器

在开始标签中设置个 class 值

<li class="one">第二段文字</li>

在 head 头部中使用 .class值

.one{
        background-color: red;
    }
    <!--可以修饰body中使用class的标签-->

id 选择器

在开始标签定义 id值

<li class="one" id="a1">第一段文字</li>
<!--这样会优先使用id的样式-->

在头部标签里使用

#a1{
	color:red;
}

群组选择器

在头部将需要调整样式的标签使用逗号隔开

ul,ol{
      color: red;
}

子父选择器

代表ul标签内的li标签调整样式

ul>li{
      color: blue;
}

后代选择器

将ul标签的后代ol使用空格隔开，将改变ol的样式

ul ol{
            color: blueviolet;
}

相邻兄弟选择器

将和ul标签下面相邻的ol标签改变样式

ul+ol{
            font-size: 60px;
        }

通用兄弟选择器

将和ul处于同一级的p标签调整样式

ul~p{
            font-size: 50px;
        }

伪类选择器

UI伪类选择器

		/* 链接默认状态 */
        a:link{
            color: antiquewhite;
        }
        /* 链接点击后状态 */
        a:visited{
            color: aquamarine;
        }
        /* 鼠标浮上链接状态 */
        a:hover{
            color: red;
        }
        /* 鼠标点击时状态 */
        a:active{
            color: yellow;
        }

结构伪类选择器

		/* ul中第三个标签是li改变样式 */
        ul li:nth-child(3){
            color: red;
        }
        /* body中第四个标签是b改变样式*/
        b:nth-child(4){
            background-color: blue;
        }

lzb0995

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS基础

在子父关系中，文本样式可以被继承，布局样式不可以被继承（块及元素继承父的宽，行级不可以）；link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSSREL链接属性等；直接在 head 头部标签中的 style 标签中使用需要调整样式的标签名就可以。由于DOM是基于文档的，因此无法使用@import的方式插入样式;多个样式进行修饰同一个标签的时候，采用就近原则使用样式表；将ul标签的后代ol使用空格隔开，将改变ol的样式。在头部将需要调整样式的标签使用逗号隔开。代表ul标签内的li标签调整样式。
复制链接

扫一扫