举例说明在html中引入css的方法.pdf
版权申诉
69 浏览量
2022-12-17
15:05:32
上传
评论
收藏 126KB PDF 举报
举例说明在 html 中引入 css 的方法
【篇一：举例说明在 html 中引入 css 的方法】
html 与 css 是两个作用不同的语言，它们同时对一个网页产生作用，
因此必须将 css 与 html 链接在一起使用。在 html 中，引入 css 的
方法主要有 4 种：行内式、内嵌式、导入式和链接式。 行内式行内
式即在标记的 style 属性中设定 css 样式，这种方式本质上没有体现
css 的优势，因此不推荐使用。
行内式示例：
p>2. 嵌入式嵌入式将页面中各种元素的设置集中写在 head /head
之间，对于单一的网页使用方便。但对于包含很多页面的网站，如
果每个页面都以嵌入式方式设置各自的样式，也将失去 css 带来的
优点，因此一个网站通常都是编写一个独立的 css 文件，然后将其
引入 html 文档中。
嵌入式示例：
!doctype html html head meta name=viewport
content=width=device-width / title /title style type=text/css
p>3. 导入式与链接式导入式和链接式的目的都是将一个独立的 css
文件引入 html 文件中，二者的区别在于链接式使用 html 的标记引
入外部 css 文件，而使用导入式则是使用 css 的规则引入外部 css
文件。
使用链接式引入外部 css 文件示例：
link href=~/content/base.css rel=stylesheet type=text/css / 使用
导入式引入 css 文件示例：
style type=text/css @import /content/base.css /style 采用这两
种方式的显示效果区别：使用链接方式时，会在加载页面主体部分
之前加载 css 文件，这样显示出来的网页从一开始就是带有样式效
果的。而使用导入式时，会在整个页面加载完成后再加载 css 文件，
对于有的浏览器来说，在一些情况下，如果网页文件比较大，则会
出现显示无样式的页面，闪烁一下之后再出现设置样式
后的效果。从用户体验来说，这是使用导入式的一个缺陷。
对于一些比较大的网站，为了便于维护，可能会希望把所有的 css
样式分别写在几个 css 文件中，这样如果使用链接式引入，就需要
几个语句分别导入 css 文件。如果要调整 css 文件的分类，就需要
同时调整 html 文件。这对于维护工作来说是一个缺陷。如果使用导
资源评论
