CSS主要用于为HTML文档定义布局。例如,CSS涉及文体、颜色、边距、高度、宽度、背景图像、高级定位等方面。
CSS与HTML的区别:
HTML用于结构化内容,CSS用于装饰HTML
CSS的好处是:
1、通过单个样式表控制多个文档的布局
2、更精确的布局控制
3、为不同的媒体类型(屏幕、打印等)采取不同的布局
4、可以灵活的更换网页风格
一、CSS语法
选择器、属性和值
selector {property:value}
selector通常是HTML元素或标签,属性(property)是希望改变的属性,value是属性的值
二、CSS三种方法应用
方法1:行内样式表
<body style="background-color:#FF0000;">
<p>这个页面是红色的</p>
</body>
方法2:内部样式表
<style type="text/css">
body{background-color:#FF0000;}
</style>
<body>
<p>这个页面是红色的</p>
</body>
方法3:外部样式表(常用)
外部样式表就是一个扩展名为css的文本文件,例如style.css,通常被存放于名为style的目录中
style.css文件内容如下:
body {
background-color:#FF0000;
}
在一个HTML文档要引用CSS文件(style.css)
<link rel="stylesheet" type="text/css" href="style/style.css" />
<body>
<p>这个页面是红色的</p>
</body>
三、颜色与背景
主要属性:
color, 用于指定元素前景色,如 h1 { color: #ff00000;}, h1 { color: rgb(255,0,0)}
background-color, 用于指定元素背景色,如 h1 { color: #990000; background-color: #00ff00;}
background-image, 用于设置背景图像,如 body { background-image: url("butterfly.gif"); }
background-repeat, 用于控制平铺的
background-repeat: repeat-x 图像横向平铺
background-repeat: repeat-y 图像纵向平铺
background-repeat: repeat 图像横向和纵向都平铺(默认)
background-repeat: nopeat 图像不平铺
例如,为了避免平铺背景图像,代码应如下:
body{
background-color: #FFCC66;
background-image: url("butterfly.gif")
background-repeat: no-repeat;
}
background是上述所有与背景有关的属性的缩写用法,比如
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
如果使用background属性的话,实现同样的效果只需要一行即可。
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
各个值应按下列次序来写
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
如果省略某个属性不写出来,那么将自动为它取缺省值。
四、字体
主要属性
font-family, 设置一组按优先级排序的字体列表,如果该列表中的第一个字体未在访问者计算机上安装,那么就尝试列表中的下一个字体,依此类推,直到列表中的某个字体是已安装的。
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New roman", serif;}
font-style, 表示字体样式,有如下几个选项
normal(正常)、italic(斜体)、oblique(倾斜)
h2 {font-family:"Times New roman", serif; font-style: italic;}
font-size, 表示字体大小,可通过多个不同单位(px,pt,百分比以及em)来设置,
h3 {font-size: 120%;}
p {font-size: 12em;}
上面4种单位有本质区别。'px'和'pt'将字体设置为固定大小,而'%'和'em'允许页面浏览者自行调整字体显示尺寸
font是上述有关字体的CSS属性的缩写,比如下面四行应用于p元素的代码
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
如果使用font属性的话,上述四行代码可简化为
p {
font: italic bold 30px arial, sans-serif;
}
font属性的值应按以下次序书写
font-style | font-variant | font-weight | font-size | font-family
五、文本
主要属性
text-align, 文本对齐,包含了 left(左对齐)、right(右对齐)、center(居中)和justify(两端对齐)
td {
text-align: center;
}
p {
text-align: justify;
}
text-decoration, 文本装饰,包括下划线、删除线、上划线等
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through
}
letter-spacing, 字体间距,可以使用像素进行表示属性值
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
text-transform, 用于控制文本的大小写,包括首字母大写(capitalize)、全部大写(uppercase)、全部小写(lowercase)或none
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
六、链接
前面的属性都可以应用到链接上(如修改颜色、字体和添加下划线等),但CSS允许根据链接是未访问的,已访问的、活动的、是否有鼠标悬停等分别定义不同的属性,这需要通过伪类(pseudo-class)来控制这些效果。
a {
color: blue;
}
a:link {
color: blue;
}
a: visited {
color: red;
}
未访问过的链接和已访问过的链接分别使用a:link和a:visited。活动的链接对应a:active,而有鼠标悬停的链接对应的伪类是a:hover,例如需要当鼠标光标移动到链接上时将链接显示为橙色斜体
a:hover {
color: orange;
font-style: italic;
}
如果还需要特殊效果,还可以修改字体间距letter-spacing或字体增粗等。
有些时候不需要链接的下划线,那么可以将text-decoration属性设置为none就行了
a:link {
color:blue;
text-decoration:none;
}
七、边框
设置对象的边框样式
border-width, 长度值(不可为负值)
border-style, 边框样式
none: 无边框,默认值
solid: 实线边框
double: 双线边框
border-color, 指定颜色
border,可以用于简写,顺序是 border-width | border-style | border-color
border-collapse 有两个取值
border-collapse: separate为边框独立(默认)
border-collapse: collapse为相邻边被合并
table {
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
border-collapse: collapse;
}
八、ID选择器
id选择器可以为标有特定id的HTML元素指定的样式,以"#"来定义
下面两个id选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色
#red {color: red;}
#green {color: green;}
<p id="red">这个段落是红色的。</p>
<p id="green">这个段落是绿色的。</p>
ID选择器只能在每个HTML文档中出现一次。
九、类选择器
类选择器以一个点号显示:
.center {text-align: center}
上述例子作用于所有拥有center类的HTML(文本居中效果)
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
类名的一个字符不能使用数字,可能会在除IE外的浏览器中不起作用。
ID选择器和类选择器的区别
由于ID只能用来定义单一元素,因此如果需要程序、JS控制的东西,需要用id定义;重复使用的元素、类别,用class定义。
十、CSS总结
CSS涉及的内容繁多,最好对照参考文档来进行使用。
CSS3.0 CHM中文版:http://pan.baidu.com/s/1tgwj0