1.id 选择器
- #id1{
- backgroud-color:
- }
- <div id="id1">1</div>
2. 类选择器
- .c1{
- backgroud-color:
- }
- <div class="c1">1</div>
3. 标签选择器
- div{
- backgroud-color:
- }
- <div>1</div>
4. 层级选择器
- div div{#div 下的 div
- backgroud-color:
- }
- <div>
- <div>1</div>
- </div>
5. 组合选择器
- .c1,.c2,.3{
- backgroud-color:
- }
- <div class="c1">1</div>
- <div class="c2">2</div>
- <div class="c3">3</div>
6. 属性选择器
- .c1[type="text]{
- backgroud-color:
- }
- <input type="text" />
- <input type="password"/>
7. 属性
7.1 边框
- border{
- 1px solid #ff6600 #dotted
- }
7.2. 背景
- 7.3.float
- {
- float:left;
- float:right;
- clear:both;# 清除浮动
- }
- 7.4.display
- {
- # 块级标签和行内标签切换
- display:inline;# 转为行内
- display:block;# 转为块级
- # 行内标签无法设置宽度和高度, margin,padding
- display:inline-block;
- display:none;# 标签消失
- }
- 7.5.padding margin
- {
margin: 外边距
padding: 内边距
- }
- 7.6.text-align
- # 文字对齐
- {
- text-align:center;
- }
- 7.7 height,width,line-height
- {
- height:100px;
- width:20%;
- line-height:20px;
- }
- 7.8.font
- {
- font-size:20px;
- font-weight:700;
- }
8. 定义整体宽度
- body{
- width:980px;
- margin:0 auto;
- }
来源: http://www.bubuko.com/infodetail-2690914.html