腾讯云618限量抢购
  1. HTML教程

CSS 简介

最后更新:2010-10-06 20:50阅读:15918

什么是CSS

CSS 全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式(如:字体大小,左右排列顺序等)。

我们可以通过一个CSS文件或者一段CSS脚本代码,对整个网站的表现样式做统一的管理,并达到“内容与表现完全分离”的目的。 由于CSS允许同时控制多重页面的样式和布局,所以我们能够为每个 HTML 元素定义样式,并将之应用于任意多的页面中。如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。因此使用CSS,极大的提高了Web设计工作效率。

如何使用CSS

CSS作用于html文档,有如下三种方式:

内联样式、内部样式表和外部样式表

内联样式

例子:

<p style="font-size:12px; color:red;" >我是内联样式测试文字</p>

这个就是css内联样式的使用例子,它同样遵守我们前面讲的XHTML语法:属性="值"。属性style表示要应用一个CSS样式,双引号里面的均为CSS内容,这个例子我们定义了两个CSS样式,一个是字体大小fontsize,一个是字体颜色color。

该样式告诉浏览器:“我是内联样式测试文字”这行文字的大小为12px,颜色为红色。

内联样式表

例子:

<head>
  <title>我爱开发网</title>
  <style type="text/css">
    p{font-size:12px; color:red;}
  </style>
</head>

这是内联样式表应用的例子,在<style></style>标签内并给标签指定type="text/css"属性以表示要应用一个CSS样式。在<style>标签内的内容为具体CSS内容,请注意和“内联样式”在写法上的细微区别。

该样式告诉浏览器:所有<p>标签内的文字大小都为12px,颜色为红色。

外部样式表

外部样式表是通过一个css文件来对html文档作用的:

<head>
  <title>我爱开发网</title>
  <link rel="stylesheet" href="style/default.css" type="text/css" />
</head>

外部样式表通过在<head>标签内使用<link>标签应用外部的一个CSS样式文件(default.css),来应用CSS样式表。CSS样式文件以css为文件后缀,文件包含CSS具体内容,其写法同内联样式。

浏览器默认样式

网页元素还会受一种特殊的样式影响,就是浏览器的默认样式。一个例子就是浏览器默认超链接是有下划线的,如果我们要取消超链接的下划线,就需要单独应用取消文字下划线的样式于超链接上。

以上三种方式可以混合使用,但混用可能会使样式表变得混乱。在优先级上:内联样式 > 内联样式表 > 外部样式表 > 浏览器默认样式。

CSS撰写风格

和其他编程语言一样同样,CSS也必须写得易懂和易于维护。我们建议将样式表写为如下风格:

p{
    font-size: 12px; 
    color: red;
}

在该写法中,一个CSS属性占一行,前面以一个Tab键缩进,而属性和值之间是否需要一个空格,可以按照个人喜好来决定。

提示

在我们的教程中,为了节约篇幅以及美观度,对于比较简单的样式,会采用类似下面的写法:

p{ color: #FF0000; }
腾讯云618限量抢购