第一章 概述

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

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

用常见的超文本编辑器来实现，如Frontpage,Dreamweaver；
用任何不带格式的文本编辑器来编写，后缀名为.htm或.html，如记事本、写字板；
用任何不带格式的文本编辑器来编写，后缀名为.css。
第二章 CSS初步了解

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

在文档<HEAD>中用<Style type="text/css"></style>定义；
使用<LINK>元素链接到外部的样式表单。<LINK REL="stylesheet" href="style1.css">；
在<BODY>内部的元素中使用<STYLE>定义CSS，如<H3 Style="">；
使用CSS "@import"标记来导入样式表单；
2、选择符

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

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

3、使CSS更容易和更强大

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

使用上下文关联的选择符：如strong em{color:red}
选择符编组：如h1,strong em,td{color:blue;}
简化编码：如em{font:12pt/14pt bolder arial,helvetical}
使用锚伪类：如a:link{color:red}，选择附中的元素类型可以省略而使用缺省值如:link{color:red}
4、定位

　　使用元素的position属性，有绝对定位（absolute）和相对定位（relative）。

5、3D层技术

　　使用z-index属性。

6、特殊效果

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

第三章 CSS进一步学习

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

2、伪类：

选择附中的元素类型可以省略而使用缺省值如:link{color:red}
伪类可以被用在关联选择符里：a:link img{border:solid blue}
伪类可以与通用类组合：a.external:visited{color:blue}
3、首行和首字伪元素：

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

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

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

如果选择符与元素匹配，那么声明发生作用；如果没有适用的声明，用继承值；如果没有继承值，用默认值。
标注“!important”的比未标注的级别高；
作者的样式表单覆盖读者的样式表单，读者的覆盖UA的。
按选择符的指数来排列。（略）
按顺序排列，后一个执行的胜出。
第四章 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

absolute-size:xx-small|x-small|small|medium|large|x-large|xx-large
relative-size:larger|smaller
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

capitalize:每个单词的第一个字母大写。
uppercase:所有字都大写。
lowercase:所有字都小写。
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

dotted:点组成的虚线。
dash:短线组成的虚线。
double:双线。
groove:3D沟槽状边框。
ridge:3D脊状的边框。
inset:3D内嵌边框（颜色较深）。
outset:3D外嵌边框（颜色较浅）。
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

disc:圆盘
circle:圆圈
square:方块
decimal:十进制数1、2、3……
lower-roman:小写罗马数字i,ii,iii...
upper-roman:大写罗马数字I,II,III...
lower-alpha:小写字母a,b,c...
upper-alpha:大写字母A,B,C...
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

em代表的高度就是大写字母"M"(或者"H")的高度。优越性是设计者和用户都具有对字体大小的控制权，缺陷是早期版本的浏览器不支持。
二、颜色单位
用百分比值来表示；如color:rgb(50%,0,50%)
使用0-255之间的整数值来设置：如color:rgb(128,0,128)
使用十六进制数组定义颜色：如#fc0eab
使用简化的十六进制数定义颜色：如#080
为颜色取名：aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,yellow
三、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

fill是默认值，也是传统布局规定。把框架中的内容按照浏览器传统的方法排列出来成为一个html文档，left,top,right,bottom值都会被忽略不计。
fixed:把没一个元素都放置在相对于框架结构的固定位置上。
layout:row 把框架结构按照一个单一列的形式互相紧挨着排列起来。
layout: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:>属性。

target:_blank 打开新窗口。
target:_popup 打开新的弹出窗口，通常没有变框，适用于消息、警告等。
target:_self 在当前框架结构中打开，会覆盖当前内容。
target:_parent 在当前一级的上级框架里打开，如果没有上级框架，则会在自身框架打开。
target:_top 在当前窗口打开，覆盖所有的框架内容。
四、处理“溢出”
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=)作用是把一个元素与背景混合。

opacity代表透明度，从0-100。
finishopacity指定渐变时的结束透明度。
style指定了透明区域的形状特征。0-统一形状；1-线形；2-放射状；3-长方形。
startX和startY代表透明效果开始的x,y坐标；
finishX和finishY代表结束的x,y坐标。
2、blur 语法：filter:blur(add=,direction=,strength=) 作用是产生模糊效果。

add指定图片是否被改变成印象派的模糊效果。true,false 对文字设定为add=1时效果很好。
direction设置模糊的方向。有0,45,90,135,180,225,270,315
strength 只能是整数，代表有多少像素的宽度将受到模糊影响。默认值是5。
3、chroma 语法：filter:chroma(color=) 设置一个对象中指定的颜色为透明色。

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

positive 为true时可以为任何的非透明像素建立可见的投影。为false时就为透明的像素部分建立可见的投影。
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=) 波动效果。

add 默认值为true 表示是否要把对象按照垂直的波形样式打乱。
freq是波纹频率。指定在这个对象上面一共需要产生多少个完整的波纹。
lightstrength可对波纹增强光影效果。从0-100。
phase 设置正弦波开始的便宜量。0-100。
strength 代表振幅大小。
14、Xray 语法：filter:Xray 反映出对象的轮廓并把轮廓增亮。

Css网页样式设计的更多相关文章

  1. 详解CSS网页布局中默认字体样式

    浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...

  2. 精通CSS+DIV网页样式与布局--页面和浏览器元素

    在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动 ...

  3. 精通CSS+DIV网页样式与布局--页面背景

    上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...

  4. 精通CSS+DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

  5. 精通CSS+DIV网页样式与布局--初探CSS

    CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

  6. HTML&CSS精选笔记_HTML与CSS网页设计概述

    HTML与CSS网页设计概述 Web基本概念 认识网页 网页主要由文字.图像和超链接等元素构成.当然,除了这些元素,网页中还可以包含音频.视频以及Flash等. 名词解释 Internet网络 就是通 ...

  7. 《锋利的jQuery》读书要点笔记6——制作商城网页：结构和样式设计

    第8章 用jQuery打造个性网站 做一个购物网站并用jQuery来完善.大体步骤是: 收集素材 确定网站结构 A. 文件结构,imagea文件夹用来存放将要用到的图片,styles文件夹存放CSS, ...

  8. CSS+DIV网页样式布局实战从入门到精通 中文pdf扫描版

    CSS+DIV网页样式布局实战从入门到精通通过精选案例引导读者深入学习,系统地介绍了利用CSS和DIV进行网页样式布局的相关知识和操作方法. 全书共21章.第1-5章主要介绍网页样式布局的基础知识,包 ...

  9. CSS（网页样式语言）基础

    所谓全栈,个体可以独立地完成系统的设计.开发.测试.部署以及运维.打通一个领域从无到有的全过程. 为什么会有 markdown 文本编辑显示工具呢,因为 html 太重了.markdown 是 htm ...

随机推荐

  1. POJ 1236 学校传数据 强连通+缩点+DAG

    题意描述: 网络中有一些学校,每个学校可以分发软件给其他学校.可以向哪个分发取决于他们各自维护的一个清单. 两个问题 1:至少要copy多少份新软件给那些学校, 才能使得每个学校都能得到. 2:要在所 ...

  2. 【BZOJ1066】 [SCOI2007]蜥蜴

    Description 在一个r行c列的网格地图中有一些高度不同的石柱,一些石柱上站着一些蜥蜴,你的任务是让尽量多的蜥蜴逃到边界外. 每行每列中相邻石柱的距离为1,蜥蜴的跳跃距离是d,即蜥蜴可以跳到平 ...

  3. 取值函数（getter）和存值函数（setter）

    todo get和set关键字

  4. 函数式接口和Lambda表达式

    函数式接口(一般标有@FunctionalInterface)就是只定义一个抽象方法的接口. 一个接口,如果满足函数式接口的定义,那么即使不标注为 @FunctionalInterface, 编译器依 ...

  5. tensorflow 分布式搭建

    https://blog.csdn.net/qq_40652148/article/details/80467131 https://yq.aliyun.com/articles/602111 git ...

  6. C# Setting.settings . 用法

    1.定义 在Settings.settings文件中定义配置字段.把作用范围定义为:User则运行时可更改,Applicatiion则运行时不可更改.可以使用数据网格视图,很方便: 2.读取配置值 t ...

  7. RocketMQ 消费者

    本文分析 DefaultMQPushConsumer,异步发送消息,多线程消费的情形. DefaultMQPushConsumerImpl MQClientInstance 一个客户端进程只有一个 M ...

  8. Selenium学习之==>WebDriverApi接口详解

    浏览器操作 driver.back() # 后退 driver.forward() # 前进 driver.refresh() # 刷新 窗口操作 driver.get_window_size() # ...

  9. 基于Python对象引用、可变性和垃圾回收详解

    基于Python对象引用.可变性和垃圾回收详解 下面小编就为大家带来一篇基于Python对象引用.可变性和垃圾回收详解.小编觉得挺不错的,现在就分享给大家,也给大家做个参考. 变量不是盒子 在示例所示 ...

  10. 理解ES6中的Iterator

    一.为什么使用Iterator 我们知道,在ES6中新增了很多的特性,包括Map,Set等新的数据结构,算上数组和对象已经有四种数据集合了,就像数组可以使用forEach,对象可以使用for...in ...