html（2）之CSS

        级联样式表(Cascading Style Sheet)简称“CSS”，通常又称为“风格样式表(Style Sheet)”，它是用来进行网页风格设计的。

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

前面h1是设置的选择器，后面跟着的key：value是一条声明。多条声明之间用冒号隔开就可以了，跟android在给view设置属性时差不多，少了命名空间。这样在style标签里面就可以为一级标题设置样式了，但是要是我想给指定的某个标签设置该咋办呢？这时候就用到了id和class属性。在引用我们设置的样式的时候id和class引用的方式不同，#id{} 这样可以设置指定id标签的式。.class{}这样可以设置class属性的标签。在id定义的时候不要以数字开头这样在火狐浏览器中是不起作用的。

      为html设置样式的时候有三种，我们上面说的这一种叫做内部样式，这种样式是设置在html的head标签中的，第二种样式叫外部样式，这种样式要求我们创建一个.css为后缀名的文件，然后在head中通过link标签引入，引入方式是这样的 <link rel="stylesheet" type="text/css" href="css/css.css"> 在href中指定html文件相对于css文件的相对路径。第三种样式叫做内联样式，内联样式的意思是在为指定标签通过style属性例如： <p style="color:red;font-size:19px"> </p> 。有时候三种样式会有重复，这个时候也叫做重叠样式。样式的定义原则是由内到外，去重取并。这是啥意思呢 ？ 就是先取内联样式中有的属性然后在取内部样式有的属性，最后去外部样式中的属性。最后取三者的并集就是标签的最终属性了。

     那么知道css样式是如何引入到html中的话剩下的就是为标签设置属性了，那么下面我就总结下常用的标签属性。因为本人是开发android的毕竟html常用属性不是特别熟悉。因此以下的属性是参考本人开发android经验，网上资料，同事分享所得。

所有CSS文本属性。

属性	描述
color	设置文本颜色
direction	设置文本方向。
letter-spacing	设置字符间距
line-height	设置行高
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母
unicode-bidi	设置或返回文本是否被重写
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

CSS背景属性。

Property	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

a:link {background-color:#B2FF99;}   //这是链接显示颜色
a:visited {background-color:#FFFF85;}//鼠标将要移动到
a:hover {background-color:#FF704D;}//鼠标在连接上移动的颜色
a:active {background-color:#FF704D;}//点击鼠标后的颜色

CSS列表属性

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图象设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

CSS尺寸属性

属性	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

CSS定位属性

属性	说明	值	CSS
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。	auto length % inherit	2
clip	剪辑一个绝对定位的元素	shape auto inherit	2
cursor	显示光标移动到指定的类型	url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help	2
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。	auto length % inherit	2
overflow	设置当元素的内容溢出其区域时发生的事情。	auto hidden scroll visible inherit	2
overflow-y	指定如何处理顶部/底部边缘的内容溢出元素的内容区域	auto hidden scroll visible no-display no-content	2
overflow-x	指定如何处理右边/左边边缘的内容溢出元素的内容区域	auto hidden scroll visible no-display no-content	2
position	指定元素的定位类型	absolute fixed relative static inherit	2
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。	auto length % inherit	2
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。	auto length % inherit	2
z-index	设置元素的堆叠顺序	number auto inherit	2

通过position可以设置区块的位置，定位方式有fixed定位、relative定位、absolut定位。fixed定位一但设置好位置，当

前位置就不会随着页面的滑动而改变，relative定位和android中的相对布局相似，但是html中的相对位置是相对的区块的正

常位置的变化。absolue定位可以讲区块放到页面的任意位置。对于位置来说，还有一个float属性也和位置相关，设置float

可以将图片设置为左浮动或者右浮动。

CSS 盒子模型(Box Model)

从这张图我们可以看出，网页的盒子模型和android手机开发是相似的 ，在android定义布局文件是也会有一个最外层的父容器，通常指定最外层父容器的宽和高都是匹配

手机屏幕的，手机屏幕内又分为margin，pading，content 。而网页布局中只是在margin下有多了一个border。在border这里我们还可以设置一个outline属性，添加一个外部轮廓。

在我们定义css样式的时候，有时候标题、段落可以用一类属性，这里我说的是一类而不是一个。这个时候我们就可以把用相同属性的修饰的标签分组。分组的写法也很简单就是在选择器之间用逗号隔开就好了 。在html中经常会用到div这种区块标签。区块之间可能还有段落。这个时候有三种方式来设置区块间的段落样式。第一种，指定p的id，第二种先找到指定区块设置，格式是这样的： div.div p{color: yellow; }，这个时候要是有重复样式的话，还是遵照由内到外，去重取并的原则。最后一种是通过子元素来设置属性，div.div p中 div是class p是div的子元素，因此可以div>p 这种写法设置。类似这种设置属性的还有相邻兄弟选择，普通相邻兄弟选择。就是分别设置不是本标签包含的第一个元素和其他的元素属性。写法是将>变为+和~即可。但是本人觉得这样设置属性着实不爽，故也没咋用。

CSS 伪类(Pseudo-classes)

---

CSS伪类是用来添加一些选择器的特殊效果。

---

语法

伪类的语法：

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

selector.class:pseudo-class {property:value;}

对于css的伪类，我觉得可以把java中的类来理解，例如java中我们定义一个person类，这个person就是我们的选择器，而person中的男人或者女人就算作伪类，选择person中的男人对其设置属性就是伪类的语法了。这里理解可能比较牵强，但是个人怎么好记就怎么来吧，编程是一门艺术，每个人对于艺术的理解定是不相同的。

以上简单总结了css的基本语法和使用，以后会不断补充添加的。