一、CSS概述
CSS通常称为CSS样式或样式表,主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
如下图所示,图中文字的颜色、粗体、背景、行间距和左右两列的排版等,都是通过CSS控制的
二、. CSS发展历史
-
CSS1
1996年12月W3C发布了第一个有关样式的标准CSS1。包含了font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等。 -
CSS2
1998年5月,CSS2正式推出,开始使用样式表结构,是目前正在使用的版本。 -
CSS2.1
2004年2月,CSS2.1正式推出。它在CSS2的基础上略微做了改动,删除了许多不被浏览器支持的属性。 -
CSS3
早在2001年,W3C就着手开始准备开发CSS第三版规范。虽然完整的、规范权威的CSS3标准还没有尘埃落定。但是各主流浏览器已经开始支持其中的绝大部分特性。三、样式规则
使用HTML时,需要遵从一定的规范。CSS亦如此,要想熟练地使用CSS对网页进行修饰,首先需要了解CSS样式规则
具体格式如下:选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
CSS代码结构中的几个特点,具体如下:
- CSS样式中的选择器严格区分大小写,属性和值不区分大小写,按照书写习惯一般将“选择器、属性和值”都采用小写的方式。
- 多个属性之间必须用英文状态下的分号隔开,最后一个属性后的分号可以省略,但是,为了便于增加新样式最好保留。
- 如果属性的值由多个单词组成且中间包含空格,则必须为这个属性值加上英文状态下的引号。
- 在编写CSS代码时,为了提高代码的可读性,通常会加上CSS注释。 在CSS代码中空格是不被解析的,花括号以及分号前后的空格可有可无。
四、引入CSS样式
(1)行内式
行内式也称为内联样式,是通过标记的style属性来设置元素的样式,其基本语法格式如下:
<标记名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容 </标记名>
该语法中style是标记的属性,实际上任何HTML标记都拥有style属性,用来设置行内式。其中属性和值的书写规范与CSS样式规则相同,行内式只对其所在的标记及嵌套在其中的子标记起作用。
(2)内嵌式
内嵌式是将CSS代码集中写在HTML文档的头部标记中,并且用<style>
标记定义,其基本语法格式如下:
<head>
<style type="text/css">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
该语法中,
<style>
标记一般位于<head>
标记中<title
>标记之后,也可以把它放在HTML文档的任何地方。
(3)链入式
链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过<link />
标记将外部样式表文件链接到HTML文档中,其基本语法格式如下:
<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>
该语法中,
<link />
标记需要放在<head>
头部标记中,并且必须指定<link />
标记的三个属性,具体如下:
href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
type:定义所链接文档的类型,在这里需要指定为“text/css”,表示链接的外部文件为CSS样式表。
rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。
五、简单CSS实例
<htmL>
<head>
<title>CSS体验</title>
<style type="text/css">
h1{
text-align: center;
color: red;
font-family: "微软雅黑";
}
p{
text-align: center;
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<h1>成功法则</h1>
<p>迟到毁一生</p>
<p>早退穷三代</p>
<p>按时上下班</p>
<p>必成高富帅</p>
</body>
</html>