CSS入门基础经典教程.docx
CSS入门基础经典教程CSS基础教程 CSS教程目录 . 1 第一章 CSS简介 . 3 第一节：什么是CSS? . 3 什么是CSS. 3 参见 . 3 第二节：使用CSS的优势 . 3 第二章 CSS入门例子. 3 示例 . 3 第三章 CSS语法 . 4 第一节：外部引用CSS . 4 使用 link 标签引用CSS . 4 使用 import 引用CSS . 4 第二节：内部引用CSS . 5 第三节：内联引用CSS . 6 第四节：CSS 选择符 - CSS的名字 . 6 选择符语法 . 6 选择符取名规则 . 6 常用的三种选择符 . 7 选择符用法总结 . 7 第五节：CSS 声明 . 8 语法 . 8 介绍两个常用的技巧 . 8 第六节：CSS 注释 . 8 语法 . 9 示例 . 9 第四章 CSS颜色 . 9 CSS颜色表示方法 . 9 注意: . 10 第五章 CSS背景 . 10 第一节：CSS background-color 属性 . 10 background-color - 背景色,定义背景的颜色 . 10 示例 . 10 第二节：CSS background-image 属性 . 11 background-image - 定义背景图片 . 11 示例 . 11 第三节：CSS background-repeat 属性 . 11 background-repeat - 定义背景图片的重复方式 . 11 示例 . 12 第四节：CSS background-position 属性 . 12 background-position - 定义背景图片的位置 . 12 共20页 第1页 示例 . 12 第五节: CSS background-attachment 属性 . 13 background-attachment - 定义背景图片随滚动轴的移动方式 . 13 示例 . 13 第六节：CSS background 属性 . 13 background - 五个背景属性可以全部在此定义 . 13 示例 . 13 第六章 CSS文本 . 14 第一节: CSS text-decoration 属性 . 14 text-decoration - 定义文本是否有划线以及划线的方式 . 14 示例 . 14 第二节: CSS white-space 属性 . 15 white-space - 通过HTML文档的源代码的排版方式控制页面显示文本的排版方式. 15 示例 . 15 第七章 CSS字体 . 16 第八章 CSS边框 . 16 第九章 CSS边外补白. 16 第一节: CSS margin 属性 . 16 margin-top - 定义上边外补白 . 17 margin-right - 定义右边外补白 . 17 margin-bottom - 定义下边外补白 . 17 margin-left - 定义左边外补白 . 17 第十章 CSS边内补白. 17 padding - 定义边内补白 . 17 padding-top - 定义上边内补白 . 18 padding-bottom - 定义下边内补白 . 18 padding-left - 定义左边内补白 . 18 padding-right - 定义右边内补白 . 18 第十一章 CSS属性索引 . 18 第一节：CSS2.1属性按功能索引 . 18 CSS盒模式. 18 CSS视觉格式模型 . 19 CSS视觉效果. 19 CSS列表 . 19 CSS背景 . 20 CSS字体 . 20 CSS文本 . 20 CSS颜色 . 20 共20页 第2页 第一章 CSS简介 第一节：什么是CSS? 什么是CSS Ø CSS是Cascading Style Sheets(层叠样式表)的简称. Ø CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言). Ø 在标准网页设计中CSS负责网页内容(XHTML)的表现. Ø CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀. Ø 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课. Ø CSS是由W3C的CSS工作组产生和维护的. 参见 Ø W3C的CSS主页http:/www.w3.org/Style/CSS/ Ø 在w3c网站上校验CSS的正确性http:/jigsaw.w3.org/css-validator/ 第二节：使用CSS的优势 Ø 内容与表现分离,有了CSS,网页的内容(XHMTL)与表现就可以分开了. Ø 使用CSS可以减少网页的代码量,增加网页的浏览速度 第二章 CSS入门例子 示例 Ø 定义文字的颜色 <html> <style type="text/css" media="all"> p color:red; p1 color:blue; </style> <body> 共20页 第3页 <p>color就代表颜色,我们使用红色 red 为文字颜色.</p> <p1>你可以修改代码使用 blue 蓝色, yellow 黄色等.学习文字的颜色</p1> </body> </html> 这段代码显示的结果如下： 第三章 CSS语法 Ø CSS语法非常简单,组成CSS语法的元素只有CSS选择符与CSS属性. Ø 每个CSS选择符由1个或多个CSS属性组成. Ø CSS是大小写敏感的,在CSS语法中推荐使用小写. 第一节：外部引用CSS CSS外部引用使用了外接的CSS文件,一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件.外部引用CSS是最好的引入CSS的方式(可以使代码量最小,表现最统一,也是标准网页设计推荐的). 使用 link 标签引用CSS 示例 <head> <link rel="stylesheet" type="text/css" href=" /> </head> Ø href - 指定需要加载的资源(CSS文件)的地址URI Ø rel - 指定链接类型 Ø type - 包含内容的类型,一般使用type="text/css" 使用 import 引用CSS Ø 示例 <head> <style type="text/css">import url( </head> 相对路径与绝对路径 加载文件的时候可以使用相对路径或者绝对路径. 共20页 第4页 绝对路径:文件的完整路径,主页上的文件或目录在硬盘上真正的路径. 相对路径:相对于我们查看文档的路径. ./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 Ø 示例 <style type="text/css"> /* -文字样式开始- */ /* 梦之都白色12象素文字 */ .dreamduwhite12px color:white; font-size:12px; /* 梦之都黑色16象素文字 */ .dreamdublack16px color:black; font-size:16px; /* -文字样式结束- */ </style> 共20页 第5页 注意:style标签应该在head标签内部. 第三节：内联引用CSS 内联引用可以把CSS样式直接作用在XHTML标签中. Ø 示例 <p style="font-size: 10px; color: #FFFFFF;"> 使用CSS内联引用表现段落. </p> 第四节：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 连字号 - 下划线 _ 冒号 " 句号 . 共20页 第6页 提示: CSS选择符只能以字母开头. 常用的三种选择符 (我感觉这是初级教程中最难的地方:) xhtml标签选择符,比如 p标签选择符(代表所有的段落都使用这个CSS样式),比如 pfont-size:12px; id选择符,唯一性选择符,比如 #dreamduredcolor:red;,就是在名字前增加了一个#,id选择符在一个页面中只能出现一次,在整个网站中也最好出现一次(这样有利于程序员控制此元素,有多个一样名称的元素,就无法分开不好控制了). class选择符,多重选择符,比如.dreamdubluecolor:blue;,就是在名字前增加了一个.,class选择符在一个页面中可以出现多次(注意下面的示例中class选择符的用法). 示例 <p>梦之都xhtml标签选择符</p> <p id="dreamdured">梦之都id选择符</p> <p class="dreamdublue">梦之都class选择符</p> <p class="dreamdublue dreamdu18px">梦之都class选择符2,出现了多次.</p> 一个p元素使用了两个class选择符,他们之间用空格分开,而且class选择符可以在一个页面出现多次. 选择符用法总结 id与class选择符在CSS与XHTML中的用法总结 CSS中的写法 XHTML中的写法 <p></p> <p id="id_selector">梦之都</p> <p class="class_selector">梦之都</p> xhtml标签选择符 pfont-size:12px; #id_selectorfont-size:12px; .class_selectorfont-size:12px; id选择符 class选择符 共20页 第7页 第五节：CSS 声明 CSS声明是由"属性","冒号(:)","属性值"和"分号(;)"组成的. 语法 属性:属性值; Ø 示例 font-size:12px; font-size代表字体大小. 12px字体大小的值. 介绍两个常用的技巧 Ø 1,选择符的名字一样,声明是可以组合的 例如： 选择符名字声明1;声明2; div color:black; font-size:12px; Ø 2,明全部一样,选择符的名字也可以组合 例如： 选择符名字1,选择符名字2,选择符名字3声明1;声明2; .dreamdudivwhite12px,h1,div color:white; font-size:12px; h1, p, div border:1px solid black; 第六节：CSS 注释 就像HTML教程中描述的一样,在CSS文档中注释也起到很重要的作用,可以帮助我们记起CSS的含义,加载在HTML文档的位置等. CSS注释的开始使用/*,结束使用*/ 共20页 第8页 语法 /* 注释内容 */ 示例 /* -文字样式开始- */ /* 梦之都白色12象素文字 */ .dreamduwhite12px color:white; font-size:12px; /* 梦之都黑色16象素文字 */ .dreamdublack16px color: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; 共20页 第9页 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定义背景图片
