引入CSS样式的三种方法

样式表放在不同的地方，产生作用的范围也不同。大致来说，样式表分为内联样式表和外联样式表，即有页面内放置、外部引用、外部导入三种方式。

内联样式表

内联样式表就是把样式表规则放在 < HEAD> 和 < /HEAD> 的中间，从而使样式表对整个当前 HTML 页面产生作用。
内联样式表还包括一种直接插入方式，即单独指定 HMTL 页面中某一个标志，规定其风格样式，可以写为：

< Table style=" font-size:10pt; color:blue;">

定义该表格内的字符大小为 10pt ，颜色为蓝色。

外部样式表

编制一个网站的分类页面，其风格往往是相同的或说是类似的，每次都在 < HEAD> 和 < /HEAD> 中插入相同的繁琐复杂的样式表规则，显然不是我们的愿望。
写一个样式表，以期实现于各风格相同的不同页面，这一点即可借助于引入外部样式表来实现。并且当外部样式表被更改时，各引用该样式表的 HTML 页面风格也随之发生变化，而不需要手工一个个去更改。
外部样式表是指建立一个完全独立的文本文件，其扩展名为 .css ，文件内容则输入样式表信息，除去任何相关的 HTML 语言。
例如在外部样式表中输入：

body { line-height: 130pt}
H1,H2,H3,H4,H5,H6 {
color: red;
text-decoration: underline;
font-family: " 黑体 "
}
b {
font-style: italic;
color: #FF3333;
text-decoration: underline
}

我们看到，只是少了 < STYLE> 和注释标记，其余书写外部样式表没有任何改变。输入完毕，保存它为 example.css 。

外部样式导入

有两种办法可以实现引用外部样式表。
（一）使用 < LINK> 标记链接外部样式表
用以下语句来实现外部样式表的链接：
< LINK REL=STYLESHEET HREF=“example.css”>
HREF 中应包含路径信息，这里所指是该样式表文件与 HTML 文档在同一目录下。
一个 HTML 文档中可以引用多个外部样式表，例如：

< LINK REL=STYLESHEET HREF="example.css">
< LINK REL=STYLESHEET HREF="style/other.css">

首先链接的 example.css 作为该文档缺省样式表，当样式定义产生冲突时，应当首先满足前者。
（二）使用 @IMPORT 导入样式表信息
使用 @import 命令用以把外部样式表信息导入页面中，它是存在于在 < STYLE> 和 < /STYLE> 标记中的。例如：

< STYLE TYPE="text/css">
@import "example.css";
@import "style/other.css";
< /STYLE>

显然，这个方法也可以同时引用多个外部样式表信息，样式表产生作用的优先级按照导入的先后顺序来设定。
这三种方法可以混合使用，即能够在一个页面中，同时使用这三种方法，不过，当样式表信息规则一多，就比较容易产生冲突。比如在引用的数个样式表信息中都有关于对 H1 标题的设定，那么以哪一个为主呢？这时就看哪一个样式表被引用在前，它就是具有第一优先权的。因此我们在处理复杂的样式表信息时，要充分考虑到样式表冲突这一可能性，较好的解决矛盾，使之相互协调匹配。

引入CSS样式的三种方法相关推荐

HTML引入css样式的三种方式，css选择器的三种样式
文章目录前言一. css样式的三种方式第一种:内联定义方式第二种: 样式块第三种:引入外部独立css文件二. 选择器的三种样式第一种:id选择器第二种:标签选择器第三种:类选择器三 ...
JS行间改变css的方法,js改变css样式的三种方法推荐
共用代码: this is a div var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:25 ...
Web前端 | HTML引入CSS样式的三种方式
✅作者简介:一位材料转码农的选手,希望一起努力,一起进步!
html按钮disabled状态,CSS定义input disabled样式的三种方法
表单提交的时候我们经常会让提交按钮禁用,满足条件后按钮恢复,disabled禁用按钮后怎么用CSS来改变禁用disabled按钮的样式呢?下面看青岛星网:CSS定义input disabled样式的三 ...
网页设计的css样式,网页设计引入CSS样式的五种方式_css
一.使用STYLE属性将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; -} 例如: <TD ...
创建CSS样式的三种方式
CSS基础 - 创建CSS样式的三种方式我们使用CSS的时候,常规有三种创建CSS样式的的方式: 内联样式,内部样式表,外部样式表 1.内联样式 (不常用) style在标签中的情况就是内联样式.不 ...
css样式的三种位置行内内部外部优先级比较
css样式的三种位置行内内部外部优先级比较行内(内联)样式优先级高于内部和外部内部样式就是通过style标签包裹的样式,外部样式,通过link标签导入的样式的优先级相等,后面会覆盖前面的样 ...
html盒子居中的方式,CSS盒子居中三种方法
前言 CSS盒子居中,我觉得是很有必要学习一下的.特别是第三种方法,奇淫技巧升级版,也是生产环境中非常常见的一种方法,不需要知道宽度,随着祖先元素的变化而变化! 1.常规方法常规方法只需要给盒子设置 ...
简述css样式的三种引入html的方式,css-1,css的三种引入方式基本选择器
css三种引入方式和四种基本选择器 /*内接样式*/ /*1 选择器选中的是 '共性'*/span{color:green;font-size:30px; } /*组合选择器*/ul,ol{lis ...

引入CSS样式的三种方法

引入CSS样式的三种方法相关推荐

最新文章

热门文章