本章内容
- CSS选择器
- CSS常用属性
概述
css是英文Cascadins Style Sheets的缩写，称为层叠样式表，用于对页面进化美化。
存在方式有三种：元素内联、页面嵌入和外部引入，比较方式的优缺点。
语法：style="key1:value1;key2:value2;"
- 在标签中使用 style="xx:xxx;"
- 在页面中嵌入< style type="text/css"> </style>块
- 引入外部css文件
必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。
一、CSS选择器
CSS选择器有很多，这里介绍几个比较常用的。
1.标签选择器
通过标签来设置HTML样式，例如:
div{ background-color:red;}
<div></div>
为<div>标签设置红色背景
2.class选择器
通过class来设置HTML样式
看例子：
.bd{ background-color:red;}
<div class="bd" > </div>
p.bd{ color:red;}
<div class="bd" > </div>
语法：类名前加" . "。看上面的例子，第一个是为所有的class="bd"，全部设置红色背景；第二个是为所有<p>标签中的class="bd"，全部设置红色背景。
3.id选择器
通过id来进行设置HTML样式
#idselect { background-color:red}
<div id="idselect" > </div>
语法：#xxx{}
4.关联选择器
#idselect p{ background-color:red;}
<div id="idselect" > <p></p> </div>
这个选择器呢，应该是先找id="idselect"，然后在找下面的<p>标签，为<p>标签设置红色背景
5.组合选择器
input,div,p{ background-color:red;}
同时为input、div、p标签全都设置红色背景
6.属性选择器
input[type="text"]{ 100px;height:200px;}
为input标签中的text属性设置宽度100px，高度200px
二、CSS常用属性
1.background
- background-color
<div style="background-color:red;" >background-color</div>
- background-image
<div style="background-image;height:900px;900px;" >background-image</div>
我们发现因为1.jpg是固定大小300px X 300px，所以它会重复显示
- background-repeat
进行平铺
repeat-x和repeat-y分别导致图像只在水平和垂直方向上重复，no-repeat则不允许图像在任何方向上平铺。
<div style="background-image;height:900px;900px;background-repeat：no-repeat" >background-repeat</div>
- background-position
用于背景定位
<div style="background-image;height:900px;900px;background-repeat：no-repeat;background-position:center;" >background-position</div>
2.border
设置所有边框属性
<div style="border:1px solid red;height:10px;"></div>
<br/>
<div style="border:1px dotted red;height:10px;"></div>
<br/>
<div style="border:1px dashed red;height:10px;"></div>
<br/>
3.margin
设置外边距
<div style="border:1px solid red;height:70px;">
<div style="background-color:green;height:50px;margin-top:20px;"></div>
</div>
外边距相当于整体移动而不会改变整体的大小，也就是不会改变自身的大小
4.padding
设置内边距
<div style="border:1px solid red;height:70px;">
<div style="height:50px;padding-top:20px;"></div>
</div>
5.display
display属性规定元素应该生成的框的类型
<div style="display:none;background-color:#dddddd;">none</div>
<div style="display:block;background-color:#dddddd;">block</div>
<div style="display:inline;background-color:#dddddd;">inline</div>
值为none，此元素不会被显示。
值为block，此元素将显示为块级元素，此元素前后会带有换行符。
值为inline，默认。此元素会被显示为内联元素，元素前后没有换行符。
6.cursor
cursor属性规定要显示的光标的类型（形状）
- cursor值
<span style="cursor:pointer;">pointer</span>
<span style="cursor:help;">help</span>
<span style="cursor:wait;">wait</span>
<span style="cursor:move;">move</span>
<span style="cursor:crosshair;">crosshair</span>
效果分别为：
pointer：光标呈现指示链接的指针（一只手）
help：此光标指示可用的帮助（通常是一个问号或一个气球）
wait：此光标指示程序正忙（通常是一只表或沙漏）
move：此光标指示某对象可被移动
crosshair：光标呈现为十字线
- 伪造超链接
<span style="cursor:pointer;color:bule;">pointer</span>
- 自定义（一般不用）
<span style="cursor:url(image/favicon.ico),auto;">mine</span>
7.float
浮动问题还是直接看吧，点这里-->
8.position
position属性规定元素的定位类型
可能的值：
absolute：生成绝对定位的元素，相对与static定位以外的第一个父元素进行定位。元素的位置通过"left","top","right","bottom"
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过"left","top","right","bottom"
relative：生成相对定位的元素，相对于其正常位置进行定位。
static：默认值。没有定位，元素出现在正常的流中（忽略top、left、right、bottom或者z-index声明）
inherit：规定应该从父元素继承position属性的值
更多详细资料：http://www.cnblogs.com/canuseethat/archive/2010/09/16/1827804.html
9.透明度
使用opacity来设定透明度，从0.0到1。
更多点这里 -->
注：本文仅为学习笔记、摘要。
CSS教程：http://www.w3school.com.cn/css/index.asp