如何在网页中插入CSS
这篇“如何在网页中插入CSS”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何在网页中插入CSS”文章吧。
CSS就是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术。
样式表文件可以用任何文本编辑器（例如：记事本）打开并编辑，一般样式表文件扩展名为 .css
一、如何在网页中插入CSS
在页面中插入样式表的方法：链入外部样式表、内部样式表、导入外表样式表和内嵌样式。
1. 链入外部样式表
链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用<link>标记链接到这个样式表文件，这个<link>标记必须放到页面的<head>区内，如下：
<head>
<link rel="stylesheet" type="text/css" href="./mystyle.css" media=”screen”>
media=”print”
</head>
上面表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。rel=”stylesheet”指的是这个LINK和其href之间的关联，这里指出这个href文件是样式表文件。type=”text/css” 是指文件的类型是样式表文本。href=”mystyle.css” 是文件所在的位置。
内容是定义的样式表如： body {background-image: url("images/back40.gif")}
2.内部样式表
内部样式表是把样式表放到页面的<head>区里，这些定义的样式就应用到页面中了，样式表是用<style>标记插入的，从下例中可以看出<style>标记的用法：
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>
注意：有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（<!-- 注释 -->）隐藏内容而不让它显示：
3.导入外部样式表
导入外部样式表是指在内部样式表的<style>里导入一个外部样式表，导入时用@import，
实例：
<head>
<style type=”text/css”>
<!--
@import “mystyle.css”
-->
</style>
</head>
方法和链入样式表的方法很相似，但导入外部样式表输入方式更有优势。实质上它相当于存在内部样式表中的。
注意：导入外部样式表必须在样式表的开始部分，在其他内部样式表上面。
4. 内嵌样式
内嵌样式是混合在HTML标记里使用的，可以很简单的对某个元素单独定义样式。内嵌样式的使用是直接将在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值，如下例：
<p style="color: sienna; margin-left: 20px">
这是一个段落
</p>
在style参数后面的引号里的内容相当于在样式表大括号里的内容。
style参数可以应用于任意BODY内的元素（包括BODY本事），除了BASEFONT、PARAM和SCRIPT。
二、语法
1. 基本语法
CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。
基本格式如下：
selector {property: value}
（选择符 {属性：值}）
选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE……，
如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开：
selector {property1: value1; property2: value2}
（选择符 {属性1：值2; 属性1：值2}）
2、选择符类型
HTML标记选择符 / 标签选择符
对于你要定义样式的HTML标记，例如BODY、P、TABLE……，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开：
body {color: black}
ID选择符
在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。
ID选择符的应用和类选择符类似，在html标签中使用id参数：
<p id="intro">
这个段落向右对齐
</p>
定义ID选择符要在ID名称前加上一个“#”号。定义ID选择符的属性有两种方法。
下面实例，ID属性将匹配所有id="intro"的元素：
#intro
{
font-size:110%;
font-weight: bold;
color:#0000ff;
background-color: transparent
}
（字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明）
下面这个例子，ID属性只匹配id="intro"的段落元素：
p#intro
{
font-size:110%;
font-weight: bold;
color:#0000ff;
background-color: transparent
}
注：ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。
id一个页面只可以使用一次，如果使用了多个id：
第一就是不能通过W3的校验，尽管可以在浏览器中使用；
第二当你需要用JavaScript通过id来控制这个div，那就会出现错误。
概念上说：
id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。
类选择符
用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类：
p.right {text-align: right}
p.center {text-align: center}
应用时，只要在HTML标记里加入你定义的class参数：
<p>
这个段落向右对齐的
</p>
<p>
这个段落是居中排列的
</p>
注：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。
类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式：
.center {text-align: center}
这样的类可以被应用到任何元素上。
注：这种省略HTML标记的类选择符是我们经后最常用的CSS方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。
选择符组
你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：
p, table{ font-size: 9pt }
（段落和表格里的文字尺寸为9号字）
效果完全等于：
p { font-size: 9pt }
table { font-size: 9pt }
包含选择符
可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如：
Table .leftdiv
{
font-size: 12px
}
在表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。
样式表的层叠性
层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起。例如在DIV标记中嵌套P标记：
div { color: red; font-size:9pt}
<div>
<p>
这个段落的文字为红色9号字
</p>
</div>
（P元素里的内容会继承DIV定义的属性）
注：有些情况下内部选择符不继承周围选择符的值，但理论上这些都是特殊的。例如：上边界属性值是不会继承的，直觉上，一个段落不会同文档BODY一样的上边界值。
另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了P的颜色：
div { color: red; font-size:9pt}
p {color: blue}
<div>
<p>
这个段落的文字为蓝色9号字
</p>
</div>
我们可以看到段落里的文字大小为9号字是继承div属性的，而color属性则依照最后定义的。
不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。ID选择符，类选择符和HTML标记选择符，因为ID选择符是最后加上元素上的，所以优先级最高，类选择符次之，顺序为：
内嵌样式表的样式 id选择符 类选择符 HTML标记选择符
如果想超越这三者之间的关系，可以用!important提升样式表的优先权，例如：
p { color: #FF0000 }
.blue { color: #0000FF}
#id1 { color: #FFFF00}
<p id="id1" style=””>
这里显示颜色
</p>
我们同时对页面中的一个段落加上这三种样式，它最后会依照被!important申明的HTML标记选择符样式为红色文字。如果去掉!important，则依照优先权最高的ID选择符为黄色文字。
3.特殊选择符—伪类
伪类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。
1. 语法
伪类的语法是在原有的语法里加上一个伪类（pseudo-class）：
selector:pseudo-class {property: value}
（选择符:伪类 {属性: 值}）
伪类和类不同，是CSS已经定义好的，不能象类选择符一样随意用别的名字，
根据上面的语法可以解释为：
对象（选择符）在某个特殊状态下（伪类）的样式。
类选择符及其他选择符也同样可以和伪类混用：
selector.class:pseudo-class {property: value}
（选择符.类:伪类 {属性: 值}）
2. 锚的伪类—动态连接
我们最常用的是4种a（锚）元素的伪类，它表示动态链接在4种不同的状态：link、visited、active、hover（未访问的链接、已访问的链接、激活链接和鼠标停留在链接上）。我们把它们分别定义不同的效果：
a:link {color: #FF0000; text-decoration: none}
a:visited {color: #00FF00; text-decoration: none}
a:hover {color: #FF00FF; text-decoration: underline}
a:active {color: #0000FF; text-decoration: underline}
注：有时这个链接访问前鼠标指向链接时有效果，而链接访问后鼠标再次指向链接时却无效果了。这是因为你把a:hover放在了a:visited的前面，这样的话由于后面的优先级高，当访问链接后就忽略了a:hover的效果。在定义这些链接样式时，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写。
3. 锚的伪类--类选择符动态链接
将伪类和类组合起来用，就可以在同一个页面中做几组不同的链接效果了，例如，我们定义一组链接为红色，访问后为蓝色；另一组为绿色，访问后为黄色：
a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a.blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}
现在应用在不同的链接上：
<a href="...">这是第一组链接</a>
<a href="...">这是第二组链接</a>
4. 其他伪类
CSS2还定义了首字和首行（first-letter和first-line）的伪类，可以对元素的首字或首行设定不同的样式。
接下来实例，我们在段落标记里定义文本首字尺寸为默认大小的3倍：
<style type=”text/css”>
p:first-letter {font-size: 300%}
</style>
再定义一个首行样式的实例：
<style type=”text/css”>
div:first-line {color: red}
</style>
如果段落中有多行，那么第一行为红色，第二、三行为默认颜色
注：首字和首行的伪类需要IE5.5以上的版本支持。
以上就是关于“如何在网页中插入CSS”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341