网页样式CSS总结

1、第2章 网页样式CSS总结一、CSS的概念与作用Css全称为级联样式表（Cascading Style Sheet）,通常又称为风格样式表（Style Sheet）,是用来进行网页风格设计的。通过设立样式表，可以统一控制HTML中各标签的显示属性。CSS可以更有效地控制网页外观。使用CSS，可以精确的定位网页元素的位置，美化网页外观。一个合理的CSS，还能有效地节省网络带宽，提高用户体验。同时，使用CSS制作网页，还有以下优点：1、 内容与表现分离。有了CSS，网页的内容（XHTML）与表现就可以分开了。2、 表现统一。可以使网页的表现非常统一，并且容易修改。3、 丰富的样式。使得页面布局更加

2、灵活。4、 减少网页的代码量，增加网页的浏览速度，节省网络带宽。5、 运用独立于页面的CSS，还有利于网页被搜索引擎收录。2、 标签标签可以用于定义HTML文档中的分区或节，即可以把HTML文档分割为独立的、不同的部分。标签就像一个容器，可以放置其他的HTML标签，如段落，列表，图片，表单等。CSS的基本语法结构：=“text/css”选择器属性：属性值;.选择器：表示被修饰的对象，如页面中被修饰的段落标签、列表标签等。属性：希望改变的样式，如颜色color、字体大小fontsize等，属性和属性值用冒号（：）隔开。例如，设置页面中所有的标签的文字颜色为红色，字体大小为15px，对应的样式代码

3、如下：Licolor:#ff0000;fontsize:15px;3、 CSS选择器：根据选择器表示所修饰的内容类别，选择器又分为标签选择器、类选择器、ID选择器、并集选择器和后代选择器。其中，前3类是CSS的基本选择器，后2类是由多个选择器或标签复合而成的选择器，简称复合选择器。1、 标签选择器当需要对页面内HTML标签的内容进行修饰时，则采用标签选择器。标签选择器的语法：标签名属性：属性值;.例如，设置页面中标签中的文本颜色为灰色，字体大小为28px,代码如下所示：h1Color:#cccccc;fontsize:28px;2、 类选择器使用标签选择器修饰的范围比较广，是针对某一类的表签进

4、行修饰，如果希望设置个别标签的样式，那么就使用类选择器。类选择器的语法：.类名属性：属性值;.类名可以任意选择，应用样式时使用标签的class属性引用类样式，即：标签内容3、 ID选择器ID属性是HTML元素的唯一标志，因此要求页面内不能有重复的ID标记属性，W3C以将ID属性定义为HTML元素的标准属性。对应的ID选择器一般用于修饰对应ID标记的HTML元素内容。ID选择器的语法：#ID名称属性：属性值;.4、 并集选择器：并集选择器是多个选择器通过逗号连接而成的，是复合选择器之一。在声明各种CSS选择器时，如果某些选择器的风格是完全相同的，或者部分相同，这时便可以利用并集选择器同时声明风格

5、相同的CSS选择器。并集选择器的语法：标签名,类名，#ID名称属性：属性值;.5、后代选择器后代选择器也是复合选择器中的一种，主要通过嵌套的方式对特殊位置的HTML标签进行声明。后代选择器的写法是把外层的表签写在后面，之间用空格分隔。当标签发生嵌套时，内层的表签就成为外层标签的后代。后代选择器的语法：p span属性：属性值;.4、 CSS的继承性： 所有的CSS语句都是居于各个标签之间的继承关系的，为了更好的理解继承关系，首先要从HTML文件的组织结构入手。 样式优先级：样式的优先级可以分为以下几种：1、 基本选择器之间：ID选择器类选择器标签选择器。2、 样式表之间：行内样式内嵌样式外部样

6、式。3、 CSS样式之间：在同一个选择器中，两条相同的声明，后一条声明会覆盖前一条声明，即显示后一条声明的结果。5、 CSS属性：CSS文字属性： color: #999999; /*文字颜色*/ font-family: 宋体,sans-serif; /*文字字体*/ font-size: 9pt; /*文字大小*/ font-style:itelic;/*文字斜体*/ font-variant:small-caps;/*小字体*/ letter-spacing: 1pt; /*字间距离*/ line-height: 200%; /*设置行高*/ font-weight:bold;/*文字粗

7、体*/ vertical-align:sub;/*下标字*/ vertical-align:super;/*上标字*/ text-decoration:line-through;/*加删除线*/ text-decoration:overline;/*加顶线*/ text-decoration:underline;/*加下划线*/ text-decoration:none;/*删除链接下划线*/ text-transform: capitalize; /*首字大写*/ text-transform: uppercase; /*英文大写*/ text-transform: lowercase; /

8、*英文小写*/ text-align:right;/*文字右对齐*/ text-align:left;/*文字左对齐*/ text-align:center;/*文字居中对齐*/ text-align:justify;/*文字分散对齐*/ vertical-align属性 vertical-align:top;/*垂直向上对齐*/ vertical-align:bottom;/*垂直向下对齐*/ vertical-align:middle;/*垂直居中对齐*/ vertical-align:text-top;/*文字垂直向上对齐*/ vertical-align:text-bottom;/*文

9、字垂直向下对齐*/ CSS符号属性： list-style-type:none;/*不编号*/ list-style-type:decimal;/*阿拉伯数字*/ list-style-type:lower-roman;/*小写罗马数字*/ list-style-type:upper-roman;/*大写罗马数字*/ list-style-type:lower-alpha;/*小写英文字母*/ list-style-type:upper-alpha;/*大写英文字母*/ list-style-type:disc;/*实心圆形符号*/ list-style-type:circle;/*空心圆形符

10、号*/ list-style-type:square;/*实心方形符号*/ list-style-image:url(/dot.gif);/*图片式符号*/ list-style-position:outside;/*凸排*/ list-style-position:inside;/*缩进*/ CSS背景样式： background-color:#F5E2EC;/*背景颜色*/ background:transparent;/*透视背景*/ background-image: url(/image/bg.gif); /*背景图片*/ background-attachment: fixed;

11、/*浮水印固定背景*/ background-repeat: repeat; /*重复排列-网页默认*/ background-repeat: no-repeat; /*不重复排列*/ background-repeat: repeat-x; /*在x轴重复排列*/ background-repeat: repeat-y; /*在y轴重复排列*/ 指定背景位置 background-position: 90% 90%; /*背景图片x与y轴的位置*/ background-position: top; /*向上对齐*/ background-position: buttom; /*向下对齐*/

12、 background-position: left; /*向左对齐*/ background-position: right; /*向右对齐*/ background-position: center; /*居中对齐*/ CSS连接属性： a/*所有超链接*/ a:link/*超链接文字格式*/ a:visited/*浏览过的链接文字格式*/ a:active/*按下链接的格式*/ a:hover/*鼠标转到链接*/ 鼠标光标样式： 链接手指 CURSOR: hand 十字体 cursor:crosshair 箭头朝下 cursor:s-resize 十字箭头 cursor:move 箭头朝

13、右 cursor:move 加一问号 cursor:help 箭头朝左 cursor:w-resize 箭头朝上 cursor:n-resize 箭头朝右上 cursor:ne-resize 箭头朝左上 cursor:nw-resize 文字I型 cursor:text 箭头斜右下 cursor:se-resize 箭头斜左下 cursor:sw-resize 漏斗 cursor:wait 光标图案(IE6) p cursor:url(光标文件名.cur),text; CSS框线一览表： border-top: 1px solid #6699cc; /*上框线*/ border-bottom:

14、 1px solid #6699cc; /*下框线*/ border-left: 1px solid #6699cc; /*左框线*/ border-right: 1px solid #6699cc; /*右框线*/ 以上是建议书写方式,但也可以使用常规的方式 如下: border-top-color: #369 /*设置上框线top颜色*/ border-top-width:1px /*设置上框线top宽度*/ border-top-style: solid/*设置上框线top样式*/ 其他框线样式 solid/*实线框*/ dotted/*虚线框*/ double/*双线框*/ groov

15、e/*立体内凸框*/ ridge/*立体浮雕框*/ inset/*凹框*/ outset/*凸框*/ CSS表单运用： 文字方块 按钮 复选框 选择钮 多行文字方块 下拉式菜单 选项1 选项2 CSS边界样式： margin-top:10px;/*上边界*/ margin-right:10px;/*右边界值*/ margin-bottom:10px;/*下边界值*/ margin-left:10px;/*左边界值*/ CSS边框空白 padding-top:10px;/*上边框留空白*/ padding-right:10px;/*右边框留空白*/ padding-bottom:10px;/*下边框留空白*/ padding-left:10px;/*左边框留空白*/ 滚动条样式 Scrollbar-face-color:#f3f3f3;/*滚动条凸出部分的颜色*/ Scrollbar-highlight-color:#f1f1f1/*滚动条阴影部分的颜色*/ Scrollbar-shadow-col