day05
02CSS
HTML,CSS和javascript之间的关系
HTML是网页内容的载体
CSS样式是表现（外观控制）
JavaScript是行为，用来实现网页特效效果
CSS层叠样式表（Cascading Style Sheets）
用于定义HTML内容再浏览器内的显示样式
为什么学习CSS
CSS简化HTML相关标签代码，网页体积小，下载快
解决内容与表现分离的问题
更好地维护网页，提高工作效率
CSS基础语法
CSS使用方法
CSS选择器
CSS继承和层叠
CSS优先级
CSS命名规范
CSS样式规则
CSS规则由两部分构成：选择器，声明
CSS引用
写在<head></head>标签内：
<style type="text/css">
CSS样式
</style>
CSS注释 /*注释内容*/
引用CSS样式
行内样式(内联样式)
<p style="color:red;">内容</p>
内部样式表(嵌入样式)
<style type="text/css">
样式
</style>
外部样式表,把CSS样式代码写在独立的一个文件中 扩展名：CSS文件名.css
引入外部文件：<link href="XX.css" rel="stylesheet" type="text/css" />
导入式
@import "css.css" 或url(css.css)
CSS使用方法优先级
行内优先级最高
行内样式>内部样式>外部样式
说明：
1.链入外部样式表语内部样式表之间的优先级取决于所处位置的先后
2.最后定义的优先级最高(就近原则)
css_use1.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css使用方法优先级</title> <link rel="stylesheet" type="text/css" href="css2.css"><!--color:gray--> <style type="text/css"> @import url(css1.css); p{ /*color: blue;*/ } </style> <link rel="stylesheet" type="text/css" href="css3.css"><!--color:orange--> </head> <body> <p style="color: red;"><b>css使用方法</b></p> </body> </html>
图示：
