引入CSS的方法
在网页中,需要引用css,让它成为网页中的修饰工具。如何才能引用css来为页面服务呢?下面介绍在页面中应该如何引入css样式表。
在页面中引入css样式表时,有三种方法:内联引入方法、内部引入方法、外部引入方法。这三种方法分别是怎么执行引入的呢?
1.内联引入方法
每一个HTML元素都拥有一个叫做style的属性。它是用来控制元素的外观。特别之处就在于,在style属性里面写入的CSS代码都是作为HTML中style属性的属性值出现的。
2.内部引入方法
页面中有很多元素需要管理的时候,内联引入CSS样式很显然是不合适的,因为那样会产生很多重复性的搡作与劳动。例如,需要把页面中所有的<p>标签中的文字都改成红色,使用内联CSS的话,需要往每一个<p>里手动添加(在不考虑JavaScript的情况下),这样的重复劳动产生的劳动量是非常惊人的。很显然,程序员不可能让自己变成流水线上的机器人,所以可以把有相同需求的元素整理好并分成很多类别,让相同类别的元素使用同一个样式。
我们会在页面的<head>部分引入<style>标签,然后在<style>标签内部写入需要的CSS样式。例如,可以让<p>标签里的文字的颜色为红色,文字大小为20像素,<div>标签里文宇的颜色为绿色,文字大小为10像素。
力。这样的方式也更利于后期对代码和页面的维护工作。
3.外部引入方法
前面介绍了内联样式表和内部样式表,但是这两种样式表的写法并不推荐大家在开发当中使用。在开发中通常是一个团队的很多人在一起合作,项目的页面想必也不会很少(一般一个移动app至少也要20个页面),如果使用内部样式表进行开发的话,就会遇到一个非常头疼的问题:如果众多页面中有一些样式相同的地方,是不是都要在样式表中再写一遍?
事实上,根本不需要去这么做。最好的方法就是:在HTML文档的外部新建一个CSS样式表,然后把样式表引入HTML文档中。这样就可以实现同一个CSS样式可以被无数个HTML文挡调用。具体做法是:新建一些HTML文挡,在HTML文档外部新建一个以.css为后缀名的CSS样式表,在HTML文档的<head>部分以<link type="text/css" rel="stylesheet" href="url">标签进行引入。
这时会发现,外部样式表内的样式已经可以在HTML文档中进行使用了。这样做的话,需要对所有页面进行样式修改的时候,只需要修改一个CSS文件即可,而不用对所有的页面逐个进行修改。只修改CSS样式,就不需要对页面中的内容进行变动。
点击加载更多评论>>