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>

<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文件

color:yellow;

font-size:30px;

}

step2：引用该样式文件

<!DOCTYPE html>

<html>

<head>

</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文件配置

color:yellow;

}

color:red;

}

HTML配置

<!DOCTYPE html>

<html>

<head>

<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>

<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>

<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>

<style>

#id1 {

color:red;

}

</style>

</head>

<body>

<p id="id1">任何元素都有id,id是元素的唯一标识</p>

</body>

</html>

4. 选择器组

l 写出一组选择器，可以选中每个选择器所对应的目标的并集

l 选择器声明为以逗号(,)隔开的选择器列表

-将一些相同的规则作用于多个元素

4.1 演示：选择器组

<!DOCTYPE html>

<html>

<head>

<style>

h1,.c1,#id1 {

color:red;

}

</style>

</head>

<body>

<p id="id1">选择器组可以选中选择器所对应目标的并集</p>

<p class="c1">选择器组的声明以逗号隔开</p>

<p class="c1">选择器组的演示</p>

</body>

</html>

5. 派生选择器

l 派生选择器用来选择某元素下满足条件的子孙

-后代选择器：选择某元素的所有的后代（子+孙）元素

-子元素选择器：选择某元素的所有子元素

5.1 演示：派生选择器

<!DOCTYPE html>

<html>

<head>

<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>

<style>

a:link {

color:red;

}

a:visited {

color:green;

}

</style>

</head>

<body>

<p>

</p>

</body>

</html>

6.2 演示：active

<!DOCTYPE html>

<html>

<head>

<style>

.btn:active {

background-color: green;

}

</style>

</head>

<body>

<p>

</p>

</body>

</html>

6.3 演示：hover

<!DOCTYPE html>

<html>

<head>

<style>

img:hover {

width:150px;

height:150px;

}

</style>

</head>

<body>

<p>

</p>

</body>

</html>

6.4 演示：focus

<!DOCTYPE html>

<html>

<head>

<style>

#t1:focus {

background-color:green;

}

</style>

</head>

<body>

<p>姓名：

</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>

<style>

p {

border:1px solid red;

}

</style>

</head>

<body>

<p>四边设置边框</p>

</body>

</html>

1.2 演示：单边设置

<!DOCTYPE html>

<html>

<head>

<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>

<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>

<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>

<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>

</body>

</html>

3. 背景

3.1 背景色

background-color属性用于为元素设置背景色，该属性接收任何合法的颜色值。

3.1.1 演示：背景色

<!DOCTYPE html>

<html>

<head>

<style>

h1{

border:5px solid red;

width:200px;

height:50px;

}

h1,#btn {

background-color:green;

}

</style>

</head>

<body>

<h1>演示背景色</h1>

<p>

</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>

<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>

</body>

</html>

3.2.2 演示：背景图片滚动

<!DOCTYPE html>

<html>

<head>

<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>

</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>

<style>

p {

font-family:'微软雅黑';

font-size:30px;

font-weight:bold;

text-align:center;

}

</style>

</head>

<body>

</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>

<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>

<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>

<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>

</tr>

<tr>

</tr>

<tr>

</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>

<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>

<p>向右浮动红绿蓝三个块元素</p>

</body>

</html>

6.3.2 演示：左浮动

<!DOCTYPE html>

<html>

<head>

<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>

<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>

<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>

<p>向左浮动红绿蓝三个块元素</p>

</body>

</html>

6.3.5 演示：照片墙

<!DOCTYPE html>

<html>

<head>

<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>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</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>

<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>

</div>

</body>

</html>

6.6 固定定位

l 将元素的内容固定在页面的某个位置

-元素从普通流中完全溢出，不占用页面空间

-当用户向下滚动页面时元素框并不随着移动

l 设置固定定位

-step1：首先需要设置position属性值为fixed

-step2：通过left、top、right以及bottom这些偏移属性来定义元素位置(直接定义元素位置，而不是偏移)

6.6.1 演示：固定定位

<!DOCTYPE html>

<html>

<head>

<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>

</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>

<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>

</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>

<style>

ul {

list-style-type:circle;

}

ol {

list-style-type:upper-roman;

}

.img {

list-style-image:url(../images/add.png);

}

</style>

</head>

<body>

<ul>

</ul>

<ol>

<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>

<style>

p {

display: inline;

}

span {

display: block;

}

img {

display: block;

}

img:hover {

display:none;

}

</style>

</head>

<body>

<div>

</div>

<div>

</div>

<div>

</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>

<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>

</body>

</html>

posted @ 2017-08-17 07:53 将暮未暮阅读(250) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

将暮未暮

All is well~

CSS

一、CSS概述

1. CSS简介

2. CSS三种使用方式

2.1 内联样式

2.1.1 演示：CSS内联样式

2.2 内部样式

2.2.1 演示：CSS内部样式

2.3 外部样式

2.3.1 演示：CSS外部样式

二、CSS语法

1. CSS语法规范

2. CSS规则特性

2.1 演示：CSS样式优先级

三、CSS选择器

1. 元素选择器

2. 类选择器

2.1 演示：类选择器

2.2.2 演示：元素选择器.类选择器

3. id选择器

3.1 演示：id选择器

4. 选择器组

4.1 演示：选择器组

5. 派生选择器

5.1 演示：派生选择器

6. 伪类选择器

6.1 演示：link和visited

6.2 演示：active

6.3 演示：hover

6.4 演示：focus

四、CSS声明

1. border

1.1 演示：四边设置

1.2 演示：单边设置

1.3 演示：溢出处理overflow

2. box

2.1 演示：box model

2.2 演示：box边距设置

3. 背景

3.1 背景色

3.1.1 演示：背景色

3.2 背景图片

3.2.1 演示：背景图片设置

3.2.2 演示：背景图片滚动

4. 文本格式化

4.1 控制字体

4.1.1 演示：字体设置

4.2 控制文本格式

4.2.1 演示：文本格式

4.2.2 演示：文字垂直居中

5. 表格样式

5.1 表格常用样式属性

5.2 表格特有样式属性

5.3 演示：表格样式

6. 定位

6.1 定位简介

6.2 流定位

6.3 浮动定位

6.3.1 演示：右浮动

6.3.2 演示：左浮动

6.3.3 消除浮动定位影响

6.3.4 演示：消除浮动

6.3.5 演示：照片墙

6.4 相对定位

6.4.1 演示：相对定位

6.5 绝对定位

6.5.1 演示：绝对定位

6.6 固定定位

6.6.1 演示：固定定位

6.7 定位属性

6.8 堆叠顺序

6.8.1 演示：堆叠顺序

7. 列表样式

7.1 list-style-type

7.2 list-style-image

7.3 演示：列表样式

8. 显示方式

8.1 默认显示方式