05_CSS扫盲(接上次)

边框

• border-style 用于设置元素边框的样式

可分别设置四个方向的边框，例如左边边框: border-left-style…

属性值
值		描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

• border-width 简写属性，用于为元素的所有边框设置宽度

可分别设置四个方向的边框，例如左边边框: border-left-width…

属性值
值		描述
thin	定义细的边框。
medium	默认。定义中等的边框。
thick	定义粗的边框。
length	允许您自定义边框的宽度。
inherit	规定应该从父元素继承边框宽度。

• border-color 简写属性，设置元素的边框中可见部分的颜色

可分别设置四个方向的边框，例如左边边框: border-left-color…

属性值
值			说明
color		指定背景颜色。在CSS颜色值查找颜色值的完整列表
transparent	指定边框的颜色应该是透明的。这是默认
inherit		指定边框的颜色，应该从父元素继承

• border 所有边框样式简写

可分别设置四个方向的边框，例如左边边框: border-left…

属性值
值				说明
border-width	指定边框的宽度
border-style	指定边框的样式
border-color	指定边框的颜色
inherit			指定应该从父元素继承border属性值

轮廓

• outline-color 设置外边框的颜色

属性值
值		描述
color	指定轮廓颜色。在CSS颜色值寻找颜色值的完整列表。
invert	默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。
inherit	规定应该从父元素继承轮廓颜色的设置。	 

• outline-style 设置外边框的样式

outline不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。

属性值
值		描述
none	默认。定义无轮廓。
dotted	定义点状的轮廓。
dashed	定义虚线轮廓。
solid	定义实线轮廓。
double	定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove	定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge	定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset	定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset	定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit	规定应该从父元素继承轮廓样式的设置。

• outline-width 设置外边框的宽度

属性值
值		描述
thin	规定细轮廓。
medium	默认。规定中等的轮廓。
thick	规定粗的轮廓。
length	允许您规定轮廓粗细的值。
inherit	规定应该从父元素继承轮廓宽度的设置。

• outline 在一个声明中设置所有的外边框属性

属性值
值				描述
outline-color	规定边框的颜色。参阅：outline-color 中可能的值。
outline-style	规定边框的样式。参阅：outline-style 中可能的值。
outline-width	规定边框的宽度。参阅：outline-width 中可能的值。
inherit			规定应该从父元素继承 outline 属性的设置。

外边距

• margin 清除周围的元素（外边框）的区域。margin 没有背景颜色，是完全透明的

四个方向可单独设置:左填充:margin-left…
简写属性四个值分别为 上，右，下，左

可能的值
值	说明
auto	设置浏览器边距。这样做的结果会依赖于浏览器
length	定义一个固定的margin（使用像素，pt，em等）
%		定义一个使用百分比的边距

内边距(填充)

• padding

提示：CSS padding 属性可以使用长度值或百分比值，但与 margin 属性不同，它不允许使用负值。
四个方向可单独设置:左填充:padding-left…
简写属性四个值分别为 上，右，下，左

可能的值
值		说明
length	定义一个固定的填充(像素, pt, em,等)
%		使用百分比值定义一个填充

尺寸\

所有CSS 尺寸 (Dimension)属性
属性		描述
height		设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width		设置元素的宽度。

显示与可见性

隐藏元素 - display:none 或 visibility:hidden
visibility:hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

定位

• positioning 定位

属性值
值			描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed		生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static		默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit		规定应该从父元素继承 position 属性的值。
initial		设置该属性为默认值，详情查看 CSS initial 关键字。

浮动

• float 浮动

属性值
值		描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

组合选择符

后代选取器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以波浪号分隔）

后代选取器     		div p
子元素选择器   		div>p
相邻兄弟选择器 		div+p
普通相邻兄弟选择器	div~p

伪类

所有CSS伪类/元素
选择器			示例			示例说明
:link			a:link			选择所有未访问链接
:visited		a:visited		选择所有访问过的链接
:active			a:active		选择正在活动链接
:hover			a:hover			把鼠标放在链接上的状态
:focus			input:focus		选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个<p> 元素的第一个字母
:first-line		p:first-line	选择每个<p> 元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before			p:before		在每个<p>元素之前插入内容
:after			p:after			在每个<p>元素之后插入内容
:lang(language)	p:lang(it)		为<p>元素的lang属性选择一个开始值

图像拼合技术

图像拼合
图像拼合就是单个图像的集合。
有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。
使用图像拼合会降低服务器的请求数量，并节省带宽。

采用背景图片定位来截取图片
background:url('img.jpg') xx px xx px;

媒体类型

注意：媒体类型名称不区分大小写。

媒体类型	描述
all			用于所有的媒体设备。
aural		用于语音和音频合成器。
braille		用于盲人用点字法触觉回馈设备。
embossed	用于分页的盲人用点字法打印机。
handheld	用于小的手持的设备。
print		用于打印机。
projection	用于方案展示，比如幻灯片。
screen		用于电脑显示器。
tty			用于使用固定密度字母栅格的媒体，比如电传打字机和终端。
tv			用于电视机类型的设备。

属性选择器

[title] / [title=xxx](等于该值) / [title~=xxx](包含该值)
{ color:blue; }

可用在表单中
input[type="text"] / input[type="button"]