首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

css懂得

2012-06-28 
css了解1.基本语法 CSS的定义是由三个部分构成:选择符(selector),属性(properties)和属性的取值(value)。

css了解
1.基本语法

CSS的定义是由三个部分构成:选择符(selector),属性(properties)和属性的取值(value)。
基本格式如下:
selector {property: value}
(选择符 {属性:值})

选择符是可以是多种形式,一般是你要定义样式的HTML标记,例如BODY、P、TABLE……,你可以通过此方法定义它的属性和值,属性和值要用冒号隔开:
body {color: black}

选择符body是指页面主体部分,color是控制文字颜色的属性,black是颜色的值,此例的效果是使页面中的文字为黑色。

如果属性的值是多个单词组成,必须在值上加引号,比如字体的名称经常是几个单词的组合:
p {font-family: "sans serif"}
(定义段落字体为sans serif)

如果需要对一个选择符指定多个属性时,我们使用分号将所有的属性和值分开:
p {text-align: center; color: red}
(段落居中排列;并且段落中的文字为红色)

为了使你定义的样式表方便阅读,你可以采用分行的书写格式:
p{text-align: center;
color: black;
font-family: arial}
(段落排列居中,段落中文字为黑色,字体是arial)

2.选择符组

你可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义:
h1, h2, h3, h4, h5, h6 { color: green }
(这个组里包括所有的标题元素,每个标题元素的文字都为绿色)
p, table{ font-size: 9pt }
(段落和表格里的文字尺寸为9号字)
效果完全等效于:
p { font-size: 9pt }
table { font-size: 9pt }

3.类选择符

用类选择符你能够把相同的元素分类定义不同的样式,定义类选择符时,在自定类的名称前面加一个点号。假如你想要两个不同的段落,一个段落向右对齐,一个段落居中,你可以先定义两个类:
p.right {text-align: right}
p.center {text-align: center}

然后用不在不同的段落里,只要在HTML标记里加入你定义的class参数:
<p 开头,以"*/" 结尾,如下:
/* 定义段落样式表 */
p{
text-align: center; /* 文本居中排列 */
color: black; /* 文字为黑色 */
font-family: arial /* 字体为arial */}



和 id 一样,class 也可被用作派生选择器:

.fancy td {
color: #f60;
background: #666;
}
在上面这个例子中,类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。(名为 fancy 的更大的元素可能是一个表格或者一个 div)

元素也可以基于它们的类而被选择:

td.fancy {
color: #f60;
background: #666;
}
在上面的例子中,类名为 fancy 的表格单元将是带有灰色背景的橙色。

<td class="fancy">你可以将类 fancy 分配给任何一个表格元素任意多的次数。那些以 fancy 标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为 fancy 的类的单元格不会受这条规则的影响。还有一点值得注意,class 为 fancy 的段落也不会是带有灰色背景的橙色,当然,任何其他被标注为 fancy 的元素也不会受这条规则的影响。这都是由于我们书写这条规则的方式,这个效果被限制于被标注为 fancy 的表格单元(即使用 td 元素来选择 fancy 类)。

注意:

层叠样式表一般位于HTML文件的头部,即<HEAD>与</HEAD>标签内,并且以<STYLE>开始,以</STYLE>结束。如:<STYLE TYPE=”text/css”> (不同项目间用;隔开)
H1{font-size:x-large;color:red}
H2{font-size:large;color:blue}
</STYLE>
(其中,<STYLE>和</STYLE>之间的是样式的内容。TYPE一项表示使用的是Text中的层叠样式表书写的代码。{}前面的是样式的类型和名称,{}中的是样式的属性。)

2、在BODY中的实现(不推荐使用)
3、在文件外的调用(可以单独成立文件)
如:<link rel=”stylesheet” href=”style.css” type=”text/css”>
4、a:link 设定正常状态下链接文字的样式
a:active 设定鼠标单击时链接的外观
a:visited 设定访问过的链接外观
a:hover 设定鼠标放置在链接文字上时文字的外观

热点排行