1、CSS概念
全称为Cascading Style Sheets(层叠样式表)，支持专有的文件 - 扩展名为".css"
作用：将HTML的结构(HTML标签即html)与样式(显示的样式即css)进行分离
² CSS语法结构
语法格式：选择器{ 属性名称: 属性值; 属性名称: 属性值;}
² CSS 注释
用来解释代码，且可随意编辑它，浏览器会忽略它。 格式：/* 内容 */
2、如何使用CSS
内联样式
通过HTML元素的style属性实现(
中)，即
注：HTML的结构与样式未有效分离，且这种CSS样式只针对当前元素有效
外联样式
a.在
元素定义
b.先定义CSS式的文件，后在HTML 页面中通过元素引入外部css文件
即
【注：内联样式的优先级别高于外联样式】
3、块级元素
概念: 独占页面中一行(下一个块级元素在新的一行)
*
、
、
- 和
【注：
标签中不能包含任何块级元素】
*
作用：实现页面的布局(类似于
4、行内(内联)元素
概念: 不会独占一行(只占文本内容的区域)； 如
、 和等元素
注: 若在一行中不能容纳所有的元素，则会换到下一行，继续自左向右排列。
【一般都是块级元素中包含行内元素】
元素：本身不具备任何含义。特点：当行内元素占满页面的整个宽度，自动换行
eg:
eg:
5、CSS的选择器
² 常见选择器
Ø ID选择器
通过 HTML 页面元素的id属性值进行定位，其语法结构为 #ID
Ø 类(class)选择器
通过HTML页面元素的class属性值进行定位，语法结构为.class
注：不能用纯数字或者数字开头来定义类名；不建议使用汉字来定义类名
Ø 元素选择器
通过HTML页面元素的元素名进行定位，语法结构为 元素名
Ø 属性选择器
通过 HTML 页面元素的属性进行定位，语法结构为 [属性名]。
【选择器的优先级：内联样式 > ID选择器 > 类选择器和属性选择器 > 元素选择器】
【!important - 将当前选择器的优先级别设置最高(打乱优先级别的顺序)---不建议使用】
² 关系选择器
Ø 后代选择器
指根据目标元素匹配后代元素
格式：目标元素 后代元素 eg: #t1 div {color : red; }
Ø 子元素选择器
指根据目标元素匹配子级元素
格式：目标元素 >子元素 eg: #t1 > div {color : red; }
Ø 相邻兄弟选择器
指根据目标元素匹配下一个相邻兄弟元素
格式：目标元素 +下一个相邻兄弟元素 eg: #t1 + div {color : red; }
² 组合选择器
* 第一种 - 交集结果(多个选择器并列使用，中间没有任何分隔)
* 第二种 - 并集结果(多个选择器并列使用，中间使用" , "分隔)
u 通配符选择器(*)
作用:匹配当前 HTML 页面中的所有元素 eg: * {color:red;}
问题:匹配的速度不是很快(页面元素的数量和复杂程度)
