《网页设计与制作实用技术（第二版）》第12章在网页中使用CSS样式.PPT

CSS浮动属性包括float和clear。float属性可以将元素的内容浮动到页面左边缘或右边缘，该属性的取值为：none、left、right，默认值为none。clear属性指定了元素是否允许浮动元素在它旁边，取值可以是：none、left、right、both，默认值为none，表示允许浮动元素在其旁边；left表示跳过左边的浮动元素；right表示跳过右边的浮动元素，both表示跳过所有的浮动元素。 4、浮动属性 CSS定位属性包括position、top、bottom、left、right和z-index，宽、高属性包括width和height。 position属性用来规定元素怎样在Web页上定位，它的取值为：static（默认值）、relative或absolute。 top和left属性用来规定某个元素与其他元素之间的距离。 width和height属性可以控制元素的宽度和高度，此时position属性必须指定为absolute。 12.3.5 定位和显示属性 1．定位属性和宽高属性 在CSS中，有两个属性可以控制元素的显示和隐藏，即display属性和visibility属性。 display属性确定一个元素是否应绘制在页面上，它的取值有多个，但在一般的浏览器中，只有一个none值可以使用。 visibility属性有时也被分类为定位属性，用来控制定位的元素是否可见，取值包括：visible（可见）、hidden（隐藏）和inherit（继承），默认值为inherit。 2．显示属性 CSS的鼠标样式属性用于设置鼠标移到元素上时的鼠标形状。通常情况下，鼠标呈指向左上方的箭头，而当鼠标移到超链接上时呈手的形状。有了鼠标样式属性，用户就可以随意地设定鼠标的形状。 CSS的鼠标样式是通过cursor样式表属性定义的，格式为： cursor：属性值 12.3.6 鼠标样式属性 列表样式属性用于设置页面中的列表格式。CSS中的列表样式属性包括：list-style、list-style-type、list-style-image以及list-style-position。 list-style-type属性用于设置项目符号和编号样式，取值为：disc（默认值，实心黑点）、circle（空心圆圈）、square（方块）、decimal（十进制数1，2，3等）、lower-roman（小罗马数字）、upper-roman（大罗马数字）、lower-alpha（小写字母）、upper--alpha（大写字母）和none（无）。 12.3.7 列表样式属性 滤镜（filter）是CSS的一种扩充。使用这种技术只用几句代码就可以把类似于Photoshop中的滤镜效果添加到图片、文本等HTML元素上。 filter样式表的属性定义为： filter：过滤器名称（参数） 12.3.8 CSS滤镜 选择“窗口”→“CSS样式”命令可以打开“CSS样式”面板，如图所示。 12.4 在Dreamweaver CS5中使用CSS样式 12.4.1 利用CSS样式面板应用CSS样式 1．CSS样式面板 2． CSS 样式面板按钮和视图 示范演示 3 . 新建一个CSS样式表 示范演示 4. 编辑CSS样式 示范演示 5. 引用CSS样式 示范演示 6. 引用CSS样式 12.4.2 利用属性面板应用CSS样式 1. 新建CSS规则 示范演示 2. 编辑CSS规则 示范演示 12.4.3 直接在HTML中插入代码 1.内联样式在标记符中直接嵌套样式信息 示范演示 2. 内部CSS样式表 示范演示 3. 外部CSS样式表 示范演示 12.4.4 在Dreamweaver CS5中CSS应用技巧 通过“禁用/启用 CSS 属性”功能，可从“CSS 样式”面板中注释掉部分 CSS，而不必直接在代码中做出更改。注释掉部分CSS后，即可看到特定属性和值在页面上具有的效果。 1. CSS的启用与禁用 CSS的启用与禁用的方法如下： （1）打开需要编辑的网页。 （2）选择“窗口”→“CSS 样式”命令，打开“CSS 样式”面