级联样式单的基本使用

级联样式单

一、概述

Cascading Style Sheet（级联样式单），缩写CSS，又称层叠样式单。其主要用于网页的风格设计，使传统的Web网页变得更富有表现力。
样式单同样有许多突出优点：
例如表达效果丰富、文档体积小、便于信息检索、可读性好等。

二、CSS样式单的基本使用

CSS样式单可以控制HTML文档的显示。但是控制文档之前，首先应在需要显示的HTML文档中导入CSS样式单。为了在HTML文档中使用CSS样式单，有如下四种使用样式单的方式：链接外部样式文件、导入外部样式文件、使用内部样式定义、使用行内样式。
1、链接外部样式文件
HTML文档中使用<link…/>元素来引入外部样式文件，引入外部样式文件应在<head…/>元素中增加如下<limk…/>子元素：

<limk tyle="text/css" rel="stylesheet" herf="CSS样式文件的URL">

在上面的语法格式中，type和rel表面该页面使用了CSS样式单，href属性的值则是指向CSS样式单文件的地址，此地址可以是相互地址也可以为绝对地址。
2、使用内部CSS样式
内部CSS样式，控制某些CSS样式仅对某个页面有效，而不会影响整个站点。
内部CSS样式需要放在 <style… />元素中定义，<style…/>元素应该放在<head…/>元素内，作为它的子元素。
使用内部CSS样式定义语法格式：

<style type="text/css">样式单文件定义</style>

但是，通常不建议使用CSS样式，主要有三大劣势：
（1）、如果此CSS样式需要被其他HTML文档使用，那么这些CSS样式必须在其他HTML文档中重复定义。
（２）、大量CSS嵌套在HTML文档中，必将导致HTML文档过大，大量的重复下载，导致网络负载加重。
（３）、如果需要修改整站风格时，必须依次打开每个页面重复修改，不利于软件工程化管理。
3、使用行内样式
使用行内CSS样式只对单个标签有效，它甚至不会影响整个文件。行内样式定义精准控制某个HTML元素的外观，并且允许通过Javascript动态修改XHTML元素的CSS样式，从而改变外观。
为了使用行内样式，CSS扩展了HTML元素，几乎所有的HTML都增加了一个style通用属性，该属性值是一个或多个CSS样式定义，多个CSS样式定义之间以英文分号隔开。
定义行内CSS样式语法格式：

style="property1:value1;property2:value2..."

4、导入外部样式单
导入外部样式单的功能与链接外部样式单的功能差不多，只是语法上存在差别。导入外部样式单需要在<style…/>元素中使用＠import来执行导入。

<style type="text/css">
	@import "outer.css";
	@import url("mycss.css");
</style>

那么问题来了，既然链接外部样式单与导入外部样式单功能差不多，为何还要支持两种语法？那是因为以前的很多浏览器都不支持＠import导入，因此开发人员会把那一些浏览器可能不支持的高级CSS属性放在外部样式单中导入。但实际上，由于某些浏览器会在导入外部样式单时导致“屏闪”，所以开发者应尽量避免使用@import导入外部样式单。
除此之外，还有一个问题。那就是当上面的几种样式单同时工作时，要以哪种样式单为基础呢？
这就需要引入另外一个名词——优先级；计算机会根据优先级的不同去进行优先级最高的工作，而上面这几种样式单的优先级为：行内样式＞内部样式＞外部样式