CSS样式的基础学习总结

CSS样式的基础学习总结

转自：http://www.jb51.net/css/108455.html

一．CSS基本介绍 

级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。 

CSS是英语CascadingStyle Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件样式的计算机语言。CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。 

二．CSS的使用方法 

有三种方法可以在站点网页上使用样式表： 

外部样式：将网页链接到外部样式表。 

内页样式：在网页上创建嵌入的样式表。 

行内样式：应用内嵌样式到各个网页元素。 

每一种方法均有其优缺点： 

当要在站点上所有或部分网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表中修改一次，而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名，例如牛腩新闻发布系统中的公共样式Common.css。然后在需要此样式的页面中将其链接进来，如： 

<link href="/css/Common.css"rel="stylesheet" type="text/css"/> 

当人们只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式表是一种级联样式表，“嵌”在网页的 <HEAD>标记符内。嵌入的样式表中的样式只能在同一网页上使用。 如： 

<style type="text/css"><!-- /* 把声明的样式包含在一个html注释中，这样可以解决较老的浏览器不识别style的问题 */ 

body {background:grey;} 

</style> 

使用内嵌样式以应用级联样式表属性到网页元素上。如： 

<pstyle="@importurl('style3.css');">CSS document</p> 

<!-- 不能在style属性中使用@import --> 

如果网页链接到外部样式表，为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。

要在网页上使用外部样式表的样式，可将该网页链接到样式表，方法是使用位于 “格式” 菜单上的 “样式表连接” 命令。可以链接一个或数个样式表到网页视图模式下的当前网页，或到在文件夹列表中的所选网页，或到站点上的全部网页。 

该“样式” 框列出标准 HTML 标记符，例如标题 

1，还有嵌入的样式表或链接到网页的外部样式表中所含的类或 ID 选择器。要应用样式到网页元素，请选定该样式然后单击 “样式” 框中的样式或选择器。 

在 Microsoft FrontPage 2000中，某些格式设置特性会作为内嵌样式自动应用。例如∶如果使用 “边框与阴影” 命令（在 “格式” 菜单上）在普通段落周围应用框，FrontPage 会写下格式设置信息，作为段落标记符的内嵌样式属性（例如∶ <pstyle="border-style: solid">）。然而某些属性的应用需要使用 CSS，其他则需要使用 HTML 。如果人们只想使用 CSS 应用内嵌样式，可使用 “样式”按钮（位于网页元素的 “属性” 对话框里）应用类或 ID 选择器或嵌入式样式。 

三、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;/*文字粗体*/ 

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; /*英文小写*/ 

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;/*文字垂直向下对齐*/ 

四、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;/*空心圆形符号*/ 

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; /*浮水印固定背景*/ 

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; /*向下对齐*/ 

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 

箭头朝右 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: 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/*双线框*/ 

groove/*立体内凸框*/ 

ridge/*立体浮雕框*/ 

inset/*凹框*/ 

outset/*凸框*/ 

八、CSS表单运用： 

文字方块 <input type="text" name="T1"size="15"> 

按钮 <input type="submit" value="submit"name="B1"> 

复选框 <input type="checkbox" name="C1"> 

选择钮 <input type="radio" value="V1" checkedname="R1"> 

多行文字方块 <textarea rows="1" name="S1"cols="15"></textarea> 

下拉式菜单 <select size="1" name="D1"><option>选项1</option> 

<option>选项2</option></select> 

九、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-color:#fcfcfc/*立体滚动条阴影颜色*/ 

Scrollbar-3dlight-color:#fcfcfc/*滚动条亮边的颜色*/ 

Scrollbar-arrow-color:#34837/*上下按钮上三角箭头的颜色*/ 

Scrollbar-track-color:#fcfcfc/*滚动条的背景颜色*/ 

Scrollbar-darkshadow-color:#66c0f4/*立体滚动条强阴影颜色*/ 

Scrollbar-base-color:#fcfcfc/*滚动条的基本颜色*/ 

以上是对CSS样式的基础学习，如有出入，还请见谅。