CSS快速入门.ppt

1、李驰,CSS快速入门,本章主要内容：,1.1CSS概念,CSS(Cascading Style Sheet)，中文译为层叠样式表，是用于控制页面样式并允许将样式信息于内容分离的一种标记性语言。 如果说“HTML”表示页面“内容”即页面上有什么文字、图片、视频的话，“CSS”就表示页面“长相”即页面中有关颜色、大小、位置等等。,1.1CSS概念,标记的概念（1-1.html） HTML的缺陷（1-2.html） 采用HTML标记或属性来表示部分“长相”，带来页面代码分工混乱，代码冗余等诸多缺陷。 CSS的引入的优点（1-3.html、1-4.html） 采用CSS来表示“长相”，使得页面代码分工

2、明确，代码清晰，减少冗余等。,1.2使用CSS控制页面的几种方式,1.2.1 行内样式（1-5.html） 正文内容1 1.2.2 内嵌式（1-6.html） p color:#FF00FF; text-decoration:underline; font-weight:bold; font-size:25px; ,1.2使用CSS控制页面的几种方式,1.2.3 链接式（1-7.html） 1.2.4 导入样式（1-8.html） import url(1.css); ,2.1 CSS选择器,2.1.1 标记选择器 2.1.2 类别选择器 2.1.3 ID选择器,2.1.1 标记选择器, h1

3、 color:red; font-size:25px; ,选择器,属性值,属性名,2.1.2 类别选择器, .one color:red; font-size:25px; class选择器 见2-1.html,2.1.3 ID选择器, #one color:red; font-size:25px; ID选择器 见2-5.html,2.2 选择器的声明,2.2.1 集体声明（2-6.html） h1, h2, h3, h4, h5, p/* 集体声明 */ color:purple;/* 文字颜色 */ font-size:15px;/* 字体大小 */ h2.special, .special

4、, #one/* 集体声明 */ text-decoration:underline;/* 下划线 */ 2.2.2 选择器的嵌套（2-8.html） p b/* 嵌套声明 */ color:maroon;/* 颜色 */,2.3 CSS的继承,2.3.1 父子关系（2-9.html） 2.3.2 CSS继承的运用（2-10.html）,3.1 CSS文字样式,3.1.1 字体（3-1.html） 属性名：font-family 可取值：黑体, 幼圆; 3.1.2 文字大小（3-2.html） 属性名: font-size 可取值：0.5in，0.5cm，4mm，12pt，2pc，300%，x

5、x-small，0.5em,30px.。 3.1.3 文字颜色（3-5.html） 属性名: color 可取值：rgb(0%,0%,80%)，rgb(240,255,122)，#333333，red，,3.1 CSS文字样式,3.1.4 文字粗细（3-6.html） 属性名：font-weight 可取值：lighter,normal,bold,100900 3.1.5 斜体（3-7.html） 属性名： font-style 可取值：Italic,normal,oblique,3.1 CSS文字样式,3.1.6下划线、顶划线、删除线（3-8.html） 属性名： text-decorati

6、on 可取值：underline，overline，line-through，blink 3-1.7 英文字母大小写（3-10.html） 属性名： text-transform 可取值：capitalize，uppercase，lowercase,3-2 模拟Google公司logo,（3-11.html）,3.3 CSS段落文字,3.3.1 段落水平对齐方式（3-13.html） 属性名： text-align 可取值：Left,right,center,justify 3.3.2 段落垂直对齐方式（3-14.html） 属性名： vertical-align 可取值：Baseline,b

7、ottom,middle,top,sub,super,text-top,text-bottom,30px, 200%,3.3 CSS段落文字,3.3.3 字间距、行间距 （3-16.html） 属性名： Word-spacing 可取值：Normal, 0.5in，0.5cm，4mm，12pt，2pc，0.5em, 30px 属性名： line-height 可取值：0.5in，0.5cm，4mm，12pt，2pc，0.5em,30px，300%，normal,3.4 百度搜索,（3-19.html）,4.1 图片样式,4.1.1 图片边框（4-1.html） border-style:dot

8、ted;/* 点画线 */ border-color:#FF9900;/* 边框颜色 */ border-width:5px;/* 边框粗细 */ 4.1.2 图片缩放（4-4.html）,4.2 图片对齐,4.2.1 横向对齐（4-6.html） 4.2.2 纵向对齐（4-7.html）,4.3 图片混排,4.3.1 文字环绕（4-9.html） 4.3.2 设置图片与文字的间距,4.4 八仙过海,（4-10.html）,5.1 背景颜色,5.1.1 页面背景色（5-1.html） 属性名： background-color 可取值：rgb(0%,0%,80%)，rgb(240,255,12

9、2)，#333333，red， 5.1.2 用背景色给页面分块（5-2.html）,5.2 背景图片,5.2.1 页面背景图（5-3.html） 属性名： background-image 可取值：url(03.jpg) 5.2.2 背景图片的重复（5-5.html） 属性名： background-repeat 可取值：repeat，repeat-x,repeat-y,no-repeat,5.2 背景图片,5.2.3 背景图片的位置（5-8.html） 属性名： background-position 可取值：bottom right，top left，300px 55px，25% 50%。

10、 5.2.4 固定背景图片（5-10.html） 属性名： background-attachment 可取值：scroll ,fixed,5.3古词念奴娇。赤壁怀古,（5-13.html）,6.1 控制表格,6.1.1 表格中的标记（6-1.html） 6.1.2 表格的颜色（6-2.html） 6.1.3 表格的边框,6.2 表格实例一：隔行变色,（6-4.html）,6.3 CSS与表单,6.3.1 表单中的元素（6-7.html） 6.3.2 像文字一样的按钮（6-9.html）,6.4 直接输入的Excel表格,（6-11.html）,7.1 丰富的超链接特效,7.1.1 动态超链接

11、（7-1.html） 7.1.2 按钮式超链接（7-2.html） 7.1.3 浮雕式超链接（7-3.html）,7.2 鼠标特效,CSS控制鼠标箭头（7-4.html） 属性名： cusor 可取值：Help，pointer。,7.3 页面滚动条,（7-5.html）,8.1 项目列表,8.1.1 列表的符号（8-1.html） 8.1.2 图片符号（8-3.html）,8.2 无需表格的菜单,（8-5.html）,8.3 菜单的横竖转换,（8-6.html）,8.4 流行的Tab菜单,8.4.1 网易雅虎实例 8.4.2 （8-9.html）,9.1 滤镜概述,CSS滤镜并不是浏览器的插件

12、，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的一个功能集合。由于浏览器IE有着很广的使用范围，因此CSS滤镜也被广大设计者所喜爱。 CSS滤镜的标识符是“filter”，总体上和其他的CSS语句是一样的，都十分的简单。 Filter:filtername(parameters);,9.29.7 滤镜实例,9.2 Alpha通道（9-1.html） 9.3 Blur模糊（9-5.html） 9.4 透明色（9-7.html） 9.5 Flip翻转（9-10.html） 9.6 遮罩（9-15.html） 9.7 波浪（9-20.html）,10.1 div与

13、span标记,10.1.1 概述（10-1.html） 10.1.2 div与span标记（10-2.html）,10.2 盒子模型,10.2 盒子模型,10.2.1 border（10-3.html） 10.2.2 padding（10-6.html） 10.2.3 margin（10-8.html）,10.3 元素的定位,10.3.1 float定位（10-14.html） 属性名： float 可取值：left,right,none 10.3.2 position定位（10-20.html） 属性名： position 可取值：absolute，relative，fixed，satic 10.3.3 z-index(10-28.html) 属性名： z-index 可取值：数字,10.4 给图片签名,（10-29.html）,11.1 CSS排版观念,11.1.1将页面用div分块（11-1.html）,#banner,#links,#con