- CSS3艺术:网页设计案例实战
- 张偶
- 856字
- 2020-08-27 10:24:41
1.2 在页面中应用CSS
网页中书写CSS代码的方法有以下3种。
1.2.1 内联样式
第1种方法称为“内联样式”,它把样式属性写在HTML标签的style属性里,也是“内联”这个词的含义。
例1-1 用CSS内联样式绘制图1-1所示的字母i。
图1-1
容器<figure>中包含两个子元素:第1个<div>绘制一个橙色的圆形;第2个<div>绘制一个竖着的黄色矩形。
X:\实例代码\第1章\demo-1-01.html
<figure> <div style="width: 50px; height: 50px; background-color: orange; border-radius: 50%; margin-bottom: 10px;"></div> <div style="width: 50px; height: 100px; background-color: gold; border-radius: 10px;"> </div> </figure>
这种方法的优点是不用定义选择器(下一节会讲到),但缺点是各元素的样式分散在整个HTML文档中,不方便集中管理,每个元素的样式也不能太复杂,否则写起来就很不方便了。这种方法我们不推荐。
1.2.2 style元素
第2种方法称为“style元素”,它把网页中所有元素的样式都集中写到一个名为<style>的标签里,放在页面的DOM结构之前。因为样式不是写在元素的属性里,为了区分不同元素的样式,就要分别为各元素指定名字,然后在<style>标签里按元素的名称逐个书写样式。
例1-2 用“style元素”法绘制图1-1所示的字母i。
本例是对例1-1的重构。元素的class="div1"和class="div2"属性定义了这两个子元素的类名为div1和div2,然后在<style>中用.div1和.div2来引用它们。
X:\实例代码\第1章\demo-1-02.html
<!DOCTYPE html> <head> <title>Document</title> <style> .div1 { width: 50px; height: 50px; background-color: orange; border-radius: 50%; margin-bottom: 10px; } .div2 { width: 50px; height: 100px; background-color: gold; border-radius: 10px; } </style> </head> <body> <figure> <div class="div1"></div> <div class="div2"></div> </figure> </body> </html>
1.2.3 link标记
第3种方法称为“link标记”,它在第2种方法的基础上,把<style>标签的内容单独存放到扩展名为.css的文件中,然后在HTML文件中用<link rel="stylesheet" href="file-name.css">标记导入这个CSS文件。
例1-3 用“link标记”法绘制图1-1所示的字母i。
例1-3是对例1-2的进一步重构,从1个HTML文件又分拆出了一个CSS文件,然后用<link>标记把它们关联起来。
DOM结构如下。
X:\实例代码\第1章\demo-1-03.html
<!DOCTYPE html> <head> <title>Document</title> <link rel="stylesheet" href="demo-1-03.css"> </head> <body> <figure> <div class="div1"></div> <div class="div2"></div> </figure> </body> </html>
CSS结构如下。
X:\实例代码\第1章\demo-1-03.css
.div1 { width: 50px; height: 50px; background-color: orange; border-radius: 50%; margin-bottom: 10px; } .div2 { width: 50px; height: 100px; background-color: gold; border-radius: 10px; }
这种方法的好处是,从物理上分离了结构和样式,HTML文件中只存储文档的DOM结构,CSS文件中只存储样式。在商业应用中多用这种方式,因为多个HTML文件可以引用同一个样式表文件,达到复用的目的,节省开发和维护成本。
本书的示例有两种:一种是伴随理论知识部分的示例,因为示例的数量较多,为了避免文件太多,这种示例均采用第2种“style元素”方法,把页面结构和样式写在一个文件中;另一种是项目实战,样式的代码量大一些,项目也更正式一些,这种示例采用第3种“link标记”方法。