文章目录
前言
层叠样式表(Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
一、css的语法规则
二、css引入方式
外联式：CSS 写在一个单独的.css文件中
行内式：CSS 写在标签的style属性中
CSS常见三种引入方式的特点区别有哪些:
三、基础选择器
选择器的作用：选择页面中对应的标签，方便后续设置样式。
1.标签选择器
结构：标签名 { css属性名：属性值； }
作用：通过标签名，找到页面中所有这类标签，设置样式
注意点：
(1). 标签选择器选择的是一类标签，而不是单独某一个
(2). 标签选择器无论嵌套关系有多深，都能找到对应的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 标签选择器 */
div {
color: red;
}
</style>
</head>
<body>
<p>
<div>这是第一个盒子</div>
<div>这是第二个盒子</div>
</p>
</body>
</html>2. 类选择器
结构：.类名 { css属性名：属性值； }
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：
(1). 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
(2). 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
(3). 一个标签可以同时有多个类名，类名之间以空格隔开
(4). 类名可以重复，一个类选择器可以同时选中多个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 类选择器 网页里面使用非常多*/
.red {
color: red;
}
.font {
font-size: 50px;
}
</style>
</head>
<body>
<!-- 第一个div变成红色,字体大小变成50p
最低0.47元/天 解锁文章
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
