第4章 CSS基础.pptVIP

第4章 CSS基础 网站设计与开发素质课 传媒技术学院 于连民 yulm2005@163.com 微博：/yulianmin 4.1 CSS简介 CSS 指层叠样式表 (Cascading Style Sheets) 对于h1、p、table 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。而不是用来表达字号、位置等信息。 使用CSS的目的在于将内容与表现分离，使开发效率更好，管理更方便 4.2 HTML中引入CSS 外部样式表 head link rel=stylesheet type=text/css href=mystyle.css / /head 4.3 CSS语法 CSS 规则由两部分构成：选择器，以及一条或多条声明 selector {declaration1; declaration2; ... declarationN } 声明由属性和值组成，属性和值用冒号分隔，多个声明之间用分号分隔 selector {property: value} 4.4 CSS选择器 类型选择器 用来寻找特定的标签元素，也称为元素选择器 p { color:red;} 将页面中的所有元素p的颜色定义为红色 4.4 CSS选择器 2. 后代选择器 用来寻找特定的元素或元素组的后代，后代选择器由两个选择器间的空格表示 li a { color:red;} 此CSS将影响li元素的后代a，但不会影响其他元素中的a 4.4 CSS选择器 3. ID选择器 用来寻找指定id属性的元素，id属性的值在同一个页面中是唯一的 div id=“content”…/div #content { text-align:left;} 4.4 CSS选择器 4. 类选择器 用来寻找指定class属性的元素，class属性的值在同一个页面中可以出现多次 div class=“list”…/div .list { text-align:left;} 4.4 CSS选择器 5. 伪类 利用文档结构以外的条件对元素应用样式 a:hover{color:red;} 当鼠标移动到链接元素上时，颜色变为红色 4.4 CSS选择器 6. 通用选择器 它匹配所有可用元素 * {margin:0;} 4.5 CSS单位 CSS单位用于修饰属性值，主要有颜色单位和长度单位 颜色单位： 可以使用颜色名称、RGB数值、RGB百分比和颜色十六进制 在实际应用中，一般采用十六进制的表示方法 长度单位： 长度单位分为绝对单位和相对单位 4.5 CSS单位 颜色单位： 4.5 CSS单位 长度单位： 绝对单位通常是在现实中量度长度的物理单位。在网页中可以使用的绝对长度单位有英寸（in）、厘米（cm）、毫米（mm）和磅（pt） 相对单位能适应不同的浏览器和屏幕分辨率，在网页设计中，通常使用相对单位。常用的相对单位有px和em 4.6 框模型 指定元素如何显示，页面中的每一个元素被看作一个矩形框，这个框由内容、填充、边框和空白边组成 4.6 框模型 背景应用于由内容和内边距组成的区域 内边距、边框和外边距都是可选的 width 和 height 指的是内容区域的宽度和高度 增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸 如果给框加属性值，如 margin: 10px; 指四个边全为10px margin:5px 10px;则指上下为5px，左右为10px; margin:5px 10px 20px; 指上5px, 左右10px,下20px; margin:5px 10px 20px 30px;顺序是上、右、下、左 4.6 框模型 4.6 框模型 IE/Win和框模型 有IE6.0及以前的版本中，width属性不是内容的宽度，而是内容、填充与边框的总和 4.6 框模型 空白边叠加 当两个垂直空白边相遇时，它们将形成一个空白边，这个空白边的高度等于两个发生叠加的空白边的高度中较大者 4.6 框模型 CSS 内边距 元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。 padding 属性接受长度值或百分比值，但不允许使用负值。 h1 {padding: 10px;} 4.6 框模型 CSS 边框 元素的边框 (border) 是围绕元素内容和内边距的一条或多条线 ，每个边框有 3 个方面：宽度、样式，以及颜色 。 #box {border:#f00 solid 1px;} 4.6 框模型 CSS 空白边 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。