CSS 概述
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
CSS 类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用,也可以与其他元素结合使用。
提示:只有适当地标记文档后,才能使用这些选择器,所以使用这两种选择器通常需要先做一些构想和计划。
要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器。
CSS ID 选择器
在某些方面,ID 选择器类似于类选择器,不过也有一些重要差别。首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。
提示:ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
实例:
<head>
<style type="text/css">
#样式名
{
height:50px;
width:100%;
border:5px solid blue;/*四边框: 5像素宽,实线,蓝色*/
}|
</style>
<body>
<div id="样式名"></div>
class 选择器
class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:
在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。
提示:类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。
实例:
<head>
<style type="text/css">
.样式名
{
height:50px;
width:100%;
border:5px solid blue;/*四边框: 5像素宽,实线,蓝色*/
}|
</style>
<body>
<div class="样式名"></div>