CSS基础教程.doc

CSS教程CSS教程目录1第一章 CSS简介4第一节：什么是CSS?4什么是CSS4参见4第二节：使用CSS的优势4第二章 CSS入门例子5示例5第三章 CSS语法5第一节：外部引用CSS5使用 link 标签引用CSS5使用 import 引用CSS6第二节：内部引用CSS6第三节：内联引用CSS7第四节：CSS 选择符 - CSS的名字7选择符语法7选择符取名规则8常用的三种选择符8选择符用法总结8第五节：CSS 声明9语法9介绍两个常用的技巧9第六节：CSS 注释10语法10示例10第四章 CSS颜色11CSS颜色表示方法11注意:11第五章CSS背景11第一节：CSS background-color 属性12background-color - 背景色,定义背景的颜色12示例12第二节：CSS background-image 属性12background-image - 定义背景图片12示例12第三节：CSS background-repeat 属性13background-repeat - 定义背景图片的重复方式13示例13第四节：CSS background-position 属性13background-position - 定义背景图片的位置13示例14第五节: CSS background-attachment 属性14background-attachment - 定义背景图片随滚动轴的移动方式14示例14第六节：CSS background 属性15background - 五个背景属性可以全部在此定义15示例15第六章 CSS文本16第一节: CSS text-decoration 属性16text-decoration - 定义文本是否有划线以及划线的方式16示例16第二节: CSS white-space 属性17white-space - 通过HTML文档的源代码的排版方式控制页面显示文本的排版方式17示例17第七章 CSS字体18第八章 CSS边框18第九章 CSS边外补白18第一节: CSS margin 属性18margin-top - 定义上边外补白19margin-right - 定义右边外补白19margin-bottom - 定义下边外补白19margin-left - 定义左边外补白19第十章 CSS边内补白19padding - 定义边内补白19padding-top - 定义上边内补白20padding-bottom - 定义下边内补白20padding-left - 定义左边内补白20padding-right - 定义右边内补白20第十一章 CSS属性索引20第一节：CSS2.1属性按功能索引20CSS盒模式20CSS视觉格式模型21CSS视觉效果21CSS列表21CSS背景22CSS字体22CSS文本22CSS颜色22第一章 CSS简介第一节：什么是CSS?什么是CSS CSS是Cascading Style Sheets(层叠样式表)的简称. CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言). 在标准网页设计中CSS负责网页内容(XHTML)的表现. CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀. 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课. CSS是由W3C的CSS工作组产生和维护的.参见 W3C的CSS主页/Style/CSS/ 在w3c网站上校验CSS的正确性/css-validator/ 第二节：使用CSS的优势 内容与表现分离,有了CSS,网页的内容(XHMTL)与表现就可以分开了. 使用CSS可以减少网页的代码量,增加网页的浏览速度第二章 CSS入门例子示例 定义文字的颜色p color:red;p1 color:blue;color就代表颜色,我们使用红色 red 为文字颜色.你可以修改代码使用 blue 蓝色, yellow 黄色等.学习文字的颜色这段代码显示的结果如下：第三章 CSS语法 CSS语法非常简单,组成CSS语法的元素只有CSS选择符与CSS属性. 每个CSS选择符由1个或多个CSS属性组成. CSS是大小写敏感的,在CSS语法中推荐使用小写.第一节：外部引用CSSCSS外部引用使用了外接的CSS文件,一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件.外部引用CSS是最好的引入CSS的方式(可以使代码量最小,表现最统一,也是标准网页设计推荐的).使用 link 标签引用CSS示例 href - 指定需要加载的资源(CSS文件)的地址URI rel - 指定链接类型 type - 包含内容的类型,一般使用type=text/css使用 import 引用CSS 示例import url(/style.css);相对路径与绝对路径加载文件的时候可以使用相对路径或者绝对路径.绝对路径:文件的完整路径,主页上的文件或目录在硬盘上真正的路径./html/default.html就是绝对路径,/html/default.html也是绝对路径,C:winntsystem.sys也是绝对路径相对路径:相对于我们查看文档的路径./default.html或者default.html或者././default.html都是相对路径 小结外部引用CSS中 link与import的区别差别1：老祖宗的差别。link属于XHTML标签，而import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，import就只能加载CSS了。差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。差别3：兼容性的差别。由于import是CSS2.1提出的所以老的浏览器不支持，import只有在IE5以上的才能识别，而link标签无此问题。差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为import不是dom可以控制的。第二节：内部引用CSS 示例/* -文字样式开始- */* 梦之都白色12象素文字 */.dreamduwhite12px color:white; font-size:12px; /* 梦之都黑色16象素文字 */.dreamdublack16px color:black; font-size:16px; /* -文字样式结束- */注意:style标签应该在head标签内部.第三节：内联引用CSS内联引用可以把CSS样式直接作用在XHTML标签中. 示例使用CSS内联引用表现段落.第四节：CSS 选择符 - CSS的名字CSS选择符就是CSS样式的名字,当在XHTML文档中表现一个CSS样式的时候,就要用到一个CSS.怎么用呢?这时就通过CSS选择符(CSS的名字)来指定此XHTML标签使用此CSS样式.选择符语法选择符名字声明;一个CSS选择符就定义了一个样式比如下面这三个例子pfont-size:12px;.dreamdubluecolor:blue;#dreamduredcolor:red;dreamdublue和dreamdured都是CSS的选择符,也就是CSS的名字.选择符取名规则CSS选择符可以使用英文字母的大写与小写,数字,连字号,下划线,冒号,句号.英文字母大写与小写 A-Z a-z 数字 0-9 连字号 - 下划线 _ 冒号 句号 . 提示: CSS选择符只能以字母开头.常用的三种选择符(我感觉这是初级教程中最难的地方:)xhtml标签选择符,比如 p标签选择符(代表所有的段落都使用这个CSS样式),比如 pfont-size:12px; id选择符,唯一性选择符,比如 #dreamduredcolor:red;,就是在名字前增加了一个#,id选择符在一个页面中只能出现一次,在整个网站中也最好出现一次(这样有利于程序员控制此元素,有多个一样名称的元素,就无法分开不好控制了). class选择符,多重选择符,比如.dreamdubluecolor:blue;,就是在名字前增加了一个.,class选择符在一个页面中可以出现多次(注意下面的示例中class选择符的用法). 示例梦之都xhtml标签选择符梦之都id选择符梦之都class选择符梦之都class选择符2,出现了多次.一个p元素使用了两个class选择符,他们之间用空格分开,而且class选择符可以在一个页面出现多次.选择符用法总结id与class选择符在CSS与XHTML中的用法总结CSS中的写法XHTML中的写法xhtml标签选择符pfont-size:12px;id选择符#id_selectorfont-size:12px;梦之都class选择符.class_selectorfont-size:12px;梦之都第五节：CSS 声明CSS声明是由属性,冒号(:),属性值和分号(;)组成的.语法属性:属性值; 示例font-size:12px;font-size代表字体大小. 12px字体大小的值.介绍两个常用的技巧 1,选择符的名字一样,声明是可以组合的例如：选择符名字声明1;声明2; divcolor:black;font-size:12px; 2,明全部一样,选择符的名字也可以组合例如：选择符名字1,选择符名字2,选择符名字3声明1;声明2;.dreamdudivwhite12px,h1,divcolor:white;font-size:12px;h1, p, divborder:1px solid black;第六节：CSS 注释就像HTML教程中描述的一样,在CSS文档中注释也起到很重要的作用,可以帮助我们记起CSS的含义,加载在HTML文档的位置等.CSS注释的开始使用/*,结束使用*/语法/* 注释内容 */示例/* -文字样式开始- */* 梦之都白色12象素文字 */.dreamduwhite12pxcolor:white;font-size:12px;/* 梦之都黑色16象素文字 */.dreamdublack16pxcolor:black;font-size:16px;/* -文字样式结束- */第四章 CSS颜色CSS颜色表示方法 CSS预定义颜色表示法(就是使用颜色的英文):color:red;color:green;color:blue; CSS RGB颜色表示法:color:rgb(255,0,0);color:rgb(0,255,0);color:rgb(0,0,255); CSS 16进制颜色表示法:color:#ff0000;color:#00ff00;color:#1199ff; CSS 短16进制颜色表示法,属于web safe colors(网络安全色):color:#f00;color:#0f0;color:#00f;短16进制颜色表示法就是当16进制颜色表示法中的两个表示颜色值的数字一样的时候的简写,比如color:#ff0000;就可以简写为color:#f00;注意: 使用16进制表示颜色时,要使用#标记 #rgb等价于#rrggbb,例如:#fb0等价于#ffbb00第五章 CSS背景背景(background),文字颜色可以使用color属性,但是包含文字的p段落,div层,page页面等的颜色与背景图片可以使用与background等属性.通常使用background-color定义背景颜色,background-image定义背景图片,background-repeat定义背景图片的重复方式,background-position定义背景图片的位置,background-attachment定义背景图片随滚动轴的移动方式.第一节：CSS background-color 属性background-color - 背景色,定义背景的颜色 取值: | transparent | inherit : 颜色表示法 transparent: 透明 inherit: 继承 初始值: transparent 继承性: 是 适用于: 所有元素 background:背景.color:颜色.示例body background-color:green;第二节：CSS background-image 属性background-image - 定义背景图片 取值: | none | inherit none: 无 inherit: 继承 初始值: none 继承性: 否 适用于: 所有元素 background:背景.image:图片.示例body background-image:url(html_table.png);p background-image:none;div background-image:url(list-orange.png);第三节：CSS background-repeat 属性background-repeat - 定义背景图片的重复方式 取值: repeat | repeat-x | repeat-y | no-repeat | inherit repeat: 平铺整个页面,左右与上下 repeat-x: 在x轴上平铺,左右 repeat-y: 在y轴上平铺,上下 no-repeat: 图片不重复 inherit: 继承 初始值: repeat 继承性: 否 适用于: 所有元素 background:背景.repeat:重复.示例body background-image:url(list-orange.png);background-repeat:no-repeat;divbackground-image:url(list-orange.png);background-repeat:repeat-y;background-position:right;第四节：CSS background-position 属性background-position - 定义背景图片的位置 取值: | | left | center | right | | top | center | bottom ? | left | center | right | top | center | bottom | inherit 水平 left: 左 center: 中 right: 右 垂直 top: 上 center: 中 bottom: 下 垂直与水平的组合 x-% y-% x-pos y-pos示例body background-image:url(list-orange.png);background-repeat:no-repeat;p background-image:url(list-orange.png);background-position:right bottom ;background-repeat:no-repeat;div background-image:url(list-orange.png);background-position:50% 20% ;background-repeat:no-repeat;background-position属性是通过平面上的x与y坐标定位的,所以通常取两个值.第五节: CSS background-attachment 属性background-attachment - 定义背景图片随滚动轴的移动方式 取值: scroll | fixed | inherit scroll: 随着页面的滚动轴背景图片将移动 fixed: 随着页面的滚动轴背景图片不会移动 inherit: 继承示例body background-image:url(list-orange.png);background-attachment:fixed;background-repeat:repeat-x;background-position:center center;第六节：CSS background 属性background - 五个背景属性可以全部在此定义 取值: | | | | | inherit | | | | : 背景颜色,图像等的一个属性或多个属性 inherit: 继承示例body background:url(list-orange.png) repeat-x center;第六章 CSS文本CSS文本属性用于定义文字,空格,单词,段落的表现等.通常使用letter-spacing属性控制字母之间的距离,word-spacing属性控制文字间空格的距离,text-decoration属性定义文本是否有下划线,text-transform属性控制英文的大小写,text-align属性定义文本的对齐方式,text-indent属性定义文本首行的缩进,white-space属性定义文本与文档源代码的关系.第一节: CSS text-decoration 属性text-decoration - 定义文本是否有划线以及划线的方式 取值:none | underline | overline | line-through | blink | inherit none: 定义正常显示的文本 underline | overline | line-through | blink: 四个值中的一个或多个 underline: 定义有下划线的文本 overline: 定义有上划线的文本 line-through: 定义直线穿过文本 blink: 定义闪烁的文本示例p#underlinetext-decoration:underline;p#overlinetext-decoration:overline;p#line-throughtext-decoration:line-through;p#blinktext-decoration:blink;p#underovertext-decoration:underline overline;p#underoverthroughblinktext-decoration:underline overline line-through blink;第二节: CSS white-space 属性white-space - 通过HTML文档的源代码的排版方式控制页面显示文本的排版方式 取值: normal | pre | nowrap | pre-wrap | pre-line | inherit normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行) pre: 保持HTML源代码的空格与换行,等同与pre标签 nowrap: 强制文本在一行,除非遇到br换行标签 pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行 pre-line: 同pre属性,但是遇到连续空格会被看作一个空格 inherit: 继承示例p#prewhite-space:pre;第七章 CSS字体CSS字体属性用于定义文字的字体,大小,粗细的表现等.通常使用font-family定义使用什么字体,font-size定义字体大小,font-style定义斜体字,font-variant定义小型的大写字体,font-weight定义字体的粗细,font统一定义字体的所有属性.第八章 CSS边框 每个内容或元素外面都可以有一个边框. 边框分为上边框(top),下边框(bottom),左边框(left),右边框(right). 每种边框有颜色(color),样式(style),宽度(width)三种属性. 如果上下左右的边框表现不一样,可以分别定义上下左右边框,如果一样可以统一使用border属性定义.通常使用border-width属性定义边框的宽度,border-color属性定义边框的颜色,border-style属性定义边框的样式,border属性统一定义边框样式的几个属性.第九章 CSS边外补白 边框的外面可以有一层边外补白(margin),边外补白可以把块级元素分开.边外补白定义了围绕某种元素(elements)的空白. 可以查看盒模式,了解边外补白和边内补白. 边外补白分为上边外补白(top),下边外补白(bottom),左边外补白(left),右边外补白(right). 边外补白只有宽度width一种属性.第一节: CSS margin 属性margin边外补白可以取负值;边外补白是看不到的,因为它本身是白色的.margin-top - 定义上边外补白margin-right - 定义右边外补白margin-bottom - 定义下边外补白margin-left - 定义左边外补白第十章 CSS边内补白 边框的里面面可以有一层边内补白(padding),边内补白定义了边框与边框里面内容的距离. 边内补白分为上边内补白(top),下边内补白(bottom),左边内补白(left),右边内补白(right). 边内补白只有width一种属性.padding - 定义边内补白padding边内补白不可以取负值;边内补白是看不到的,因为它本身是白色的.padding-top - 定义上边内补白padding-bottom - 定义下边内补白padding-left - 定义左边内补白 padding-right - 定义右边内补白第十一章 CSS属性索引第一节：CSS2.1属性按功能索引CSS盒模式 border-collapse border-color - 边框颜色 border-spacing border-style - 边框样式 border-top - 上边框 border-right - 右边框 border-bottom - 下边框 border-left - 左边框 border-top-color - 上边框颜色 border-right-color - 右边框颜色 border-bottom-color - 下边框颜色 border-left-color - 左边框颜色 border-top-style - 上边框样式 border-right-style - 右边框样式 border-bottom-style - 下边框样式 border-left-style - 左边框样式 border-top-width - 上边框宽度 border-right-width - 右边框宽度 border-bottom-width - 下边框宽度 border-left-width - 左边框宽度 border-width - 边框宽度 border - 边框所有属性 margin-right - 右边外补白宽度 margin-left - 左边外补白宽度 margin-top - 上边外补白宽度 margin-bottom - 下边外补白宽度