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 选择每个 元素的第一个字母
:first-line p:first-line 选择每个
元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before p:before 在每个
元素之前插入内容
:after p:after 在每个
元素之后插入内容
:lang(language) p:lang(it) 为
元素的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"]