CSS 的语法
1.基本语法规则
CSS 的语法规则比较简单,由 3 部分组成:选择器、属性和值,写法如下:
selector {property: value}
其中选择器规定了样式的影响范围,属性是希望更改的外观项目,值为该项目可以选 择的值,如样式 body { color : red }的含义是将 body 元素中的文本颜色变为红色。
样式的属性和值都放在一对花括号内,如果有多对属性和值,中间用英文分号分隔。 CSS 对属性和值的大小写不敏感,CSS 中的注释为“/注释内容/”格式。
2.样式的引用方式
有多种方式将样式定义引入至 HTML 页面中,最常见的做法是将所有的样式保存在扩 展名为.css 的文件中,然后在<head>元素中通过<link>元素引入,这样可以让多个 HTML 页面引用同一个 CSS 样式,如下面代码所示:
<link rel="stylesheet"type="text/css" href="样式文件地址" >
也可以在<style>元素中通过@import 指令引用 CSS 文件,但部分浏览器不支持这种写法:
<style>
@import : url('样式文件地址')
</style>
如果样式规则不需要被多个页面重用,也可以直接写在<style>元素中,称之为页面内 样式,如下所示:
<style>
body { color : red }
</style>
如果样式规则只对某元素生效,也可以将样式规则写在该元素的 style 属性中,称之为 内联样式。大量使用内联样式会混淆 CSS 代码与 HTML 代码,并不推荐,如下所示:
<p style="font-size : 14pt; color : red">红色的文本</p>
如果多种样式之间存在冲突,其优先级是:内联样式→页面内样式→@import 引入的样式→<link>引入的样式。
3.选择器分类
按照影响的范围不同,CSS 选择器可以划分为以下几种。
- HTML 选择器:HTML 选择器的名称为 HTML 的元素名,会影响页面中所有的同名元素(不区分大小写)。如希望页面中所有的段落文本为红色,可以定义p { color : red }样式。
- 类选择器:类选择器的名称以符号“.”开头,会影响页面中所有 class 属性值相同的元素。
- ID 选择器:ID 选择器的名称以符号“#”开头,会影响页面中 id 属性值相同的元素 (区分大小写,且 id 属性值应该是唯一的)。
- HTML + 类选择器:HTML + 类选择器的名称格式为“元素名.类选择器名”,如选 择器“p.header”的影响范围为所有的<p class="header">元素,而不是所有的<p> 元素或 class 属性值为 header 的元素。
- 上下文选择器:上下文选择器指多个选择器之间用空格分隔,用于根据上下文元素 准确地描述影响范围,比如上下文选择器“li span”的影响范围是出现在<li>元素中 的<span>元素,而不是所有的<span>元素。
- 组选择器:如果页面多处希望采用相同的样式规则,可以定义组选择器,即多个选 择器之间用英文逗号分隔,这些选择器均会使用同一样式。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS 选择器</title>
<style>
p { color : red }
p.c1 {
font-size:1.5em
}
p.c2 {
font-size:0.5em
}
#special {
font-style:italic
}
ul li p {
text-decoration:underline
}
</style>
</head>
<body>
<p class="c1">应用类选择器c1选择器的段落</p>
<p class="c2">应用类选择器c2选择器的段落</p>
<p>普通段落</p>
<p id="special">id属性为special的段落</p>
<ul>
<li><p>列表段落</p></li>
<li class="c2"><p>列表段落</p></li>
</ul>
</body>
</html>
- 伪类:伪类是一系列特殊的选择器,可用来描述超链接的不同状态,常见的伪类如下。
a:link:用于修饰尚未单击过的超链接。
a:visited:用于修饰单击过的超链接。
a:hover:用于修饰鼠标置于其上的超链接。
a:active:用于修饰鼠标获取焦点的超链接。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>伪类</title>
<style>
a:link {
text-decoration:none; /*不加下画线*/
}
a:visited {
text-decoration:line-through; /*添加删除线*/
}
a:hover {
font-size:1.5em;
}
a:active {
color:red;
}
</style>
</head>
<body>
/*字体放大 1.5 倍*/
<a href="01_x.html">普通超链接</a>
<a href="01_2.html">浏览过的超链接</a>
<a href="01_3.html">鼠标移上的超链接</a>
</body>
</html>
4.选择器的命名规则
选择器的命名规则如下:
- 不要包含特殊符号,如+、-、'、"、/、*、\等。
- HTML 选择器命名和 HTML 标签名称一样,最好全部使用小写字母。
- 类选择器命名采用英文单词组合的方法,单词首字母小写;使用功能而不是外观来描述,比如要显示学生的姓名,采用红色字体,选择器应该叫“.studentName”,而不是”.redFont”。
- 无论采用什么命名风格,都需要坚持到底,不能在一个样式文件中存在多种命名风格。
5.样式的继承
理论上讲,嵌套在父元素内的子元素会继承父元素的样式,如存在样式 body {color: red },则<body>元素内的所有子元素中的文本均应显示为红色,但各种浏览器对样式的继 承支持并不一致,为了令代码在各种浏览器下均能正常显示,适当定义一些冗余规则是必 要的。如下例所示,对 body 指定的样式并未被 input 元素继承:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS 选择器</title>
<style>
body {
color : red
}
</style>
</head>
<body>
<p>普通段落</p>
<input type="button" value="普通按钮"/>
<table>
<tbody>
<tr>
<td>普通单元格</td>
</tr>
</tbody>
</table>
</body>
</html>
利用组选择器,将样式改为 body,input { color : red }可以解决此问题。
常用 CSS 属性介绍
1.字体属性
屏幕快照 2017-02-28 下午1.37.12.png
屏幕快照 2017-02-28 下午1.38.07.png
2.背景属性
屏幕快照 2017-02-28 下午1.41.15.png
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>背景</title>
<style>
body {
background-image: url(02_5.png);
background-repeat: no-repeat;
background-position: right top;
}
.bg {
background-image: url(05_4.png);
}
</style>
</head>
<body>
<table width="400" border="1" class="bg">
<caption>
背景重复的表格
</caption>
<tbody>
<tr>
<td>aaaa</td><td>bbbb</td><td>cccc</td>
</tr>
<tr>
<td>aaaa</td><td>bbbb</td><td>cccc</td>
</tr>
<tr>
<td>aaaa</td><td>bbbb</td><td>cccc</td>
</tr>
</tbody>
</table>
</body>
</html>
3.区块属性
屏幕快照 2017-02-28 下午1.48.11.png
下例演示了使用 vertical-align 属性代替、标签实现脚注、尾注的效果:
例 05_5.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>区块</title>
<style>
p.exp {
text-indent:50px;
font-size:2.0em;
}
p.header {
text-align:center;
}
p.power {
vertical-align:super;
font-size:0.5em;
}
p.foot {
vertical-align:sub;
font-size:0.5em;
}
</style>
</head>
<body>
<p class="header">区块属性演示</p>
<p class="exp">X<span class="power">2</span> + Y<span class="foot">3</span>= 32</p>
</body>
</html>
4.方框属性
浏览器通过 BOX 模型(盒子模型)来确定元素中间距、边框、边距等的位置,其中边 框称为 border,边距(边框与周围元素的距离)称为 margin,间距(边框与元素内部内容 的距离)称为 padding,如图 5-12 所示。
屏幕快照 2017-02-28 下午1.58.51.png
图 5-13 所示为 IE 8 中的盒子模型。
屏幕快照 2017-02-28 下午1.59.51.png
屏幕快照 2017-02-28 下午2.02.17.png
屏幕快照 2017-02-28 下午2.03.39.png
下例演示了使用 float 等属性进行排版的效果:
例 05_6.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>方框</title>
<style>
p.first {
font-size:13px;
text-indent:2em; /*缩进 2 个字的距离*/
padding-left:50px;
padding-right:50px;
}
p.first img {
float : left;
width:64px;
}
p.second {
font-size:13px;
padding-left:50px;
padding-right:50px;
}
p.second span {
float:left;
font-size:3.0em;
}
hr {margin:25px; }
</style>
</head>
<body>
<p class="first">文字紧密围绕在msn水晶小人的周围。文字紧密 围绕在 msn 水晶小人的周围。文字紧密围绕在 msn 水晶小人的周围。文字紧密围绕在 msn 水晶小人的周 围。文字紧密围绕在 msn 水晶小人的周围。文字紧密围绕在 msn 水晶小人的周围。文字紧密围绕在 msn 水晶小人的周围。文字紧密围绕在 msn 水晶小人的周围。文字紧密围绕在 msn 水晶小人的周围。</p>
<hr/>
<p class="second"><span>今</span>日最重要的新闻是这样的,今日最重要的新闻是这样的,今 日最重要的新闻是这样的,今日最重要的新闻是这样的,今日最重要的新闻是这样的,今日最重要的新闻是这 样的,今日最重要的新闻是这样的,今日最重要的新闻是这样的,今日最重要的新闻是这样的。
</body>
</html>
5.边框属性
大部分可见的 HTML 元素都可以拥有边框,CSS 可以对上、下、左、右 4 个方向的边框样式进行修饰,
屏幕快照 2017-02-28 下午2.19.54.png
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>边框</title>
<style>
table {
border-collapse:collapse;
border : solid 1px black;
}
caption {
font-size:2em;
font-weight:bold;
}
th {background-color:#aaa; }
td,th {
border : solid 1px black;
padding : 5px;
}
</style>
</head>
<body>
<table width="400" border="1">
<caption>
标准的细线表格
</caption>
<thead>
<tr>
<th>AAA</th><th>BBB</th><th>CCC</th>
</tr>
</thead>
<tbody>
<tr><td>aaa</td><td>bbb</td><td>ccc</td> </tr>
<tr><td>aaa</td><td>bbb</td><td>ccc</td> </tr>
<tr><td>aaa</td><td>bbb</td><td>ccc</td> </tr>
<tr><td>aaa</td><td>bbb</td><td>ccc</td></tr>
</tbody>
</table>
</body>
</html>
6.列表属性
顾名思义,列表相关的属性专门用于修饰无序列表<ul>与有序列表<ol>
屏幕快照 2017-02-28 下午2.28.18.png
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>列表</title>
<style>
ul {
list-style-image:url(05_8.gif);
}
</style>
</head>
<body>
<ul>
<li>最新的新闻</li>
<li>最新的新闻</li>
<li>最新的新闻</li>
</ul>
</body>
</html>
7.定位属性
HTML 元素的位置与显示方式均由定位属性决定。默认情况下,HTML 元素采用自左向右、从上到下的布局显示方法,元素会根据内容自动决定元素大小
屏幕快照 2017-02-28 下午2.37.57.png
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>定位</title>
<style>
#d1 {
position:absolute;
left:50px;
top:50px;
width:300px;
height:300px;
background-color:#eee;
}
#d2 {
position:absolute;
right:0px;
bottom:0px;
width:200px;
height:200px;
background-color:#aaa;
}
#d3 {
position:absolute;
right:0px;
bottom:0px;
width:100px;
height:100px;
z-index:10;
overflow:auto
}
</style>
</head>
<body>
<div id="d1">
<div id="d3">.jpg)</div>
<div id="d2"></div>
</div>
</body>
</html>
8.扩展属性
屏幕快照 2017-02-28 下午2.46.57.png
