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

    正文内容1

    1.2.2 内嵌式(1-6.html)
  • 6. 1.2使用CSS控制页面的几种方式1.2.3 链接式(1-7.html) 1.2.4 导入样式(1-8.html)
  • 7. 2.1 CSS选择器2.1.1 标记选择器 2.1.2 类别选择器 2.1.3 ID选择器
  • 8. 2.1.1 标记选择器选择器属性值属性名
  • 9. 2.1.2 类别选择器

    class选择器

    见2-1.html
  • 10. 2.1.3 ID选择器

    ID选择器

    见2-5.html
  • 11. 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; /* 颜色 */}
  • 12. 2.3 CSS的继承2.3.1 父子关系(2-9.html) 2.3.2 CSS继承的运用(2-10.html)
  • 13. 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,
  • 14. 3.1 CSS文字样式3.1.4 文字粗细(3-6.html) 属性名:font-weight 可取值:lighter,normal,bold,100~900 3.1.5 斜体(3-7.html) 属性名: font-style 可取值:Italic,normal,oblique
  • 15. 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
  • 16. 3-2 模拟Google公司logo(3-11.html)
  • 17. 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%
  • 18. 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
  • 19. 3.4 百度搜索(3-19.html)
  • 20. 4.1 图片样式4.1.1 图片边框(4-1.html) border-style:dotted; /* 点画线 */ border-color:#FF9900; /* 边框颜色 */ border-width:5px; /* 边框粗细 */ 4.1.2 图片缩放(4-4.html)
  • 21. 4.2 图片对齐4.2.1 横向对齐(4-6.html) 4.2.2 纵向对齐(4-7.html)
  • 22. 4.3 图片混排4.3.1 文字环绕(4-9.html) 4.3.2 设置图片与文字的间距
  • 23. 4.4 八仙过海(4-10.html)
  • 24. 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)
  • 25. 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
  • 26. 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
  • 27. 5.3古词《念奴娇。赤壁怀古》(5-13.html)
  • 28. 6.1 控制表格6.1.1 表格中的标记(6-1.html) 6.1.2 表格的颜色(6-2.html) 6.1.3 表格的边框
  • 29. 6.2 表格实例一:隔行变色(6-4.html)
  • 30. 6.3 CSS与表单6.3.1 表单中的元素(6-7.html) 6.3.2 像文字一样的按钮(6-9.html)
  • 31. 6.4 直接输入的Excel表格(6-11.html)
  • 32. 7.1 丰富的超链接特效7.1.1 动态超链接(7-1.html) 7.1.2 按钮式超链接(7-2.html) 7.1.3 浮雕式超链接(7-3.html)
  • 33. 7.2 鼠标特效CSS控制鼠标箭头(7-4.html) 属性名: cusor 可取值:Help,pointer。。。。。。
  • 34. 7.3 页面滚动条(7-5.html)
  • 35. 8.1 项目列表8.1.1 列表的符号(8-1.html) 8.1.2 图片符号(8-3.html)
  • 36. 8.2 无需表格的菜单(8-5.html)
  • 37. 8.3 菜单的横竖转换(8-6.html)
  • 38. 8.4 流行的Tab菜单8.4.1 网易雅虎实例 8.4.2 (8-9.html)
  • 39. 9.1 滤镜概述 CSS滤镜并不是浏览器的插件,也不符合CSS标准,而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的一个功能集合。由于浏览器IE有着很广的使用范围,因此CSS滤镜也被广大设计者所喜爱。 CSS滤镜的标识符是“filter”,总体上和其他的CSS语句是一样的,都十分的简单。 Filter:filtername(parameters);
  • 40. 9.2~9.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)
  • 41. 10.1 div与span标记10.1.1 概述(10-1.html) 10.1.2 div与span标记(10-2.html)
  • 42. 10.2 盒子模型
  • 43. 10.2 盒子模型10.2.1 border(10-3.html) 10.2.2 padding(10-6.html) 10.2.3 margin(10-8.html)
  • 44. 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 可取值:数字
  • 45. 10.4 给图片签名(10-29.html)
  • 46. 11.1 CSS排版观念11.1.1将页面用div分块(11-1.html)#banner#links#content#footer#container
  • 47. 11.1 CSS排版观念11.1.2设计各块的位置#banner#links#content#footer#container
  • 48. 11.2 固定宽度且居中的版式11.2.1 方法一(11-2.html) 11.2.2 方法二(11-3.html)
  • 49. 11.3 排版实例:电子相册(11-6.html)
  • 50. 小结 & 问题讨论孔子说:“学而不思则罔,思而不学则殆。”