CSS id选择器 class选择器 派生选择器 常用属性

2016-04-06 21:42:00
admin
原创 1811
摘要:CSS id选择器 class选择器 派生选择器 常用属性

一、什么是CSS?

CSS全称是Cascading Style Sheets,CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。

如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 或 "class"选择器。


二、基本语法

1 CSS注释以 "/*" 开始, 以 "*/" 结束,可以出现在任何位置。

2 派生选择器用于限定css使用的精确范围,更精确的范围优先级更高,精确范围一样时后面的css样式优先级更高。

3 lable.class和派生选择器的关系是:lable.class当前标签必须使用class,而派生选择器只规定先后关系。

4 一般使用class来用于显著。


三、id选择器

注意:一个id选择器原则上只使用一次(多次也没问题),如果多次就不能通过DOM的getElementById获取节点。

示例1:

<style type="text/css">
#intro {font-weight:bold;}
</style>

<p id="intro">This is a paragraph of introduction.</p>


四、class选择器

示例1:

<style type="text/css">
.center {text-align: center}
</style>
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>


示例2:基于特定html标签的class

<style type="text/css">
p.center {text-align: center}
</style>
<p class="center">
This paragraph will also be center-aligned.
</p>


五、派生选择器(css上下文)

1、id和class都可以用作派生选择器。

2、基于html元素也可以用作派生选择器。

3、渲染是最终结果,所以后面的样式优先级高。

示例1:

<style type="text/css">
strong {
color: red;
}
h2 {
color: red;
}
span strong {
color: green;
}
h2 strong {
color: blue;
}
</style>
<p>The strongly emphasized word in this paragraph is <strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is <strong>blue</strong>.</h2>
<span><h2>The strongly emphasized word in this subhead is <strong>blue</strong>.</h2></span>


六、常用属性

width 宽度

height 高度

background 背景颜色或图片

font-size 字体大小

font-weight 字体粗细

text-align 文本对齐方式

float 可选值left、right、none(默认值),一般和div一起使用,实现一行显示多个div。

发表评论
评论通过审核之后才会显示。