css功效:初期,依靠HTML元素的属性设置样式,例如:border/align;而每一个元素的属性不尽相同,因此样式设置比较混乱;因此呢,W3C推出了一套标准:运用某种样式声明后,所有的元素通用,即CSS产生,它是对页面的样式进行统一的定义(声明)的。
CSS概念:
+ CSS(Cascading Style Sheets):层叠样式表,又叫级联样式表,简叫作样式表;
+ 用于HTML文档中元素的定义
+ 实现了将内容与表现分离
+ 加强了代码的可重用性和可守护性
CSS基本语法:
+ 由多个样式规则 构成,每一个样式规则有两个部分: 选取器和声明
—>选取器:决定那些元素运用这些规则
—>声明:由一个或多个属性/值构成,用于设置元素的外观表现;
*CSS 运用
一共有三种运用方式:内联样式、内部样式表、外边样式表
*内联样式:定义在单个HTML元素中;不必须定义选取器,亦不必须大括号{},只必须将分号隔开的一个或多个属性/值对,做为元素的style的值;如:
<h1 style=“bac公斤round-color:silver;color:blue”>文本</h1>
* 内部样式表:定义在HTML页的头元素中;位置于头元素的<style>元素内;在文档的<head>元素内添加<style>元素,在<style>中添加样式规则;如:
<head><style type="text/css">
h1{ color:green; }
</style></head>
<body><h1>文本</h1></body>
[重视:<style>中的属性 <type=“text/css”>可省略;且<style>元素里的注释要用css规定的/**/来注释,而不是HTML里的<!— —>]
* 外边样式表:定义在一个外边的CSS文件中(.css文件);由HTML页面引用样式表文件;
—> 一个纯文本文件;
—> 该文件中只能包括css样式规则;
—> 文件后缀为.css;
运用 <link>元素链接必须的外边样式表文件。如:
myStyle.css文件:
h1{ color:green; }
p{ bac公斤round-color;silver;color:blue; }
html文件里的<head>元素:
<head>
<link rel="stylesheet" type="text/css" href="myStyle.css" />
</head>
[重视:rel:暗示做什么用;href:暗示引入的文件路径;type:引入文件类型,text/css暗示纯文本的CSS代码];
** 三种运用方式的区别:
1)内联样式:将样式定义在元素的style属性里;但无重用性。
2)内部样式表:将样式定义在<head>元素里的<style>里;但仅限于当前文档范围重用。
3)外边样式表:将样式表单独定义在.css文件里,有页面引入它;但可守护性可重用性高,同期实现了数据(内容)和表现的分离;
* CSS特征:
—> 继承性:大都数CSS的样式表能够被继承;
—> 层叠性:能够定义多个样式表;不冲突时,多个样式表中的样式可层叠为一个,即不冲突时采用并集方式;
* 优先级:即冲突时采用优先级
—> 内联 > 内部 或 外边;
内部和外边:优先级相同的状况下,采取就近原则,以最后一次定义的优先
(因此,当修改时,不想去找,就在CSS文件中最后的位置重新写新的样式;这亦是CSS文件越来越大的原由);
[重视:还应重视浏览器的缺省设置]
** CSS
|