





























相关文章:
HTML经典笔记
●为什么用CSS;
●CSS分类:按其位置可以分成三种;
●CSS注释;
●定义链接的样式
●......
●
●为什么用CSS:
·一组样式可以调用在多个对象上
●CSS分类:按其位置可以分成三种
<p style="color: sienna;margin-left: 20px;">
这是一个段落
</p>
<!--这个段落颜色为土黄,左边距为20象素-->
<head>
……
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
……
</head>
<head>
……
<link href="mystyle.css" rel="stylesheet" type="text/css" media="all">
……
</head>
一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时,所有页面的样式都随之而改变。在制作大量相同样式页面的网站时,非常有用,不仅减少了重复的工作量,而且有利于以后的修改、编辑,浏览时也减少了重复下载代码。
●CSS注释
/* 定义段落样式表 */
p
{
text-align: center; /* 文本居中排列 */
color: black; /* 文字为黑色 */
font-family: arial /* 字体为arial */
}
CSS的定义是由三个部分构成:选择符(selector),属性(properties)和属性的取值(value)。
基本格式如下:
selector {property: value} /*(选择符 {属性:值}) */
body {color: black}
p {font-family: "sans serif"} /*(定义段落字体为sans serif)*/
p
{
text-align: center;
color: black;
font-family: arial
} /*(段落排列居中,段落中文字为黑色,字体是arial)*/
你可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义:
h1, h2, h3, h4, h5, h6 { color: green } /*(这个组里包括所有的标题元素,每个标题元素的文字都为绿色)*/
p, table
{ font-size: 9pt } /*(段落和表格里的文字尺寸为9号字)*/ /*效果完全等效于:*/p
{ font-size: 9pt }用类选择符你能够把相同的元素分类定义不同的样式,定义类选择符时,在自定类的名称前面加一个点号。假如你想要两个不同的段落,一个段落向右对齐,一个段落居中,你可以先定义两个类:
p.right {text-align: right}
p.center {text-align: center}
<p class="right"> 这个段落向右对齐的
</p> <p class="center">
这个段落是居中排列的
</p> <p class="right"> 这个段落向右对齐的
</p> <p class="center">
这个段落是居中排列的
</p>
类选择符还有一种用法,在选择符中省略HTML标记名,这样可以把几个不同的元素定义成相同的样式:
.center {text-align: center}
<h1 class="center">
这个标题是居中排列的
</h1>
<p class="center">
这个段落也是居中排列的
</p>
注意:这种省略HTML标记的类选择符是我们经后最常用的CSS方法,使用这种方法,我们可以很方便的在任意元素上套用预先定义好的类样式。
4. ID选择符
在HTML页面中ID参数指定了某个单一元素,ID选择符是用来对这个单一元素定义单独的样式。
ID选择符的应用和类选择符类似,只要把CLASS换成ID即可。将上例中类用ID替代:
<p id="intro">
这个段落向右对齐
</p>
定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同,定义ID选择符的属性也有两种方法。下面这个例子,ID属性将匹配所有id="intro"的元素:
#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}
(字体尺寸为默认尺寸的110%;粗体;蓝色;背景颜色透明)
下面这个例子,ID属性只匹配id="intro"的段落元素:
p#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}
注意:ID选择符局限性很大,只能单独定义某个元素的样式,一般只在特殊情况下使用。
●定义链接的样式
a:link{font-size : 18pt ;text-decoration : none ;color : blue ;}
a:visited {font-size : 18pt;text-decoration : none ;color : brown ;}
a:hover {font-size : 24pt ;text-decoration : underline ;color : red;}
a:active {font-size : 24pt ;text-decoration : none ;color : green ;}
此内容由惯性聚合(RSS阅读器)自动聚合整理,仅供阅读参考。 原文来自 — 版权归原作者所有。