- A+
1.CSS语法
1.内联方式
特点:将CSS内容定义在HTML标记中
语法:
<ANY style="样式声明1;样式声明2;……">
(1)样式声明由样式属性名以及值来组成
(2)多个样式声明之间用 : 做连接
常用样式属性和值:
(1)设置文本颜色的属性和值
属性:color
值:合法的颜色值(英文)
(2)设置背景颜色的属性的值
属性:background
值:合法的颜色值(英文)
(3)设置文字大小的属性和值
属性:font-size
值:以 px 或 pt 为单位的数值
练习:创建一个div标记,内容随意,设置该标记内的文本颜色为黄色,背景颜色为红色,文字大小为16px
<div style="color:yellow;background:red;font-size:16px;"> <p>春晓</p> <p>春眠不觉晓</p> <p>处处闻啼鸟</p> <p>夜来风雨声</p> <p>花落知多少</p> </div>
2.内部样式表
在网页中的一个独立的地方声明网页要用到的所有的样式
语法:
<head> <style> /*注释*/ 样式规则1 样式规则2 …… 样式规则n </style> </head>
样式规则:由 选择器 和 样式声明 组成
选择器:规范了页面中哪些元素能够使用声明好的样式,其实就是为了匹配页面中的元素
样式规则:
选择器 {样式声明1;样式声明2}
练习:新建一个网页,创建若干 p 标记和 h3 标记,内容随意,使用内部样式表将页面中的 p 标记设置为颜色为蓝色,文本大小为 23px,h3标记设置文本颜色为灰色,背景颜色为橙色
<style type="text/css"> p{ color: blue; font-size: 23px; } h3{ color: silver; background: orange; } </style>
3.外部样式表
独立于任何网页的位置处,声明一个样式表文件(***.css),在文件中声明样式,在使用的网页中进行引入。
<!-- 在外部文件创建格式跟内部样式表格式相同 --> <!-- 在使用的网页中引入 --> <head> <link rel="stylesheet" href="xxx.css"> </head>
2.CSS样式表特征
1.继承性
必须是父子(有层级关系)结构
大部分的css效果是可以直接继承给子元素的
2.层叠性
可以为一个元素定义一个样式规则,规则中的属性不冲突时,可以同时应用到当前元素上
3.优先级
在层叠性基础上,如果样式冲突(重复)的话,则按照默认的优先级去应用样式
优先级由 低 到 高:
(1)浏览器默认设置
(2)样式表(内外部) :就近原则 - 后定义者优先
(3)内联方式
4. !important 原则(显示调整样式属性优先级)
样式属性 :值 !important;
!important 加在谁的后边,就以谁为主