CSS级联样式表

一 CSS级联样式表
1 CSS基本语言结构
（1）语法 选择器 { 声明1声明2 }h1 【 {font-size：12px;color:#f00; }】声明
h1 选择器
font-size 属性
12px 值
（2）style标签 （style type=text/cssh1 {font-size:12px;color:#F00;}
(3)行内样式 h1 style=“color:red;”>style属性的应用</h1
p style=“font-size:14px;color:green;”>直接在HTML标签中设置的样式</p
（4）内部样式表 CSS代码写在（head）的 style 标签中 style h1{color: green; }（/style）
优点 方便在同页面中修改样式
缺点 不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
（5）外部样式表1 ：链接式 2 ：导入式
（head）……（link href=“style.css” rel="stylesheet"type=“text/css” /）……（/head）链接式
（head）……（style type=“text/css”）（!–@import url(“style.css”);–）（/style）（/head）导入式
行内样式>内部样式表>外部样式表 就近原则
2 选择器
（1)标签选择器 p { font-size:16px;}
font-size 属性 16px 值 font-size:16px 声明
标签选择器是否也遵循“就近原则”？不遵循，无论是哪种方式引入CSS样式，
一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级。
（2）类选择器 .class { font-size:16px;}
<标签名 class= “类名称”>标签内容</标签名> （ 。class 类名称）
（3） ID选择器 #id { font-size:16px;}
（#id id名称）
三个的区别：
标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次
ID选择器>类选择器>标签选择器
（4）层次选择器
E F 后代选择器
选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E >F 子选择器
选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F 相邻兄弟选择器
相邻后面兄弟
E~F 通用兄弟选择器
选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素