1、什么是CSS
CSS全称Cascading Style Sheet 层叠样式表
是一组样式设置的规则，用于控制页面的外观样式
2、CSS的好处及作用
- 可以实现内容与样式的分离，便于开发，样式复用，便于网站的后期维护。
- 页面的精确控制，让页面更精美。
- 页面外观美化：字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动，布局和定位。
3、CSS的初体验
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <!-- <style>可以编写CSS的代码，每一个声明最好以“;”结尾 语法： 选择器{ 声明1; 声明2; 声明3; } --> <style> h1{ color: crimson; } </style> </head> <body> <h1>CSS测试</h1> </body> </html>
效果如下：
二、基本用法
1、CSS语法模板
<head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> </head>
1、CSS的定义是由三个部分构成： ① 选择符（selector）：样式要应用于哪些元素 ② 属性（properties）：何种样式，如字体，颜色 ③ 属性的取值（value）：样式的取值：如12px 2、基本格式如下： h1{ color: crimson; }
（选择符 { 属性:值 }） 3、如果需要对一个选择符指定多个属性时，用分号将所有的属性和值分开： p{ text-align: center; color: red}（段落居中排列;并且段落中的文字为红色）
2、CSS引用方式
CSS引用方式有三种方式：
- 行内样式（直接写在标签内）
- 内部样式（写在style标签内）
- 外部样式（使用外部.css文件）
2.1 行内样式
使用HTML标签的style属性定义，只对设置style属性的标签起作用，一般用于测试，不用于实际开发页面中。 优势：直观，很容易区分是给哪个标签添加的样式 。 劣势：代码冗余，样式过多的话，代码的可读性很差。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS的引入方式</title> </head> <body> <p style="color:red;font-size:30px;">我是一个段落标签</p> </body> </html>
2.2 内部样式
在页面头部< head > 标签内通过style标签定义，对当前页面中所有符合样式选择器的标签都起作用。
优势：实现了标签和样式的分离，让代码的可读性更高。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS的引入方式</title> <style> p{ color:red; font-size:30px } </style> </head> <body> <p>我是一个段落标签</p> </body> </html>
2.3 外部样式
使用单独的 .css 文件定义，然后在页面中使用 link标签 或 @import指令 引入，最常用。
引入方式：外部样式（有两种）：链接式和导入式。 优势:实现了html文件和样式的分离，让代码的可读性更高，而且让代码的复用性也更高！
index.css
p{ color:red; font-size:30px }
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS的引入方式</title> <!--第一种：链接式(建议使用)--> <!--rel属性是当前HTML页面与链接进来的样式表之间的关系，因此href属性写样式表的路径--> <link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index."> <!--第二种：导入式(不建议使用)--> <style> @import "index.css"; </style> </head> <body> <p>我是一个段落标签</p> </body> </html>
2.4 引入方式总结
无论是外部样式，内部样式还是行内样式，都会生效都能起到为标签添加样式，进行布局的作用。但是如果同时使用多种引入方式,就会产生覆盖效果，后写的样式覆盖先写的样式。
一般自己写案例时多使用内部样式，这样进行文件交换只发一个文件比较方便。 但在实际开发中我们基本不使用行内样式，使用最多的是外部样式引入方式！
