什么是CSS?
- 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。css中文名字又可以叫：级联样式表、层叠样式表、样式表等等。
- CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。CSS就是修饰网页，让网页更加漂亮。
CSS注释
- 注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它 CSS注释以 /* 开始, 以 */ 结束
CSS的引入方式
方式一：行内式引入（强烈不推荐）
在需要添加样式标签的
style
属性上设置
”key:value value;”
，修改标签样式。代码演示：
<body>
<!--
行内式引入
借助标签的style属性引入
style属性中的值语法为 样式名:样式值; 样式名:样式值;... ...
-->
<span style="font-size: 40px; color: blue; background-color: aqua;">
测试数据
</span>
</body>缺点
- 如果标签多了。样式多了。代码量非常庞大。修改不方便、重复代码太多，导致页面加载速度变慢！
- 可读性非常差。
- Css 代码没什么复用性可方言。
不建议使用
方式二：内嵌式
将css样式的代码抽取出来,通过选择器确定样式作用范围，在head标签中 使用一对style标签 定义css样式。一般使用在网站首页，加载速度快
选择器的语法规则：
语法详解：
- 选择器：浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素（标签）。
- 属性 (property)： 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并 由花括号包围，这样就组成了一个完整的样式声明（declaration），例如：p {color: blue}
- 多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的 最后可以不加分号(但尽量在每条声明的末尾都加上分号)
代码演示：
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 选择器 */
span{
font-size: 20px;
color: green;
background-color: bisque;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<!--
内嵌式
将css样式的代码抽取出来,通过选择器确定样式作用范围
在head标签中 使用一对style标签 定义css样式
在style标签中 注释写法 /* */
-->
<span >
测试数据
</span>
</body>缺点
- 只能在同一页面内复用代码，不能在多个页面中复用 css 代码。
- 维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。
方式三：链接式
把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用。
首先我们编写独立的CSS文件
span{
font-size: 100px;
border: 1px solid red;
}
其次在HTML文件中通过link标签引入
<head>
<meta charset="UTF-8">
<title></title>
<!--link 标签专门用来引入 css 样式代码--> <link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body>
<span >
测试数据
</span>
</body>总结：
- 行内式只能将样式作用于当前标签
- 内嵌式可以将样式作用于多个标签不能作用于其他网页
- 链接式可以将样式的作用范围扩大多个不同网页， 链接式可以将CSS代码放入独立的.css文件中 可以使当前页面更加简洁。每一个需要引入样式 的HTML 在head标签中使用 link标签引入css文件即可
- 当三种引入方式同时作用于同一个标签 如果样式有冲突 谁的优先级更高， 优先级原则 就近原则。
CSS常用选择器
标签名选择器
格式：
作用：
- 标签名选择器，可以决定哪些标签被动的使用这个样式。
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* *
标签名选择器
给页面所有同名的标签定义样式的选择器
语法 标签名{样式}
* */
span{
background-color: skyblue;
font-size: 40px;
font-family: "楷体";
color: orangered;
}
</style>
</head>
<body>
<span>今天的天气</span><br />
<span>明天的天气</span>
</body>id 选择器
一般body中的任何一个标签都有id属性, id属性的值一般在同一个网页上是不允许有重复值。 id属性一般用于帮助我们定位到页面上唯一的一个标签
id属性值命名有规则
- 不能有空格和一些特殊符号
- 特殊符号中仅可以使用_ 和-。不推荐 $ 会和jquery命名冲突
- 不能以数字为开头
- 推荐写法 应为字母开头 数字放在后面
-
尽量做到见名知意：见到名字知道意思
-
不推荐中文
格式：
作用：
- id 选择器，可以让我们通过 id 属性选择性的去使用这个样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
id选择器：用html标签中的id属性来进行选取的方式
*/
#p_red{
color: red;
}
#test{
color: hotpink;
}
/*
命名规则：
1、不能数字开头
2、不能使用中划线、下划线之外的符号
3、不推荐中文
4、尽量做到见名知意(看到名字就知道意思)
唯一性：
1、id命名不可以重复使用；在js中会因为id的命名冲突而导致报错
2、每个标签只能有一组id
*
* */
</style>
</head>
<body>
<p id="p_red">测试数据</p>
<p id="test">测试数据</p>
</body>
</html>
class 选择器（类选择器）
作用：
- class 类型选择器，可以通过 class 属性有效的选择性地去使用这个样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
内嵌式：css写在style标签中，放在title标签的后面；因为html代码和css代码混在同一个文件中
-->
<style type="text/css">
.bz{color: red;}
.ldxns{font-size: 50px;}/* 找到class的属性值为ldxnx的标签*/
/*
类选择器：使用html中的class的值来进行选取的方式
注意：class类选择器可以重复命名； 每个标签可以有多个class类名，
使用空格分割多个class类名
命名的规则：与id的命名规则完全一样
*
* */
</style>
</head>
<body>
<p class="bz ldxns">测试数据</p>
<p class="bz">测试数据</p>
<div class="ldxns">测试数据</div>
<div>测试数据</div>
<div class="ldxns bz">测试数据</div>
</body>
</html>
伪类选择器
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{color: red;}
/*
:hover 伪类：鼠标移入动作执行后的css代码
* */
p:hover{color: blue;}
</style>
</head>
<body>
<p title="我是鼠标悬停时候出现的文字 你如果不停 我就不出现">加油</p>
</body>并列、并集选择器：需要一句话选择多个元素的时候，可以使用逗号进行连接
后代选择器：使用空格来进行选取后代元素的方式。例如： div span{ 找div的后代span } 儿子、孙子、重孙子代码从左向右执行，我们就从左向右读代码
选择器的种类有很多，具体可以查看
https://www.runoob.com/cssref/css-selectors.html