CSS the Definitive Guide

来源：互联网发布：python教程pdf 百度云编辑：程序博客网时间：2024/04/29 07:06

一、选择器

CSS选择器兼容性http://www.evotech.net/blog/2009/02/css-browser-support/

㈠派生选择器

① 以空格作为分隔符号。

② 选择的是父卷标下所有卷标（p div em ），检索方式。

㈡类选择器（class）

① .class（中间无空格）。

② p.warning{ } 和 p＿.warning 的不同之处。

③ 多类选择器（class=“urgentwarning”）。

④ . 选择器用做多个标签。

㈢ ID选择器

① #id（中间无空格）。

② div#warning{ }（具有条件选择的意思）和 div＿#warning 的不同之处。（空格是派生选择器的标志）

③ # 选择器用做唯一一个标签。

㈣群选择器

① , 号为分隔标志。

② 逗号左右空格无限制。

㈤伪类选择器

⑴ 所有伪类和伪元素关键词前面都有一个 : 号。

⑵ 连接伪类

① :link（与 a{ }的区别）。

② :visited。

③ 有 href 属性的 a 元素。

⑶ 动态伪类

① :hover

② :active

③ :focus

④ link-visited-focus-hover-active（Lvfha）

⑤ IE6只允许动态伪类选择超链接。IE7、火狐支持所有元素:hover，而IE6.0不支持。IE7不支持窗体应用：focus。

应用hover时，<body>内定义如background-color;在<style>中:hover{background-color=blue;}发生冲突，不起作用。

㈥伪元素选择器

① :first-letter

② :first-line

③ :before

④ :after

⑤ :first-letter 和 :first-line 有一些属性应用的限制。IE6.0，不支持；IE7火狐都支持。

⑥ :after ：before IE都不支持，火狐支持。:first-letter和 :first-line 有一些属性应用的限制。IE6.0，不支持；IE7火狐都支持。图有错误。

㈦选择子元素（IE6不支持，IE7支持，Firfox支持）

① >

② h1>strong（空格无限制）

③ 选择后者，是子元素（即第一层）

④ IE6.0不支持

㈧相邻元素（IE6不支持，IE7支持，Firefox支持）

① +

② h1+p

③ 选择后者，两元素属同一辈分就OK。

④ IE6.0不支持

㈨选择第一个子元素（IE6不支持，IE7支持，Firefox支持）

p:first-child{ } 选择的是所有（p and 第一个子元素）

㈩根据语言选择

：lang(){ }

11 属性选择器（[ ]）（内容比较多，目前很少使用；但是IE支持）

① [属性]

② [属性=值]

③ [属性～=值] 空格分开，“值”含在其中一部分

④ [属性|=值] digital-有连接符，并且digitial前无任何字符

⑤ IE6.0不支持

12 通配选择器（*）

二、值和单位

Font-size:em、%、smaller、larger一样都是继承计算后的值。

Line-height:使用由单位的值，都是继承计算后的值，而非缩放因子。

因此，font-size和line-height：不要使用.

㈠颜色

① 命名颜色（CSS2.1 17种）

② RGB（R,G,B） 0～255 black=reb(255,255,255) white=rgb(0,0,0)

③ 十六进制RGB颜色#RRGGBB 三个数之间没有分隔符号号号号；简写 RGB 。

㈡长度单位

① 绝对长度单位 in（英寸） cm（厘米） pt（点） pc（派卡）

② 相对长度单位 em ex px

注：a、所有长度单位后都有两个字母缩写；长度0（零）其后不需要跟单位元元元元。

b、Web设计种几乎很少使用绝对长度单位。

c、最好的相对长度单位，特别是 em ,ex=0.5em 。

d、px 用户无法使用“文本大小”。

em=本元素的font-size，记住若不指定font-size，则font-size回继承父元素。使用时text-indent使用em作为单位。line-height使用百分号。

㈢ URL

① 绝对URL(protocol://server/pathname)

② 相对URL(pathname)

注：URI（统一资源标识符）= URL（统一资源定位符）。

③ url（../image.css）或 url(image.css) 记住这两种

㈣ inherit（继承）

很少用，IE7支援不很好，Firefox支援很好。

㈤其它

① 角度值度（deg）梯度（grad）弧度（rad）

② 事件值毫秒（ms）秒（s）

③ 频率值赫兹（Hz）兆兹（MHz）

三、字体（5）

font-family

使用逗号将字体系列与字体结合，空格#$等符号，用‘’括起来

font-weight

normal︱bold︱bolder︱lighter︱100︱200︱300︱400︱500︱600︱700︱800︱900

① bold 和 normal 最常用

② 其余值差别不大

font-size

xx-small︱x-small︱small︱medium︱large︱x-large︱xx-large︱smaller︱larger︱<length>

font-style

italic︱oblique︱normal

① 无italic时自动使用oblique

② 无oblique时不使用italic

③ 尽量定义为italic

font-variant

small-caps︱normal

全部大写；小型；

font-stretch

normal︱wider︱narrower

<拉伸字体> CSS2.1中去除；无浏览

器支持

font-size-adjust

none︱number

<强制对象使用同一个尺寸>CSS2.1中去除；无浏览器支持

font

font-style︱font-variant ︱font-weight︱font-size / line-height︱font-family 12px/18px

四、文本属性（9）

text-indent

① 初始值 0

② 应用于块状元素<p>

③ 即使插入<br/>，缩进也只应用于一个元素的第一行

④ 可以继承

text-align

水平对齐

left

center

right

justify

① text-align 不会控制元素的对齐，只是影响内部内容

② <center>不仅影响文本，而且会把整个元素居中

③ IE6之前 text-align:center=<center>

line-height

normal

① 初始值：normal

② 内容区+行间距=行高；基线；上下行间距；行内框

vertical-align

baseline

sub & super

middle

text-top & text-bottom

top & bottom

① 父元素基线（默认值）

② 上下标

③ 垂直居中，并不绝对居中

④ 行内文本的底端

⑤ 行内框的底端；IE 和 Firefox不同少用

⑥ 正值上升；负值下降；

word-spacing

normal

空格的大小

letter-spacing

normal

针对英文；字母间距；空格间距

text-transform

uppercase

lowercase

capitalize

none

① 大写

② 小写

③ 每个单词首字母大写

④ 默认值

text-decoration

none

underline

overline

line-through;

blink（闪烁，IE 和irefox都不支持）

① none为默认值

② blink（IE和Firefox都不支持）

③ text-decoration 与 vertical-align:sub &super结合各种浏览器有所不同

white-space

normal

pre

nowrap

pre-wrap

pre-line

① 合并空白；换行符转换为空格；允许自动换行

② 保留空白；保留换行符；（文本原样）；

③ 忽略换行符；合并空白

④ 保留空白符；保留换行符；不支持

⑤ 合并空白符；保留换行符；不支持

direction

ltr & rtl

unicode-bidi

normal

embed bidi-override

text-shadow

文本阴影；目前没有Web浏览器支持

① 文本中换行符（回车键）默认时=空格

② 文本中默认允许自动换行

text-overflow

clip（不显示）

ellipsis（加省略号）

IE专有属性

与overflow:hidden;width定值

word-break:keep-all;共同使用。

layout-flow

horizontal（横向）

vertical-ideographic（纵向）

IE专有属性

文本的排版方式

word-break

normal

keep-all（不换行）

break-all（允许英文单词间换行）

IE专有属性

word-wrap

normal

break-word

IE专有属性

类似与word-break:break-all;

二者共用无论中英文都强制换行

五、基本视觉格式化

一、水平格式化

① Width=内容区的宽度；可视元素框的宽度=Width +border-width + padding；一定要注意：隐式地增加Width(paddingborder-width) 和 Width是固定的。

② 父元素的Width = 块级元素的7个值之和；

③ auto = width & margin-left &margin-right

1. 一个auto：自动计算。

2. 两个auto：外边距的auto = 0；水平居中，margin-right可能被重置为0.

3. 三个auto：为默认情况，width很宽;margin-left=0;margin-right:0

④ 对于空 <div> Firefox要求必须有 height属性，而IE不必。实际中应指定height的值

⑤ 负外边距

a) margin-left：负数-------IE7支持----Firefox支持

b) margin-right：负数-----IE7不支持----Firefox支持

⑥ 百分数

u 7个水平属性之和=100%，百分数的参考是父块级元素

总结：

(一) <div>显示：空 <div> Firefox 和IE7 height属性

(二) padding 和 width 都会隐式增加可视元素框

(三) 因为<div>属性可共享并相互覆盖，所以 div{ }指定属性时少用，用ID选择器或类选择器

(四) 父元素的padding 和子元素的margin

二、垂直格式化

① 7大属性---margin-top—border-top—padding-top—height---

pading-bottom—border-bottom—margin-bottom

② 可视元素框=border + padding + height

③ auto= height & margin-top& margin-bottom

④ 一个正常留种的一个块元素设置margin-top\margin-bottom=auto则为0，不能实现垂直居中

三、改变元素显示

display

none

inline

block

inline-block

list-item

run-in

很少提供支持

四、

六、内边距、边框和外边距

所有文文件元素都会生成一个<元素框>

width & height

不会应用行内非替换元素例如：<a>

margin

占据空间，背景色是透明的，可以看到父元素。margin默认为零，但以下元素不为零：

margin简写：⑴上右下左；⑵上（左右）下；⑶（上下）（左右）；

margin-top & margin-right & margin-bottom & margin-left

padding

padding可简写

padding-top & padding-right & padding-bottom & padding-left

border三大属性：border-style border-width border-color

border-width

border-top-width border-right-width border-bottom-width border-left-width

border-style

solid dotted（点）dashed（虚线）double groove（凹） ridge（凸）

inset（内嵌）outset（外嵌）

none 边框将不会存在

border-style可简写

border-top-style border-right-style border-bottom-style border-left-style

border-color

Transplant

border-top-color border-right-color border-bottom-color border-left-color

对于行内元素如<em><strong>：padding 和 margin 和border-top和border-bottom 不会增加行高。padding会覆盖，margin将重置为0,border-top & border-bottom同样会覆盖。

padding-left & right 和border-left & right 可用。

外边距合并：

一、margin上下合并：

父元素

A. 以较大的margin值为准

B. IE中两个<div>只要有一个设置float就不再进行合并

C. Firefox中两个必须第二个<div>设置float时不进行合并

D. 一般来讲margin上下进行合并，除非某个设置了float

二、margin左右合并：

A. 两个<div>，第一个设置float:left;，第二个不设置。IE中第二个<div>移动到第一个右边进行合并；Firefox中第二个<div>被第一个覆盖。

两个都设置float:left;则都不进行左右合并。

B. 一般来讲margin左右不进行合并

margin的<串层合并>的bug问题：（上下合并）

同级元素进行合并，并且与float属性有关。

父元素有width或height：

① IE不进行<串层合并>

② 火狐进行<串层合并>

父元素有border或padding：

① IE不进行<串层合并>

② 火狐进行<串层合并>

总结：IE的串层合并只与height和width有关，border和padding控制这火狐的串层合并。

应用时：最好设置子元素的margin上下为零。

七、背景

background-color

background-image

允许向任何元素应用背景

background-repeat

repeat repeat-x repeat-y no-repeat

background-attachment

scroll fixed—图像不会随文件滚动，图像放置有可视区域的大小决定，

background-position

关键词：left & right center top & bottom

百分数：

数字；（可为负数，会得到奇特的效果）

参考目标：border的内左上角

三种值可混用，左右；

repeat-x 由 top & bottom决定

repeat-y 由 left & right决定

<background-color>︱<background-image>︱<background-repeat>︱<background-attachment>︱<background-position>

<background-positon> 在缩写时两个值必须同时写，若为数字或百分数必须：左右

八、浮动和定位

1、 position定位时包含快<使用时有最近原则>：会作为绝对定位的top\left和width\height的参照物。

包含快必须定义的特征{

position: ;

width: <像素>;（次要）

height: <像素>;（次要）

}

被包含块的特征{

position:

width:<像素>; height:<像素>;

left:<像素>; top:<像素>;

}

注：最好的是绝对定位元素就相对于父级元素，中间无任何元素。

2、

float

left right none

注释：Content, background, and borders of inline elements should go in front of the float. Background and borders of a block element should go behind the float, but the content of the block element should go in front of the float.

clear

left right both none

position

static

默认值，无特殊定位，遵循HTML定位规则

absolute

（可为负值）

①将元素从文文件流中脱离（漂浮），使用left、right、top、bottom等属性相对于其最近的具有定位设置的父元素进行绝对寻址，并可以使用z-index设置该元素的迭放次序。使用该属性时，必须至少设置设置left、right、top和bottom中属性的一个；

②其最近的具有定位设置的父元素是指设置了position这个CSS属性（属性值应当为absolute或relative）的最近的父元素，如果该父元素不存在，则父元素指的是body；

relative

既漂浮，又占有文档流。本元素已脱离文本六，而原本所占据的空间仍保留。

fixed

IE7+才支持，火狐支持。<margin左上角>---。

脱离文档流

overflow

visible hidden scroll auto

z-index

整数，可为负数。只用于定位元素，负数少用。

clip

rect(T R B L)

auto

设置可视区域，只对绝对对象有效，不可以为百分数。所有浏览器都支持。

但必须是position:absolute\fixed

visibility

visible（默认值）

hidden

collapse

① 与display:none;的区别

② collapse不支持。主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden

position:absolute 1、参考元素：position不为static的祖先元素。应用时多用position:relative，而且没有偏移；body{position:relative}，将body作为初始包含快；

2、位置点：<父元素>的border内左上角←→<子元素>的margin左上角的边偏移值；

3、top※right※bottom※left的数可为负数和百分数。百分数的参考元素是<父元素>的border内；???

关于Absolute%:

Absolute:

left\top\bottom\right参考相对定位父元素的border内。

Width：

只有IE6参考的是父元素的width值；

其它都是参考相对父元素border内的宽度。

Height:

IE7相对定位父元素的height值；

IE6父元素的border内的高度。

其它相对定位父元素border内的高度。

Margin:父元素

关于Relative%:

width:50%; /*父元素的width */

height:50%; /* 父元素的height */

left:50%; /*父元素的width;而IE6、IE7都是父元素的border内宽度；Opera父元素的width值*/

top:50%; /*父元素的width;而IE6、IE7、Opera都是父元素的border内高度*/

margin-left:50%; /* 父元素的width */

margin-top:50%; /* 父元素的height */

-------------------------------------------------------------------------

4、绝对定位元素的放置：

明确指定的width和height，只有left和top确定显示，而bottom和right将因<过度受限>重置，也可理解为忽略。

5、绝对定位元素的自动确定大小（面积）：

浏览器可以根据top\right\bottom\left进行自动确定面积，参照

（Absolute%）。

只有IE6不可以，其它都可以，但是IE7稍有点bug（相对父元素的高度）。

6、绝对定位元素auto的使用：

top※right※left=auto,元素的边界与其static(display:none)时的边界相应对齐,就是所谓的“自动放置”

此时{top:auto;left:auto;}={top:auto;right:auto}（重合）。

因此可以使用margin的值改变位置。

Position：relative也是同样的。

7、非替换元素的放置和大小（9种属性）：

left+margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right+right=<包含快>的width

a、 left※right=auto,与 static时对齐。

b、 margin-left\margin-right=auto（left\right\width中的不是auto）：

1、自动计算

2、水平居中（margin:0 auto）【IE6\7不支持，Firefo\IE8支持】

d、过度受限情况下会忽略最右边的值（right \ margin-right）

top+margin-top+border-top-width+padding-top+height+padding-bottom+border-bottom-width+margin-bottom+bottom=<包含块>的height

a 、垂直居中：mrgin:auto 0;（指定width\top\bottom）【IE不支持，Firefox支持】

b、绝对定位元素在垂直方向上<过度受限>时将忽略bottom的值由top确定显示位置

8、替换元素的放置和大小：

a、left◇top◇right的值为auto,则auto将被替换

为静态位置。（但是注意使用条件）

b、<过度受限>时会忽略right◇bottom的值。

总结：在绝对定位时，只用left和top。水平居中◇垂直居中IE都不支持，而火狐都支持。

可以设为auto的值有五个left◇right◇top为其静态位置或这被重置，

float:

浮动元素会向左或向右移动直到遇到另外一个元素为止，跟随浮动对象的对象将移动到浮动对象的位置。

IE:

② 一个元素设置float:left;之后，其后所有元素将跟随<移动>紧贴此元素的右边框，<所有元素>直至高度等于此元素的高度。其中<所有元素>包括设置float:left;和float:right;的元素。

③ 一个元素设置float:left;之后，其后的元素float:left;或flaot:right;的<相对行>是不设float时的行。

Firefox:

① 最好用两个float来指定

② 一个元素设置float:left;后，其后说有元素将跟随<移动>不像IE那样紧贴此元素右边框，只是内容（文字、图片）紧贴右边框

总结：Firefox要想和IE同时用应当在两个连续的<div>中都设置float:left;，

这样两种浏览器则显示相同。否则只能用表格布局了。

九、用户界面样式

系统字体（6个）

caption

icon

message-box

small-caption

status-bar

① 6个系统关键字只能用于font属性；

② {font:icon;font-weight:bold}(加粗)和{font-weight:bold;font:icon}（不加粗）。

③ 6个系统字体关键字

系统颜色

（28个）

activecaption

background

buttonface

① CSS定义系统颜色不区分大小写；

② 少用；

光标

指示和选择：pointer text crossshair

移动： move（） w-resize s-resize n-resize e-resize ne-resize sw-resize se-resize nw-resize

根据上北下南左西右东、来确定值。

等待和前进：wait---直至程序不忙为止

progress---尽管很忙，但仍可以继续与程序交互

提供帮助：help

图形光标：cursor:url( ),help,url( );

注意彼此间的逗号，这与font不同。火狐不支持 .ani。

轮廓

out-line

out-line-width

out-line-style

out-line-color

① IE不支持此属性，火狐支持。

② out-line-color有invert值。

十、表布局

caption-side

top

bottom

IE不支持此属性，火狐支持

caption的algin属性定位

border-spacing

IE不支持，火狐支持；

cellspacing：IE支持，火狐不支持；

两种属性共用。

empty-cells

show

hide

IE不支持，只有火狐支持；

border-collapse

separate（默认值）

border-spacing才可用

collapse（各种浏览器都支持的不好）

① border-style:hidden级别最高;border-style:none

级别最低。

② 单元格之间不会有任何间隔。

③ 最大的width 会胜出。

④ color 和style 也会有合并

width

table-layout:auto（完全显示）

table-layout:fixed（不完全显示）

height

text-align

left right center

vertical-align

top bottom middle

总结：使用边框合并时：注意表的border和cell的border，各种浏览器对border-collapse:collapse支持不好；对border-collapse:separate;的附属属性支持也不是太好。

十一、列表与生成内容

列表三种属性：type position image

list-style-type

none & disc & circle & square（形状）

decimal & lower-roman & upper-roman（数字）

lower-alpha & upper-alpha（字母）

等等

list-style-position

inside & outside （类表符的位置）

list-style-image

li || ul—list-style:<list-style-type><list-style-position><list-style-image>

生成内容（IE不支持，只有火狐支持，但是还是要了解）

content

:after

:before伪元素

“”（字符串）

其中的换行支持不好，包括Firefox

URI

content:url( );

attr（提取属性）

content:attr(href);

quotes（引号）

与:after、:before结合使用

① 先用quotes:“”﹎‘’（成对单引号和双引号）声明；再用content:指定；

② quotes:‘\201c’ ‘\201d’ ‘”’ ‘”’

双层嵌套的应用；

③ content:open-quote

close-quote

no-close-quote

no-open-quote

（计数器）

counter-reset

counter-increment

并不重要

content：若主体为block，则生成的内容默认为block，只可以设为block—inline—none—marker；

若主体为inline，默认inline，只可以设为none和block。好像插入的内容不存在于Dom树中。

默认不恰当，是“重置”，插入的内容属于主体，并且子元素。

十二、非屏幕媒体

分页媒体：

定义页面大小

size

① 只能是百分数和“尺度”单位，如in，cm，pt

② CSS2.1已经去除

③ 定义页面区大小

margin

① 单位同size，不能是em和ex

② 外边距大小

选择页面类型

page

① 定义不同的页面类型，提供给不同的元素。

② landscape(横向)，portrait(纵向)

③ @page :first{ } @page :left{ } @page :right{ }

④ @page normal{size:portrait;margin:1in;}

body{page:normal}

分页（符）

page-break-before

page-break-after

auto（不要求）

always（放分页符）

avoid （不放分隔符）

left （内容放在左页）

right（内容放在右页）

page-break-inside

auto

avoid

避免一个元素内部放分页符。

div.aside{page-break-inside:avoid;}

有关分页符

windows

orphans

默认值为：2；少于指定行数时，在元素前插入分页符

windows定义顶部

orphans 定义底部

投影（幻灯片）：Opera，大多数投影仪都默认1024×768的分辨率，800×600，1280×1024。

声音样式：aural类型媒体已经废除，并且没有支持。以后可能会使用speech来支持文档语音表现。

语音

speak

normal（读出内容，默认值）

none（不读）

spell-out（拼读）

标点符号

speak-punctuation

none（停顿）

code（读出标点）

数字

speak-numeral

continous（连续读出）

digits（单个读出）

表标题

speak-header

once（默认值）

always

语速『每分钟单词的个数』

speech-rate

<number> medium

x-slow slow fast x-fast faster slower

音量

volume

<number>0~100 silent

x-soft soft medium

loud x-loud

指定声音

voice-family

male female child

voice-family: gary , jim , child;;

音高（音频）

pitch

h1{pitch:150hz;}

x-low low medium hight x-height

pitch-range

平均音频变化范围，默认值50

重音

stress

p{stress:50;}

音色『与stress作用类似』

richness

h1{richness:80;}

停顿

pause

pause-before

pause-after

一下三个规则是等价的：

p.list { pause:1s;}

p.list {pause:1s 1s;}

p.list {pause-bofore:1s;pause-after:1s }

提示『与pause用法一样』

cue

cue-before

cue-after

值为URI:

a:link{cue:url(ping.mp3) url(ping.mp3)}

『提示before』『before的内容』『内容』『after的内容』『提示after』

提示和停顿都在生成的内容之外“读”，至于哪个在外没有规定。

背景声音

play-during

mix（与父元素背景声音混合）

none（无任何背景声音）

play-during:url(wave.mp3) repeat mix;

声音定位

水平◆azimuth

far-left left center-left center center-right

right far-right right-side

behind leftwards rightwards

垂直◆elevation

<角度> above level below（三个关键字）

a、<link>中使用media=“print\screen\”等指定媒体类型

b、内部使用 @media print\screen{

body{

font:10pttimes,georgia,serif;

line-height

}

@media screen,print,projection{

body{

line-height:120%;

}

十三、 e

0 0