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。