第4章 CSS基础.ppt

第4章CSS基础 网站设计与开发素质课传媒技术学院于连民yulm2005 微博 4 1CSS简介 CSS指层叠样式表 CascadingStyleSheets 对于 这样的标签 HTML的初衷是表达 这是标题 这是段落 这是表格 之类的信息 而不是用来表达字号 位置等信息 使用CSS的目的在于将内容与表现分离 使开发效率更好 管理更方便 4 2HTML中引入CSS 外部样式表 将CSS引入到HTML中还有两种方式 但共享性不好 外部样式表 可以统一为一个站点中的所有页面定义样式 且改变方便 建议使用这种方式 4 3CSS语法 CSS规则由两部分构成 选择器 以及一条或多条声明selector declaration1 declaration2 declarationN 声明由属性和值组成 属性和值用冒号分隔 多个声明之间用分号分隔selector property value 4 4CSS选择器 类型选择器用来寻找特定的标签元素 也称为元素选择器p color red 将页面中的所有元素p的颜色定义为红色 4 4CSS选择器 2 后代选择器用来寻找特定的元素或元素组的后代 后代选择器由两个选择器间的空格表示lia color red 此CSS将影响li元素的后代a 但不会影响其他元素中的a 4 4CSS选择器 3 ID选择器用来寻找指定id属性的元素 id属性的值在同一个页面中是唯一的 content text align left 4 4CSS选择器 4 类选择器用来寻找指定class属性的元素 class属性的值在同一个页面中可以出现多次 list text align left 4 4CSS选择器 5 伪类利用文档结构以外的条件对元素应用样式a hover color red 当鼠标移动到链接元素上时 颜色变为红色 4 4CSS选择器 6 通用选择器它匹配所有可用元素 margin 0 4 5CSS单位 CSS单位用于修饰属性值 主要有颜色单位和长度单位颜色单位 可以使用颜色名称 RGB数值 RGB百分比和颜色十六进制在实际应用中 一般采用十六进制的表示方法长度单位 长度单位分为绝对单位和相对单位 4 5CSS单位 颜色单位 4 5CSS单位 长度单位 绝对单位通常是在现实中量度长度的物理单位 在网页中可以使用的绝对长度单位有英寸 in 厘米 cm 毫米 mm 和磅 pt 相对单位能适应不同的浏览器和屏幕分辨率 在网页设计中 通常使用相对单位 常用的相对单位有px和em 4 6框模型 指定元素如何显示 页面中的每一个元素被看作一个矩形框 这个框由内容 填充 边框和空白边组成 4 6框模型 背景应用于由内容和内边距组成的区域内边距 边框和外边距都是可选的width和height指的是内容区域的宽度和高度增加内边距 边框和外边距不会影响内容区域的尺寸 但是会增加元素框的总尺寸如果给框加属性值 如margin 10px 指四个边全为10pxmargin 5px10px 则指上下为5px 左右为10px margin 5px10px20px 指上5px 左右10px 下20px margin 5px10px20px30px 顺序是上 右 下 左 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 f00solid1px 4 6框模型 CSS空白边围绕在元素边框的空白区域是外边距 设置外边距会在元素外创建额外的 空白 box margin 10px 4 7定位 一切皆为框块框 div h1或p元素被称为块级元素 这意味着这些元素显示为一块内容行内框 span和strong等元素称为 行内元素 这是因为它们的内容显示在行中display属性改变生成的框的类型 这意味着 通过将display属性设置为block 可以让行内元素 比如元素 表现得像块级元素一样 4 7定位 定位 指定义元素框相对于其正常位置应该出现的位置 或者相对于父元素 另一个元素甚至浏览器窗口本身的位置CSS三种基本定位机制 普通流 浮动和绝对定位 4 7定位 普通流普通流中的元素的位置由元素在 X HTML中的位置决定 块级框从上到下一个接一个地排列 框之间的垂直距离是由框的垂直外边距计算出来行内框在一行中水平布置 可以使用水平内边距 边框和外边距调整它们的间距 4 7定位 position属性static 元素框正常生成 relative 元素框相对原来位置偏移 它原本所占的空间仍保留 absolute 元素框从文档流完全删除 并相对于其包含块定位 包含块可能是文档中的另一个元素或者是初始包含块 元素原先在正常文档流中所占的空间会关闭 就好像元素原来不存在一样 元素定位后生成一个块级框 而不论原来它在正常流中生成何种类型的框 fixed 元素框的表现类似于将position设置为absolute 不过其包含块是视窗本身 4 7定位 CSS相对定位元素框会偏移某个距离 元素仍然保持其未定位前的形状 它原本所占的空间仍保留 box relative position relative left 30px top 20px 4 7定位 CSS绝对定位设置为绝对定位的元素框从文档流完全删除 并相对于其包含块定位 包含块可能是文档中的另一个元素或者是初始包含块 元素原先在正常文档流中所占的空间会关闭 就好像该元素原来不存在一样 元素定位后生成一个块级框 而不论原来它在正常流中生成何种类型的框 4 7定位 CSS绝对定位 box relative position absolute left 30px t