CSS
一、CSS概述
1. CSS简介
CSS指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常存储在样式表中,可以理解为CSS就是给HTML化妆的。
2. CSS三种使用方式
l 内联方式
-样式定义在单个的HTML元素中
l 内部样式表
-样式定义在HTML页的头<head>元素中
l 外部样式表
-将样式定义在一个外部的CSS文件中(.css)
-由HTML页面引用样式表文件
2.1 内联样式
l 样式定义在HTML元素的属性style里
l CSS语法
-只需要将分号隔开的一个或多个属性/值对作为元素的style属性的值
-属性和属性值之间用冒号(:)连接
-多对属性之间用分号(;)隔开
2.1.1 演示:CSS内联样式
<p style="color:red; font-size:30px">CSS内联样式演示</p> |
2.2 内部样式
l 样式定义在HTML文档头元素内
-在文档<head>元素内添加<style>元素
-在<style>元素中添加样式规则
-可以在当前页面内复用
2.2.1 演示:CSS内部样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> /*CSS注释是这样的,这里演示CSS的内部样式*/ p { color:blue; font-size:30px; } </style> </head> <body> <p>CSS内部样式演示</p> <p>内部样式可以在当前页面范围内复用</p> </body> </html> |
2.3 外部样式
l 样式定义在独立的css文件中
-一个纯文本文件,后缀为.css
-该文件只能包含样式规则
-可以在多个页面复用
l 使用步骤
-创建外部样式文件
-引用该样式文件
在HTML中引用样式文件:<link rel="stylesheet" href="my.css" />
2.3.1 演示:CSS外部样式
step1:创建.css样式文件,路径是当前路径my.css文件
p{ color:yellow; font-size:30px; } |
step2:引用该样式文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <!-- 外部样式演示 --> <link rel="stylesheet" href="my.css" /> </head> <body> <p>CSS外部样式演示</p> <p>外部样式可以被多个页面复用</p> </body> </html> |
二、CSS语法
1. CSS语法规范
l CSS:由多个样式规则组成
-每个样式规则有两个部分:选择器和样式声明。
2. CSS规则特性
l 继承性:父元素的CSS的声明可以被子元素继承,如字体、颜色等(不是所有声明都可以被继承)
l 层叠性:同一个元素若存在多个css规则,对于不冲突的声明可以叠加
l 优先级:同一个元素若存在多个css规则,对于冲突的声明以优先级高的为准(就近原则)
2.1 演示:CSS样式优先级
my.css文件配置 |
p{ color:yellow; } p{ color:red; } |
HTML配置 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <link rel="stylesheet" href="my.css" /> <style> p {color:blue;} p {color:pink;} </style> </head> <body> <p style="color:green;">CSS样式优先级演示</p> </body> </html> |
三、CSS选择器
1. 元素选择器
l 通过元素名来选择CSS作用的目标:如:<p>、<h1>等
2. 类选择器
l 类选择器允许以一种独立于文档元素的方式来指定样式
-语法: .classname{color:red}
l 所有能够附带class属性的元素都可以使用此样式声明
-将元素的class属性的值设置为样式类名
l 可以将类选择器和元素选择器结合起来使用,以实现对某种元素中不同样式的细分控制
-语法:元素选择器.classname{}
2.1 演示:类选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> .c1 { color:red; } </style> </head> <body> <h1 class="c1">CSS类选择器演示</h1> <p class="c1">使用.类名的方式声明选择器</p> </body> </html> |
2.2.2 演示:元素选择器.类选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> p.c1 { color:red; } </style> </head> <body> <p>CSS类选择器演示</p> <p class="c1">使用.类名的方式声明选择器</p> </body> </html> |
3. id选择器
l id选择器以一种独立于文档元素的方式来指定样式(任何元素都有id,id是元素的唯一标识)
l 它仅作用于id属性的值
l 语法:#id{}
补充:id和class区别:如果选择多个元素使用class,选择唯一的元素使用id。
3.1 演示:id选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> #id1 { color:red; } </style> </head> <body> <p id="id1">任何元素都有id,id是元素的唯一标识</p> </body> </html> |
4. 选择器组
l 写出一组选择器,可以选中每个选择器所对应的目标的并集
l 选择器声明为以逗号(,)隔开的选择器列表
-将一些相同的规则作用于多个元素
4.1 演示:选择器组
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> h1,.c1,#id1 { color:red; } </style> </head> <body> <h1>选择器组</h1> <p id="id1">选择器组可以选中选择器所对应目标的并集</p> <p class="c1">选择器组的声明以逗号隔开</p> <p class="c1">选择器组的演示</p> </body> </html> |
5. 派生选择器
l 派生选择器用来选择某元素下满足条件的子孙
-后代选择器:选择某元素的所有的后代(子+孙)元素
-子元素选择器:选择某元素的所有子元素
5.1 演示:派生选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> /*后代选择器,选择元素的子孙*/ p u{ color:red;} /*子选择器*/ p>b{ font-size:30px;} </style> </head> <body> <p id="id1">人生并<u>不像火车要通过每个站似的经过<b>每一个生活阶段</b>,人生总是直向前行走</u>,<b>从不留下什么。</b></p> </body> </html> |
6. 伪类选择器
l 伪类用于设置同一个元素在不同状态下的样式
l 常用的伪类:
-link:向未被访问的超链接添加样式
-visited:向已访问的超连接添加样式
-active:向被激活的元素添加样式
-hover:当鼠标悬停至元素上方时,向该元素添加样式
-focus:当元素获取焦点时,向该元素添加样式
6.1 演示:link和visited
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> a:link { color:red; } a:visited { color:green; } </style> </head> <body> <p> <a href="http://www.aliyun.com" traget=”_blank”>阿里云</a> </p> </body> </html> |
6.2 演示:active
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> .btn:active { background-color: green; } </style> </head> <body> <p> <input type="button" value="提交" class="btn" /> </p> </body> </html> |
6.3 演示:hover
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> img:hover { width:150px; height:150px; } </style> </head> <body> <p> <img src="../img/hero0.png" /> </p> </body> </html> |
6.4 演示:focus
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> #t1:focus { background-color:green; } </style> </head> <body> <p>姓名: <input type="text" id="t1"/> </p> </body> </html> |
四、CSS声明
1. border
l border属性:用来设置元素的边框
l 四边设置:
-border:width值 style值 color值
l 单边设置:
-border-left:width值 style值 color值
-border-right: width值 style值 color值
-border-top: width值 style值 color值
-border-bottom: width值 style值 color值
l 样式单位:
-%:百分比
-in:英寸
-cm:厘米
-mm:毫米
-pt:磅(1pt等于1/72英寸)
-px:像素(计算机屏幕上的一个点)
-em:1em等于当前的字体尺寸,2em等于当前字体尺寸的2倍
l 颜色表示方式
-十六进制:如#ff000,如果有两位一样可以只写一位数,如#FFAA66可以写成#FA6
-rgb(x,x,x):RGB值,如rgb(255,0,0)
-rgb(x%,x%,x%):RGB百分比值,每个值是255*x%得到rgb(x,x,x)值
-颜色英文单词:如red
l overflow:当内容溢出元素框时如何处理
-visible:默认值,元素的高度会自适应,只有给元素固定了高度才可能造成溢出
-hidden:隐藏
-scroll:滚动条,无论是否溢出都加滚动条
-auto:自适应,只有溢出才加滚动条
1.1 演示:四边设置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> p { border:1px solid red; } </style> </head> <body> <p>四边设置边框</p> </body> </html> |
1.2 演示:单边设置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> h1 { border-left:15px solid red; border-bottom:2px dashed blue; } </style> </head> <body> <h1>单边设置边框</h1> </body> </html> |
1.3 演示:溢出处理overflow
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> p { border:1px solid red; width:300px; height:60px; overflow:auto; } </style> </head> <body> <p>层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 HTML(标准通用标记语言的一个应用)或XML(标准通用标记 语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态 地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行 格式化。 </p> </body> </html> |
2. box
框模型(Box Model)定义了元素框处理元素内容、内边距、边框和外边距的方式。
width和height指内容区域的宽度和高度,增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
补充:对称设置外边距的特殊原则:当左右的值设置auto时,元素会水平居中。
2.1 演示:box model
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> #box{ width:70px; margin:10px; padding:5px; } </style> </head> <body> <p id="box">box model</p> </body> </html> |
打开浏览器,按F12调出调试界面,可以看到box model相关信息
2.2 演示:box边距设置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> div { border:1px solid red; width:100px; height:100px; } /*1.四个边设置相同的边距*/ #d1 { padding:20px; margin:40px; } /*2.四个边设置不同的边距*/ #d2 { /*顺序是:上右下左*/ padding:10px 20px 30px 40px; margin:10px 20px 30px 40px; } /*3单个边设置边距*/ #d3 { padding-left:20px; margin-bottom:30px; } /*4.对称设置边距*/ #d4 { /*顺序:上下 左右*/ padding:20px 40px; margin:20px 40px; } /*5.对称设置外边距的特殊原则: 当左右的值设置auto时,元素会水平居中*/ #d5 { margin:10px auto; } </style> </head> <body> <h1>演示边距设置的5种方法</h1> <div id="d0">d0</div> <div id="d1">d1</div> <div id="d2">d2</div> <div id="d3">d3</div> <div id="d4">d4</div> <div id="d5">d5</div> </body> </html> |
3. 背景
3.1 背景色
background-color属性用于为元素设置背景色,该属性接收任何合法的颜色值。
3.1.1 演示:背景色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> h1{ border:5px solid red; width:200px; height:50px; } h1,#btn { background-color:green; } </style> </head> <body> <h1>演示背景色</h1> <p> <input type="button" id="btn" value="提交"/> </p> </body> </html> |
3.2 背景图片
l background-image属性用于设置背景图片
-默认值是none,表示背景上没有放置任何图片
-如果需要设置一个背景图片,需要用起始字母url附带一个图像的URL值
-可以是相对路径或绝对路径的URL
l 默认情况下,背景图片在水平和垂直方向上重复出现,创建一种称为“墙纸”的效果
l background-repeat属性可以控制背景图片的平铺效果,取值如下:
-repeat:在垂直方向和水平方向重复,为重复值
-repeat-x:仅在水平方向重复
-repeat-y:仅在垂直方向重复
-no-repeat:仅显示一次
l background-position属性用于改变背景图片在元素中的位置,取值如下:
值 | 说明 |
x% y% | 第一个值是水平位置,第二个值是垂直位置,表示沿着x轴(水平)和y轴(垂直)的百分比,左上角是0% 0%,右下角是100% 100% |
x y | 第一个值是水平位置,第二个值是垂直位置,表示沿着x轴(水平)和y轴(垂直)的绝对长度,左上角是0 0 |
left | 在页面或者包含元素的左边显示 |
center | 在页面或者包含元素的中间显示 |
right | 在页面或者包含元素的右边显示 |
top | 在页面或者包含元素的顶部显示 |
Bottom | 在页面或者包含元素的底部显示 |
l 默认情况下,背景图像会随着页面的滚动而移动
l background-attachment属性来改变此特征
-默认值是scroll:默认情况下,背景随着文档滚动
-fixed:背景图像固定,并不会随着页面的其余部分滚动,常用于实现称之为水印的图像。
3.2.1 演示:背景图片设置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> div { border:1px solid red; width:500px; height:500px; background-image:url('../img/airplane.png'); background-repeat:no-repeat; background-position:top; } </style> </head> <body> <div></div> </body> </html> |
3.2.2 演示:背景图片滚动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> body { background-image:url('../img/background.png'); background-repeat:repeat-y; background-position:50% ; background-attachment:fixed; } .airplane{ border:1px solid red; width:100px; height:150px; margin:auto; background-image:url('../img/airplane.png'); background-repeat:no-repeat; background-position:center; } </style> </head> <body> <div class="airplane"></div> <div class="airplane"></div> <div class="airplane"></div> <div class="airplane"></div> <div class="airplane"></div> <div class="airplane"></div> <div class="airplane"></div> </body> </html> |
4. 文本格式化
4.1 控制字体
l 指定字体:font-family:v1,v2;
l 字体大小:font-size:30px;
l 字体加粗:font-weight:normal/bold;
4.1.1 演示:字体设置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> p { font-family:'微软雅黑'; font-size:30px; font-weight:bold; text-align:center; } </style> </head> <body> <p>字体设置:微软雅黑,30px,加粗,居中!</p> </body> </html> |
4.2 控制文本格式
l 文本颜色:color:value;
l 文本排列:text-align:left/right/center;
l 文字修饰:text-decoration:none/underline;
l 行高:line-height:value(1.6em);
l 首行文字缩进:text-indent:value(2em);
补充:当行高=元素高度时,文字垂直居中。
4.2.1 演示:文本格式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> #p1 { color:red; text-align:left; line-height:1.6em; } #p2 { color:green; text-align:center; text-decoration:underline; line-height:1.6em; text-indent:2em; } #p3 { color:bule; test-align:right; } </style> </head> <body> <p id="p1">文本控制,这一行红色、居左(默认即可)、行高1.6字体大小</p> <p id="p2">这一行绿色、居中、行高1.6字体大小、首行缩进2个字体大小、下划线</p> <p id="p3">这一行蓝色、居右、其他默认设置</p> </body> </html> |
4.2.2 演示:文字垂直居中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> h1 { border:1px solid red; text-align:center; height:100px; line-height:100px; } </style> </head> <body> <h1> 垂直居中演示 </h1> </body> </html> |
5. 表格样式
5.1 表格常用样式属性
表格同样可以使用box模型(边框、内边距、宽、高)以及文本格式化属性。
5.2 表格特有样式属性
l 如果设置了单元格的边框,相邻单元格的边框会单独显示,类似于双线边框
l border-collapse属性:合并相邻的边框
-设置是否将表格边框合并为单一边框
-border-collapse:separate/collapse;
补充:边框合并必须写在<table>上
5.3 演示:表格样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> table { width:200px; border:1px solid red; padding:10px; margin:30px; border-collapse:collapse; } table td { border:1px solid red; } </style> </head> <body> <table> <tr> <td>科目</td> <td>分数</td> </tr> <tr> <td>语文</td> <td>99</td> </tr> <tr> <td>数学</td> <td>100</td> </tr> </table> </body> </html> |
6. 定位
6.1 定位简介
定位:定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
定位分为:
l 流定位:元素默认排序
l 浮动定位
l 相对定位
l 绝对定位
l 固定定位
6.2 流定位
l 页面中的块级元素框从上到下一个接一个地排列
-每一个块级元素都会出现在一个新行中(比如<p>、<div>)
-元素框之间的垂直距离是由框的垂直外边距计算出来的
l 行内元素将在一行中从左到右水平排列
-不需要从新行开始
-可以使用水平内边距、边框和外边距调整它们的间距
6.3 浮动定位
l 浮动定位是指:
-让元素脱离普通流定位
-将浮动元素放置在父元素的左边或右边
-浮动元素依旧位于父元素之内
l 浮动的框可以向左或向右移动,直到它的外边缘碰到父元素或另一个浮动框的边框为止
-经常使用它来实现特殊的定位效果
l 语法:float:left/right;
补充:
浏览器渲染的规则:
1.父元素高度会自适应,以其内部流中的元素的高度为准。
2.浏览器认为文字很重要,无论如何都会将文字显示完整。
浮动定位:
作用:让元素左右排列
分类:左浮动、右浮动
浮动步骤:
-浮动的目标离队
-目标的弟弟跟上
-目标到达指定位置
规则:目标脱离流
右浮动:可以让元素按照倒序左右排列
左浮动:可以让元素按照正序左右排列
6.3.1 演示:右浮动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> #d0,p { border:1px solid black; } #d0 { width:500px; } #d1 { background-color:red; } #d2 { background-color:green; } #d3 { background-color:blue; } #d1,#d2,#d3 { width:100px; height:100px; margin:10px; float:right; } </style> </head> <body> <div id="d0"> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> </div> <p>向右浮动红绿蓝三个块元素</p> </body> </html> |
6.3.2 演示:左浮动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> #d0,p { border:1px solid black; } #d0 { width:500px; } #d1 { background-color:red; } #d2 { background-color:green; } #d3 { background-color:blue; } #d1,#d2,#d3{ width:100px; height:100px; margin:10px; } #d1,#d2 ,#d3{ float:left; } </style> </head> <body> <div id="d0"> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> </div> <p>向左浮动红绿蓝三个块元素</p> </body> </html> |
6.3.3 消除浮动定位影响
clear属性用于清除浮动所带来的影响,定义了元素哪边上不允许出现浮动元素。在哪个元素上加clear属性,该元素就不受影响,它会出现在所有浮动元素的下方。
l 语法:clear:none/left/right/both;
补充:消除浮动两种方法
1.父元素边框不需要显示 | 在受影响的元素上加clear |
2.父元素边框要显示 | a.在父元素内加空块 b.对此空块clear c.空块会出现在浮动元素下方,因为空块还在,所以父元素高度不变 |
6.3.4 演示:消除浮动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> #d0,p { border:1px solid black; } #d0 { width:500px; } #d1 { background-color:red; } #d2 { background-color:green; } #d3 { background-color:blue; } #d1,#d2,#d3{ width:100px; height:100px; margin:10px; float:left; } /*方法一:将下面受影响的元素clear*/ p { clear:left; } /*方法二:父元素添加空块,将空块clear*/ #d4 { clear:left; } </style> </head> <body> <div id="d0"> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> <div id="d4"></div> </div> <p>向左浮动红绿蓝三个块元素</p> </body> </html> |
6.3.5 演示:照片墙
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> body { background-color:#066; } ol { /*border:1px solid #F00;*/ width:790px; margin:20px auto; /*去掉列表左侧的编号*/ list-style-type:none; /*列表左侧自带内边距,将其清除*/ padding-left: 0; } li { border:1px solid #ccc; padding:10px; margin:10px; float:left; background-color:#FFF; } p { text-align:center; font-family:"微软雅黑","文泉驿正黑","黑体"; font-weight:bold; } </style> </head> <body> <div> <ol> <li> <img src="../images/01.jpg" /> <p style="width:218px;">图片一</p> </li> <li> <img src="../images/02.jpg" /> <p>图片二</p> </li> <li> <img src="../images/03.jpg" /> <p>图片三</p> </li> <li> <img src="../images/04.jpg" /> <p>图片四</p> </li> <li> <img src="../images/05.jpg" /> <p>图片五</p> </li> <li> <img src="../images/06.jpg" /> <p>图片六</p> </li> </ol> </div> </body> </html> |
6.4 相对定位
l 元素原本所占的空间不释放,不脱离流
l 元素框会相对于它原来的位置偏移某个距离
-设置垂直或水平位置,让元素相对于它的起点进行移动
l 设置元素为相对定位
-step1:首先需要设置position属性的值为relative
-step2:然后使用left属性或者right属性设置水平方向的偏移量
-也可以使用top属性或者bottom属性设置垂直方向的偏移量
6.4.1 演示:相对定位
要求:上面案例的照片墙添加需求,鼠标放到照片上,照片向右上角移动10px。
li { /*相对定位*/ position:relative; } li:hover { /*设置偏移量*/ top:-10px; left:10px; } |
6.5 绝对定位
l 将元素的内容从当前定位中移除,释放空间
l 并使用偏移属性来固定该元素的位置
-相对于最近的已定位祖先元素
-如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块,比如body元素
l 设置元素为绝对定位
-step1:首先需要设置position属性的值为absolute
-step2:然后使用left属性或者right属性设置元素的水平位置
-也可以使用top属性或者bottom属性设置元素的垂直位置
6.5.1 演示:绝对定位
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> div { border:1px solid red; width:318px; margin:10px auto; /*此处加position,只是为了方便子元素 以它为目标进行绝对定位.此div的位置 不需要变化,也不需要释放,所以采用相对 定位比较合适,偏移量却不需要设置.*/ position: relative; } p { border:1px solid #0F0; text-align:center; /*设置绝对定位偏移*/ position:absolute; bottom:200px; width:318px; background-color:#ccc; } </style> </head> <body> <div> <img src="../images/3.jpg" /> <p>风景图</p> </div> </body> </html> |
6.6 固定定位
l 将元素的内容固定在页面的某个位置
-元素从普通流中完全溢出,不占用页面空间
-当用户向下滚动页面时元素框并不随着移动
l 设置固定定位
-step1:首先需要设置position属性值为fixed
-step2:通过left、top、right以及bottom这些偏移属性来定义元素位置(直接定义元素位置,而不是偏移)
6.6.1 演示:固定定位
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> div { border:1px solid #f00; height:2000px; } a { background-color:#ccc; /*去掉下划线*/ text-decoration:none; /*固定定位,靠右10px,靠下30px*/ position:fixed; right:10px; bottom:30px; } </style> </head> <body> <div> <p>演示:固定定位,将"顶部"固定在页面右下角。</p> <a href="#">顶部</a> </div> </body> </html> |
6.7 定位属性
属性 | 说明 |
Position | 规定元素的定位类型,可取值为: Static/relative/absolute/fixed |
偏移属性 | Top/bottom/left/right属性,用于定义元素框的偏移位置 |
z-index | 设置元素的堆叠顺序 |
Float/clear | 浮动定位属性 |
补充:使用position属性和偏移属性实现流定位、相对定位、绝对定位和固定定位,使用float属性实现浮动定位,其他属性为辅助属性。 |
6.8 堆叠顺序
一旦修改了元素的定位方式,则元素可能会发生堆叠,可以使用z-index属性来控制元素框出现的重叠顺序。
l z-index属性:
-值为数值:数值越大表示堆叠顺序更高,即离用户更近
-拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面,即元素的显示会接近页面表面
-可以设置为负值,表示离用户更远
6.8.1 演示:堆叠顺序
要求:鼠标悬停的图片显示在最前面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> div { width:800px; height:600px; background-color:#066; margin:20px auto; position:relative; } #i1,#i2,#i3 { position:absolute; } #i1 { left:200px; top:150px; } #i2 { left:300px; top:100px; } #i3 { left:100px; top:50px; } img:hover { z-index:999; } </style> </head> <body> <div> <img src="../images/1.jpg" id="i1"/> <img src="../images/2.jpg" id="i2"/> <img src="../images/3.jpg" id="i3"/> </div> </body> </html> |
7. 列表样式
7.1 list-style-type
l list-style-type属性用于控制列表中列表项标识的样式
-无序列表:出现在各列表项旁边的圆点
-有序列表:可能是字母、数字或另外某种技术体系中的一个符号
无序列表取值<ul> | 有序列表取值<ol> |
none:无标记 | none:无标记 |
disc:实心圆、为默认值 | decimal:数字(如1,2,3),为默认值 |
circle:空心圆 | lower-roman:小写罗马数字(如i,ii,iii) |
square:实心方块 | upper-roman:大写罗马数字(如I,II,III) |
7.2 list-style-image
list-style-image属性使用图像来替换列表项的标记,取值为:url(),指定图像作为有序或无序列表项的标志。
7.3 演示:列表样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> ul { list-style-type:circle; } ol { list-style-type:upper-roman; } .img { list-style-image:url(../images/add.png); } </style> </head> <body> <ul> <li>语文</li> <li class="img">数学</li> <li class="img">英语</li> </ul> <ol> <li>JAVA</li> <li>Python</li> <li>Shell</li> </ol> </body> </html> |
8. 显示方式
8.1 默认显示方式
元素默认的显示方式:
l 块元素:从上至下,可以设置宽高,如<h1>、<p>、<div>等
l 行内元素:从左至右,不能设置宽高,如<span>、<a>等
l 行内块:从左至右,可以设置宽高,如<input>、<img>等
补充:除了默认的显示效果外,可以使用display属性来修改元素框的显示方式,即改变生成框的类型。
元素默认显示方式归纳表 | ||
显示方式 | 特点 | 包含元素 |
块 | 有宽高,上下排列 | h、p、ol、ul、li、div、table、form |
行内 | 无宽高,左右排列 | span(i、em、b、strong、u、del)、a、label |
行内块 | 有宽高、左右排列 | Img、input、select、textarea |
8.2 改变显示方式
可以使用display属性改变显示方式,取值如下:
l none:不显示该元素,释放其占用位置
l block:将元素显示方式设置为块,如可以将行内元素<a>转换为块元素
l inline:将元素显示方式设置为行内,如可以将块元素<p>转换为行内元素
l inline-block:将元素显示方式设置为行内块,如可以将行内元素<span>转换为行内块元素
8.3 演示:改变显示方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> p { display: inline; } span { display: block; } img { display: block; } img:hover { display:none; } </style> </head> <body> <div> <p>aaa</p> <p>bbb</p> <p>ccc</p> </div> <div> <span>111</span> <span>222</span> <span>333</span> </div> <div> <img src="../images/01.jpg"/> <img src="../images/02.jpg"/> <img src="../images/03.jpg"/> </div> </body> </html> |
9. 鼠标形状
9.1 改变属性形状
l 默认情况下,光标会根据用户的操作发生改变
-当鼠标悬停在一个连接上时,光标将从指针形状变为手状形状
-当鼠标悬停在文本区域时,会显示I 形状
-当鼠标悬停在一个按钮上时,光标会显示为箭头
l 可以使用cursor属性指定显示给用户的鼠标光标类型(形状)
-可以为用户提供一种可视化的暗示,提示可以进行的操作
9.2 cursor属性
l cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状
l 可取值:
-default
-pointer
-crosshair
-text
-wait
-help等
9.3 演示:改变鼠标形状
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示</title> <style> #a1:hover { cursor:default; } #a2:hover { cursor:pointer; } #a3:hover { cursor:crosshair; } #a4:hover { cursor:text; } #a5:hover { cursor:wait; } #a6:hover { cursor:help; } </style> </head> <body> <a href="#" id="a1">default</a> <a href="#" id="a2">pointer</a> <a href="#" id="a3">crosshair</a> <a href="#" id="a4">text</a> <a href="#" id="a5">wait</a> <a href="#" id="a6">help</a> </body> </html> |