Java之CSS3详解(No.23)
1、CSS(Cascading Style Sheets)
CSS(Cascading Style Sheets，层叠样式表)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS可以美化网页，比如“字体、颜色、边距、宽度、高度、背景图片、网页定位、网页浮动”等。
2、CSS发展史(CSS Development History)
- 2.1、CSS1.0版本，HTML与CSS结构在一起，网页较复杂，不利于SEO(Search Engine Optimization)。
- 2.2、CSS2.0版本，新增DIV(块元素)+CSS，实现HTML与CSS结构分离，网页变得简单，利于SEO(Search Engine Optimization)。
- 2.3、CSS2.1版本，新增定位、浮动…。
- 2.4、CSS3.0版本，新增圆角、阴影、动画…，但同时也会出现浏览器兼容性问题。
3、CSS优点(CSS Advantages)
- 3.1、内容(HTML)和表现(CSS)分离。
- 3.2、网页结构变现统一，可以实现复用。
- 3.3、样式十分的丰富。
- 3.4、建议使用独立于HTML的css文件。
- 3.5、利于SEO(Search Engine Optimization)，容易被搜索引擎收录。
4、四种CSS导入方式(Four CSS Import Methods)
4.1、内部样式(Internal Style)
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部样式CSS</title>
<!--
<style>与</style>之间可以编写CSS代码，且每一行声明代码都用分号结尾；
其语法格式为：
<style>
选择器{
声明1;
声明2;
声明3;
...
}
</style>
-->
<!--内部样式-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>内部样式CSS</h1>
</body>
</html>
4.2、外部链接样式(External Link Style)
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部链接式CSS</title>
<!--外部链接式-->
<link rel="stylesheet" href="../../../css/css1.css">
</head>
<body>
<h1>外部链接式CSS</h1>
</body>
</html>
其CSS示例代码，如下所示。
h1{
color: green;
}
4.3、外部导入样式(External Import Style)
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部导入式CSS</title>
<!--外部导入式-->
<style>
@import url("../../../css/css1.css");
</style>
</head>
<body>
<h1>外部导入式CSS</h1>
</body>
</html>
其CSS示例代码，如下所示。
h1{
color: green;
}
4.4、行内样式(Inline Style)
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内样式CSS</title>
<!--内部样式-->
<style>
h1{
color: red;
}
</style>
<!--外部链接式-->
<link rel="stylesheet" href="../../../css/css1.css">
</head>
<body>
<!--优先级：就近原则-->
<!--内部样式-->
<h1 style="color: blue">行内样式</h1>
</body>
</html>
其CSS示例代码，如下所示。
h1{
color: green;
}
5、三种CSS基本选择器(Three CSS Basic Selectors)
选择器的作用就是“选择页面上的某一个或者某一类元素”。
5.1、标签选择器(Tag Selector)
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
/*
标签选择器：会选择页面上所有的这个标签的元素
其格式：
标签{
声明1;
声明2;
声明3;
...
}
*/
h1 {
color: crimson;
background: cyan;
border-radius: 20px;
}
p {
font-size: 50px;
}
</style>
</head>
<body>
<h1>Java</h1>
<h1>HTML</h1>
<h1>CSS</h1>
<p>HTML5 CSS3</p>
</body>
</html>
5.2、类选择器(Class Selector)
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
/*
类选择器：可以把多个不同类型标签归为一类(class)，从而可以实现复用
其格式：
.类名称{
声明1;
声明2;
声明3;
...
}
*/
.cls1{
color: orange;
}
.cls2{
color: purple;
}
</style>
</head>
<body>
<h1 class="cls1">Java</h1>
<h1 class="cls2">HTML</h1>
<h1 class="cls1">CSS</h1>
<p class="cls1">HTML5 CSS3</p>
</body>
</html>
5.3、ID选择器(ID Selector)
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style>
/*
ID选择器：必须保证id全局唯一，
其格式：
#id名称{
声明1;
声明2;
声明3;
...
}
三种基本选择器的优先级原则：“id选择器>class选择器>标签选择器”，不遵循就近原则。
*/
#id1{
color: red;
}
#id2{
color: orange;
}
.cls1{
color: yellow;
}
.cls2{
color: green;
}
h1{
color: blue;
}
</style>
</head>
<body>
<h1 class="cls1" id="id1">Java</h1>
<h1 class="cls1">HTML</h1>
<h1 class="cls2">CSS</h1>
<p id="id2">HTML5 CSS3</p>
<h1>JavaScript</h1>
</body>
</html>
6、四种CSS层次选择器(Four CSS Hierarchy Selectors)
6.1、后代选择器(Descendant Selector)
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
/*
后代选择器：选择某个类型元素的所有后代
*/
body p{
background: red;
}
</style>
</head>
<body>
<p>p0</p>
<h>h1</h>
<p>p1</p>
<p class="c1">p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p7</p>
<ul>
<li>
<p>p8</p>
</li>
<li>
<p>p9</p>
</li>
<li>
<p>p10</p>
</li>
</ul>
<p>p11</p>
<a href="">a1</a>
</body>
</html>
6.2、子选择器(Child Selector)
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子选择器</title>
<style>
/*
子选择器：选择某个类型元素的所有子代
*/
body>p{
background: red;
}
</style>
</head>
<body>
<p>p0</p>
<h>h1</h>
<p>p1</p>
<p class="c1">p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p7</p>
<ul>
<li>
<p>p8</p>
</li>
<li>
<p>p9</p>
</li>
<li>
<p>p10</p>
</li>
</ul>
<p>p11</p>
<a href="">a1</a>
</body>
</html>
6.3、相邻兄弟选择器(Adjacent Brother Selector)
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相邻兄弟选择器</title>
<style>
/*
相邻兄弟选择器：选择某个类型元素的同辈中向下的第一个相邻兄弟元素，若没有则不选中元素。
*/
.c1+p{
background: red;
}
</style>
</head>
<body>
<p>p0</p>
<h>h1</h>
<p>p1</p>
<p class="c1">p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p7</p>
<ul>
<li>
<p>p8</p>
</li>
<li>
<p>p9</p>
</li>
<li>
<p>p10</p>
</li>
</ul>
<p>p11</p>
<a href="">a1</a>
</body>
</html>
6.4、通用兄弟选择器(Universal Brother Selector)
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通用兄弟选择器</title>
<style>
/*
通用兄弟选择器：选择某个类型元素的同辈中向下的所有兄弟元素，若没有则不选中元素。
*/
.c1~p{
background: red;
}
</style>
</head>
<body>
<p>p0</p>
<h>h1</h>
<p>p1</p>
<p class="c1">p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p7</p>
<ul>
<li>
<p>p8</p>
</li>
<li>
<p>p9</p>
</li>
<li>
<p>p10</p>
</li>
</ul>
<p>p11</p>
<a href="">a1</a>
</body>
</html>
7、CSS结构伪类选择器(CSS Structure Pseudo Class Selector)
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS结构伪类选择器</title>
<!--尽量避免使用“class选择器”或“id选择器”-->
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: red;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: purple;
}
/*选中p标签同级元素中的第5个元素*/
p:nth-child(5){
background: green;
}
/*选中p标签元素中的第5个元素*/
p:nth-of-type(5){
background: blue;
}
</style>
</head>
<body>
<a href="">a</a>
<h1>h1</h1>
<span>span</span>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</body>
</html>
8、CSS属性选择器(CSS Attribute Selector)
属性选择器(Attribute Selector)：一般将"id选择器"与"class选择器"相结合，经常使用。
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS属性选择器</title>
<style>
/*属性选择器(Attribute Selector)：一般将"id选择器"与"class选择器"相结合，经常使用*/
.attr_sel a{
float: left;/*向左浮动*/
display: block;/*显示为块元素*/
height: 50px;/*高度为50像素*/
width: 50px;/*宽度为50像素*/
border-radius: 10px;/*圆角半径为10像素*/
background: white;/*标签背景颜色*/
text-align: center;/*居中对齐*/
color: black;/*标签颜色*/
text-decoration: none;/*取消标签下划线*/
margin-right: 5px;/*右外边距为5像素*/
font: bold 20px/50px Arial;/*字体加粗 字体大小/字体行高 字体类型*/
}
/*
属性名：属性名=属性值(正则表达式)
其中“=”代表“绝对等于这个元素”，“*=”代表“包含这个元素”，“^=”代表“以这个元素开头”，“$=”代表“以这个元素结尾”。
*/
/*选择id属性的所有元素*/
a[id]{
background: red;
}
/*选择id等于"first"的元素*/
a[id="first"]{
background: orange;
}
/*选择class中包含"link"的所有元素*/
a[class*="link"]{
background: yellow;
}
/*选择href中以"http"开头的所有元素*/
a[href^="http"]{
background: green;
}
/*选择href中以"txt"结尾的所有元素*/
a[href$="txt"]{
background: blue;
}
/*选择href中以"docx"结尾的所有元素*/
a[href$="docx"]{
background: cyan;
}
/*选择href中以"pptx"结尾的所有元素*/
a[href$="pptx"]{
background: purple;
}
/*选择href中以"xlsx"结尾的所有元素*/
a[href$="xlsx"]{
background: darkred;
}
/*选择href中以"jpg"结尾的所有元素*/
a[href$="jpg"]{
background: orchid;
}
/*选择href中以"bmp"结尾的所有元素*/
a[href$="bmp"]{
background: olivedrab;
}
/*选择href中以"png"结尾的所有元素*/
a[href$="png"]{
background: burlywood;
}
</style>
</head>
<body>
<p class="attr_sel">
<a href="https://www.baidu.com" title="百度" class="link1" id="first">1</a>
<a href="https://gitee.com/mrxiaohu/openclass" title="码云" class="link2" target="_blank">2</a>
<a href="../CSS结构伪类选择器/CSS结构伪类选择器.html" class="link3">3</a>
<a href="../../resources/images/20210915001.jpg" class="link4">4</a>
<a href="../../resources/images/20210915002.bmp" class="link5">5</a>
<a href="../../resources/images/20210915003.png" class="link6">6</a>
<a href="a1" class="link7">7</a>
<a href="../../resources/documents/a1.docx" class="link8">8</a>
<a href="../../resources/documents/a1.pptx" class="link9">9</a>
<a href="../../resources/documents/a1.txt" class="link10">10</a>
<a href="../../resources/documents/a1.xlsx" class="link11">11</a>
<a href="abc1" class="link12">12</a>
<a href="../../resources/documents/abc1.docx" class="link13">13</a>
<a href="../../resources/documents/abc1.pptx" class="link14">14</a>
<a href="../../resources/documents/abc1.txt" class="link15">15</a>
<a href="../../resources/documents/abc1.xlsx" class="link16">16</a>
</p>
</body>
</html>
9、CSS字体样式(CSS Font Style)
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS字体样式</title>
<style>
#id1 { /*id选择器*/
font-size: 50px;/*字体大小*/
}
body{/*body标签选择器*/
font-family: "Arial Black",楷体_GB2312;/*网页主体内容字体类型*/
color: black;/*网页主体内容字体颜色*/
font-size: 25px;
}
h1{/*h1标签选择器*/
font-size: 30px;/*字体大小*/
}
.c1{/*class选择器*/
font-weight: bolder;/*字体粗细*/
font-size: 30px;/*字体大小*/
color: red;/*字体颜色*/
}
p{/*p标签选择器*/
font: oblique bolder 20px "华文楷体";/*字体风格：倾斜 加粗 20像素 华文楷体*/
}
</style>
</head>
<body>
<!--span标签：“重点突出显示的文字”-->
电影<span id="id1">长津湖</span>
<h1>剧情介绍</h1>
<p class="c1">1950年，中国志愿军部队与美军在朝鲜长津湖地区交战，中国人民志愿军第9兵团将美军1个多师分割包围于长津湖地区，歼敌1.3万余人，扭转了战场态势。这次战役收复了三八线以北的东部广大地区，是扭转局势的关键一战，而中国人民志愿军也付出了惨痛的牺牲，在零下三十多摄氏度的极端天气中，很多先烈是以端着枪的姿势被冻僵，体现了志愿军战士服从命令视死如归、冻成冰雕也不退缩的革命精神。</p>
<h1>幕后制作</h1>
<p>影片为了全景式再现这场战役的全过程，主创团队经过了5年多的剧本打磨，两年多的细致筹备，超过7万人次的群众演员参演，超大规模的服装道具军事装备准备，以及超百公里的战役战术设计。</p>
</body>
</html>
10、CSS文本样式(CSS Text Style)
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS文本样式</title>
<style>
a{
text-decoration: none;/*文本装饰：取消下划线*/
}
.p1{
text-decoration: underline;/*下划线*/
}
.p2{
text-decoration: line-through;/*中划线*/
}
.p3{
text-decoration: overline;/*上划线*/
}
h1{
color: rgba(0,255,255,0.8);/*文本颜色*/
text-align: center;/*文本居中*/
}
.p4{
text-indent: 2em;/*文本首行缩进2个文字高度的相对单位*/
}
.p5{
background: yellow;/*文本背景颜色*/
height: 50px;/*文本高度*/
line-height: 50px;/*文本行高，与块的高度(即，文本高度)一致，就可以上下居中*/
}
img,span{
vertical-align: middle;/*垂直对齐：span标签参照图像标签垂直居中对齐<*/
}
</style>
</head>
<body>
<a href="">a1</a>
<p class="p1">p1</p>
<p class="p2">p2</p>
<p class="p3">p3</p>
<h1>剧情介绍</h1>
<p class="p4">1950年，中国志愿军部队与美军在朝鲜长津湖地区交战，中国人民志愿军第9兵团将美军1个多师分割包围于长津湖地区，歼敌1.3万余人，扭转了战场态势。这次战役收复了三八线以北的东部广大地区，是扭转局势的关键一战，而中国人民志愿军也付出了惨痛的牺牲，在零下三十多摄氏度的极端天气中，很多先烈是以端着枪的姿势被冻僵，体现了志愿军战士服从命令视死如归、冻成冰雕也不退缩的革命精神。</p>
<p class="p5">p5</p>
<p>
<img src="../../resources/images/20210915003.png" alt="">
<span>span标签参照图像标签垂直居中对齐</span>
</p>
</body>
</html>
11、CSS文本阴影与超链接伪类(CSS Text Shadow And Hyperlink Pseudo Class)
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS文本阴影与超链接伪类</title>
<style>
a{/*a标签选择器*/
text-decoration: none;/*文本装饰：取消下划线*/
color: #000;/*黑色文本颜色*/
}
a:hover{/*超链接伪类hover：鼠标悬浮链接上状态*/
color: orange;/*橙色文本颜色*/
font-size: 50px;/*文本字体大小为50像素*/
}
a:active{/*超链接伪类active：鼠标按住链接未释放状态*/
color: green;/*绿色文本颜色*/
}
a:visited{/*超链接伪类visited：链接已访问状态*/
color: blue;/*蓝色文本颜色*/
}
#price{/*id选择器*/
text-shadow: cyan 10px -10px 3px;/*文本阴影：阴影颜色 水平偏移量 垂直偏移量 阴影半径*/
}
</style>
</head>
<body>
<!--
<a href="#">代表“链接就是当前页面”
-->
<a href="#">
<img src="../../resources/images/20210915004.png" alt="">
</a>
<p>
<a href="#">码出高效：Java开发手册</a>
</p>
<p>
<a href="">作者：杨冠宝、高海慧</a>
</p>
<p id="price">
￥99
</p>
</body>
</html>
12、CSS列表样式(CSS List Style)
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS列表样式</title>
<link rel="stylesheet" href="../../css/列表样式.css" type="text/css">
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li>
<li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li>
<li><a href="#">电脑</a> <a href="#">办公</a></li>
<li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li>
<li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li>
<li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li>
<li><a href="#">食品饮料</a> <a href="#">保健食品</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a>
</li>
</ul>
</div>
</body>
</html>
其CSS示例代码，如下所示。
#nav{
width: 300px;/*div宽度*/
background: rosybrown;/*div背景颜色*/
}
.title{
font-size: 18px;/*18像素的字体大小*/
font-weight: bold;/*字体加粗*/
text-indent: 1em;/*h标签文本首行缩进1个文字高度的相对单位*/
line-height: 35px;/*行高为35像素*/
background: red;/*红色背景颜色*/
}
/*
ul无序列表中，list-style参数默认值代表“实心圆”；
list-style参数值为“none”时代表“去掉圆点”；
list-style参数值为“circle”时代表“空心圆”；
list-style参数值为“decimal”时代表“数字”；
list-style参数值为“square”时代表“正方形”；
*/
ul li{
height: 30px;/*列表项高度*/
list-style: none;/*列表项样式为去掉圆点*/
text-indent: 1em;/*列表项文本首行缩进1个文字高度的相对单位*/
}
a{
text-decoration: none;/*文本装饰为去掉下划线*/
font-size: 15px;/*15像素的字体大小*/
color: #000000;/*黑色文本颜色*/
}
a:hover{
color: orange;/*橙色文本颜色*/
text-decoration: underline;/*文本装饰为下划线*/
}
13、CSS背景图像应用及渐变(CSS Background Image Application And Gradual Change)
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS背景图像应用及渐变</title>
<style>
div {
width: 800px;/*宽度*/
height: 600px;/*高度*/
border: 1px solid red;/*红色固定1像素的边框*/
background-image: url("../../resources/images/20210916001.png");/*背景图片，默认为repeat平铺*/
}
.div1 {
background-repeat: repeat-x;/*以X方向平铺背景*/
}
.div2 {
background-repeat: repeat-y;/*以Y方向平铺背景*/
}
.div3{
background-repeat: no-repeat;/*不平铺背景*/
}
.div4{
background-color: #FFFFFF;/*背景颜色*/
background-image: linear-gradient(115deg,#FFFFFF 0%,#6284FF 50%,#FF0000 100%);/*背景图像渐变*/
/*一般推荐背景图像渐变网址：https://www.grabient.com/*/
}
.div5{
background-color: #FFFFFF;/*背景颜色*/
background-image: linear-gradient(rgb(255, 255, 255) 0%, rgb(98, 132, 255) 50%, rgb(255, 0, 0) 100%);/*背景图像渐变*/
/*opacity: 0;!*透明度，范围为“0.0(完全透明)~1.0(完全不透明)”*!*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</body>
</html>
14、CSS盒子模型及边框使用(CSS Box Model And Border Use)
CSS盒子模型从外向内分别为“margin(外边距)”、“border(边框)”、“padding(内边距)”、“content(内容)”。
CSS盒子的大小=“margin(外边距)”+“border(边框)”+“padding(内边距)”+“content(内容)”的所有大小。
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS盒子模型及边框使用</title>
<style>
body,div,h2,form,span,input{
margin: 0px;/*外边距为0像素*/
padding: 0px;/*内边距为0像素*/
text-decoration: none;/*文本装饰：取消下划线*/
}
#box1{
width: 300px;/*300像素宽度*/
border: 1px solid red;/*红色固定1像素边框*/
}
h2{
font-size: 15px;/*字体大小为0像素*/
background-color: green;/*绿色背景颜色*/
line-height: 30px;/*行高为30像素*/
color: white;/*白色文本颜色*/
}
form{
background: blue;/*蓝色背景颜色表单*/
}
div:nth-of-type(1) input{
border: 3px solid black;/*黑色固定3像素边框*/
}
div:nth-of-type(2) input{
border: 3px solid yellow;/*黄色固定3像素边框*/
}
div:nth-of-type(3) input{
border: 3px solid orange;/*橙色固定3像素边框*/
}
</style>
</head>
<body>
<div id="box1">
<h2>会员登录</h2>
<form action="#">
<div>
<span>账户：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="password">
</div>
<div>
<span>邮箱：</span>
<input type="email">
</div>
</form>
</div>
</body>
</html>
15、CSS内外边距及DIV居中(CSS inside And Outside Margins And Div Center)
DIV是层叠样式表中的定位技术，全称DIVision，即为划分，有时可以称其为图层。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS内外边距及DIV居中</title>
<style>
/*外边距的好处：“居中元素”*/
#box1{
width: 300px;/*300像素宽度*/
border: 1px solid red;/*红色固定1像素边框*/
margin: 0 auto;/*上下外边距为0像素 右左外边距自动相同(即，左右居中对齐)*/
}
/*
顺时针旋转：
margin:0 代表“上下右左外边距都为0像素”
margin:0 1px 代表“上下外边距都为0像素 右左外边距都为1像素”
margin:0 1px 2px 代表“上外边距为0像素 右左外边距都为1像素 下外边距为2像素”
margin:0 1px 2px 3px 代表“上外边距为0像素 右外边距为1像素 下外边距为2像素 左外边距为3像素”
*/
h2{
font-size: 15px;/*字体大小*/
background-color: green;/*背景颜色*/
line-height: 30px;/*行高*/
color: white;/*字体颜色*/
margin: 0px 120px 0px 120px;/*上外边距为0像素 右外边距为120像素 下外边距为0像素 左外边距为120像素*/
}
form{
background: cyan;/*表单背景颜色*/
}
input{
border: 1px solid black;/*输入框：黑色固定1像素边框*/
}
</style>
</head>
<body>
<div id="box1">
<h2>会员登录</h2>
<form action="#">
<div>
<span>账户：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="password">
</div>
<div>
<span>邮箱：</span>
<input type="email">
</div>
</form>
</div>
</body>
</html>
16、CSS圆角边框及阴影(CSS Border-Radius And Shadow)
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS圆角边框及阴影</title>
<!--
border-radius：圆角边框(即，圆形边框)：依次按照“左上、右上、右下、左下”的顺时针方向旋转
-->
<style>
div{
width: 100px;/*宽度*/
height: 100px;/*高度*/
border: 1px solid red;/*红色固定1像素边框*/
/*border-radius: 100% 100% 100% 100%;!*圆角边框*!*/
}
#div1{
border-radius: 0%;/*矩形边框*/
}
#div2{
border-radius: 100%;/*圆角边框*/
}
#div3{
border-radius: 100% 0% 0% 0%;/*左上扇形边框*/
}
#div4{
border-radius: 0% 100% 0% 0%;/*右上扇形边框*/
}
#div5{
border-radius: 0% 0% 100% 0%;/*右下扇形边框*/
}
#div6{
border-radius: 0% 0% 0% 100%;/*左下扇形边框*/
}
#div7{
width: 50px;
border-radius: 50px 0px 0px 50px;/*左半圆边框*/
}
#div8{
height: 50px;
border-radius: 50px 50px 0px 0px;/*上半圆边框*/
}
#div9{
width: 50px;
border-radius: 0px 50px 50px 0px;/*右半圆边框*/
}
#div10{
height: 50px;
border-radius: 0px 0px 50px 50px;/*下半圆边框*/
}
img{
background: deepskyblue;/*背景颜色*/
border-radius: 100%;/*圆角边框*/
box-shadow: 10px 10px 100px deeppink;/*盒子阴影：水平阴影位置 垂直阴影位置 模糊距离 阴影颜色*/
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"></div>
<div id="div9"></div>
<div id="div10"></div>
<img src="../../resources/images/20210916002.png" alt="">
<div style="width: 400px;height: 400px;display: block;text-align: center">
<img src="../../resources/images/20210916002.png" alt="">
</div>
</body>
</html>
17、CSS显示与浮动(CSS Display And Float)
块级元素：“独占一行”，行内元素：“不独占一行”，行内元素可以包含在块级元素中，反之则不可以。
显示(Display)：“会导致方向不可控制”；Float(浮动)：“会脱离标准文档流，从而出现父级边框塌陷问题”。
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS显示与浮动</title>
<link rel="stylesheet" href="../../css/显示与浮动.css" type="text/css">
</head>
<body>
<div id="father">
<div class="div1"><img src="../../resources/images/20210915002.bmp" alt=""></div>
<div class="div2"><img src="../../resources/images/20210915003.png" alt=""></div>
<div class="div3"><img src="../../resources/images/20210915004.png" alt=""></div>
<div class="div4">
浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
</div>
</div>
</body>
</html>
其CSS示例代码，如下所示。
/*
display：显示
其值为“block”时代表“显示块元素”；
其值为“inline”时代表“显示行内元素”；
其值为“inline-block”时代表“显示行内块元素”；
其值为“none”时代表“不显示元素”。
float：浮动
其值为“left”时代表“向左浮动”；
其值为“right”时代表“向右浮动”；
其值为“none”时代表“不浮动”。
*/
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px #000 solid;
}
.div1{
border: 1px #F00 dashed;
display: inline-block;
float: right;
}
.div2{
border: 1px #00F dashed;
display: inline-block;
float: right;
}
.div3{
border: 1px #0F0 dashed;
display: inline-block;
float: right;
}
.div4{
border: 1px red dashed;
font-size: 15px;
line-height: 30px;
display: inline-block;
float: right;
}
18、四种CSS父级边框塌陷解决方案(Four CSS Parent Border Collapse Solutions)
18.1、解决方案1：增加父级元素的高度
写法简单，但若元素已经有了固定的高度，就会被限制。
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>增加父级元素的高度</title>
<link rel="stylesheet" href="../../../css/增加父级元素的高度.css" type="text/css">
</head>
<body>
<div id="father">
<div class="div1"><img src="../../../resources/images/20210915002.bmp" alt=""></div>
<div class="div2"><img src="../../../resources/images/20210915003.png" alt=""></div>
<div class="div3"><img src="../../../resources/images/20210915004.png" alt=""></div>
<div class="div4">
浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
</div>
</div>
</body>
</html>
其CSS示例代码，如下所示。
/*
display：显示
其值为“block”时代表“显示块元素”；
其值为“inline”时代表“显示行内元素”；
其值为“inline-block”时代表“显示行内块元素”；
其值为“none”时代表“不显示元素”。
float：浮动
其值为“left”时代表“向左浮动”；
其值为“right”时代表“向右浮动”；
其值为“none”时代表“不浮动”。
*/
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px #000 solid;
height: 2000px;
}
.div1{
border: 1px #F00 dashed;
display: inline-block;
float: right;
}
.div2{
border: 1px #00F dashed;
display: inline-block;
float: right;
}
.div3{
border: 1px #0F0 dashed;
display: inline-block;
float: right;
}
.div4{
border: 1px red dashed;
font-size: 15px;
line-height: 30px;
display: inline-block;
float: right;
}
18.2、解决方案2：增加一个空的DIV标签清除浮动
写法简单，但代码中应尽量避免使用空DIV标签。
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>增加一个空的DIV标签清除浮动</title>
<link rel="stylesheet" href="../../../css/增加一个空的DIV标签清除浮动.css" type="text/css">
</head>
<body>
<div id="father">
<div class="div1"><img src="../../../resources/images/20210915002.bmp" alt=""></div>
<div class="div2"><img src="../../../resources/images/20210915003.png" alt=""></div>
<div class="div3"><img src="../../../resources/images/20210915004.png" alt=""></div>
<div class="div4">
浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
</div>
<div class="clear"></div>
</div>
</body>
</html>
其CSS示例代码，如下所示。
/*display：显示其值为“block”时代表“显示块元素”；其值为“inline”时代表“显示行内元素”；其值为“inline-block”时代表“显示行内块元素”；其值为“none”时代表“不显示元素”。float：浮动其值为“left”时代表“向左浮动”；其值为“right”时代表“向右浮动”；其值为“none”时代表“不浮动”。clear：清除浮动其值为“left”时代表“清除向左浮动”；其值为“right”时代表“清除向右浮动”；其值为“both”时代表“清除向左与向右浮动”；其值为“none”时代表“不清除浮动”。*/div{ margin: 10px; padding: 5px;}#father{ border: 1px #000 solid;}.div1{ border: 1px #F00 dashed; display: inline-block; float: right;}.div2{ border: 1px #00F dashed; display: inline-block; float: right;}.div3{ border: 1px #0F0 dashed; display: inline-block; float: right;}.div4{ border: 1px red dashed; font-size: 15px; line-height: 30px; display: inline-block; float: right;}.clear{ clear: both; margin: 0; padding: 0;}
18.3、解决方案3：使用OverFlow
写法简单，但应避免在下拉的一些场景中使用。
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用OverFlow</title>
<link rel="stylesheet" href="../../../css/使用OverFlow.css" type="text/css">
</head>
<body>
<div id="father">
<div class="div1"><img src="../../../resources/images/20210915002.bmp" alt=""></div>
<div class="div2"><img src="../../../resources/images/20210915003.png" alt=""></div>
<div class="div3"><img src="../../../resources/images/20210915004.png" alt=""></div>
<div class="div4">
浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
</div>
</div>
</body>
</html>
其CSS示例代码，如下所示。
/*
display：显示
其值为“block”时代表“显示块元素”；
其值为“inline”时代表“显示行内元素”；
其值为“inline-block”时代表“显示行内块元素”；
其值为“none”时代表“不显示元素”。
float：浮动
其值为“left”时代表“向左浮动”；
其值为“right”时代表“向右浮动”；
其值为“none”时代表“不浮动”。
overflow：控制内容溢出元素框时在对应的元素区间内添加滚动条。
其值为“visible”时代表“默认值，内容不会被修剪，会呈现在元素框之外”；
其值为“hidden”时代表“内容会被修剪，并且其余内容是不可见的”；
其值为“scroll”时代表“内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容”；
其值为“auto”时代表“如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容”。
其值为“inherit”时代表“规定应该从父元素继承overflow属性的值”。
*/
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px #000 solid;
overflow: hidden;
}
.div1{
border: 1px #F00 dashed;
display: inline-block;
float: right;
}
.div2{
border: 1px #00F dashed;
display: inline-block;
float: right;
}
.div3{
border: 1px #0F0 dashed;
display: inline-block;
float: right;
}
.div4{
border: 1px red dashed;
font-size: 15px;
line-height: 30px;
display: inline-block;
float: right;
}
18.4、解决方案4：为父级添加一个伪类(After)
写法较复杂，但无副作用，推荐使用。
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>为父级添加一个伪类</title>
<link rel="stylesheet" href="../../../css/为父级添加一个伪类.css" type="text/css">
</head>
<body>
<div id="father">
<div class="div1"><img src="../../../resources/images/20210915002.bmp" alt=""></div>
<div class="div2"><img src="../../../resources/images/20210915003.png" alt=""></div>
<div class="div3"><img src="../../../resources/images/20210915004.png" alt=""></div>
<div class="div4">
浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
</div>
</div>
</body>
</html>
其CSS示例代码，如下所示。
/*
display：显示
其值为“block”时代表“显示块元素”；
其值为“inline”时代表“显示行内元素”；
其值为“inline-block”时代表“显示行内块元素”；
其值为“none”时代表“不显示元素”。
float：浮动
其值为“left”时代表“向左浮动”；
其值为“right”时代表“向右浮动”；
其值为“none”时代表“不浮动”。
*/
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px #000 solid;
}
#father:after{
/*content: '';*/
content: "";
display: block;
clear: both;
}
.div1{
border: 1px #F00 dashed;
display: inline-block;
float: right;
}
.div2{
border: 1px #00F dashed;
display: inline-block;
float: right;
}
.div3{
border: 1px #0F0 dashed;
display: inline-block;
float: right;
}
.div4{
border: 1px red dashed;
font-size: 15px;
line-height: 30px;
display: inline-block;
float: right;
}
19、CSS相对定位(CSS Relative Position)
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS相对定位</title>
<!--
position：定位
其值为“absolute”时代表“生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。”；
其值为“fixed”时代表“生成绝对定位的元素，相对于浏览器窗口进行定位”；
其值为“relative”时代表“生成相对定位的元素，相对于其正常位置进行定位”。
其值为“static”时代表“默认值，没有定位，元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)”。
其值为“inherit”时代表“规定应该从父元素继承 position 属性的值”。
-->
<style>
#box{
width: 300px;
height: 300px;
padding: 10px;
border: 2px solid red;
}
a{
width: 100px;
height: 100px;
text-decoration: none;
background: pink;
line-height: 100px;
text-align: center;
color: white;
display: block;
}
a:hover{
background: blue;
}
.a2,.a4{
position: relative;
left: 200px;
top: -100px;
}
.a5{
position: relative;
left: 100px;
top: -300px;
}
</style>
</head>
<body>
<div id="box">
<a href="#" class="a1">链接1</a>
<a href="#" class="a2">链接2</a>
<a href="#" class="a3">链接3</a>
<a href="#" class="a4">链接4</a>
<a href="#" class="a5">链接5</a>
</div>
</body>
</html>
20、CSS绝对定位与固定定位(CSS Absolute Position And Fixed Position)
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS绝对定位与固定定位</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){/*absolute：绝对定位，相对于浏览器*/
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){/*fixed：固定定位*/
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
21、CSS层叠级别及透明度(CSS Cascade Level And Transparency)
其HTML示例代码，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS层叠级别及透明度</title>
<link rel="stylesheet" href="../../css/CSS层叠级别及透明度.css" type="text/css">
</head>
<body>
<div id="content">
<ul>
<li><img src="../../resources/images/20210916002.png" alt=""></li>
<li class="tipText">电影《长津湖》</li>
<li class="tipBG"></li>
<li class="tipDT">时间：2021-10-01</li>
<li class="tipAddr">地点：天下第一电影院</li>
</ul>
</div>
</body>
</html>
其CSS示例代码，如下所示。
#content{
width: 316px;
height: 400px;
margin: 0px;
padding: 0px;
overflow: hidden;
font-size: 15px;
line-height: 25px;
border: 1px solid black;
}
ul,li{
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
#content ul{
position: relative;
}
.tipText,.tipBG{
position: absolute;
width: 316px;
height: 25px;
top: 322px;
}
.tipText{
color: red;
/*z-index: 0;!*层叠级别或图层，一般数值越大代表显示优先级越高(如999)*!*/
}
.tipBG{
background: black;
opacity: 0.5;/*透明度*/
/*filter: alpha(opacity=50);*/
}
.tipDT,.tipAddr{
position: relative;
top: 25px;
}
22、CSS动画及视野扩展(CSS Animation And Visual Field Expansion)
参考资料网址：菜鸟教程、canvas动画、卡巴斯基-全球实时网络攻击互动地图。
23、CSS美化网页元素的目的(CSS Beautify Web Page Elements Purpose)
- 24.1、有效的传递页面信息。
- 24.2、美化页面，使页面更漂亮，才能更吸引用户。
- 24.3、凸显页面的主题。
- 24.4、提高用户的体验。
2717
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
