作业帮 > CSS > 教育资讯

css入门教程:CSS样式表的分类详解

来源:学生作业帮助网 编辑:作业帮 时间:2024/11/14 14:54:13 CSS
css入门教程:CSS样式表的分类详解
css入门教程:CSS样式表的分类详解CSS
【无忧考网-css入门教程:CSS样式表的分类详解】:
前面我们已经详细介绍了一下CSS的基本信息(详见:《什么是CSS?CSS的由来及学习技巧》) ,本文介绍一下CSS的分类。
CSS按其位置可以分成三种:

  • 内联样式(Inline Style)
  • 内部样式表(Internal Style Sheet)
  • 外部样式表(External Style Sheet)


内联样式


内联样式是写在标签里面的,它只针对自己所在的标签起作用。

 style="font-size:14px;color:red;">这个style定义段落中的字体是12像素的红色字



内部样式表


内部样式表是写在里面的,它只针对所在的Html页面有效。




 

无标题文档







标题文字是16像素红色居中字体。



这个标题无样式。









大家看到了,内部样式表同样用到style标签,写法:





外部样式表


如果我们需要制作很多网页,而且页面结构十分复杂,并且多个页面中要利用重复的样式,那么把CSS放在网页中可不是一个好方法。
我们可以把所有的样式存放在一个以.css为结尾的文件里,然后将这个CSS文件链接到各个网页中。
比如我们制作了一个首页,把它的样式表文件命名为index.css。方法是将下面的CSS代码复制到记事本中保存,然后将文本文档的扩展名.txt修改为.css即可。


.h1.bigone {font-size:16px;color:red;text-align:center;}


在新建的网页中这样写:



 

无标题文档

 





标题文字是16像素红色居中字体。



这个标题无样式。








三种方法已经简单介绍给大家,我的文章以后会以外部样式表为例,因为它是目前网页制作最常用、最易用的方式,总结它的优点就是:

  • 1.多个样式可以重复利用;
  • 2.多个网页可共用同一个CSS文件;
  • 3.修改、维护简单 ,只需要修改一个CSS文件就可更改所有地方的样式,不需要修改页面代码;
  • 4.减少页面代码,提高网页加载速度, CSS驻留在缓存里,在打开同一个网站时由于已经提前加载则不需要再次加载;
  • 5.适合所有浏览器,兼容性好。
CSS