摇光前端培训3.29演示文稿

1、 2014-3-29 制作人：蒲锐 HTML 介绍 CSS 多个样式定义可层叠为一 同一个 HTML 元素被不止一个样式定义时，会使用 哪个样式 浏览器缺省设置 外部样式表 内部样式表（位于 标签内部） 内联样式（在 HTML 元素内部） 高优先级 基本语法 CSS h1 color:blue; 选择器：告诉浏览器样式作用给谁 属性：告诉浏览器要改什么 属性值：告诉浏览器要怎么改 编写第一个CSS CSS body background-color: gray; text-align:center; h1 font-size:30px; color:white; 选择器CSS 元素选择器 HT

2、ML文档的元素就是最简单的选择器，比如p、h1、body，或是html本身 html color:black; h1 color:blue; font-size:60px; 选择器CSS This heading is very important. This paragraph is very important. 类选择器 为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值 一个元素可以有多个class值，用空格分隔 .important color:red; p.important color:red; div .important color:red; 选择器CSS

3、 This is important! #mostImportant color:red; background:yellow; id选择器 类似于类选择器，不过也有一些重要差别 只能在文档中使用一次 不能使用 ID 词列表 id和class的值区分大小写 选择器CSS 我的南开iNankai div.sidebar a color:white; div.maincontent a color:blue; 后代选择器 可以选择作为某元素后代的元素 选择器CSS This is very important. This is really very important. h1 strong co

4、lor:red; 子元素选择器 只选择选择作为某元素子元素的元素 选择的范围更精确 选择器CSS a:link color: #FF0000 /* 未访问的链接 */ a:visited color: #00FF00 /* 已访问的链接 */ a:hover color: #FF00FF /* 鼠标移动到链接上 */ a:active color: #0000FF /* 选定的链接 */ 伪类选择器 与用户行为相关 背景属性CSS background-image：url background-repeat：no-repeat|repeat-x|repeat-y background-posi

5、tion: 通常成对出现，可以有多种值包括： top|bottom|left|right|长度值|百分比 background-color：单词|RGB 缩写：background 背景属性 CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果 CSS 在这方面的能力远远在 HTML 之上 字体属性CSS font-size：12px font-family：Serif|Sans-serif|Monospace |Cursive |Fantasy font-style：normal |italic font-weight：normal|bold|bolder|lighter|10

6、0900 缩写形式：font 字体属性 规定字体、大小、形式等 盒模型CSS margin：外边距 border：边框 padding：内边距 height/width：高度/宽度 盒模型CSS width 和 height 指的是内容区域 的宽度和高度。增加内边距、 边框和外边距不会影响内容区 域的尺寸，但是会增加元素所 占区域的总尺寸 背景应用于由内容和内边距组成 的区域 内边距、边框和外边距可以应用 于一个元素的所有边，也可以 应用于单独的边 外边距可以是负值，而且在很多 情况下都要使用负值的外边距， 而内边距不可以为负值 CSS定位 CSS 块级元素：div、p、h1h6 可包含块级元

7、素和行内元素 高度，行高以及顶和底边距都可控制 换行显示 行内元素：a、img、span 只能包含行内元素 高，行高及顶和底边距不可改变 行内显示 块级元素和行内元素可通过display属性进行强制转换 display : block | inline | none CSS定位 CSS position属性 static position的默认值，一般不设置position属性时，会按照正常的文档流进行排列 relative 元素框相对于原本的位置偏移某个距离。元素仍保持其未定位前的形状，它原本所占的 空间仍保留 absolute 当元素的父对象(或曾祖父，只要是父级对象)parent的pos

8、ition属性不是默认值的情况， 此时按照这个parent来进行定位，如果没有这个对象，相对body元素定位 fixed 总是以 CSS定位 CSS position属性 static position的默认值，一般不设置position属性时，会按照正常的文档流进行排列 relative 元素框相对于原本的位置偏移某个距离。元素仍保持其未定位前的形状，它原本所占的 空间仍保留 absolute 当元素的父对象(或曾祖父，只要是父级对象)parent的position属性不是默认值的情况， 此时按照这个parent来进行定位，如果没有这个对象，相对body元素定位 fixed 总是以 CSS定

9、位 CSS position=static CSS定位 CSS position=relative CSS定位 CSS CSS浮动 CSS float属性 定义元素向左或向右浮动 网页布局的重要方式 clear属性 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。 CSS定位 CSS CSS定位 CSS CSS定位 CSS CSS定位 CSS CSS定位 CSS CSS定位 CSS CSS定位 CSS CSS定位 CSS 学习网站 领先的WEB技术教程，完全免费！ THANKS！ 摇光工作室 Alkaid Studio 摇光工作室 Alkaid Studio You are free to: Share copy and redistribute the material in any medium o