这是一篇详尽的CSS和CSS3教程，涵盖了从基础概念如CSS简介、语法规范和引入样式表，到高级特性如选择器、定位、浮动、盒子模型、浮动清除、字体与文本属性、背景处理、过渡和动画，以及CSS3的2D和3D转换。文章深入探讨了CSS的三大特性——层叠性、继承性和优先级，并详细讲解了响应式布局、流式布局、移动WEB开发和REM适配方案。此外，还介绍了Less预处理器的使用和Bootstrap框架的栅格系统。
CCS+CSS3
- 1、CSS简介
- 2、CSS选择器
- 3、CSS字体属性
- 4、CSS文本属性
- 5、CSS元素显示模式
- 6、CSS背景
- 7、CSS三大特性
- 8、CSS盒子模型
- 9、浮动
- 10、常见网页布局
- 11、定位
- 12、元素的显示与隐藏
- 13、CSS高级技巧
- 14、Web 服务器
- 15、CSS3 2D 转换
- 16、CSS3 动画
- 17、CSS3 3D 转换
- 18、移动WEB开发之流式布局
1、CSS简介
- CSS的主要使用场景就是没话网页，布局网页的。
1.1 HTML的局限性
1.2 CSS–网页的美容师
总结
1.3 CSS语法规范
1.4 CSS代码风格
1.5 引入CSS样式表
- CSS样式的书写位置
1.5.1 行内式（内联样式）
<!-- 行内样式 -->
<h1 style="color:gray; font-size: 18px;">我在这里等你</h1>
1.5.2 内部样式表（内嵌样式表）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<!-- 内部样式 -->
<style type="text/css">
h1{
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<h1>我在这里等你</h1>
</body>
</html>
1.5.3 外部样式表（外链式）
h1{
color: pink;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<!-- 外部样式 真正实现结构与样式完全分离 实现CSS文件共享-->
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<h1>我在这里等你</h1>
</body>
</html>
1.5.4 总结
2、CSS选择器
2.1 CSS选择器的作用
2.2 CSS选择器的分类
2.2.1 基础选择器
2.2.1.1 标签选择器
2.2.1.2 类选择器
2.2.1.2 类选择器-----多类名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
/* 标签选择器:写上标签名 */
p {
color: green;
}
div {
color: pink;
}
/* 类选择器:样式点定义 结构类（class）调用 开发最常用 */
.red {
color: red;
}
.font35 {
font-size: 35px;
}
.big-boy {
color: blue;
}
</style>
</head>
<body>
<p class="red">男生</p>
<p class="big-boy">男生</p>
<p class="red font35">男生</p>
<p>男生</p>
</body>
</html>
2.2.1.3 id选择器
2.2.1.4 通配符选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
/* 通配符 */
* {
color: red;
}
/* id选择器 */
#pink {
color: pink;
}
</style>
</head>
<body>
<div id="pink">java语言</div>
<div>我的</div>
<span>我的</span>
<ul>
<li>我的</li>
</ul>
</body>
</html>
2.2.1.5 总结
2.2.2 复合选择器
2.2.2.1 后代选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
/* 后代选择器 */
ol li {
color: pink;
}
ol li a {
color: red;
}
.nav li a {
color: yellow;
}
</style>
</head>
<body>
<ol>
<li>我是ol</li>
<li>我是ol</li>
<li>我是ol</li>
<li><a href="#">我是超链接1</a></li>
</ol>
<ul>
<li>我是ul</li>
<li>我是ul</li>
<li>我是ul</li>
<li><a href="#">我是超链接2</a></li>
</ul>
<ul class="nav">
<li>我是ul</li>
<li>我是ul</li>
<li>我是ul</li>
<li><a href="#">我是超链接3</a></li>
</ul>
</body>
</html>
2.2.2.2 子选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
/* 子代选择器 */
.nav>a {
color: red;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">AAAA</a>
<p>
<a href="#">BBBB</a>
</p>
</div>
</body>
</html>
2.2.2.3 并集选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
/* 并集选择器 */
/* div,p {
color: red;
} */
div, p, .pig li {
color: pink;
}
</style>
</head>
<body>
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
<li>小猪佩琪</li>
<li>AAAAA</li>
<li>BBBBB</li>
</ul>
</body>
</html>
2.2.2.4 伪类选择器
2.2.2.4.1 链接伪类
2.2.2.4.2 :focus 伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
a {
color: #333;
text-decoration: none;
}
/* 链接伪类 */
/* a:link 未访问的链接 */
a:link {
color: #333;
}
/* a:visited 已访问过的链接 */
a:visited {
color: orange;
}
/* a:hover 经过的链接 */
a:hover {
color: red;
text-decoration: underline;
}
/* a:active 按下链接 */
a:active {
color: green;
}
/* :focus伪类选择器 */
input:focus {
background-color: pink;
}
</style>
</head>
<body>
<a href="#">小猪佩奇</a> <br>
<input type="text">
<input type="text">
<input type="text">
</body>
</html>
2.2.2.5 总结
2.2.3 CSS3新增选择器
2.2.3.1 属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
/* E[att] */
input[value] {
color: pink;
}
/* E[att="val"] */
input[type=password] {
background-color: red;
}
/* E[att^="val"] */
div[class^=icon] {
color: aqua;
}
/* E[att$="val"] */
section[class$="data"] {
color: blue;
}
</style>
</head>
<body>
<input type="text" value="请输入用户名">
<input type="text" >
<input type="password" >
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<section class="icon1-data">我是安其拉</section>
<section class="icon2-data">我是哥斯拉</section>
<section class="icon3-ico">哪我是谁</section>
</body>
</html>
2.2.3.2 结构伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
/* E:first-child */
ul :first-child {
background-color: pink;
}
/* E:last-child */
ul li:last-child {
background-color: blue;
}
/* E:nth-child(n) */
ul li:nth-child(2) {
background-color: antiquewhite;
}
/* n为关键字 所有偶数行变色 even等价于2n*/
ul li:nth-child(even) {
background-color: aqua;
}
/* n为关键字 所有奇数行变色 odd等价于2n+1*/
ul li:nth-child(odd) {
color:red;
}
/* n为公式 nth:child(n) 从0开始 每次加1 往后面计算 这里面必须是n 不能是其他的字母 */
ol li:nth-child(n) {
background-color: pink;
}
/* n+5 :从第5个开始(包括第5个)到最后 */
ol li:nth-child(n+5) {
color: yellow;
}
</style>
</head>
<body>
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ul>
<ol>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ol>
</body>
</html>
- nth-child和nth-of-type的区别
- nth-child和nth-of-type的小结
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
/* nth-child 会把所有的盒子都排列序号 */
section div:nth-child(1){
background-color: green;
}
/* nth-of-type 会把指定类型的盒子排列序号 */
section div:nth-of-type(1){
background-color: red;
}
</style>
</head>
<body>
<section>
<p>光头强</p>
<div>熊1</div>
<div>熊2</div>
</section>
</body>
</html>
2.2.3.3 伪元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
div::before {
display: inline-block;
/* content必须写 */
content: '我和';
width: 30px;
height: 40px;
background-color: purple;
}
div::after {
content: "【表情】";
}
</style>
</head>
<body>
<div>你好</div>
</body>
</html>
2.2.3.3 伪元素选择器----清除浮动
2.2.3.3.1 清除浮动的方法①-----直接设置父元素高度
2.2.3.3.2 清除浮动的方法②-----额外标签法
2.2.3.3.3 清除浮动的方法③-----单伪元素清除法
2.2.3.3.4 清除浮动的方法④-----双伪元素清除法
2.2.3.3.5 清除浮动的方法⑤-----overflow
2.2.3.3.6 清除浮动-----BFC
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
.father {
/* 设置overflow: hidden后,father盒子就成了BFC */
overflow: hidden;
width: 300px;
height: 300px;
background-color: pink;
}
.son {
width: 100px;
height: 100px;
background-color: purple;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
2.2.3.4 兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript</title>
<style>
/* 相邻兄弟选择器 */
#p_1+p {
color: #FFC0CB;
}
/* 兄弟选择器 所有兄弟都会被选中 */
#p_1~p {
color: aqua;
}
</style>
</head>
<body>
<p id="p_1">11</p>
<p>22</p>
<p>33</p>
</body>
</html>
2.2.3.5 过渡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
/* transition: height 2s ease 1s; */
/* all 所有属性 */
transition: all 2s;
}
.box:hover {
height: 300px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
3、CSS字体属性
- CSS Fonts（字体）属性用于定义字体系列、大小、粗细、和文字样式（如斜体）
3.1 字体系列----font-family
- 如果有多个字体系列，先从第一个开始读取，如果有，则显示该字体系列，没有，依次往下读取，有则显示该字体
3.2 字体大小----font-size
3.3 字体粗细----font-weight
3.4 字体样式----font-style
3.5 字体复合属性
3.6 字体属性总结
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
body {
font-size: 16px;
}
/* 标题标签比较特殊,需要单独指定文字大小 */
h2 {
font-size: 18px;
font-weight: 400;
}
div {
font-family: "微软雅黑";
}
/* 多个字体系列,依次读取,有则显示该字体 */
span {
font-family: Arial, "microsoft yahei","微软雅黑";
}
.bold {
/* 后面不需要加单位 变粗：bold或700 正常：normal或400*/
font-weight: 700;
}
em {
/* 文字样式 */
font-style: normal;
}
.div {
/* font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: 'Microsoft YAHEI'; */
/* 复合属性:简写的方式 */
/* font: font-style font-weight font-size/line-height font-family */
font: italic 700 16px 'Microsoft yahei';
}
</style>
</head>
<body>
<h2>pink的秘密</h2>
<div>我的</div>
<em>我的</em>
<span>我的</span>
<ul>
<li class="bold">我的</li>
</ul>
<div class="div">三生三世十里桃花，一心一意百行代码</div>
</body>
</html>
4、CSS文本属性
- CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等
4.1 文本颜色----color
4.2 对齐文本----text-align
4.3 装饰文本----text-decoration
4.4 文本缩进----text-indent
4.5 行间距----line-height
4.5.1 单行文字垂直居中
- 文字的行高等于盒子的高度
4.5.2 单行文字垂直居中的原理
4.6 文本属性总结
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
h1 {
/* 本质是让h1盒子里面的文字水平居中对齐 */
text-align: center;
}
div {
/* 下划线 */
text-decoration: underline;
/* 删除线 */
text-decoration: line-through;
/* 上划线 */
text-decoration: overline;
}
a {
/* 取消a默认的下划线 */
text-decoration: none;
color: black;
}
p {
/* text-indent: 20px; */
/* 没有指定文字大小,默认大小为16px 1em=16px */
text-indent: 2em;
line-height: 25px;
}
#cn {
/* 没有给定文字大小,默认大小为16px */
line-height: 26px;
text-decoration: none;
}
</style>
</head>
<body>
<h1>居中对齐的标题</h1>
<div>粉红色的回忆</div>
<a href="#">粉红色的回忆</a>
<p>加客服解答卡缴费金额结</p>
<p>加客服解答卡缴费金额结</p>
<p>加客服解答卡缴费金额结</p>
<div id="cn">中国人</div>
</body>
</html>
5、CSS元素显示模式
5.1 块元素
5.2 行内元素
5.3 行内块元素
5.4 元素显示模式总结
5.5 元素显示模式转换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
a {
/* 行内元素转换为块元素 */
display: block;
width: 230px;
height: 40px;
background-color: #535759;
font-size: 14px;
/* 去掉下划线 */
text-decoration: none;
text-indent: 2em;
/* 文字的行高等于盒子高度,实现文字居中显示 */
line-height: 40px;
}
a:hover {
background-color: #ff6f00;
}
</style>
</head>
<body>
<a href="#">AA11</a>
<a href="#">AA12</a>
<a href="#">AA13</a>
<a href="#">AA14</a>
<a href="#">AA15</a>
<a href="#">AA16</a>
<a href="#">AA17</a>
<a href="#">AA18</a>
</body>
</html>
6、CSS背景
6.1 背景颜色
6.2 背景图片
6.3 背景平铺
注意：背景图片会压在背景颜色上面
6.4 背景图片位置
6.4.1 参数是方位名词
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
div {
width: 300px;
height: 300px;
/* 背景图片 */
background-image: url(./images/logo.png);
/* 背景平铺 */
background-repeat: no-repeat;
/* 背景颜色 */
background-color: pink;
/* 方位名词：right center 和 center right 效果是一样的 */
/* background-position: center top; */
/* 水平一定是靠右对齐 第二个参数省略 y轴是垂直居中显示的 */
background-position: right;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6.4.2 参数是精确单位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
background-image: url(./images/logo.png);
background-repeat: no-repeat;
/* x:20px y:50px */
/* background-position: 20px 50px; */
/* x:20px y:默认为居中 */
background-position: 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6.4.3 参数是混合单位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
background-image: url(./images/logo.png);
background-repeat: no-repeat;
/* x:20px y:50px */
/* background-position: 20px 50px; */
/* x:20px y:默认为居中 等价于 x:20px y:center*/
/* background-position: 20px; */
/* x:center y:20px */
background-position: center 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6.5 背景图像固定（背景附着）
6.6 背景属性复合写法
body {
/* background-image: url(./images/王者荣耀.jpg);
background-repeat: no-repeat;
background-position: center top; */
/* 背景图像固定 */
/* background-attachment: fixed; */
/* 背景属性复合写法 */
background: #000 url(./images/王者荣耀.jpg) no-repeat fixed center top;
color: #fff;
font-size: 20px;
}
6.7 背景色半透明
- opacity: 调整透明度的属性（0~1）
6.8 背景总结
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
.nav a {
display: inline-block;
width: 120px;
height: 58px;
background-color: pink;
/* 文字水平居中 */
text-align: center;
/* 文字垂直居中 */
line-height: 48px;
color: #fff;
text-decoration: none;
}
.nav .bg1 {
background: url(./images/1.jpeg) no-repeat;
}
/*鼠标经过谁谁变色，注意标签的选择范围*/
/* 鼠标经过bg1时替换背景图片就行，所以用属性background-image实现即可 */
.nav .bg1:hover {
background-image: url(./images/11.jpeg);
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="bg1">五彩导航</a>
</div>
</body>
6.9 图片模糊处理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
img {
/* blur是一个函数 小括号里面的数值越大 图片越模糊 注意数值要加px但闻 */
filter: blur(15px);
}
/* 鼠标经过 图片不模糊 */
img:hover {
filter: blur(0);
}
</style>
</head>
<body>
<img src="./images/1.jpeg" alt="">
</body>
</html>
7、CSS三大特性
7.1 层叠性
7.2 继承性
- 行高的继承性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
body {
color: pink;
/* font: 12px/24px "Microsoft yahei"; */
font: 12px/1.5 "Microsoft Yahei";
}
div {
/* 子元素继承父元素body的行高1.5 */
/* 这个1.5就是当前元素文字大小font-size的1.5倍，所以当前div的行高为14*1.5 = 21px*/
font-size: 14px;
}
p {
/* p元素的行高为 16*1.5 = 24px */
font-size: 16px;
}
/* li没有指定文字大小，就会继承父类的行高：12*1.5 = 18px */
li {
color: red;
}
</style>
</head>
<body>
<div>粉红的回忆</div>
<p>你好啊</p>
<ul>
<li>哈哈</li>
</ul>
</body>
</html>
7.3 优先级
- 优先级注意点
- CSS权重的叠加
1）复合选择器的元素标签会叠加
2）权重叠加不会存在进位的问题
8、CSS盒子模型
8.1 网页布局的本质
8.2 盒子模型（Box Model）组成
8.2.1 边框（border）
- border-style常用的属性值：solid(实线)、dashed(虚线)、 dotted(点线)
8.2.1.1 边框----符合写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
div {
width: 200px;
height: 200px;
/* border-top: 1px solid red;
border-bottom: 1px solid blue;
border-left: 1px solid blue;
border-right: 1px solid blue; */
border: 1px solid blue;
/* 层叠性 */
border-top: 1px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
8.2.1.2 细线边框（border-collapse）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
/* 结构与样式相分离 */
table {
width: 500px;
height: 249px;
}
th {
height: 35px;
}
table,
td,
th {
border: 1px solid pink;
/* 合并相邻的边框 */
border-collapse: collapse;
font-size: 14px;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>AA</td>
<td>上升</td>
</tr>
<tr>
<td>2</td>
<td>BB</td>
<td>稳定</td>
</tr>
<tr>
<td>3</td>
<td>CC</td>
<td>下降</td>
</tr>
</tbody>
</table>
</body>
</html>
8.2.1.3 边框会影响盒子大小
8.2.2 内边距（padding）
8.2.2.1 内边距复合写法
8.2.2.2 内边距会影响盒子大小
8.2.2.3 内边距不会影响盒子大小（特殊情况）
- 盒子本身没有指定width/height属性，此时padding不会撑开盒子大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
h1 {
/* 一旦给定了宽、高，都会影响盒子的大小 */
/* width: 100%; */
height: 200px;
background-color: pink;
/* 没有指定宽度，不会影响盒子的宽度，但会影响高度，在高度上会各增加30px */
padding: 30px;
}
div {
width: 300px;
height: 100px;
background-color: purple;
}
div p {
/* 只要子盒子没有给定高度和宽度，即使父盒子有宽度和高度，也不会影响子盒子的大小 */
padding: 30px;
background-color: skyblue;
}
</style>
</head>
<body>
<h1></h1>
<div>
<p></p>
</div>
</body>
</html>
8.2.3 外边距（margin）
8.2.3.1 块级盒子水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
.header {
width: 900px;
height: 200px;
background-color: pink;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<!-- span是行内元素，不会随父盒子居中对齐，需要给父盒子设置text-align:center,才能实现水平居中对齐 -->
<span>文字</span>
</div>
<div>
<!-- img是行内块元素,给父盒子设置text-align:center,也能实现水平居中 -->
<img src="images/1.jpeg" alt="">
</div>
</body>
</html>
8.2.3.2 相邻块元素垂直外边距的合并
8.2.3.3 嵌套块元素垂直外边距的塌陷
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS--网页的美容师</title>
<style>
.father {
width: 400px;
height: 400px;
background-color: purple;
margin-top: 50px;
/* 1、给父盒子添加边框，解决父子盒子塌陷问题 */
/* border: 1px solid transparent; */
/* 2、给父盒子添加内边距，解决父子盒子塌陷问题 */
/* padding: 1px; */
/* 3、给父盒子添加overflow: hidden，解决父子盒子塌陷问题 */
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background-color: pi
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
