CSS杂记

       没看CSSCascading 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        背景图像不随页面滚动,同HTMLbgproperties标签

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

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

绝对数值(xy)起始位置的绝对坐标,包括横坐标和纵坐标

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-styleborder,其他取值方式同上。

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代替,表示此边不能被裁剪。

只有positionabsolute时该属性才生效。

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~1000为完全透明,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=透明元素的阴影)

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

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

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

设置渐变阴影效果。

direction0表示垂直想上,以后每45为单位递增,且只能是45的倍数

6.       filter:flipH

设置水平翻转

7.       filter:flipV

设置垂直翻转

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

设置发光效果

strength1~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(英寸)

 

posted @ 2008-10-28 02:42 江湖飘 阅读(...) 评论(...) 编辑 收藏