一：CSS 概述
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
二：存在方式
存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。
语法：style = 'key1:value1;key2:value2;'
- 在标签中使用 style='xx:xxx;'
- 在页面中嵌入 < style type="text/css"> </style > 块
- 引入外部css文件
三：选择器
1）标签选择器
div{ }
<div > </div>
2）class选择器
.bd{ }
<div class='bd'> </div>
3）id选择器
#idselect{ }
<div id='idselect' > </div>
4）关联选择器
#idselect p{ }
<div id='idselect' > <p> </p> </div>
5） 组合选择器
input,div,p{ }
6）属性选择器
input[type='text']{ 100px; height:200px; }
PS:
优先级，标签上style优先，编写顺序，就近原则
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #i1,#i2,#i3{ background-color: red; height: 48px; } /*.c1{*/ /*background-color: red;*/ /*height: 48px;*/ /*}*/ div{ background-color: blue; height: 48px; } span div{ background-color: yellow; height: 48px; } .c1 div{ background-color: yellow; height: 48px; } input[n="alex"]{ background-color: yellow; height: 48px; } </style> </head> <body> <div style="background-color: #2459a2;height:48px">1</div> <span> <div id="i1">2</div> </span> <div class="c1">3</div> <div id="i1">3</div> <input type="text" n="alex"> <input type="password"> </body> </html>