CSS样式

  • A+
所属分类:Web前端
摘要

1.内联方式  特点:将CSS内容定义在HTML标记中  语法:    <ANY style=”样式声明1;样式声明2;……”>


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 加在谁的后边,就以谁为主