本文详细介绍了CSS的核心概念，包括层叠样式表的历史、优势、基础语法，以及各种选择器的用法，如标签选择器、类选择器、ID选择器和组合选择器。此外，还涵盖了CSS在网页美化中的应用，如字体样式、文本样式、背景、超链接伪类、盒子模型和浮动元素的处理。内容深入浅出，适合初学者学习。
JavaWeb学习总结（二）CSS详解
一、初识CSS
（一）什么是CSS
CSS概念：Cascading Style Sheet 层叠样式表
- 表现HTML文件样式的语言
- 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
（二）CSS的发展史
- 1996年 CSS1.0诞生
- 1998年 CSS2.0
融入了DIV+CSS的概念，提出了HTML结构与CSS样式表的分离。 - 2004年 CSS2.1
融入了更多高级的用法，如浮动，定位等。 - 2010年 CSS3.0
它包括了CSS2.1下的所有功能，是目前最新的版本，它向着模块化的趋势发展， 又加了很多使用的新技术，如字体、多背景、圆角、阴影、动画等高级属性， 但是它需要高级浏览器的支持。由于现在IE 6、IE 7使用比例已经很少，对市场企业进行调研发现使用CSS3的频率大幅增加，学习CSS3已经成为一种趋势。
（三）CSS的优势
- 内容与表现分离
- 网页的表现统一 ， 容易修改
- 丰富的样式 ， 使得页面布局更加灵活
- 减少网页的代码量 ， 增加网页的浏览速度 ， 节省网络带宽
- 运用独立于页面的CSS ， 有利于网页被搜索引擎收录
- …
（四）CSS的基础语法
选择器{
属性1：属性值;//声明1
属性2：属性值;//声明2
...
}
注意：CSS的最后一条声明后的";“可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束都要写上”;"。
（五）Style标签
Style 标签在HTML文档中的位置 ， 在<head> 和 </head> 之间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*<style>标签用于为HTML文档定义样式信息。
在style中，您可以规定在浏览器中如何呈现HTML文档。*/
h1{
color: blue;
}
h2{
color: brown;
}
</style>
</head>
<body>
<h1>我的标题一</h1>
<h2>我的标题二</h2>
</body>
</html>
运行：
（六）引入CSS的方式
（1）行内样式
使用style属性引入CSS样式
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--行内样式
style属性引入 ,
行内样式如果要添加多个样式 , 中间使用分号隔开
-->
<h1 style="color: #5e42ff">Hello,css</h1>
<p style="color: #6aff46;font-weight: bold">Hello,css</p>
</body>
</html>
运行：
问题：这种方式的缺点？
1.如果标签多了。样式多了。代码量非常庞大。
2.可读性非常差。
3.Css 代码没什么复用性可言。
（2）内部样式表
CSS代码写在<head>的<style>标签中
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式表
需要使用style标签
格式 :
选择器 {
属性 : 属性值
...
}
-->
<style>
a{
font-size: 50px;
}
</style>
</head>
<body>
<a href="">Hello,world!</a>
</body>
</html>
运行：
如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的 最后可以不加分号(但尽量在每条声明的末尾都加上分号)
问题：这种方式的缺点。
1.只能在同一页面内复用代码，不能在多个页面中复用 css 代码。
2.维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。
（3）外部样式表
假设在resources文件夹下有个css目录，在css目录下创建stylesheet样式表文件
1 、链接式
把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用。
css文件：
/*
.css文件
声明选择器的样式
*/
div{
color: chocolate;
font-size: 100px;
}
12345678
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--第三种导入方式:外部样式表-链接式
需要使用 link标签
-->
<link rel="stylesheet" type="text/css" href="../../../resources/css/Style.css">
</head>
<body>
<div>
Hello,CSS!
</div>
</body>
</html>
运行：
2、导入式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--第三种导入方式:外部样式表-导入式
使用@import导入样式表
-->
<style>
@import url("../../../resources/css/Style.css");
</style>
</head>
<body>
<div>
Hello,CSS!
</div>
</body>
</html>
链接式与导入式的区别：
<link/>标签属于XHTML，@import是属于CSS2.1- 使用
<link/>链接的CSS文件先加载到网页当中，再进行编译显示 - 使用
@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中 @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
CSS样式优先级（就近原则）
行内样式 > 内部样式表 > 外部样式表
案例：
Style.css文件:
div{
color: yellow;
font-size: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外部样式表-->
<link rel="stylesheet" href="../../../resources/css/Style.css">
<!--内部样式表-->
<style>
div{
color: blue;
}
</style>
</head>
<body>
<!--行内样式表-->
<div style="color: red">
Hello,CSS!
</div>
</body>
</html>
运行：
结论：
从结果我们可以发现根据就近原则，最后显示的颜色样式是用的行内声明的颜色样式，但是多的属性可以互相补充，例如Style.css中的font-size属性是其他两个样式没有的，但是仍能最终显示出来。
（七）CSS基础选择器
（1）标签选择器
HTML标签作为标签选择器的名称
<h1>…<h6>、<p>、<img/>等等
格式：
选择器{
属性1：属性值;//声明1
属性2：属性值;//声明2
...
}
（2）类选择器
格式：
.class{
属性：属性值；
}
<标签名 class = "类名称">标签内容</标签名>
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 类选择器
思考: 需要将哪一类统一样式?
类在标签中定义, 使用class属性
然后使用类选择器选择到指定的标签元素
.类名称{
属性:属性值
}
*/
.a{
font-family: 华文行楷;
}
.b{
font-style: italic;
}
</style>
</head>
<body>
<!--自定义标签-->
<fox class="b">你好啊</fox>
<p class="a">初次见面</p>
<a href="" class="a">请多多指教</a>
<div class="a">好好学习,天天向上</div>
<span class="b">加油</span>
</body>
</html>
运行：
（3）ID选择器
格式：
#id名字{
属性：属性值；
...
}
<标签名 class= "类名称">标签内容</标签名
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id属性全局唯一 , 不能同名*/
/*id选择器
需要一个id--> 在标签中定义id
格式:
#id名字{
属性：属性值；
...
}
*/
#bbb{
color: blue;
}
#aaa{
color: red;
}
</style>
</head>
<body>
<p class="a" id="aaa">哈哈</p>
<a href="" class="a">呵呵</a>
<div class="a">嘻嘻</div>
<span class="a" id="bbb">嗯嗯</span>
</body>
</html>
运行：
（4）组合选择器
组合选择器的格式是：
选择器 1，选择器 2，选择器 n{
属性：值;
}
组合选择器可以让多个选择器共用同一个 css 样式代码。
需求 1：修改 class=“class01” 的 div 标签 和 id=“id01” 所有的 span 标签，字体颜色为蓝色，字体大小 20 个像素。 边框为 1 像素绿色实线。 示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class 类型选择器</title>
<style type="text/css">
.class01 , #id01{
color: blue;
font-size: 20px;
border: 1px green solid;
}
</style>
</head>
<body>
<div class="class01">div 标签 class01</div> <br />
<span id="id01">span 标签</span> <br />
<div class="class01">div 标签</div> <br />
<div id="id01">div 标签 id01</div> <br />
</body>
</html>
（5）小结
- 标签选择器直接应用于HTML标签
- 类选择器可在页面中多次使用
- ID选择器在同一个页面中只能使用一次
基本选择器的优先级
- ID选择器>类选择器>标签选择器
- 基本选择器不遵循 “ 就近原则 ”
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器*/
h1{
color: red;
}
/*类选择器*/
.test1{
color: blue;
}
/*ID选择器*/
#test2{
color: green;
}
</style>
</head>
<body>
<h1 class="test1" id="test2">好好学习，天天向上</h1>
</body>
</html>
运行：
（八）CSS高级选择器
（1）层次选择器
假设有这样一个层次结构的网页：
a. 后代选择器
格式：E F{声明；}
功能：获取E元素下所有与F匹配的元素
例如：body p{ background: red; }
b. 子选择器
格式：E>F{声明；}
功能：只获取E下面的与F匹配的第一层子元素
例如：body>p{ background: pink; }
c.相邻兄弟选择器
格式：E+F{声明；}
前提 : 定位到一个元素 E
功能：获取指定元素E的相邻兄弟的与F匹配的元素
注意：只找下面的兄弟，上面的不找
例如：.active+p { background: green; }
d.通用兄弟选择器
格式：E~F{声明；}
前提 : 定位到一个元素 E
功能：获取指定元素E后的所有匹配F的元素
例如：.active~p{ background: yellow; }
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p,ul{
border: 1px solid red; /*边框*/
}
/*后代选择器
需求 : 获取ul下面的所有p标签
使用空格隔开
*/
ul p{
background-color: green;
}
/*子选择器
需求 : 只获得body下面的第一层p元素
*/
body>p{
background: purple;
}
/*相邻兄弟选择器（只向下找）
前提 : 定位到一个元素 E(class="a")
需求 : 获取指定元素的相邻兄弟元素
*/
.a+p{
background: yellow;
}
/*兄弟选择器
前提 : 定位到一个元素 E(class="b")
需求 : 获取指定元素的所有(指定元素下面的)兄弟元素
*/
.b~p{
background: red;
}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<ul>
<li>
<p>4</p>
</li>
<li>
<p>5</p>
<ol>
<li>
<p>5.1</p>
</li>
<li>
<p>5.2</p>
</li>
<li>
<p>5.3</p>
</li>
</ol>
</li>
<li>
<p>6</p>
</li>
</ul>
<ol>
<li>
<p>7</p>
<p class="a">8</p>
<p>9</p>
<p class="b">10</p>
<p>11</p>
<p>12</p>
</li>
</ol>
</body>
</html>
运行：
通过结果我们看到body下的第一层p元素都是紫色，ul下所有p元素都是绿色，标记为a的第8行的p元素相邻兄弟（只向下）为黄色，标记为b的第10行的p元素的所有兄弟（只向下）都为红色。
（2）结构伪类选择器
- E:first-child 作为父元素的第一个子元素的元素E
- E:last-child 作为父元素的最后一个子元素的元素E
- E F:nth-child(n) 选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
- E:first-of-type 选择父元素内具有指定类型的第一个E元素
- E:last-of-type 选择父元素内具有指定类型的最后一个E元素
- E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素
例如：
ul li:first-child{ background: red;}
ul li:last-child{ background: green;}
p:nth-child(1){ background: yellow;}
p:nth-of-type(2){ background: blue;}
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p,li{
border: 1px solid red;
}
/*
结构伪类选择器 :
伪元素和伪选择器是CSS已经定义好的 ,我们拿来就可以用
格式 :
选择器:伪元素{
}
伪元素 :
:first-child
:last-child
:等等
*/
ul li:first-child{
background: yellow;
}
ul li:last-child{
background: red;
}
/*
E:nth-child(n) --> 需要找到E元素的父级元素,寻找父级元素的第n个子元素,
判断他是不是E元素 , 如果不是,就不会被选择。
这里结果第一个p元素是不会显示绿色的，因为p元素的父级元素为body，
p前面还有一个h1元素，body的第一个元素不是p元素
*/
p:first-child{
background: green;
}
/*
需求:选择body下面的第二个p元素
这里括号里为什么写3呢？
因为p元素的父级元素为body，p前面还有一个h1元素
所以先寻找body的第3个元素才为第二个p元素
*/
p:nth-child(3){
background: blue;
}
/*
需求：选择body下面的第三个p元素
E:nth-of-type(n) -->找到E的父级元素 , 然后在他的父级元素中直接去找第n个E元素
这种方法括号里数字就不用变
*/
p:nth-of-type(3){
background: brown;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>1</p>
<p>2</p>
<p>3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
运行：
（3）属性选择器
- E[attr] 选择匹配具有属性attr的E元素
- E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小
写） - E[attr^=val] 选择匹配元素E，且E元素定义了属性attr，并且其属性值是以val开头的任意字符串
- E[attr$=val] 选择匹配元素E，且E元素定义了属性attr，并且其属性值是以val结尾的任意字符串
- E[attr*=val] 选择匹配元素E，且E元素定义了属性attr，并且其属性值包含了val，换句话说，字符串val与属性值中的任意位置相匹配
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*所有有id属性的a元素背景设为黄色*/
a[id]{
background: yellow;
}
/*所有有class属性的a元素背景设为红色*/
a[class]{
background: red;
}
/*所有有id属性的且等于aa的a元素字体大小设为100px*/
a[id=aa]{
font-size: 100px;
}
/*所有有href属性且以"https"开头的a元素字体设为华文行楷*/
a[href^="https"]{
font-family: 华文行楷;
}
/*所有有href属性且以".png"结尾的a元素字体大小设为50px*/
a[href$=".png"]{
font-size: 50px;
}
/*所有有href属性且含有"."的a元素字体风格设为italic*/
a[href*="."]{
font-style: italic;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com" id="aa">哈哈</a>
<a href="" class="b">呵呵</a>
<a href="/1.png" class="c">哼哼</a>
<a href="" id="d">嘻嘻</a>
<a href="" class="e">啦啦</a>
<a href="" id="f">嗯嗯</a>
</p>
</body>
</html>
运行：
二、CSS美化网页元素
（一）span和div标签
- span标签的作用
- 能让某几个文字或者某个词语凸显出来
- 行内元素
- div标签
- 块级元素
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>span标签</title>
<style>
.a{
font-size: 30px;
color: red;
font-weight: bold;
}
#b{
font-size: 24px;
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<p>一寸 <span class="a">光阴</span>一寸 <span class="a">金</span></p>
<div>寸金<span id="b">难买</span>寸光阴</div>
</body>
</html>
运行：
（二）字体样式
| 属性名 | 含义 | 举例 |
|---|---|---|
| font-family | 设置字体类型 | font-family:“隶书”; |
| font-size | 设置字体大小 | font-size:12px; |
| font-style | 设置字体风格 | font-style:italic; |
| font-weight | 设置字体的粗细 | font-weight:bold; |
| font | 在一个声明中设置所有字体属性 | font:italic bold 36px “宋体”; |
（三）文本样式
| 属性 | 含义 | 举例 |
|---|---|---|
| color | 设置文本颜色 | color:#00C; |
| text-align | 设置元素水平对齐方式 | text-align:right; |
| text-indent | 设置首行文本的缩进 | text-indent:20px; |
| line-height | 设置文本的行高 | line-height:25px; |
| text-decoration | 设置文本的装饰 | text-decoration:underline; |
| vertical-align | 设置文本对齐 | vertical-align ： middle |
（四）文本阴影
案例：
Style1.css:
#a{
font-family: 楷体;
}
#b{
font-style: italic;
}
/* text-indent文本首行缩进 */
.sj{
text-indent: 2em;
}
/* text-shadow文本阴影 */
h1{
text-shadow: green -1px 1px 10px;
}
1234567891011121314
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="Style1.css">
</head>
<body>
<!--
px ->像素
em ->字符
-->
<h1>CSS（层叠样式表）</h1>
<p>摘自： <span id="a">百度百科</span>
<p class="sj">概念：层叠样式表(英文全称：<span id="b">Cascading Style Sheets</span>)<br/>
是一种用来表现HTML（标准通用标记语言的一个应用）<br/>
或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。<br/>
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地<br/>
对网页各元素进行格式化<br/>
</p>
</body>
</html>
运行：
（五）超链接伪类
| 伪类名称 | 含义 | 示例 |
|---|---|---|
| a:link | 未单击访问时超链接样式 | a:link{color:#9ef5f9;} |
| a:visited | 单击访问后超链接样式 | a:visited {color:#333;} |
| a:hover | 鼠标悬浮其上的超链接样式 | a:hover{color:#ff7300;} |
| a:active | 鼠标单击未释放的超链接样式 | a:active {color:#999;} |
设置伪类的顺序：a:link->a:visited->a:hover->a:active
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:visited{
color: #ff5f5d;
}
/*产生事件的伪类在同一个元素只能绑定一个*/
a:active{
color: green;
}
/*:hover鼠标悬停样式*/
a:hover{
color: yellow;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">点击进入...</a>
</body>
</html>
运行：
鼠标悬停：
（六）列表样式
- list-style-type
- list-style-image
- list-style-position
- list-style
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*list-style:none表示列表样式为空，去除小黑点*/
/*将列表样式设为小方块*/
ul li{
list-style-type: square;
}
</style>
</head>
<body>
<ul>
<li>可乐</li>
<li>雪碧</li>
<li>康师傅</li>
<li>芬达</li>
<li>百岁山</li>
</ul>
</body>
</html>
运行：
（七）网页背景
- 背景颜色
- background-color
- 背景图片
- background-image
- 背景定位
- background-position属性
- 背景重复方式
- background-repeat
- 简写
- background
例如：
- background
background:#C00 url(../image/kuangshen.jpg) 205px 10px no-repeat;
- 背景尺寸 ： background-size
- auto 默认值，使用背景图片保持原样
- percentage 当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
- cover 整个背景图片放大填充了整个元素
- contain 让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域
（八）CSS渲染渐变
- 线性渐变
- 颜色沿着一条直线过渡 ： 从左到右、从右到左、从上到下等
- 径向渐变
- 圆形或椭圆形渐变 ， 颜色不再沿着一条直线变化， 而是从一个起点朝所有方向混合
- 浏览器兼容性
| 属 性 名 | IE | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| Gradient | 10+ | 19.0+ | 26.0+ | 12.1+ | 5.1+ |
- IE浏览器是Trident内核，加前缀：-ms-
- Chrome浏览器是Webkit内核，加前缀：-webkit-
- Safari浏览器是Webkit内核，加前缀：-webkit-
- Opera浏览器是Blink内核，加前缀：-o-
- Firefox浏览器是Mozilla内核，加前缀：-moz-
语法：
兼容Webkit内核的浏览器
-webkit-linear-gradient ( position, color1, color2,…)
1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
/* https://webgradients.com/ */
height: 1000px;
background-image: linear-gradient(to top, #9890e3 0%, #b1f4cf 100%);
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>
三、盒子模型
（一）什么是盒子模型
CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
不同部分的说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
（二）边框
（1）边框颜色
| 属性 | 说明 | 示例 |
|---|---|---|
| border-top-color | 上边框颜色 | border-top-color:#369; |
| border-right-color | 右边框颜色 | border-right-color:#369; |
| border-bottom-color | 下边框颜色 | border-bottom-color:#fae45b; |
| border-left-color | 左边框颜色 | border-left-color:#efcd56; |
| border-color | 四个边框为同一颜色 | border-color:#eeff34; |
| boder-color | 上、下边框颜色：#369 左、右边框颜色：#000 | border-color:#369 #000; |
| border-color | 上边框颜色：#369左、右边框颜色：#000下边框颜色：#f00 | border-color:#369 #000 #f00; |
| border-color | 上、右、下、左边框颜色：#369、#000、#f00、#00f | border-color:#369 #000 #f00 #00f; |
（2）边框粗细
border-width：边框粗细
- thin
- medium
- thick
- 像素值
（3）边框样式
border-style：边框样式
- none：默认无边框
- dotted：定义一个点线边框
- dashed：定义一个虚线边框
- solid：定义实线边框
- double：定义两个边框。 两个边框的宽度和 border-width 的值相同
- groove：定义3D沟槽边框。效果取决于边框的颜色值
- ridge：定义3D脊边框。效果取决于边框的颜色值
- inset：定义一个3D的嵌入边框。效果取决于边框的颜色值
- outset：定义一个3D突出边框。 效果取决于边框的颜色值
边框简写
- 同时设置边框的颜色 ， 粗细和样式
border:1px solid #3a6587;
border: 1px dashed red;
等等
（4）外边距
- margin
- margin-top设置顶端外边距
- margin-right设置右端外边距
- margin-bottom设置底部外边距
- margin-left设置左端外边距
- margin
外边距妙用
-
网页居中对齐
margin:0px auto;
-
网页居中对齐的必要元素
- 块元素
- 固定宽度
（5）内边距
padding
- padding-left
- padding-right
- padding-top
- padding-bottom
- padding
（6）圆角边框
border-radius: 20px 10px 50px 30px;（四个属性值按顺时针排列）
border-radius：20px；（四个角属性值都为20px）
（7）盒子阴影
（8）盒子总结演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a
{
border-style:solid;
border-color:red;
}
.b
{
border-style:solid;
border-color:green;
}
.c
{
border-style:solid;
border-width:thin;
}
.d
{
border-style:solid;
border-width:medium;
}
.e
{
border-style:solid;
border-width:thick;
}
.none {border-style:none;}
.dotted {border-style:dotted;}
.dashed {border-style:dashed;}
.solid {border-style:solid;}
.double {border-style:double;}
.groove {border-style:groove;}
.ridge {border-style:ridge;}
.inset {border-style:inset;}
.outset {border-style:outset;}
.hidden {border-style:hidden;}
.f{
background-color: lightgrey;
width: 300px;
border: 35px solid blue;
padding: 30px;
margin: 25px;
}
#g {
border-radius: 10px 20px 30px 40px;
background:yellow;
padding: 20px;
width: 200px;
height: 150px;
}
.h{
width:300px;
height:100px;
background-color:orange;
box-shadow: 10px 10px 5px purple;
}
</style>
</head>
<body>
<h2>边框演示</h2>
<p class="a">这是实线红色边框</p>
<p class="b">这是实线绿色边框</p>
<p class="c">细边框</p>
<p class="d">中等宽度边框</p>
<p class="e">粗边框</p>
<p class="none">无边框</p>
<p class="dotted">点线边框</p>
<p class="dashed">虚线边框</p>
<p class="solid">实线边框</p>
<p class="double">双边框</p>
<p class="groove">沟槽边框</p>
<p class="ridge">脊边框</p>
<p class="inset">嵌入边框</p>
<p class="outset">突出边框</p>
<p class="hidden">隐藏边框</p>
<h2>圆角边框演示</h2>
<p id="g"></p>
<h2>盒子模型演示</h2>
<div class="f">这是内间距为30px，外间距为25px和35px的绿蓝色边框的盒子。</div>
<h2>盒子阴影演示</h2>
<div class="h"></div>
</body>
</html>
四、浮动
（一）标准文档流
标准文档流的组成
- 块级元素（block）
- h1~h6 、p 、 div 、列表
- 内联元素（inline）
- span 、 a 、 img 、 strong
内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立
（二）display属性
| 值 | 说明 |
|---|---|
| block | 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符 |
| inline | 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符 |
| inline-block | 行内块元素，元素既具有内联元素的特性，也具有块元素的特性 |
| none | 设置元素不会被显示 |
- 块级元素与行级元素的转变（block、inline）
- 控制块元素排到一行 （inline-block）
- 控制元素的显示和隐藏（none）
（三）块元素排在一行的方法
- 可以使用什么属性使块元素排在一行？
- inline-block 属性
- float属性
（四）浮动（float）
float属性
| 属性值 | 说明 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 默认值。元素不浮动，并会显示在其文本中出现的位置 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
img
{
float:right;
}
</style>
</head>
<body>
<p>哈哈哈哈哈哈哈啊哈</p>
<p>
<img src="u=4104926104,4054581253&fm=27&gp=0.jpg" width="95" height="84" />
</p>
</body>
</html>
（五）边框塌陷
- 浮动元素脱离标准文档流
- 清除浮动
- clear属性
| 值 | 说明 |
|---|---|
| left | 在左侧不允许浮动元素 |
| right | 在右侧不允许浮动元素 |
| both | 在左、右两侧不允许浮动元素 |
| none | 默认值。允许浮动元素出现在两侧 |
（六）溢出处理
Overflow属性
| 属性值 | 说明 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在盒子之外 |
| hidden | 内容会被修剪，并且其余内容是不可见的 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 |
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
.a{
background-color: green;
width: 200px;
height: 200px;
overflow: visible;
}
.b {
background-color: blue;
width: 200px;
height: 200px;
overflow: hidden;
}
.c {
background-color: yellow;
width: 200px;
height: 200px;
overflow: scroll;
}
.d {
background-color: red;
width: 200px;
height: 200px;
overflow: auto;
}
</style>
</head>
<body>
<h1>overflow 属性</h1>
<h2>hidden:</h2>
<div class="b">1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。
从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。</div>
<h2>scroll:</h2>
<div class="c">1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。
从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
</div>
<h2>auto:</h2>
<div class="d">1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。
从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。</div>
<h2>visible (默认):</h2>
<div class="a">1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。
从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。</div>
</body>
</html>
运行：
（七）解决父级边框塌陷的方法
- 浮动元素后面加空div
- 简单，空div会造成HTML代码冗余
- 设置父元素的高度
- 简单，元素固定高会降低扩展性
- 父级添加overflow属性
- 简单，下拉列表框的场景不能用
- 父级添加伪类after
- 写法比上面稍微复杂一点，但是没有副作用，推荐使用
（八）inline-block和float的区别
- display:inline-block
- 可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
- 位置方向不可控制，会解析空格
- IE 6、IE 7上不支持
- float
- 可以让元素排在一行并且支持宽度和高度，可以决定排列方向
- float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父 级上添加清除浮动的样式
五、定位网页元素
（一）定位
position属性
- static ： 默认值，没有定位
- relative：相对定位
- absolute：绝对定位
- fixed：固定定位
（二）相对定位
- 相对定位的特性
- 相对于自己的初始位置来定位
- 元素位置发生偏移后，它原来的位置会被保留下来
- 层级提高，可以把标准文档流中的元素及浮动元素盖在下边
- 相对定位的使用场景
- 相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
.left
{
position:relative;
left:-20px;
/* 样式 "left:-20px" 从元素的原始左侧位置减去 20 像素*/
}
.right
{
position:relative;
left:20px;
/* 样式 "left:20px" 向元素的原始左侧位置增加 20 像素*/
}
</style>
</head>
<body>
<h2>正常位置</h2>
<h2 class="left">向左移动</h2>
<h2 class="right">向右移动</h2>
</body>
</html>
（三）绝对定位
- 绝对定位的特性
- 绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级， 则相对浏览器窗口来定位
- 元素位置发生偏移后，原来的位置不会被保留
- 层级提高，可以把标准文档流中的元素及浮动元素盖在下边
- 设置绝对定位的元素脱离文档流
- 绝对定位的使用场景
- 一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别 花边等场景
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h2>我的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。
这个标题距离左边的页面100px和距离页面的顶部150px。
</p>
</body>
</html>
运行：
（四）固定定位
- 固定定位的特性
- 相对浏览器窗口来定位
- 偏移量不会随滚动条的移动而移动
- 固定定位的使用场景
- 一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶 导航栏等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
.fixed
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="fixed">哈哈哈</p>
<p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p>
</body>
</html>
（五）z-index属性
用于调整元素定位时重叠层的上下位置
- z-index属性值：整数，默认值为0
- 设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
- z-index值大的层位于其值小的层上方
（六）网页元素透明度
| 属性 | 说明 | 举例 |
|---|---|---|
| opacity:x | x值为0~1，值越小越透明 | opacity:0.4; |
| filter:alpha(opacity=x) | x值为0~100，值越小越透明 | filter:alpha(opacity=40); |
扫一扫
804
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
