CSS杂记

没看CSS（Cascading Style Sheet）之前，一直以为CSS挺难的，在网页上看到的那些代码一点都不知道代表些什么，晚上花了几个小时看了一下，发现也不过如此，而且好像属于超级简单的那种。有这种感觉不知道CSS真的是这样还是由于我孤陋寡闻的缘故。

其实我感觉学CSS只要知道CSS的类型就够了，然后看到不认识的标签google一下就可以了。不过如果要自己设计还是要了解一些里面的具体内容。计算机学到现在，我越来越感觉不管是做软件还是弄网站，就像是在玩搭积木的游戏，先要了解你要做什么东西，就像孩子们的志愿，我要造长城还是搭一个竖型塔亦或只是键一个小木屋就够了，然后孩子们会根据手上的积木材料来决定怎么去搭建自己的梦想，就像是我们根据不同的语言功能去拼凑我们的软件。感觉知识的模式都是这样，高中学做数学题目我也有这个感觉，我很少用参考书，一般总是先看看书本，给我提供了多少的定理、公式等，然后碰到题目就去套，总有一个会是正确的。运用知识不就是套用自己的学到过的知识的过程吗？想到这里我很后悔小时候没有玩过搭积木的游戏了！记得那个时候我应该还不知道搭积木是什么东西吧，不知道从什么时候才开始知道有这个名词，就是感觉等自己很大以后才知道！

言归正传了，CSS主要包括3种样式类型，即类选择器样式、ID选择器样式、重定义标记样式。类选择器样式定义如下：

（标记名.）类名{样式属性：取值；样式属性：取值；…}

在HTML标记中通过class属性来指明样式。标记名可以省略，如果加上标记名，则这种样式只能在该标记名中使用，且如果该标记名中class属性没有指明该类，这个样式也不会被使用。这是一种最常用的样式类型。

ID选择器样式定义如下：

#标识名 {样式属性：取值；样式属性：取值；….}

在HTML标记中通过ID属性来指明样式。

重定义标记样式定义如下：

标记名 {样式属性：取值；样式属性：取值；….}

在HTML中，该定义的样式会自动运用到当前也中所有与该标记同名的标记中，除非在页面中该标记定义了自己的同样式中属性一样的样式。因为HTML中的属性值一般为最后一个设置的属性值，如果有多个相同的属性值被设置的话。

一般有四种CSS的引入方法：链入外部样式表、导入外部样式表、内部样式表、内嵌样式。

链入外部样式表通过HTML中的link标记实现。

导入外部样式表通过以下语法实现：

<style type=”text/css”>

@import url（样式表地址）

选择符 {样式属性：取值；样式属性：取值；….}

选择符 {样式属性：取值；样式属性：取值；….}

….

</style>

我是属于菜鸟级别的，对这个还没有看到过，只是我有点想不明白，既然后面还要定义选择符，干嘛还要从外面导入，还是后面的定义根本就是多余的，通过@import语句就直接可以用外部的样式文件，是我手上的这本书里写的画蛇添足了？

内部样式表通过在head标签中定义的style标签来实现。为了避免不支持标签的浏览器不会显示不必要的东西，可以将标签内容放入注释中<!-- …. -à。

<style type=”text/css”>

选择符 {样式属性：取值；样式属性：取值；….}

选择符 {样式属性：取值；样式属性：取值；….}

….

</style>

内嵌样式是混合在HTML中定义的样式，其作用域范围只有为当前标签中。定义如下：

<标记名 style=”样式属性：取值；样式属性：取值；….”>

注：

1） 具有相同属性和属性值的选择符可以组合。如：p, table { font-size: 9pt}

2） CSS注释语句为/* …. */

3） 多个属性通过分号;分开。属性值若超过一个单词，需放在””中。

4） 各个标签类型的优先级从大到小：ID选择器样式à类选择器样式à重定义样式

5） 几种特殊的样式：

a) a:link 链接文字的默认样式。

b) a:active 链接文字使用时的样式（鼠标正在按下时）。

c) a:visited 访问过的链接文字样式。

d) a:hovor 鼠标位于链接文字上方时的样式。

CSS标签属性

字体和文本属性：

1.font-family:”字体1”,”字体2”,….设置字体

如果不存在字体1，则浏览器会试着使用字体2，一次类推。如果定义的字体都不存在，则会使用默认字体。

2.font-size:字体字号设置字号

字体字号可以用预定义的单词也可以数字甚至百分比，除了具体数字，实际中显示的字体大小和浏览器的设置有关，含义如下：

xx-small 极小

x-small 较小

small 小

medium 中

large 大

x-large 很大

xx-large 极大

larger 较大，相比父对象

smaller 较小，相比父对象

pt 点，1/72英寸

px 像素

in 英寸

% 相对父对象的尺寸比例

3.font-style:normal/italic/oblique设置斜体效果

normal为正常效果，italic为斜体，oblique为扁斜体

4.font-weight:字体的粗度设置字重

100~900 取100的倍数，且数值越小，字体越细

normal 正常字体效果

bold 加粗字体，与700基本相同

bolder 特粗字体，于900相同

lighter 细字体，相对默认字体更细一些

5.font-variant:normal/small-caps设置英文字体的大小写

normal为正常显示，small-caps将所有字母以大写方式显示

6.font:字体属性取值设置字体属性

这是一个复合属性，结合了前面字体属性的所有值，各个属性间通过空格隔开，设置属性顺序为斜体设置、英文大小写设置、粗细设置、字号设置、字体设置。

7.text-align:left/right/center/justify设置文本的水平对齐方式

left(左对齐)、right(右对齐)、center(居中对齐)、justify(两端对齐)

8.vertical-align:baseline/sub/super/top/bottom/text-top/middle/text-bottom/百分比设置文本垂直对齐方式

baseline 同上级元素的基线对齐

sub 以上级元素的下标显示

super 以上级元素的上标显示

top 和同行元素中最高元素上端对齐

bottom 和同行元素中最低元素下端对齐

text-top 和上级元素的文本向上对齐

middle 和上级元素高度加上当前元素高度的一半对齐

text-bottom 和上级元素的文本向下对齐

百分比 相对于元素行高属性的百分比，即上级元素基线上的相对百分比

9.direction:ltr/rtl/inherit设置文字排版方向

Unicode-bidi:normal/bidi-override/embed 设置双向法则的嵌入级别

ltr 从左到右 rtl 从右稻作 inherit表示文本的排版方向不可继承

bidi-override 严格按照direction属性值排版，忽略隐式双向法则

embed 对象打开附加的嵌入层，将direction属性值指定给嵌入层，在对象内部进行隐式排版

注：双向法则是自动翻转嵌入字符顺序，依照他们固有的方向流动。

对这段话我一直不能理解，这里只是做了一个机械的录入工作，有待进一步的理解！

10.wirtting-mode:tb-rl/lr-tb设置元素布局方式

tb-rl 文字先从上到下排列，然后从右到左

lr-tb 文字先从左到右排列，然后从上到下

11.word-break:normal/break-all/keep-all

normal 正常显示

break-all 允许任意字内断开（对非亚洲语言）

keep-all 不允许断开（对非亚洲语言为一个单词，对亚洲语言为一句话）

12.line-break:normal/strict设置日文文本换行

normal 默认换行规则

strict 强制日文文本换行规则

13.word-wrap:normal/break-word设置超过容器边界时的换行

normal 正常默认形式，自动换行

break-word 强制换行

14.text-decoration:underline/overline/line-through/blink/none设置文字的修饰

underline 文字带有下划线

overline 文字带有上划线

line-through 文字带有删除线

blink 文字带有闪烁效果，只Netscape支持

none 不设置任何修饰

15.text-underline-position:below/above设置划线位置

below 文本带下划线

above 文本带上划线

16.word-spacing:normal/长度值设置文字（单词）间间隔

normal为默认文字间隔，或设置间隔数，如果为负数则为默认间隔上缩小

17.letter-spacing:normal/长度值设置字符间间隔

normal为默认字符间隔，或设置间隔数，如果为负数则为默认间隔上缩小

18.text-transform:none/capitalize/uppercase/lowercase设置文本大小写转换

none 正常显示

capitalize 将每个英文单词的首字母转换为大写

uppercase 将所有英文字母转换为大写显示

lowercase 将所有英文字母转换为小写显示

19.text-ident:长度值设置文本缩进

设置文本缩进的长度值

20.line-height:高度值设置文本行的高度（不是文本的高度）

高度值可以是百分比（基于字体的相对高度），数值加单位

21.white-space:normal/per/nowrap设置空格换行的处理方式

normal 默认效果

pre 用等宽字体预先格式化的文本

nowrap 强制在一行内显示所有文本

22.color:颜色值/颜色码设置颜色

颜色可以是预定义的文本，也可以是#加6为的十六进制值

颜色和背景属性

1.background-color:颜色代码/颜色值设置背景颜色

2.background-image:url(源文件地址)设置背景图像

3.background-repeat:repeat/repeate-x/repeat-y/no-repeat设置背景图像平铺属性

repeat 背景图像沿所有方向平铺

repeat-x 背景图像只沿x轴方向平铺

repeat-y 背景图像只沿y轴方向平铺

no-repeat 不平铺

4.background-attachment:scroll/fixed设置背景图像的固定或是滚动

scroll 背景图像随页面滚动

fixed 背景图像不随页面滚动，同HTML中bgproperties标签

5.background-position:位置的具体值设置背景图像的位置

百分比（x%y%） 起始位置与左上角占整个元素的比例，包括水平和垂直方向

绝对数值（x，y）起始位置的绝对坐标，包括横坐标和纵坐标

top 背景图像位于顶端，可同center一起使用，空格隔开

bottom 背景图像位于低端，可同center一起是使用，空格隔开

left 背景图像位于左端，可同center一起使用

right 背景图像位于右端，可同center一起使用

center 背景图像位于中部，可以为水平方向也可以是垂直方向

可以是百分比和数值一起使用。

6.background:取值设置背景图像属性，复合值

顺序为url、平铺属性、图像固定滚动设置、图像位置

版面属性

1.border-top-style:线条样式

2.border-right-style:线条样式

3.border-bottom-style:线条样式

4.border-left-style:线条样式

5.border-style:线条样式

这些都是边框风格属性，用于表格、框架、层等带有边框属性的标签中，同时也可以将这些属性用在段落文字中，<p>标签中。边框线的样式可取如下值：

none 无边框

solid 实现边框

dotted 点线边框

dashed 虚线边框

double 双实现边框

groove 带立体效果的沟槽边框

ridge 突出脊行效果的边框

inset 内嵌一个立体的边框

outset 外嵌一个立体的边框

最后一个属性为复合属性，可以直接设子四个边框的风格，顺序为上、右、下、左。如果设置的值为一个数字表示所有边框；两个数字，前一个为上下边框，后一个为左右边框；三个数字，第一个用于上边框，第二个用于左右边框，最后一个用于下边框。

6.border-top-color:颜色代码/颜色值

7.border-right-color:颜色代码/颜色值

8.border-bottom-color:颜色代码/颜色值

9.border-left-color:颜色代码/颜色值

10.border-color:颜色代码/颜色值

设置边框的颜色

11.border-top-width:宽度值/表示宽度的词

12.border-right-width:宽度值/表示宽度的词

13.border-bottom-width:宽度值/表示宽度的词

14.border-left-width:宽度值/表示宽度的词

15.border-width:宽度值/表示宽度的词

设置个边框的宽度，其中表示宽度的词有thin（细边框）、medium（正常边框）、thick（粗边框）等。

16.border-top:边框的各属性

17.border-right:边框的各属性

18.border-bottom:边框的各属性

19.border-left:边框的各属性

20.border:边框的各属性

设置边框的各个属性，顺序为宽度、风格、颜色。

对border属性，设置边框风格是必须的，即使是要设置默认的solid属性，否则可能导致不能正常显示边框。

这些边框的各属性都只设置一个值，如果设置了多个值，则取最后一个值。

21.在框架中能使用的边框属性有：border-style、border，其他取值方式同上。

22.border-collapse:separate/collapse（只针对表格）

separate为默认值，即表格边框和单元格边框不合并

collapse表示表格边框和单元格边框合并

23.margin-top:距离值

24.margin-bottom:距离值

25.margin-left:距离值

26.margin-right:距离值

27.margin:各个方向距离值

设置边距值，边距值是只元素于父容器的相对位置

距离值可以是百分比也可以是数字加单位。对margin属性，如果为1个值，则作用域4个方向；2个值，则作用于上下和左右方向；3个值，第1个为上边距，第2个为左右边距，第3个为下边距。

28.padding-top:距离值

29.padding-bottom:距离值

30.padding-left:距离值

31.padding-right:距离值

32.padding:各个方向的补白距离值

设置补白距离值，补白距离值是指元素中内容和元素容器的相对位置。

其他值同元素边距。

区块属性

区块属性也为容器属性，指能容纳页面元素的元素，如层、表格等。区块属性包括对象的定位属性、大小属性、元素布局属性等。

1.position:absolute/relative设置定位方式

Absolute 绝对定位

Relative 相对定位

2.top:距离值

3.right:距离值

4.bottom:距离值

5.left:距离值

设置到父容器边框的距离。

这些属性同position属性一起使用，首先定义定位方式。距离值为数字加单位的值。

6.z-index:顺序号

设置层叠顺序，1表示显示在最上方，数字越大位于越底层。

7.float:left/right/none

设置浮动属性，一般设置是否允许文字显示在图像周围。

left为该元素浮动在其他元素的左侧

right表示改元素浮动在其他元素的右侧

8.clear:none/left/right/both

同float一样设置浮动属性，但同float属性刚好想法。

left为该元素左侧不能有浮动对象

right为该元素右侧不能有浮动对象

none表示两边都可以有浮动对象，即不限制

both表示两边都不能有浮动对象，即限制所有。

9.clip:auto/rect(区域的数值)设置裁剪区

auto表示默认显示效果，区域数值为四个用空格隔开的数值，依次为上右下左确定一个矩形，任何一个值都可以用auto代替，表示此边不能被裁剪。

只有position为absolute时该属性才生效。

10.overflow:visible/auto/hidden/scroll

超出容器方位时的处理方式。

visible 即使超出了范围也完整显示

auto 自动根据情况显示滚动条

hidden 裁剪超出范围的内容

scroll 显示滚动条

11.overflow:visible/auto/hidden/scroll设置水平方向超出范围的处理方式

12.overflow:visible/auto/hidden/scroll设置垂直方向超出范围的处理方式

13.visible:inherit/visible/hidden

设块区域的可见属性。

inherit 继承父层的可见属性

visible 该层可见

hidden 该层不可见

14.width:宽度值

15.height:高度值

设置元素的款高。

Filter滤镜属性

1.filter:alpha(opacity=透明等级,finishopacity=结束点透明等级,style=透明区域形状,startx=起始点横坐标,starty=起始点纵坐标,finishx=结束点横坐标,finishy=结束点纵坐标)

设置透明效果

透明等级为0~100，0为完全透明，100为完全不透明

透明区域形状用数字表示，0为统一形状，1为线型，2为放射型，3为长方形

2.filter:blur(add=印象效果，direction=模糊方向，strength=模糊强度)

设置动感模糊效果，产生一种快速移动的效果

add为布尔型，true表示将图像改为印象派的模糊效果。

direction表示模糊方向，0表示垂直向上，每45递增，且只能为45的倍数

strength设置模糊强度，默认值为5

3.filter:chroma(color=颜色)

设置对颜色进行透明处理

一般用于创建特效文字。

4.filter:dropshadow(color=阴影的颜色，offx=水平偏移，offy=垂直偏移，positive=透明元素的阴影)

offx、offy设置阴影对于元素来说的水平、垂直偏移

positive设置是否为透明元素创建阴影，1为不为透明元素创建阴影，反之。

5.filter:shadow(color=阴影颜色，direction=方向)

设置渐变阴影效果。

direction中0表示垂直想上，以后每45为单位递增，且只能是45的倍数

6.filter:flipH

设置水平翻转

7.filter:flipV

设置垂直翻转

8.filter:glow(color=光的颜色，strength=发光强度)

设置发光效果

strength为1~255，值越大，发光范围也越大

9.filter:gray

设置灰度处理

10.filter:invert

设置反相处理

11.filter:xray

设置X光片效果

12.filter:mask(color=遮罩颜色)

设置遮罩效果

13.filter:wave(add=打乱对象，freq=频率，lightstrength=光强度，phase=波的偏移量，strength=强度)

设置波形滤镜

add true为把对象按垂直波形样式打乱

freq 波的频率，即对象上产生完整波的数量

lightstrength 波形的光影强度，即光照的亮度。0~100，越大，图像的光影强度越大

phase 正弦波的偏移量，即波在垂直方向上的移动

strength 设置波的强度，即产生波形的振幅大小

其他属性

1.list-style-type:disc/circle/decimal/lower-roman/upper-roman/lower-alpha/upper-alpha/none

设置列表符号

disc 实心圆形，无序列表

circle 空心圆形，无序列表

square 实心方形，无序列表

decimal 阿拉伯数字，有序列表

lower-roman 小写罗马数字，有序列表

upper-roman 大写罗马数字，有序列表

lower-alpha 小写英文字母，有序列表

upper-alpha 大写英文字母，有序列表

none 不采用项目符号

2.list-style-image:url(源文件地址)

设置图片项目符号

3.list-style-position:outside/inside

设置列表缩进

outside为列表中文字缩进

inside为列表中文字不缩进

4.list-style:列表各个属性

设置列表属性值，是一个复合属性

顺序为图像符号、缩进属性以及列表符号的顺序

5.cursor:crosshair/default/hand/move/help/wait/text/w-resize/s-resize/n-resize/e-resize/sw-resize/se-resize/nw-resize

设置贯标属性

crosshair 十字形

default 系统默认效果，即箭头

hand 链接状态，手型光标

move 移动状态，带箭头的十字形

help 帮助状态，箭头加问好

wait 等待状态，漏斗形

text 文字编辑状态，I型光标

w-resize 水平双箭头

s-resize 垂直双箭头

n-resize 垂直双箭头

e-resize 水平双箭头

ne-resize 斜向右上-左下方向的双箭头

sw-resize 斜向右上-左下方向的双箭头

se-resize 斜向右下-左上方向的双箭头

nw-resize 斜向右下-左上方向的双箭头

6.scrollbar-face-color:颜色值

设置滚动条表面颜色

7.scrollbar-highlight-color:颜色值

设置滚动条两边颜色

8.scrollbar-shadow-color:颜色值

设置滚动条暗边颜色

9.scrollbar-arrow-color:颜色值

设置滚动条方向箭头的颜色

10.scrollbar-base-color:颜色值

设置滚动条基本颜色，包括箭头颜色和边框颜色等

附件1

长度值：包括数字值和单位，单位有pt（点，1/72英寸）、px（像素）、in（英寸）