一、CSS的基本定义
CSS全称:Cascading Style Sheets ,翻译为层叠样式表,是用来控制HTML或XML等表示样式的计算机语言,可用来对网页视觉效果进行统一编辑。CSS能够使页面表现和内容分离。能够对页面中对象的位置排版进行像素级的精确控制,支持几乎所有的字体号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计。目前版本为CSS3。
样式表诞生于1996年,目前版本为CSS3,目的是为了对布局、字体、背景、图片和其它图文效果进行精确控制。
二、CSS的基本结构
CSS由选择符和声明组成:选择符{属性:属性值},如:
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
其中:
1、属性和属性值之间用‘:’冒号分隔,声明放在大括号内;
2、一个选择符可以有多个属性,属性之间用‘;’分号分开;
3、一个属性可以有多个属性值,属性值之间用‘,’空格分开。
三、CSS的加载方式
1、行内加载
可以直接在html标签内加入样式规则,标签内的方式只可控制该标签样式。语法:
<标签名称 style="样式属性:属性值;样式属性:属性值......">
在行内给段落增加背景色:
<p style="background-color:gray">文档内容</p>
2、文档表头加载
是指把样式表签入到文档表头中,如:
<!DOCTYPE html>
<html>
<head>
<title>文档头</title>
<meta charset="utf-8">
<style type="text/css">
p{background-color:blue;font-size: 24px}
</style>
</head>
<body>
<!--注释不会显示在浏览器中-->
<p>文档内容</p>
</body>
</html>
3、外部样式表文件加载
是指把样式定义在独立的CSS文件中,并将该文件通过链接的方式加载到html文件中。语法:
<link rel="stylesheet" type="text/css" href="*.css">,href是指向的css具体路径。
说明:
⑴ *.css为预先编写好的样式表文件
⑵ 外部样式表文件中不能含有任何像<head>或<style>这样的HTML标签。样式表仅仅由样式表规则或声明组成
⑶ 在href属性中可以使用绝对URL或者相对URL
⑷ 如同发布HTML文件那样,将这个CSS文件发布到服务器中。在网页被打开时,浏览器将依照链接标签将含有链接外部样式表文件的HTML网页按照样式表规则显示。
4、外部输入表样式
外部输入样式表的方法同链接到外部样式表文件类似。其语法如下:
<style type="text/ css ">
@import url ( 外部样式表的文件名称 );
</style>
说明:
⑴ import语句后的“;”号是必须的。
⑵ 要输入的样式表文件的扩展名为 . css 。