CSS使用介绍 id选择器 class选择器 派生选择器
- 2016-04-06 21:42:00
- admin
- 原创 1936
一、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>