CSS样式表基础-优快云博客

本文介绍了CSS样式表的基础概念，包括其在网页设计中的作用、如何使用CSS简化样式代码以及四种添加CSS的方法：链接外部样式表、内部样式表、导入外部样式表和内嵌样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：在敲牛腩的时候学习了CSS，但只是简单的了解，如果想真正学到精髓，还需要深入的研究，首先从CSS的概念开始吧。

1.认识CSS

CSS是一种制作网页的新技术，现在已经为大多数浏览器所支持，称为网页设计必不可少的工具之一。

网页最初使用HTML标记来定义页面文档及格式，如标题<h1>、段落<p>、表格<table>等，但这些标记不能满足更多的文档样式需求。为了解决这个问题，产生了CSS。使用CSS能够简化网页的格式代码，样式表得到了更多的充实。加快下载显示的速度，也减少了需要上传的代码数量，大大减少了重复劳动的工作量。

样式表的首要目的是为网页上的元素精确定位。其次，它可以把网页上的内容结构和格式控制相分离。浏览者想要看到是网页上的内容结构，而为了让浏览者更好的看到这些信息，就要通过严格的控制。内容结构和格式控制相分离，使网页可以仅由内容相分离，而将所有网页的格式通过CSS样式表文件来控制。

2.使用CSS

2.1 CSS的基本语法

CSS的语法结构仅有3部分组成，选择符、样式属性和值、基本语法如下：

{样式属性：取值；样式属性：取值；样式属性：取值；......}

●选择符

选择符指这组样式编码所要针对的对象，可以是一个XHTME标签，如body、h1；也可以是定义了特定id或class的标签，如#lay选择符表示选择<dib id=lay>，即一个被指定了lay为id的对象。

●属性是CSS样式控制的核心，对于每一个XHTML中的标签，CSS都提供了丰富的样式属性，如颜色、大小、定位、浮动方式等。

●值是指属性的值，形式有两种，一种是制定范围的值，如float属性，只能使用left、right、none三种值。另一种为数值，如width能够使用0～9999px，或使用其他数学单位来制定。

2.2 添加CSS的方法

添加CSS有4种方法：链接外部样式表、内部样式表、导入外部样式表和内嵌样式。下面分别进行介绍。
链接外部样式表

●链接外部样式表就是在网页中调用已经定义好的样式表来实现样式表的应用，她是一个单独的文件，在页面中用<link>来标记链接到的这个样式表文件，<link>标记必须放到页面的<head>标签内。这种方法最适合大型网站的CSS样式定义。如下：

<head>
...
<link rel=stylesheet type=text/css href=slstyle.css>
...
</head>

上面这个例子表示浏览器从slstyle.css文件中以文档格式读出定义的样式表。

●内部样式表一般位于HTML文件的头部，即<head>与</head>标签内，并且以<style>开始，以</style>结束，这些定义的样式就可应用到页面上。下面的实例就是使用<style>标记创建的内部样式表。

<head>
<style type="text/css">
<!--
body{
       margin-left:0px;
       margin-top:0px;
       margin-right:0px;
       margin-bottom:0px;
}
.style1{
      color:#fbe334;
      font-size:13px;
}
-->
</style>
</head>

●导入外部样式表是指在内部样式表的<style>里导入一个外部样式表，导入时用@import。看下面这个实例。

<head>
...
<style type=text/css>
<!-
@import sistyle,css
其他样式表的声明
-->
</style>
...
</head>

此例中@import slstyle.css表示导入slstyle.css样式表，注意使用时外部样式表的路径、方法和链接外部样式表的方法类似。

●内嵌样式是混合在HTML标记里使用的，用这种方法，可以很简单地对某个元素单独定义样式，它主要是在body内实现。内嵌样式的使用是直接在HTML标记添加style参数。看下面这个实例。

<table style=color:red;margin-right:220px>
这是个表格
</p>

今天的分享到此结束，谢谢您的观看与指教。

CSS学习之旅

前言：在敲牛腩的时候学习了CSS，但只是简单的了解，如果想真正学到精髓，还需要深入的研究，首先从CSS的概念开始吧。

1.认识CSS

2.使用CSS

2.2 添加CSS的方法