css引入方式
- 内嵌式
<!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>内嵌式</title>
<style>
span {
color: blue;
}
</style>
</head>
<body>
<span>一行显示多个</span>
</body>
</html>
- 外链式步骤:
- 新建一个以css结尾的后缀名文件
- 通过link标签引入对应的css文件
<!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>外链式</title>
<link rel="stylesheet" href="./外链式.css">
</head>
<body>
<div>外链式</div>
</body>
</html>
- 行内式
<!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>行内式</title>
</head>
<body>
<p style="font-size: 40px;color:red;">行内式</p>
</body>
</html>
基础选择器
选择器作用：选中页面中对应的标签（找她），方便后续设置样式
基本选择器主要有： 标签选择器、类选择器、id选择器、通配符选择器
标签选择器
语法:
标签名{
/*css属性*/
属性:属性值;
属性:属性值;
}
html
<div>独占一行</div>
css
div{
color:red
}
标签选择器是选择当前页面里面的所有一类标签，比如选择页面中所有的div标签，不是选其中一个。
类选选择器
样式点的定义， 结构类(class)调用
.类名{
/*css属性*/
属性:属性值;
属性:属性值;
}
html
```<p class="box box1">我也会改变颜色和大小</p>
css
.box {
/* css属性 */
/* 文本颜色 */
color: red;
/* 字体大小 */
font-size: 30px;
}
1.所有标签上都可以有class属性，class属性的属性值称为类名（类似于名字）
2.类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3.一个标签可以同时有多个类名，类名之间以空格隔开
4.类名可以重复，一个类选择器可以同时选中多个标签
id选择器
使用方法跟类非常的相似。 样式 #定义， 结构 id调用
语法:
#id名{
/*css属性*/
属性:属性值;
属性:属性值;
}
html
<div id="box">id选择器</div>
css
#box {
/* 文本颜色 */
color: red;
/* 字体大小 */
font-size: 40px;
}
写样式，首先考虑用类选择器。
写样式，首先考虑用类选择器。
语法
*{
/*css属性*/
属性:属性值;
属性:属性值;
}
*表示选中所有的标签
html
<div>多么痛的领悟你是我的全部</div>
<div>多么痛的领悟你是我的全部</div>
<span>多么痛的领悟你是我的全部</span>
<h3>多么痛的领悟你是我的全部</h3>
<p>多么痛的领悟你是我的全部</p>
css
*{
color:red;
}
特殊情况下才会使用
