CSS 链接
链接样式
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。特别的链接，可以有不同的样式，这取决于他们是什么状态。这四个链接状态是：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
当设置为若干链路状态的样式，也有一些顺序规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
常见的链接样式
根据上述链接的颜色变化的例子，看它是在什么状态。
让我们通过一些其他常见的方式转到链接样式：
文本修饰
text-decoration 属性主要用于删除链接中的下划线：
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
CSS 列表
CSS列表属性作用如下：
设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像
列表
在HTML中，有两种类型的列表：
无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 - 列表项的标记有数字或字母
使用CSS，可以列出进一步的样式，并可用图像作列表项标记。
不同的列表项标记
list-style-type属性指定列表项标记的类型是：
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
作为列表项标记的图像
要指定列表项标记的图像，使用列表样式图像属性：
ul
{
list-style-image: url('sqpurple.gif');
}
浏览器兼容性解决方案
同样在所有的浏览器，下面的例子会显示的图像标记：
ul{ list-style-type: none;
padding: 0px;
margin: 0px;}
ul li{ background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px; }
例子解释：
ul:
设置列表类型为没有列表项标记
设置填充和边距0px（浏览器兼容性）
ul中所有li:
设置图像的URL，并设置它只显示一次（无重复）
您需要的定位图像位置（左0px和上下5px）
用padding-left属性把文本置于列表中
列表 -简写属性
在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。
为列表使用简写属性，列表样式属性设置如下：
ul{ list-style: square url("sqpurple.gif");}
可以按顺序设置如下属性：
list-style-type
list-style-position (有关说明，请参见下面的CSS属性表)
list-style-image
如果上述值丢失一个，其余仍在指定的顺序，就没关系。
CSS 表格
表格 <table>
表格的行 <tr></tr>
表格的列 <td></td>
表格的表头列 <th></th> （将tr中的td，替换为th，表示本行的表头）
【table的常用属性】
1、Border： 表格的边框属性；当使用border='1'设置边框时，会所有的td以及table上嵌套边框，当border加大时，只有table最外层框线加粗，td单元格上的框线不会变化。
2、Cellspacing：单元格与单元格之间的间隙。当cellspacomg=0时，单元格之间间隙为0，但边框线并没有合并（边框线还是两条线的宽度）
[合并边框的写法] "style='border-collapse:collapse；"使用边框合并后，无需设置Cellspacing
3、Cellpadding：段远隔内编剧，段远隔中文字与单元格边框之间的距离
4、Width/Height：表格的宽度高度
5、Align: 设置表格在父容其中的对齐方式；left/居左 center/居中 right/居右
【注意】當表格使用align屬性石，相當于使表格浮動，可能會導致表格后面的元素受表格浮動影像，导致布局错乱。
6、Bgcolor： 背景色
Background： 背景图片，后接相对路径。当背景图和背景色同时生效时，背景图覆盖背景色
Bordercolor： 边框颜色
[tr td 属性标签]
当表格属性与行列属性冲突时以行列属性为主
属性设置优先级：td>tr>table
① Width、Height：给单个的行、列，设置宽度高度；
② bgcolor：背景色
③ Align：设置单元格中的文字，在单元格中的水平对其方式 left/ceter/right
④ Valign：设置单元格中的文字，在单元格中的水平对其方式 top/centr/bottom
⑤ Nowrap：nowrap=nowrap 设置单元格文字行末不断行。
表格边框
指定CSS表格边框，使用border属性。
下面的例子指定了一个表格的Th和TD元素的黑色边框：
实例
table, th, td
{ border: 1px solid black;
}
折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：
实例
table{ border-collapse:collapse;}
table,th, td{ border: 1px solid black;}
CSS 盒子模型
CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
CSS 边框
边框样式
边框样式属性指定要显示什么样的边界。
border-style属性用来定义边框的样式
border-style属性可以有1-4个值：
border-style:dotted solid double dashed;
上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed
border-style:dotted solid double;
上边框是 dotted
左、右边框是 solid
底边框是 double
border-style:dotted solid;
上、底边框是 dotted
右、左边框是 solid
border-style:dotted;
四面边框是 dotted
边框-简写属性
上面的例子用了很多属性来设置边框。
你也可以在一个属性中设置边框。
你可以在"border"属性中设置：
border-width
border-style (required)
border-color
实例
border:5px solid red;
CSS 轮廓（outline）
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。
主要有：outline-color,outline-style,outline-width属性
CSS margin(外边距)
margin
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
可能的值
auto 设置浏览器边距。 这样做的结果会依赖于浏览器
length 定义一个固定的margin（使用像素，pt，em等）
% 定义一个使用百分比的边距
Margin - 单边外边距属性
在CSS中，它可以指定不同的侧面不同的边距：
实例
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
Margin - 简写属性
为了缩短代码，有可能使用一个属性中margin指定的所有边距属性。这就是所谓的简写属性。
所有边距属性的简写属性是 margin :
margin:100px 50px;
margin属性可以有一到四个值。
margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px
margin:25px 50px 75px;
上边距为25px
左右边距为50px
下边距为75px
margin:25px 50px;
上下边距为25px
左右边距为50px
margin:25px;
所有的4个边距都是25px
CSS padding（填充）
当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。
可能的值
length 定义一个固定的填充(像素, pt, em,等)
% 使用百分比值定义一个填充
填充- 单边内边距属性
在CSS中，它可以指定不同的侧面不同的填充：
实例
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
上内边距是 25px
右内边距是 50px
下内边距是 25px
左内边距是 50px
填充 - 简写属性
为了缩短代码，它可以在一个属性中指定的所有填充属性。这就是所谓的简写属性。所有的填充属性的简写属性是 padding ：
padding:25px 50px;
Padding属性，可以有一到四个值。
padding:25px 50px 75px 100px;
上填充为25px
右填充为50px
下填充为75px
左填充为100px
padding:25px 50px 75px;
上填充为25px
左右填充为50px
下填充为75px
padding:25px 50px;
上下填充为25px
左右填充为50px
padding:25px;
所有的填充都是25px
网友评论