《CSS网页样式设计》要点


  来源: | 作者: | 浏览: | 发送给好友 | 添加到收藏夹

第一章 概述

一、CSS简介

1、CSS是Cascading Style Sheets(层叠样式表单)的简称。通常所称的CSS是指CSS1,即层叠样式表单1级。

2、编辑CSS文档:与编辑HTML的方法一样。有如下3种:

第二章 CSS初步了解

1、将样式与HTML结合:共有四种方法。

2、选择符

  在h3{font-family:arial}里h3是选择符。font-family是属性,arial是属性值。属性和属性值之间以冒号分隔。如果要定义多个属性,属性与属性之间以分号隔开。要为一个属性定义多个属性值,则用逗号隔开。

  任何一个html标记都可以作为选择符。但是有时用class和id更方便。class总以.号开头,id以#开头。class和id用法差不多,用id给选择符一个独有的名字,在调用script时会更容易。但是,如果使用样式表单而不使用script,用class比id好。

3、使CSS更容易和更强大

  有几种方法使CSS更容易和更强大:

4、定位

  使用元素的position属性,有绝对定位(absolute)和相对定位(relative)。

5、3D层技术

  使用z-index属性。

6、特殊效果

  包括剪切(clip)、溢出(overflow)、可见性(visibility)属性。剪切属性可以让一些被覆盖的对象显示出来,溢出属性用来指定如果对象放在一个比它小的边框中该怎样处理,可见性属性可以控制一个对象是否看得见——这些是制作特效的好办法。

第三章 CSS进一步学习

1、注释语句:/*在这里加入注释*/

2、伪类:

3、首行和首字伪元素:

  首行伪元素:p:first-line{font-style:small-caps} 首字伪元素:p:first-letter{font-style:small-caps}

  选择符里的伪元素:p.initial:first-letter{color:red}

4、层叠顺序的具体规则:

第四章 CSS属性

一、字体属性

  与字体有关的属性包括:font-family,font-style,font-variant,font-weight,font-size,font。执行顺序是:font-style,font-variant,font-weight,font-size

1、font-family:如果字体的名称中含有空格,那么要加上双引号。

2、font-style:normal|italic|oblique

3、font-variant:normal|small-caps

4、font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900

  normal相当于400,bold相当于700

5、font-size:absolute-size|relative-size|length|percentage

6、font:font-style|font-variant|font-weight|font-size|line-height|font-family

  font属性可以一次定义前边提到的所有的字体属性。

二、颜色和背景属性

1、color:一般指前景色。

2、background-color:背景色。

3、background-image:

  body{background-image:url(marble.jpg)}

4、background-repeat:repeat|repeat-x|repeat-y|no-repeat

  body{background-image:url(marble.jpg);background-repeat:repeat-y}

5、background-attachment:scroll|fixed

  设置文字在背景图案上面滚动,背景图案保持固定不动用fixed.

6、background-position:percentage|length{1,2}|top|center|bottom|left|center|right

7、background:background-color|background-image|background-repeat|background-attachment|background-position

  可以一次设置前面的所有的有关背景的属性。如body{background:white url(bg.jpg)}

三、文本属性

1、word-spacing:normal|length

2、letter-spacing:normal|length

3、text-decoration:none|underline|overline|line-through|blink

4、vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom|percentage

  这个属性用来对齐图片效果特别好。如image{vertical-align:baseline}

5、text-transform:capitalize|uppercase|lowercase|none

6、text-align:left|right|center|justify

7、text-indent:length|percentage

  适用于块级元素,定义文本首行的缩进方式。如p{text-indent:1cm}

8、line-height:normal|number|length|percentage

四、容器属性

1、margin-top:length|percentage|auto

  如body{margin-top:0}

2、margin-right:同上

3、margin-bottom:同上

4、margin-left:同上

5、margin:length|percentage|auto {1,4}

  前四个属性都可以用margin来定义。如果给出的值少于四个,那么缺失的部分就取其对边的值。

6、padding-top:length|percentage

7、padding-right:同上

8、padding-bottom:同上

9、padding-left:同上

10、padding:length|percentage {1,4}

  前面四个属性都可以用padding来定义。如果给出的值少于四个,那么缺失的部分就取其对边的值。

11、border-top-width:thin|medium|thick|length

12、border-right-width:同上

13、border-bottom-width:同上

14、border-left-width:同上

15、border-width:thin|medium|thick|length {1,4}

  前面四个属性都可以用border-width来定义。可以一次给出一个、两个、三个或者四个border-width值。如果给出的值少于四个,那么缺失的部分就取其对边的值。如h1{border-width:thick thin medium}

16、border-color:<color> {1,4}

  如果只给出一个值,那么四条边框的颜色都一样。否则缺失边的颜色从对边获取。

17、border-style:none|dotted|dash|solid|double|groove|ridge|inset|outset

18、border-top:border-top-width|border-style|color

  一个元素顶边的宽度、样式和颜色都可以border-top一次指定。

19、border-right:同上

20、border-bottom:同上

21、border-left:同上

22、border:border-width|border-style|color

  要一次设置一个元素所有边框的宽度、样式和颜色,可以使用border。border只能使四条边框都相同。

23、width:length|percentage|auto

24、height:length|auto

25、float:left|right|none

  适用float元素可以使文字环绕在一个元素的四周。比html中的align属性应用范围更广,不仅仅是图片和表格,所有的元素都可以使用float属性。

26、clear:none|left|right|both

  与float相对应。如果为right,则元素的右边不会放进任何对象。

五、分级属性

1、display:block|inline|list-item|none

2、white-space:normal|pre|nowrap

3、list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none

4、list-style-image:url|none

  如ul{list-style-image:url(bullet.gif)}

5、list-style-position:inside|outside

  决定列项的第二行左边距是否与第一行除了项目符号以外的第一个字母对齐。

6、list-style:keyword|position|url

  可以一次指定list-style-type,list-style-image,list-style-position属性。

六、鼠标属性

cursor:auto|crosshair|default|hand|move|e-resize|ne-resize|nw-resize|n-resize|se-resize|sw-resize|s-resize|w-resize|text|wait|help

第五章 CSS的单位

一、长度单位

1、绝对长度值:cm,mm,in,pt,pc等。绝对长度值最好用于打印输出设备,而在仅仅作为屏幕显示用绝对长度值并无多大意义。

2、相对长度值:CSS支持以下单位pc,em,ex

二、颜色单位
三、URL单位

  URL单位的具体格式是:在“url”后面紧跟一个括号,括号中是url的地址。如果在地址中使用了括号、逗号、空格、单引号河双引号,那么就必须在整个地址的外面加上一对单引号或者双引号。地址可以是相对地址或绝对地址。

第六章 CSS格式化模型

  CSS的格式化定义包括两种元素:块级元素和行内元素。

第七章 CSS定位

  相对定位:允许元素在相对于文档布局的原始位置上进行偏移(OFFSET)操作。

  绝对定位:允许元素与原始的文档布局分离并且任意定位。

一、CSS定位的属性

  position,left,top,width,height,clip,overflow,z-index,visibility

1、position:absolute|relative|static

  absolute是绝对定位;relative是相对定位,在scripting语言实现动画特效的时候非常有用处;static是默认状态,没有定位功能。

2、left,top:length|percentage|auto

  左上角顶点是定位的取值参考点。css格式化是将对象放置在一个个矩形的"容器"中,这个矩形的左上角顶点就是定位的取值参考点。任何left和top值都是相对左上角而言的。left是容器的左上顶点到上级元素左边界之间的距离;top是容器的左上顶点到上级元素上边界之间的距离。

3、width,height:length|percentage|auto

4、clip:shape|auto

  shape:rect(top,right,bottom,left),

  一个剪切区域定义了元素的哪一个矩形部分可见。

5、overflow:visible|hidden|scroll|auto

  overflow决定了元素的内容在超越它的宽度和高度限制时,浏览器怎样处理。使用visible,元素的宽度可以比原先声明的更大。任何填充距或边框都保留并相应扩大。使用hidden,则任何超出原先声明的宽度和高度的内容都会变得不可见。使用auto时,一般超过高度或宽度时,浏览器会提供一组滚屏工具。使用scroll,表示如果浏览器支持滚屏工具,无论元素内容是否超越了边界,这个工具都应该被显示。这避免了载一些动态显示的状态下,滚动条是否需要显示的混乱问题。

6、z-index:auto|integer

7、visibility:inherit|visible|hidden

  inherit(继承)是默认值。

第八章 CSS打印支持(略)

第九章 CSS与框架结构

一、属性

  "@page"允许用户定义最外围层的框架属性;"@frame"允许用户定义嵌入的框架。

1、parent:<frame name>

2、zindex:<number>

3、layout:fill|fixed|row|column

4、content:<url>|normal

5、border:length|style|url|color

6、padding:values

7、background:transparent|color|url|blend-direction|repeat|scroll|position

二、将html元素与框架关联

  使用flow:属性。如p{flow:main}使<P>内的内容都放在main框架中。

三、为超文本链接设置目标框架

  <target:>属性。

四、处理“溢出”

overflow:autoscroll|scrollbar|hand|button|any

第十章 CSS与HTML(略)

第十一章 声音层叠样式表单

一、通用声音属性

1、volume:%|silent|x-soft|soft|medium|loud|x-loud

2、pause-before:时间值|百分比值 表示在元素前的停顿

3、pause-after:同上 表示在元素后的停顿

4、pause:是2和3的简便指定形式。

5、cue,cue-before,cue-after:url|none

6、play-during:url|mix?repeat?|auto|none 指定背景声音。

7、azimuth:角度值|left-side|far-left|left|center-left|center|center-right|right|far-right|right-side|behind|leftwards|rightwards 提供声音场幻境效果。

8、elevation:angle|below|level|above|higher|lower 设置音源的仰角位置。

9、speech-rate:number|x-slow|slow|medium|fast|x-fast|faster|slower 阅读的速度。

10、voice-family:specific-voice|generic-voice|

11、pitch:hertz|x-low|low|medium|high|x-high 音高标准。

12、pitch-range:% 0%音量代表平缓、单调的声音;50%代表普通声音;大于50%代表颤音。

13、stress:% 语音强调的级别。

14、richness:% 阅读声音的饱满程度。

15、speak-punctuation:code|none 使更加富有文采。

16、speak-date:myd|dmy|ymd 指定阅读日期的方式。

17、speak-numeral:digits|continous|none 阅读数字的方法。

18、speak-time:24|12|none 控制是否把时间按照24小时制阅读。

第十二章 CSS滤镜和渐变

  filter:filtername()是实现滤镜样式的属性。对于一个元素可以作用多个滤镜属性。

一、滤镜属性

1、alpha 语法:filter:alpha(Opacity=,FinishOpacity=,Style=,StartX=,StartY=,Finishx=,FinishY=)作用是把一个元素与背景混合。

2、blur 语法:filter:blur(add=,direction=,strength=) 作用是产生模糊效果。

3、chroma 语法:filter:chroma(color=) 设置一个对象中指定的颜色为透明色。

4、dropshadow 语法:filter:DropShadow(color=,OffX=,OffY=,Positive=) 添加对象的阴影效果。

5、FlipH 语法:filter:FlipH 水平翻转。

6、FlipV 语法:filter:FlipV 垂直翻转。

7、Glow 语法:filter:Glow(color=,strength=) 边缘发光效果。strength是从1到255之间的数。

8、Gray 语法:filter:Gray 把一张图变为灰度图。

9、Invert 语法:filter:Invert 底片效果。

10、Light 语法:filter:Light 模拟光源的投射效果。

11、Mask 语法:filter:Mask(color=) 为对象建立一个覆盖于表面的膜。

12、Shadow 语法:filter:Shadow(color=,direction=) 在指定的方向上建立物体的投影。

13、Wave 语法:filter:Wave(add=,freq=,LightScrength=,Phase=,Strenth=) 波动效果。

14、Xray 语法:filter:Xray 反映出对象的轮廓并把轮廓增亮。

——全部完——

备注:

1、请参考《CSS网页样式设计——CSS使用详解》黄斯伟著 人民邮电出版社出版。

2、以上CSS均指CSS1.

上一篇
闪动论坛 打印此页 发送给好友 返回顶部