CSS使用介绍 id选择器 class选择器 派生选择器

一、CSS使用介绍

1、CSS，Cascading Style Sheets，是网页表现与内容分离的一种样式设计语言；

2、CSS注释以/*开始, 以*/结束，可以出现在任何位置；

3、渲染会应用所有匹配样式，所以后面样式优先级高；

4、id和class选择器必须显示应用，派生选择器可以自动应用；

常用属性：

width，宽度

height，高度

background，背景颜色或图片

font-size，字体大小

font-weight，字体粗细

text-align，对齐方式

二、id选择器

一个id选择器原则上只使用一次，多次使用就不能通过DOM的getElementById获取节点：

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

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

三、class选择器

通用class选择器：

<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>

限定标签的class选择器：

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

四、派生选择器

1、派生选择器通过上下文应用或规避某项规则；

2、id和class都可以用作派生选择器；

3、html标签也可以用作派生选择器；

派生选择器示例：

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