CSS应用
CSS样式代码必须保存在.css类型的文本文件中，或者放在网页内<style>标签中，或者插在网页标签的style属性中。CSS样式的应用方法主要分为四种:行内样式，内嵌式，链接式以及导入式。
行内样式
行内样式就是把CSS样式直接放入代码行内的标签中，一般都会放入Style属性中，由于行内样式是直接插入标签中，所以它是一种最直接的方式，同样也是修改最不便捷的方式。
如:示例主要针对段落，<h>标签，<em>标签，<Strong标签>以及<div>标签，分别应用到行内样式中。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS行内样式</title>
</head>
<body>
<p style="background: #999900">行内元素，控制段落-1</p>
<h1 style="background: FF6633">行内元素，h1标题元素</h1>
<p style="background: #999900">行内元素，控制段落-2</p>
<strong style=font-size: 30px>行内元素，strong比em效果更强</strong>
<div style="font-size: 2em;">行内元素，em强调</div>
</body>
</html>
内嵌式
内嵌式通过将CSS写在网页源文件的头部，即在<head>与</head>之间，通过使用HTML标签中的<Style>标签将其包围，其特点是:该样式只能在此页使用，解决行内样式多次书写的弊端。
如:该代码中为段落设置内嵌样式的书写方法，减少代码量。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内嵌式</title>
</head>
<style type="text/css">
p{
text-align: left;/*文本对齐方式左对齐*/
font-size: 20px;/*设置字体大小20像素*/
line-height: 25px;/*行高25像素*/
text-indent: 2em;/*首行缩进2个文字大小的空间*/
width: 500px;/*段落宽度500像素*/
margin: 0 auto;/*浏览器居中*/
margin-bottom: 20px;/*下边距20像素*/
background: #BF36D1;
}
</style>
<body>
<p>超文本是一种用户接口方式，用以显示文本及与文本相关的内容。现时超文本普遍以电子文档的方式存在，其中的文字包含有可以链接到其他字段或者文档的超文本链接，允许从当前阅读位置直接切换到超文本链接所指向的文字。</p>
<p>超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。超文本更是一种用户界面范式，用以显示文本及与文本之间相关的内容。现时超文本普遍以电子文档方式存在，其中的文字包含有可以链结到其他位置或者文档的连结，允许从当前阅读位置直接切换到超文本连结所指向的位置。超文本的格式有很多，最常使用的是超文本标记语言（标准通用标记语言下的一个应用）及富文本格式。</p>
<p>Internet采用超文本和超媒体的信息组织方式，将信息的链接扩展到整个Internet上。Web就是一种超文本信息系统，Web的一个主要的概念就是超文本链接。它使得文本不再像一本书一样是固定的线性的，而是可以从一个位置跳到另外的位置并从中获取更多的信息，还可以转到别的主题上。想要了解某一个主题的内容只要在这个主题上点一下，就可以跳转到包含这一主题的文档上。正是这种多连接性把它称为Web。</p>
</body>
</html>
注意，Style不仅可以定义CSS样式，还可以定义JavaScript脚本，故使用style时需注意。当style的type值为text/css时，内部编写css样式；若style的type值为text/JavaScript时，内部编写JavaScript脚本。
链接式
链接式通过HTML的<link>标签，将外部样式表文件链接到HTML文档中，这也是网络上网站运用最多的方式，同时也是最实用的方式。这种方法将HTML和CSS文件进行分开，实现结构层和表示层一个彻底的分离，增强网页结构的扩展性和CSS样式的可维护性。
CSS1链接1.css
@charset "utf-8";
/* CSS Document */
h3{
font-weight:normal;/*取消标题默认的加粗效果*/
background-color: #66CC99;/*设置背景色*/
height: 50px;/*设置标签的高度*/
line-height: 50px;/*设置标签的行高*/
}
span{
color:#FF0000;/*字体颜色*/
font-weight: bold;/*字体加粗*/
}CSS1链接2.css
@charset "utf-8";
/* CSS Document */
p{
color: #FF3333;/*字体颜色设置*/
font-weight: bold;/*字体加粗*/
border-bottom: 3px dashed #009933;/*设置下边距线*/
line-height: 30px;/*设置行高*/
}链接式.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>链接html</title>
<link href="css链接1.css" rel="stylesheet" type="text/css">
<link href="css链接2.css" rel="stylesheet" type="text/css">
</head>
<p>我是被CSS链接2文件所控制的</p>
<h3>楼上的,<span>我是被CSS链接1文件所控制的</span></h3>
<body>
</body>
</html>
导入样式
导入样式使用@import命令导入外部样式表。导入样式有六种书写方式:
@import daoru.css;
@import ‘daoru.css’;
@import “daoru.css”;
@import url (daoru.css);
@import url (‘daoru.css’);
@import rul (“daoru.css”);如在一下示例中，导入样式表lianjie.css和daoru.css以及书写<body>标签的背景色，注意导入样式表和<body>标签样式的前后不可以被颠倒。
daoru.css
@charset "utf-8";
/* CSS Document */
@import url("css链接2.css");
p{text-indent:3em};导入样式.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
@import url("css链接1.css");/*链接1.css路径*/
@import url("daoru.css");/*daoru.css路径*/
body{background-color:#e4e929;}
</style>
</head>
<body>
<div>
<p>我被链接2.css所控制</p>
<h3>大家好<span>我被链接1.css所控制</span></h3>
</div>
</body>
</html>
还需注意:@import url(“链接2.css”);p{text-indent:3em};而非p{text-indent:3em};@import url(“链接2.css”);否则会出现导入无效的现象。在CSS文件中也必须把@import放在前面，后面再加入CSS的样式，不然也是无效。
103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
