CSS快速入门

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,李驰,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,来表示“长相”，使得页面代码分工明确，代码清晰，减少冗余等。,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,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, #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%,，,xx-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-decoration,可取值：,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,bottom,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:dotted,;/*,点画线 *,/,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,122),，,#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%,。,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,动态超链接（,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,滤镜并不是浏览器的插件，也不符合,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,与,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,#content,#footer,#container,11.1 CSS,排版观念,11.1.2,设计各块的位置,#banner,#links,#content,#footer,#container,11.2,固定宽度且居中的版式,11.2.1,方法一（,11-2.html,）,11.2.2,方法二（,11-3.html,）,11.3,排版实例：电子相册,（,11-6.html,）,小结,&,问题讨论,孔子说：,“,学而不思则罔，思而不学则殆。,”,