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（英寸）