文章目录
前言
层叠样式表(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变成红色,字体大小变成5