网页样式表CSSS.pptVIP

定位(相对定位) 定位(绝对定位) 浮动 当元素浮动时，它将不再处于文档流中，相当于浮在文档之上，不占据空间，但是会缩短行框。 块级元素float以后就没有默认的100%宽度。 浮动元素脱离文档流，包含图片和文本的div不占据空间，所以要在这个div的某个地方清除浮动。 浮动 清除浮动(clear) 根据浮动的特点,会产生环绕的效果,但是当不需要环绕时可以通过清除属性还原块的基本属性. 父容器不能自适应高度的解决方法: 1.设定高度 2.设定overflow 和zoom属性 布局方式 两列定位布局 container 设置 position : relative属性。 一列设置宽度或边距，让开空间。 另外一列绝对定位。 三列定位布局 container 设置 position : relative属性。 一列设置宽度和边距，让开空间。 另外两列绝对定位。 布局 练习 一列固定宽度 一列宽度自适应 二列固定宽度 二列宽度自适应（分左右） 两列右列宽度自适应 三列浮动中间列宽度自适应 高度自适应 a onclick=this.style.behavior=url(#default#homepage);this.setHomePage(); href=#加为首页/a a href=javascript:window.external.AddFavorite(,建桥)设为收藏/a 圆角框 简单 宽高自适应 滑动门技术 * 网页样式表CSS 1. CSS的特点和用途 2. CSS的基本语法 3. CSS的网页使用方法 4. CSS的优先级 5. CSS的属性单位 6. CSS的常用属性 7. div与span标记 8. 列表标记 9. CSS布局和定位 * CSS（Cascading Style Sheets）,层叠样式表单，简称样式表，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 样式就是格式，在网页中，文字的大小、色彩及图片位置等，都是设置显示内容的样式。 层叠是指在HTML文档中引用多个定义样式的样式文件（CSS文件）时，若多个样式文件间所定义的样式发生冲突，将依据层次顺序处理。 1. CSS的特点和用途 * CSS控制网页外观（网页样式）是由一系列规则组成，包括构成、选择符（selector）等。 其实，选择符就是某一个样式的名称。当HTML文档中某个元素要使用该样式时，必须使用该名称选择样式。 样式表文件是文本文件，和编写xhtml文件一样，可以用任何可以编写文本文件的编辑器进行编写。也可以嵌在xhtml文件中。 与 XHTML 不同，CSS 对大小写不敏感。 2. CSS的基本语法 * CSS的定义由三部分构成：选择符（selector）、属性（properties）和属性的取值（value）。 基本格式如下： 选择符 {属性1: 属性值1; …属性n:属性值n} 如果值包括多个单词, 则用双引号括起来 p {font-family: sans serif“} * 选择符的基本类型 标签选择符 ID选择符 类选择符 特殊选择符 除了基本类型外，还可以把基本类型的选择符组合或者包含进行使用。 * 类(class)选择符 作用：可以为一种HTML标记定义不同的样式或者为不同的标记定义相同的样式 格式： 标记.类名称 {属性:属性值; 属性:属性值 …} .类名称 {属性:属性值; 属性:属性值 …} 使用方法： 标记 class=“类名称 实例 * ID选择符 作用：为HTML标记设定单独的样式 格式： #id名 {属性:属性值; 属性:属性值 …} 标记1#id名 {属性:属性值; 属性:属性值 …} 使用方法： 标记 id=“id名 实例 * 组合选择符（并集） 将多个选择符以逗号隔开归为一组 如， h1,h2,h3,h4,h5,h6 {color: green} 包含选择符（后代） 选择符还可以有包含关系 如， p b { font-weight:bold;} * 特殊选择符 作用：又称为伪选择符，对链接在不同状态下定义不同的样式效果 格式： a:hover {color: #00FF00} 实例 属 性 说 明 a:link 超链接的普通样式，即正常浏览状态的样式 a:visited 被点击过的超链接的样式 a: