携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情 >>

一.什么是css

Cascading Style Sheets

用来定义页面元素的样式 .设置字体和颜色 .设置位置和大小 .添加动画效果

2.在页面中使用CSS的方法

①外链 ②嵌入 ③内联

3.CSS是如何工作的

二.选择器的介绍

1.基础选择器

①标签选择器

也称为元素选择器，使用HTML标签作为选择器的名称

以标签名作为样式应用的依据

②类选择器

使用自定义的名称，以 .号作为前缀，然后再通过HTML标签的class属性调用类选择器

以标签的class属性作为样式应用的依据

注意事项：

调用时不能添加 . 号
同时调用多个类选择器时，以 空格 分隔
类选择器名称不能以 数字 开头

③ID选择器

使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配

以标签的id属性作为样式应用的依据，一对一的关系

注：使用时通常需要在标签后输入你想要选取，的id方便进行选择

2.复杂选择器

①复合选择器

标签选择器和类选择器、标签选择器和ID选择器，一起使用

必须同时满足两个条件才能应用样式

②组合选择器

也称为集体声明

将多个具有相同样式的选择器放在一起声明，使用逗号隔开

③嵌套选择器

在某个选择器内部再设置选择器，通过空格隔开

只有满足层次关系最里层的选择器所对应的标签才会应用样式

注意：使用 空格 时不区分父子还是后代，使用CSS3中新增的 > 时必须是父子关系才行

④伪类选择器

根据不同的状态显示不同的样式，一般多用于标签

四种状态：

:link 未访问的链接
:visited 已访问的链接
:hover 鼠标悬浮到连接上，即移动在连接上
:active 选定的链接，被激活

注：默认超链接为：蓝色、下划线

⑤伪元素选择器

:first-letter 为第一个字符的样式
:first-line 为第一行添加样式
:before 在元素内容的最前面添加的内容，需要配合content属性使用
:after 在元素内容的最后面添加的内容，需要配合content属性使用

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p:first-letter{
			color:red;
			font-size:30px;
		}
		p:first-line{
			background:pink;
		}
		p:before{
			content:"演示效果";
		}
		p:after{
			content:"演示效果";
		}
	</style>
</head>
<body>
	<p>hello world!</p>
	<hr>
	<p>
		hello world! <br>
		welcome to css!
	</p>
</body>
</html>

复制代码
复制代码

效果： aHR0cHM6Ly9pbWcud3p1ZS5jbi8yMDIwLzAzLzI3L2Y5OTE5ZjZkYzJmOTUucG5n.png

3.选择器的权重

样式的冲突 -当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突

        发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定

        样式的权重：
            内联样式           1，000
            id选择器           0，100
            类和伪类选择器      00.10
            元素选择器          0，001
            通配选择器          0
            继承的样式          没有优先级

        比较优先级时：需要将所有选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）
        选择器的累加不会超过最大的数量级
        如果优先级相同，则越靠下的样式越优先显示

        可以在某一个样式的后边添加 ！important， 则该样式的优先级将会变成最高，甚至超过内联样式
            注意：在开发中一定要慎用！！！
            
复制代码
复制代码

4.单位

长度单位： 像素 -屏幕实际上是由一个一个的小点构成 -不同屏幕的像素大小是不同的像素越小的屏幕显示越清晰 -所以同样的200px在不同的设备下显示效果不一样

        百分比
            -也可以将属性值设置为相比于其父元素属性的百分比
            -设置的百分比可以使子元素跟随父元素的改变而改变
            
        em
            -em是相对于元素的字体大小来计算的
            -1em = 1font-size
            -1em = 10 px
            
        rem
            -rem是相对于根元素的字体大小来计算的（html）
            
          
复制代码

作者：Adopt
链接：juejin.cn/post/712419… 来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

css的基本认识