CSS id选择器 class选择器 派生选择器 常用属性
- 2016-04-06 21:42:00
- admin
- 原创 1867
一、什么是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。