前戏
之前学习了HTML相关的知识，也能简单的写一个hello world的页面。但是，只学HTML满足不了我们的需求，而HTML、CSS、JavaScript三者搭配使用才能更好的完成我们需要的效果，那他们之间的关系是什么呢？
HTML是网页内容的载体
CSS样式是外观控制
JavaScript是行为，用来实现网页特效效果
什么是CSS呢
CSS层叠样式表（Cascading Style Sheets）用于定义HTML内容在浏览器内的显示样式
为什么要学习CSS
CSS简化HTML相关标签，网页体积小，下载快
解决内容与表现分离的问题
更好的维护网页，提高工作效率
CSS样式规则
了解了CSS之后，那怎么写CSS呢？CSS也有自己的规则，如下图
CSS规则由两部分组成：选择器、声明
要注意的是：所有符号都要在英文状态下输入，属性和值之间用：隔开，写完之后用；隔开
CSS注释
注释是代码之母
在HTML里注释是<!---注释语句->
在CSS里注释是/*注释语句*/
CSS使用方法
使用css有四种方法
1.行内样式（内联样式）
2.内部样式表（嵌入样式）
3.外部样式表
4.导入式
行内样式
行内样式是在标签内添加style属性
语法
<p style="color: red">内容</p>
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> </head> <body> <p style="color: red">内容</p> </body> </html>
内部样式
把css样式代码写在head标签里的style里
语法：
<head> <style> p{color: blue} </style> </head>
注意：一定要写在head标签里
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> p{color: blue} </style> </head> <body> <p >内容</p> </body> </html>
CSS外部样式
外部样式表，把css样式代码单独写在独立的一个文件中
扩展名：CSS文件名.css
引用外部文件使用link
<link rel="stylesheet" href="css_file.css">
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <link rel="stylesheet" href="css_file.css"> </head> <body> <p >内容</p> </body> </html>
注意：link要放在head标签里
导入式
@import "外部css样式"
注意：@import写在<style>标签内最开始
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> @import url("css_file.css"); </style> </head> <body> <p >内容</p> </body> </html>
CSS使用方法区别
如下图，在项目中我们最常用的是外部样式
CSS使用方法优先级
行内样式>内部样式>外部样式
说明：
1.链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
2.最后定义的优先级最高(就近原则)