原标题:0031 如何使用css文件对网页内容和样式进行分离
上节课,学习了针对文字可以设置很多种样式。
这节课,学习如何将内容和样式进行分离。
上节课的课后练习
1.将斜体字体效果去除
2.将工作经历和工作经验(部分)这2行文字也做成简介这行文字的效果
完成代码如下:
页面效果如下:
可以看到3个标题都是一样的效果了。
但是,在编写代码的时候,发现一个问题,就是3个div的代码是一模一样的,复制起来很长,而且假如要将三个标题的字体全部都改小一点的话,要修改3处地方,有没有一个简便的方法,只改一次就好了呢?
新建css文件并使用
之前在div中利用属性style来设置css属性的方法是一种比较直接的方法,适合编写某个特殊的样式。
如果有大量相同的重复的style的时候,一般不采用style属性,而是采用class属性来实现。
也就是将相关的css属性和值存放到一个单独的以.css做为后缀名的文件中,然后html文件引用这个css文件,然后使用class属性来使用。
首先,在代码编辑器中新建一个文件,编写代码如下,就是将div里面style的值复制过来,并增加换行,保存为index.css,注意保存到目录要和index.html位于同一个目录下:
然后,在index.html当中在meta这一行下面新增一行,引入index.css
然后,将div里面的style="......"这一大段删除,修改为class="bigtitle":
刷新页面,可以看到页面效果是一样的:
接下来,要将标题的文字从30px修改为20px,修改index.css文件中的font-size的值为20px,然后注意保存文件:
刷新页面可以看到页面的3个标题的字体同时变小了,只修改了一处地方就实现了目的:
这里要注意一点,在css文件中,设置一个样式,需要样式起一个名字,例如这里的bigtitle,然后名称前面有一个点。
点的意思表示这个样式需要用css="样式名"来使用。
对特定标签使用css文件定义
现在index.html里面还有一个地方使用了style,把它也挪到index.css文件中,插入如下代码:
index.html删除掉body开始标签的后面的style的部分:
刷新页面发现没有变化:
修改index.css文件中body里面的background-color的值如下:
刷新页面发现背景颜色变得更淡了:
这里,发现对css文件中样式的定义有一点不一样,而且html文件中没有使用class="样式名",为何样式仍然起作用了呢?
关键点在于css文件中样式的名字为body,并且前面没有点。
这样的设置方式就是告诉浏览器,这个样式只对body标签起作用,对其他标签不起作用,因此也不需要在body标签里面使用class了。
关键点在于css里面样式名和html元素标签名一致来完成。
假如把css文件里面的第一行的body修改为div,那么里面的背景颜色值就对所有的div起作用了。
假如把css文件里面的第一行的body修改为dddd一个无效的名字,那么里面的背景颜色值就找不到对应的标签从而没有作用,这样的话body标签也就没有设置背景色了。
这种设置方式在某些情况下是有好处的,可以灵活设置大量相同设置而无需设置class属性,特别是在不同的html页面都需要一样的设置的时候,只要html都是引用同样一个css文件,那么不同的html同样的标签都会自动匹配一样的样式了。
设置通用样式和特殊样式
如果要求所有页面中所有的文字都是12px,但是标题内容行都是20px,该如何做呢?
先在css文件中的body里面增加文字大小的定义:
index.html不做修改,刷新页面后可以看到,3段内容没有任何样式定义,但是所有的字体都变小了,同时标题内容行的字体大小仍然是20px,这是因为修改了body标签的样式,那么对于body里面包含的子元素标签,该样式都会起作用,除非子元素自己重新定义了这个样式:
然后,需要将简介的具体内容部分的字体大小调整为16px,而工作经历和工作经验的字体仍然保持12px不变,应该这样修改:
在index.css 里面增加一个样式,名字为smallcontent,里面只有font-size,如下:
然后修改index.html里面在简介的具体内容前面加上
,最后一行删掉
,然后加上
,如下:
刷新页面可以看到因为简介这块做了特殊样式定义,因此字体大小就变大了,其他2部分没有设置,则字体不变:
内容和样式分离的好处
通过上面将样式都放在css文件的方法,可以将页面内容和显示效果进行分离。
分离的好处有很多:
1.修改一处地方,同时可以影响多个地方,修改更方便。
2.css文件中可以针对标签设置,也可以特殊定义样式名然后引用,可以更灵活,也可以减少样式重复定义。
3.可以将内容的编写任务交给程序员,将样式的编写交给设计人员或者美工,从而互不干扰,提高开发效率。
课后练习
使用css样式将工作经历和工作经验部分的文字大小修改为14px,文字颜色修改为#222222。
往期教程
因为教程是系列教程,前后关联性非常强,请大家按照历史消息发布时间先后次序进行阅读。返回搜狐,查看更多
责任编辑:
如果觉得《为什么要将html页面和样式表分离 0031 如何使用css文件对网页内容和样式进行分离...》对你有帮助,请点赞、收藏,并留下你的观点哦!