您的位置:首页 > Web前端 > CSS

css基础语法

2009-03-24 16:36 232 查看
1.插入外部样式表

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

2.内部样式表
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>

3.多重样式
如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。

例如,外部样式表拥有针对 h3 选择器的三个属性:

h3 {
color: red;
text-align: left;
font-size: 8pt;
}而内部样式表拥有针对 h3 选择器的两个属性:

h3 {
text-align: right;
font-size: 20pt;
}假如拥有内部样式表的这个页面同时与外部样式表链接,那么 h3 得到的样式是:

color: red;
text-align: right;
font-size: 20pt;即颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代。

4.派生
<html>
<head>
<style type="text/css">
body {background-color: yellow}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 30px;}
</style>
</head>
<body>
<p>这是段落</p>
<p class="no2">这个段落设置了内边距。</p>
</body>
</html>

5.id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义。

下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:

#red {color:red;}
#green {color:green;}
下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色。

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: