十年网站开发经验+多家企业客户+靠谱的建站团队
量身定制+运营维护+专业推广+无忧售后，网站问题一站解决
CSS发展史
CSS（CascadingStyleSheets，层叠样式表）是一种将表示样式应用到标记的系统。CSS以设计、改变其HTML页面的样式而知名，并使用于Web和其他媒介，如XML文档中。1996年12月W3C推出了CSS规范的第一个版本，1998年W3C发布了CSS的第二个版本即CSS2.0,2001年5月W3C开始进行CSS3标准的制定，到目前为止该标准还没有最终定稿。
CSS1.0
选择器：要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，就需要用到CSS选择器。选择器大致分为派生选择器、ID选择器和类选择器，用来定义希望应用样式的HTML元素或者标签。
样式属性：该属性主要包括Font字体、Text文本、Background背景、Position定位、Dimensions尺寸、Layout布局、Margin外边框、Border边框、Padding内边框、List列表、Table表格和Scrollbar滚动条等，用于定义网页的一些样式变化。
伪类属性：主要定义了针对描述对象a的link、hover、active、visited和针对节点的first-letter、first-child、first-line等几个伪类属性。
保存方式：用户可以直接存储在HTML网页中，也可以将CSS样式代码存储为独立的样式表文件。
CSS2.0
选择器：css2提供了更多强大的选择器，用来定位HTML节点或者标记
符号名称
含义
示例
*
用于匹配任何标记
*{color：red}
用于指定父子节点关系
AAACCCDDD{color:red}匹配父节点分别为CCC和AAA的节点DDD节点
□
用于匹配在某一层有某个父节点的节点
AAACCCDDD{color:blue}匹配包含父节点CCC的父节点AAA的节点DDD
+
用于表示在同一个级别节点之间的关系
AAA+BBB{color:red}表示，有一个兄弟节点AAA的节点BBB
名称[表达式]
选择包含特殊属性值的节点
BBB[text="xyz"]{color:blue}表示包含text属性值为xyz的BBB标签
位置模型：在CSS2中进一步增强了位置属性功能，增加了relative、absolute和fixed等几个值
值名称
relative
元素框相对父节点偏移某个距离，元素仍保持其未定位前的形状，它原本所占的空间仍保留
absolute
元素框从文档流中完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样
fixed
元素框的表现类似于absolute值，不过其包含块是视窗本身
z-index
用来指定相互重叠的元素的叠放顺序，数字较大的元素会叠放在数值较小的元素前面
布局、表格样式：CSS2对display属性进行了扩充，用户可用该属性指定元素是否会显示以及如何显示，也可以使用该属性配合位置和浮动进行页面的布局。另外，用户还可以将一个非表格的结构化文档显示为一个表格样式。
媒体类型：用于对不同的媒体类型定义不同的样式。
属性名称
aural
用于语音和音频合成器
embossed
用于分页的盲人用点字法打印
用于打印机
screen
用于计算机显示器
braille
用于盲人用点字法触觉回馈设备
projection
用于方案展示如幻灯片
伪类：CSS2增加了focus（将样式添加到被选中的元素）、：first-child（将特殊的样式添加到元素的第一个子元素）、：lang（允许创作者来定义指定的元素中使用的语言）。
光标样式：增加了cursor属性，用于指定设备应该显示怎样的光标类型。
default
默认光标（通常是一个箭头）
auto
默认，浏览器设置的光标
crosshair
光标呈现为十字线
pointer
光标呈现为指示链接的指针（一只手）
move
此光标指示某对象可被移动
e-resize
此光标指示矩形框的边缘可被向右移动
text
此光标指示文本
wait
此光标指示程序正忙（通常是一只表或沙漏形状）
help
此光标指示可用的帮助（通常是一个问号或一个气球）
DIV+CSS其实是一种错误的叫法，标准的叫法应该是XHTML+CSS，因为DIV与table都是XHTML或HTML语言中的一个标记，而CSS只是一种样式表现。DIV+CSS已经将内容和表现分割开来，所以修改网页时只需指定内容修改即可。
CSS常用命令规则
名称
header
页头
content/Container
内容
footer
页脚
nav
导航
sidebar
侧栏
column
栏目
wrapper
页面外围控制整体布局宽度
left
左侧
right
右侧
center
中间
loginbar
logo
标志
banner
main
页面主题
hot
热点
news
新闻
download
下载
subnav
子导航
menu
菜单
submenu
子菜单
search
搜索
friendlink
copyright
scroll
滚动
content
tab
标签页
list
msg
提示信息
title
栏目标题
joinus
加入
guild
指南
service
服务
register
注册
status
状态
vote
投票
partner
合作伙伴
CSS（层叠样式表）级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML
（标准通用标记语言的一个子集）等文件样式的计算机语言。
有三种方法可以在站点网页上使用样式表：
外联式Linking（也叫外部样式）：将网页链接到外部样式表。
嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。
内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。
在Dreamweaver8中，可以在开始弹出框中点击新建CSS文件。也可以在最上面的菜单栏里占击
文件，新建。在弹出框中选择CSS文件就可以了。
CSS样式表代码布局基础教程
CSS样式表代码布局基础教程—课程10：外部样式表(一)
十、外部样式表
外部样式表是把各种样式单独存在一个文件里，供其他多个网页调用，下面我们来看一个练习；
1、文本编辑器
1）打开记事本或gedit、leafpad文本编辑器，gedit在查看菜单里选择“HTML”；
2）点菜单“文件－保存”命令，以“lx10.html”为文件名，类型所有文件，编码UTF-8，保存到自己的文件夹；
3）按照基础02课的方法，输入、和的内容；
2、外部样式表
1）点菜单“文件－新建”，新建一个空白文档，保存文件名为style.css，位置跟lx10放一起，这是一个单独的文件；
2）在里面输入下面的内容；
/*byTeliuTe*/
body{
background-color:#ccffff;
font-size:1.2em;
span{
color:#800000;
.myblue{
color:blue;
下面的内容跟内部样式表相同，各个标签和它的样式，保存一下文件；
4）回到lx10.html文档中，在head区内加上下面一行外部引用标识；
5）然后在body区内，输入下面的内容；
6）保存一下文件，回到自己文件夹中，打开lx10网页，看一下效果；
7）在多个网页具有相同样式时，使用外部样式表可以节省空间和减小网页大小；
本节学习了外部样式表的使用方法，你成功地完成了本教程，欢迎继续学习本站的其他课程！
本教程由86团学校TeliuTe制作
CSS标签大全(一)
字体属性：(font)
大小font-size:x-large;(特大)xx-small;(极小)一般中文用不到，只要用数值就可以，单位：PX、PD
样式font-style:oblique;(偏斜体)italic;(斜体)normal;(正常)
行高line-height:normal;(正常)单位：PX、PD、EM
粗细font-weight:bold;(粗体)lighter;(细体)normal;(正常)
变体font-variant:small-caps;(小型大写字母)normal;(正常)
大小写text-transform:capitalize;(首字母大写)uppercase;(大写)lowercase;(小写)none;(无)
修饰text-decoration:underline;(下划线)overline;(上划线)line-through;(删除线)blink;(闪烁)
常用字体：(font-family)"CourierNew",Courier,monospace,"TimesNewRoman",Times,serif,Arial,Helvetica,sans-serif,Verdana
背景属性：(background)
色彩background-color:#FFFFFF;
图片background-image:url();
重复background-repeat:no-repeat;
滚动background-attachment:fixed;(固定)scroll;(滚动)
位置background-position:left(水平)top(垂直);
简写方法background:#000url(..)repeatfixe辅助图片一律用背景处理dlefttop;
区块属性：(Block)
字间距letter-spacing:normal;数值
对刘text-align:justify;(两端对齐)left;(左对齐)right;(右对齐)center;(居中)
缩进text-indent:数值px;
垂直对齐vertical-align:baseline;(基线)sub;(下标)super;(下标)top;text-top;middle;bottom;text-bottom;
词间距word-spacing:normal;数值
空格white-space:pre;(保留)nowrap;(不换行)
显示display:block;(块)inline;(内嵌)list-item;(列表项)run-in;(追加部分)compact;(紧凑)marker;(标记)table;inline-table;table-raw-group;table-header-group;table-footer-group;table-raw;table-column-group;table-column;table-cell;table-caption;(表格标题)
方框属性：(Box)
width:;height:;float:;clear:both;margin:;padding:;顺序：上右下左
边框属性：(Border)
border-style:dotted(点线);dashed(虚线);solid(实线);double(双线);groove(槽线);ridge;(脊状)inset;(凹陷)outset;
border-wid
th:;边框宽度
border-color:#;
简写方法border：widthstylecolor;
列表属性：(List-style)
类型list-style-type:disc;(圆点)circle;(圆圈)square;(方块)decimal;(数字)lower-roman;(小罗码数字)upper-roman;lower-alpha;upper-alpha;
位置list-style-position:outside;(外)inside;
图像list-style-image:url(..);
定位属性：(Position)
Position:absolute;relative;static;
visibility:inherit;visible;hidden;
overflow:visible;hidden;scroll;auto;
clip:rect(12px,auto,12px,auto)(裁切)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;/*文字粗体*/
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边框空白
padding-top:10px;/*上边框留空白*/
padding-right:10px;/*右边框留空白*/
padding-bottom:10px;/*下边框留空白*/
padding-left:10px;/*左边框留空白*/
三、CSS符号属性：
list-style-type:none;/*不编号*/
list-st
yle-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:1pxsolid#6699cc;/*上框线*/
border-bottom:1pxsolid#6699cc;
/*下框线*/
border-left:1pxsolid#6699cc;/*左框线*/
border-right:1pxsolid#6699cc;/*右框线*/
以上是建议书写方式,但也可以使用常规的方式如下:
border-top-color:#369/*设置上框线top颜色*/
border-top-width:1px/*设置上框线top宽度*/
border-top-style:solid/*设置上框线top样式*/
其他框线样式
solid/*实线框*/
dotted/*虚线框*/
double/*双线框*/
groove/*立体内凸框*/
ridge/*立体浮雕框*/
inset/*凹框*/
outset/*凸框*/
七、CSS表单运用：
文字方块
按钮
复选框
选择钮
多行文字方块
下拉式菜单选项1选项2
八、CSS边界样式：
margin-top:10px;/*上边界*/
margin-right:10px;/*右边界值*/
margin-bottom:10px;/*下边界值*/
margin-left:10px;/*左边界值*/
CSS属性：字体样式(FontStyle)
序号中文说明标记语法
1字体样式{font:font-stylefont-variantfont-weightfont-sizefont-family}
2字体类型{font-family:"字体1","字体2","字体3",...}
3字体大小{font-size:数值|inherit|medium|large|larger|x-large|xx-large|small|smaller|x-small|xx-small}
4字体风格{font-style:inherit|italic|normal|oblique}
5字体粗细{font-weight:100-900|bold|bolder|lighter|normal;}
6字体颜色{color:数值;}
7阴影颜色{text-shadow:16位色值}
8字体行高{line-height:数值|inherit|normal;}
9字间距{letter-spacing:数值|inherit|normal}
10单词间距{word-spacing:数值|inherit|normal}
11字体变形{font-variant:inherit|normal|small-cps}
12英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}
13字体变形{font-size-adjust:inherit|none}
14字体{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}
文本样式(TextStyle)
1
行间距{line-height:数值|inherit|normal;}
2文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink}
3段首空格{text-indent:数值|inherit}
4水平对齐{text-align:left|right|center|justify}
5垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6书写方式{writing-mode:lr-tb|tb-rl}
背景样式
1背景颜色{background-color:数值}
2背景图片{background-image:url(URL)|none}
3背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4背景固定{background-attachment:fixed|scroll}
5背景定位{background-position:数值|top|bottom|left|right|center}
6背影样式{background:背景颜色|背景图象|背景重复|背景附件|背景位置}
框架样式(BoxStyle)
1边界留白{margin:margin-topmargin-rightmargin-bottommargin-left}
2补白{padding:padding-toppadding-rightpadding-bottompadding-left}
3边框宽度{border-width:border-top-widthborder-right-widthborder-bottom-widthborder-left-width}
宽度值：thin|medium|thick|数值
4边框颜色{border-color:数值数值数值数值}数值：分别代表top、right、bottom、left颜色值
5边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6边框{border:border-widthborder-stylecolor}
上边框{border-top:border-top-widthborder-stylecolor}
右边框{border-right:border-right-widthborder-stylecolor}
下边框{border-bottom:border-bottom-widthborder-stylecolor}
左边框{border-left:border-left-widthborder-stylecolor}
7宽度{width:长度|百分比|auto}
8高度{height:数值|auto}
9漂浮{float:left|right|none}
10清除{clear:none|left|right|both}
分类列表
1控制显示{display:none
|block|inline|list-item}
2控制空白{white-space:normal|pre|nowarp}
3符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4图形列表{list-style-image:URL}
5位置列表{list-style-position:inside|outside}
6目录列表{list-style:目录样式类型|目录样式位置|url}
7鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
CSS样式表代码布局基础教程—课程9：链接样式
九、链接样式
使用伪类可以设置链接的样式，比如改变颜色、去掉下划线等，下面我们来看一个练习；
2）点菜单“文件－打开”命令，打开自己文件夹里的lx7.html
3）再点菜单“文件－另存为”命令，保存文件名为“lx9.html”
2、设置伪类
1）在head区内，输入内部样式表，设定各个的锚标记样式，如下；
2）第一个a设定全局锚点的样式，用块显示、宽度是50像素、背景色是浅绿色，接下来是锚点a的成员：
link是链接，设定页面中的链接样式，颜色蓝色，不带下划线，
visted是访问过的链接，设定样式为栗色、不带下划线，
active是按下鼠标时的链接，设定颜色为绿色、无下划线，
hover是鼠标移过来悬停，设定颜色为红色、有下划线，背景色改成黄色，hover放在其他几个成员的后面；
3）保存一下文件，回到自己的文件夹中，打开lx9网页，试着用鼠标点击、拖动链接，看一下效果；
本节学习了设置链接样式的基本方法，如果你成功地完成了练习，请继续学习下一课内容；
CSS样式表代码布局基础教程—课程8：内部样式表(一)
八、内部样式表
内部样式表放在网页的...区内，集中在一起方便管理，下面我们来看一个练习；
2）点菜单“文件－保存”命令，以“lx8.html”为文件名，类型所有文件，编码UTF-8，保存到自己的文件夹；
2、内部样式表
1）对系统标签使用样式，这会影响所有的这种标签，在head区输入下面的代码；
2）第一行是样式表开始，最后是样式表结束，是注释标签，
首先是对body标签设置样式，这样凡是在body区里的内容，都会使用这个样式，设置背景色和文字大小
然后对span标签设置样式，设置内容的颜色，以后凡是用到span的地方，都使用这个颜色；
3）接着在body区里输入下面的内容；
4）保存一下文件，回到自己的文件夹里，打开lx8网页，看一下效果；
5）自定义样式选择符，除了系统的标签外，也可以自己定义需要的样式标记，在head的.样式表里加入下面的代码；
前面的点，表示这是一个通用的样式，可以重复使用，如果是#号，表示是一个标识符，是专用唯一的id，myblue是自定义的样式名称；
6）在body区里加入下面的代码，加在上一行的前面，再加上
标签分成两段；
7）这儿使用的是span，里面的class套用的是myblue样式，替换了前面设的样式，
保存一下文件，到浏览器中看看效果；
本节学习了使用内部样式表的基本方法，如果你成功地完成了练习，请继续学习下一课内容；
CSS样式表代码布局基础教程—课程7：ul列表(一)
七、ul列表
对于排列有序的条目，可以使用列表来实现，下面我们来看一个练习；
1）在后面接着输入下面的代码；
第一课
第二课
第三课
2）前面的
建立一个列表，里面的各个
是列表项，各个列表项排列对齐缩进，前面有一个圆点列表符号，
保存一下文件，到自己文件夹里，打开lx7网页，看看列表的效果，这儿加了超级链接；
3）如果要去掉前面的圆点，可以在ul的样式里设定，前面的缩进也可以设定内边距为0，输入下面的代码；
4）保存一下，再到浏览器里看一下，三个列表都排到了左边对齐；
5）如果要排列成横向水平的菜单样式，可以在每个列表项里加上float属性，防止重叠再设定一个宽度，代码如下；
6）保存一下，再到浏览器里看一下，三个列表项都水平排列了；
本节学习了列表的基本使用方法，如果你成功地完成了练习，请继续学习下一课内容；
CSS样式表代码布局基础教程—课程6：div布局(一)
六、div布局
默认div占据一行，第二个div到下一行去，怎样用div进行分栏布局，我们来看一个练习；
2）点菜单“文件－打开”命令，打开上次的lx5网页，再点“文件－另存为”，以“lx6.html”为文件名，保存到自己的文件夹；
3）按照两列并排来进行布局；
2、定位布局
1）在下面加一个
标签，作为主框架，在标签里加入下面的样式；
2）前面的id是这个div的标识符，用来标记这个div容器，
在里面的样式里设置了颜色、边框、内边距，
设定了固定宽度604，高度202，这个可以计算出来，根据下面两列的宽度再加上内边距；
3）修改里面的古诗的div样式，加上背景色、去掉内外边距，最后加上一个左浮动float:left
4）在这个后面，再加上另一个div，样式相同，里面输入另一首古诗；
5）这儿的float:left;让这个div框，跟上一个框并排左对齐，而不是到下一行去，
最后再加一个标签，结束最外面的大框架；
6）保存一下文件，回到自己文件夹里，打开lx6网页看看效果；
本节学习了使用div布局的基本方法，如果你成功地完成了练习，请继续学习下一课内容；