CSS简介
1.CSS(Cascading Style Sheets) 层叠样式表
CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。
2.CSS的语法结构
CSS语法有三部分:选择符、属性和值。属性(property)是用户希望设置的属性(style attribute)。每个属性有一个值。属性和值由冒号分开。
Selector {Property:Value } Selector:选择符; Property:属性; Value:属性值;
例子:
<style type="text/css"> body { background-color:#cccccc;} </style>
3.CSS的三种引用方式
(1)行内引用
行内引用是指将CSS样式编码直接写在HTML标签中的style属性中。这种方式引入CSS不需要写选择器。
例子:
<body style="background-color:#ccccc;"> <h1 style="font-size:12px; color:#ff0000;">这是一个标题</h1> </body>
<body style="background-color:#ccccc;"> <h1 style="font-size:20px; color:#0000ff;">这是另一个标题</h1> </body>
效果:
这是一个标题
这是另一个标题
(2)页内引用
页内引用作为页面中的一个单独部分,由<style></style>标签定位在<head></head>中。
例子:
<head> <style type="text/css"> body { background-color:#cccccc; } </style> </head>
(3)外部样式表
外部样式表是CSS应用中最好的一种形式,它将CSS样式代码单独放在外部文件中,再由网页进行调用。
例:
style.css : body { background-color:#cccccc; } 将它放在外部CSS文件夹中
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
将这段代码放在如index.html的文件中,即可调用CSS样式。
三种引入方式的优先级依次为:行内引用 > 页内引用 > 页外引用 需要注意的是它们首先遵从就近原则。
4.CSS代码注释
CSS的代码注释与HTML不同,它以 /* 开始,以 */ 结束。
例:
/* 公共样式*/ body { margin:0px; padding:0px;} /*导航样式开始*/ #nav { …… } /*导航样式结束*/