幻灯片 1

Size: px

Start display at page:

Download "幻灯片 1"

拙阎
4 years ago
Views:

1 第 3 讲 CSS 层叠样式表信息学院孙辉

2 内容概要 CSS 的概念与实例 CSS 基本语法选择器样式 CSS 深入

3 CSS 的概念层叠样式表定义如何显示 HTML 元素, 样式通常存储在样式表中解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中

4 CSS 实例 1

5 CSS 实例 2

6 内容概要 CSS 的概念与实例 CSS 基本语法选择器样式 CSS 深入

7 CSS 语法基本语法 CSS 规则由两个主要的部分构成 : 选择器, 以及一条或多条声明 selector {declaration1; declaration2;... declarationn } 选择器通常是您需要改变样式的 HTML 元素每条声明由一个属性和一个值组成 selector {property: value} h1 {color:red; font-size:14px;} p { text-align: center; color: black; font-family: arial; } 在 CSS 中, 注释以 /* 开始, 以 */ 结束

8 CSS 的概念与实例内容概要 CSS 基本语法选择器样式

9 html-tag-name HTML 代码中找到的任何标记前面的例子中用的就是这种选择器简单选择器如果我们不想把所有的 <li> 都设成某种格式, 怎么办? id 选择器 /class 选择器 #id-of-html-tag 前面带有井号 # 的 ID 引用.class-of-html-tag 前面带有点. 的类引用

10 id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式 id 选择器以 "#" 来定义 CSS:#red {color:red;} #green {color:green;} HTML: <p id="red"> 这个段落是红色 </p> <p id="green"> 这个段落是绿色 </p>

11 CSS 类选择器类选择器以一个点号显示.center {text-align: center} <h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p>

12 id 选择器 or 类选择器 class 和 id 看起来除了一个. 和 # 的区别之外, 别无差异?? 同一 id 在一个页面内只能应用一次 class 则是用于描述多次出现的元素

13 CSS 派生选择器通过依据元素在其位置的上下文关系来定义样式 li strong { font-style: italic; font-weight: normal; } <p><strong> 我是粗体字, 不是斜体字, 因为我不在列表当中, 所以这个规则对我不起作用 </strong></p> <ol> <li><strong> 我是斜体字这是因为 strong 元素位于 li 元素内 </strong></li> <li> 我是正常的字体 </li> </ol> id 选择器和派生选择器结合只要 strong 标签在 li 标签内部就会起作用, 不需要紧挨着 #sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; } div#sidebar { border: 1px dotted #000; padding: 10px; }

14 对带有指定属性的 HTML 元素设置样式格式 [title] { color:red; } [title=firstlevel] { border:5px solid blue; } [title~=hello] { color:red; } [lang =en] { color:red; } CSS 属性选择器单纯的属性选择属性值选择属性多值选择 - 空格分隔属性多值选择 - 连字符分隔 Demo

15 CSS 创建的三种方式外部样式表 HTML: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> CSS: hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} 内部样式表 <head> <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head> 内联样式 <p style="color: sienna; margin-left: 20px"> This is a paragraph </p> 等级覆盖关系

16 内容概要 CSS 的概念与实例 CSS 基本语法选择器样式 CSS 深入

17 样式文字文本属性文字属性 (font) font-family: 字体 font-size: 大小 font-style: 样式, 比如斜体 font-weight: 粗细文本属性 (text) 例如颜色间距和首行缩进 text-indent: 首行缩进 color: 文本颜色 text-align: 文本对齐属性 text-decoration: 文本修饰, 如下划线

18 样式背景列表背景 background-color background-image background-repeat: 不重复水平重复 background-position background-attachment: 背景图片是否随着滚动条滚动而改变位置列表 list-style-type list-style-image

19 样式表格表格属性可以极大地改善表格的外观 border 属性 : 设置表格边框 width height 属性定义表格的宽度和高度 text-align 和 vertical-align 属性设置表格中文本的对齐方式 text-align 属性设置水平对齐方式, 比如左对齐右对齐或者居中 : vertical-align 属性设置垂直对齐方式, 比如顶部对齐底部对齐或居中对齐制作一个漂亮的表格

20 样式轮廓绘制元素周围的一条线, 位于边框边缘的外围, 起到突出元素的作用 outline 属性规定元素轮廓的样式颜色和宽度 CSS 轮廓

21 CSS 举例图片显示的控制设置图片显示位置大小等

22 内容概要 CSS 的概念与实例 CSS 基本语法选择器样式 CSS 深入

23 CSS 深入 HTML 标准流 (normal flow) Box Model( 框模型 ) CSS 定位

24 标准流 normal flow, 译为标准流普通流文档流将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素多数情况下元素呈现在 web 页面上的方式所有 HTML 都在块框 ( block boxes, 块级元素 ) 或者行内框 ( inline boxes, 行内元素 ) 中每个新的块级元素渲染为新行行内元素则按照顺序被水平渲染直到当前行遇到了边界, 然后换到下一行垂直渲染 CSS 样式 float 会使元素脱离标准流

25 块元素 & 内联元素大多数 HTML 元素被定义为块级元素 (lock level element) 或内联元素 (inline element) 显示块级元素时, 通常会以新行来开始 ( 和结束 ) 例如 :<h1>, <p>, <ul>, <table>,< form> 内联元素在显示时通常不会以新行开始例子 :<b>, <td>, <a>, <img>,<em> 任何不是块级元素的可见元素都是内联元素 <div> 元素是块级元素, 它是可用于组合其他 HTML 元素的容器 <span> 元素是内联元素, 可用组合行内元素的容器

26 框模型 Box Model 框模型规定了元素框处理元素内容内边距边框和外边距盒子里由外至里依次是 : margin 边距 border 边框 padding 间隙 ( 也有人称做补丁 ) content ( 内容, 比如文本, 图片等 )

27 Box Model(2) margin 用来设置一个元素所占空间的边缘到相邻元素之间的距离 Border 用来设定一个元素的边线 padding 用来设置元素内容到元素边框的距离 CSS 背景属性指的是 content 和 padding 区域 CSS 属性中的 width 和 height 指的是 content 区域的宽和高

28 Box Model 示意 h2 { } margin: 15px 0 15px 0; padding: 15px 15px 15px 15px; 按照上右下左 ( 顺时针 ) 的顺序分别设置也可通过四个单独的属性来设定 padding-top padding-right padding-bottom padding-left

29 CSS 定位 (Positioning) CSS 的定位 ( 浮动 ) 功能很强大, 利用它你可以做出各种各样的网页布局可以建立列式布局将布局的一部分与另一部分重叠, 完成以往使用多个表格才能完成的任务

30 CSS 定位的基本思想定义元素框相对于其正常位置应该出现的位置, 或者相对于父元素另一个元素甚至浏览器窗口本身的位置一切皆为框提出了浮动的概念浮动不完全是定位, 不是标准流布局

31 CSS 定位机制 CSS 定位的机制 : 普通流浮动绝对定位除非专门指定, 否则所有框都在普通流中定位即元素的位置由元素在 HTML 中的位置决定块级框从上到下一个接一个地排列, 框之间的垂直距离是由框的垂直外边距计算出来行内框在一行中水平布置, 可以使用水平内边距边框和外边距调整它们的间距

32 通过 position 属性可以设定 4 种定位 static 默认值没有定位, 元素出现在正常的流中 relative( 相对定位 ) 相对它本来应处的位置做的移动, 但在文本流中的位置还在 absolute( 绝对定位 ) 元素框从文档流完全删除绝对定位使元素的位置与文档流无关, 因此不占据空间绝对定位的元素位置是相对于距离它最近的那个已定位的祖先 ( 相对 / 绝对 ) 元素决定的如果元素没有已定位的祖先元素, 那么它的位置相对于初始包含块 fixed 生成绝对定位的元素, 相对于浏览器窗口进行定位

33 relative 相对定位仍然属于普通流定位模型

34 absolute 与相对定位不同, 绝对定位使元素与普通流无关

35 区别

36 Z-index 属性绝对定位的框与文档流无关, 所以它们可以覆盖页面上的其它元素可以通过设置 z-index 属性来控制这些框的堆放次序

37 CSS 浮动 floats 是建立基于 css 的网站的一个基本元素, 它可以用来调整图像和列的对齐方式浮动的框可以向左或向右移动, 直到它的外边缘碰到包含框或另一个浮动框的边框为止浮动框不在文档的普通流中, 所以文档的普通流中的块框看不见浮动框 CSS 中通过 float 属性实现元素的浮动

38 CSS 浮动示意框 1 向右浮动框 1 向左浮动所有 3 个框向左浮动

39 CSS 浮动 (2) 当包含框太窄, 无法容纳水平排列的三个浮动元素时, 那么其它浮动块向下移动, 直到有足够的空间浮动元素的高度不同, 那么当它们向下移动时可能被其它浮动元素卡住 :

40 浮动举例创建无表格的首页 float6

41 行框浮动框旁边的行框被缩短, 从而给浮动框留出空间, 行框围绕浮动框创建浮动框可以使文本围绕图像 demo

42 清除浮动 clear 阻止行框围绕浮动框, 需要对该框应用 clear 属性 clear 属性的值可以是 left right both 或 none, 表示当前框的哪些边不能应该挨着浮动框

43 清除浮动 clear 在标准流中, 元素是竖向排列的, 而浮动之后可以理解为横向排列清除浮动可以理解为打破横向排列注意 :CSS 的清除浮动, 只能影响使用清除的元素本身, 不能影响其他元素

44 CSS 布局学习参考

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05