CSS 属性总结
概述部分
控制页面：1、行内样式。2、内嵌式。3、链接式。4、导入样式。
CSS注释：使用 /* 注释内容…… */ 进行注释，可以单行，也可以多行。
(html注释：使用<!-- 注释内容 --> 与CSS注释不要搞混。)
语法部分
1、标记选择器（所有标签，如<p> <span> <img> ）。
2、类别选择器（以“点”开头，如 .class .special .one）。可以class=”one two”。
3、ID 选择器（以 # 开头，如 #special #one 一个ID选择器只能用于一个标签）。
选择器集体声明：p,span,li,a,body,h1{……;} 每个标记使用逗号分隔。
选择器的嵌套：li p b{……;}、p .class b{……;}、p #one{……;}。使用空格分开。
CSS样式控制总结记录
文字样式
字体：font-family
文字大小：font-size
文字颜射：color
文字粗细：font-weight
样式斜体：font-style:italic
文字下划线：text-decoration:underline
文字间距：letter-spacing
行间距：line-height
字母大小写：text-transform
段落水平对齐：text-align
段落垂直对齐：vertical-align
竖排版文字：writing-mode：tb-rl
图片样式
图片边框：border-style ，border-color ，border-width 。
border综合：border：solid #000 5px;
图片缩放：width height 控制
图片对齐方式：text-align vertical-align
网页背景
背景颜色：background-color
背景图片：background-image:url(123.jpg)
背景图片重复：background-repeat-x/y
背景图片定位：background-position:bottom right /30% 50% /200px 100px 。
固定背景图片：background-attachment:fixed
Background综合：background：#06f url(bg123.jpg) no-repeat fixed 5px 10px;
CSS表单
表单：<form> </form>
文本框：<input type=”text”> 。如，输入用户名和密码。
按钮：<input type=”button”> 。如，确认按钮。
提交按钮：<input type=”submit”> 。如，提交按钮。
单选项：<input type=”radio”> 。单个选择，如，性别选择。圆形点选。
复选框：<input type=”checkbox”> 。多项选择，如，爱好。方形勾选。
输入框：<textarea> </texarea> 。大量文本输入，如评论。
下拉菜单：<select><option> </option></select> 。提供多种选项。
超链接特效
标签：<a> </a>
伪类别：a:link 超链接的普通样式，即正常浏览器状态的样式。a:visited 被点击过的超链接样式。a:hover 鼠标指针经过超链接上时的样式。
不单是文字的效果，各种背景、边框和排版的效果都可以随意加入到超链接的几个伪类别属性中。
Firefox浏览器不支持直接设置<a>标记的高度和宽度。
鼠标特效：cursor：pointer; 鼠标设置为被激活状态。
项目列表
<ol></ol>
<ul><li></li></ul>
列表的符号：list-style-type:disc; ul，li通用属性。
图片符号：list-style-image:url(123.jpg); 各浏览器显示不一致，不常用。如果希望项目列表采用图片符号，建议 ul 的 list-style-type 设置为 none ，然后通过设置 li 标签的 background 背景图片属性来实现。
项目列表很大的一个用处是制作各种菜单和网页导航条。关键的几步设置如下：设置 ul 标签 list-style-type 为none ；设置 li标签属性float:left 水平显示各个项目；在配合使用 a 标签， a 标签属性display:block 区块显示。
Div 和 span
<div> (division) 区块容器标记。
<div> 是一个块级(block level)元素。它包围的元素会自动换行。
<span> 是一个行内元素(inline element)，在它的前后不会换行。它没有结构上的意义。
盒子模型
盒子模型示意图
盒子模型：是由 content 、border 、padding 、margin 组成的。
在浏览器中，width 和 height 的值都指的是 width + padding 或 height + padding 。
border：用于分离元素，border 会占据一定空间。
border 三个属性：color(颜色)、 width(粗细)、 style(样式)。
例：<canvas style=”border:solid #06f 5px;”></canvas>
特定情况下，给元素设定 background-color 背景色时，IE的作用域是 content + padding 。而 Firefox 的作用域是 content + padding + border 。
padding：用于控制 content 和 border 之间的距离。
在浏览器中，如果使用了 width height 指定了父块的宽和高，由于 width height 的值中包含padding ，那么内容元素 content 会受到padding的挤压。
margin：元素与元素之间的距离。
直观上讲，margin 用于控制块与块之间的距离。那么两个块之间的距离怎么计算呢。分为三种情况：
1、两个行内元素的距离为 margin-right + margin-left 。
2、两个块级元素(分行)之间的距离为 margin-top 和 margin-bottom 当中较大的一个。
3、父子关系：比较复杂，须认真研究。
CSS元素定位
float ：三个值 left 、right 、none 。
position ：四个值 absolute 、relative 、static 、fixed 。
1、absolute ：绝对位置，子块脱离父块。配合 top right bottom left 四个属性使用。
2、relative ：子块相对于父块来定位的。配合 top right bottom left 四个属性使用。
3、static ：默认值无变化。
4、fixed ：固定基本不用。
z-index ：空间位置，用于调整定位时重叠块的上下位置。值大的页面位于值小的的页面上方。