CSS知识总结
1、什么是CSS
1.1、如何学习：
- css是什么
- css怎么用（快速入门）
- css选择器（重点+难点）
- 美化网页
- 盒子模型
- 浮动
- 定位
- 网页动画
1.2、发展史
CSS1.0
CSS2.0 DIV（块） + CSS，HTML与CSS结构分离的思想，网页边得简单
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画.... 浏览器兼容性问题
1.3、基本用法
四种不同的设置基础样式的使用：
h3{
color: red;
}
h4{
color: pink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第二个css页面</title>
<style>
/*第二种设置方式*/
h2 {
color: yellow;
}
</style>
<!--第三种设置方式-->
<link rel="stylesheet" href="./cssstyle/1css.css">
<style>
/*第四种设置方式*/
@import "./cssstyle/1css.css";
</style>
</head>
<body>
<!--第一种设置方式：行内设置-->
<h1 style="color: blue">第一种设置样式的方法</h1>
<h2>第二种设置样式的方法</h2>
<h3>第三种设置样式的方法</h3>
<h4>第四种设置样式的方法</h4>
</body>
</html>
2、选择器
作用：选择页面上的某一个或者一类元素
2.1、基本选择器
- 标签选择器：选择一类标签 标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.标签选择器</title>
</head>
<style>
h1{
color: red;
}
</style>
<body>
<h1>标签选择器</h1>
</body>
</html>
- 类选择器 class：选择所有class属性一致的标签，跨标签 .类名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.类选择器</title>
</head>
<style>
.pan{
color: yellow;
}
</style>
<body>
<h1 class="pan">类选择器</h1>
<h1 class="pan">类选择器</h1>
</body>
</html>
- id选择器：全局唯一！ #id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.id选择器</title>
</head>
<style>
#pan{
color: blue;
}
</style>
<body>
<h1 id="pan">这是一个id选择器</h1>
</body>
</html>
出现的优先级：id选择器 > 类选择器 > 标签选择器
2.2、层次选择器
1、后代选择器 ：body的后代元素都会变化
<style>
body p {
background: red;
}
</style>
2、子选择器：body的儿子的那一代都会变化
body > p{
background: yellow;
}
3、相邻兄弟选择器：与被class="active" 标记的标签属于同一个等级的情况下，又被p标签的，那么接下来的顺序上的跟着的下一行代码是p标签，那么就会被标记
.active + p{
background: blue;
}
4、通用选择器：与被class="active" 标记的标签属于同一个等级的情况下，又被p标签的，那么所有的p都会被标记
.active ~ p{
background: blue;
}
2.3、(结构)伪类选择器
伪类：选择
<style>
/*p4变色，ul的后面的li的第一个孩子*/
ul li:first-child{
background: blue;
}
/*p6变色，ul的后面的li的最后一个孩子*/
ul li:last-child{
background: yellow;
}
/*p标签的父类的下的第一个孩子，如果是p那就变色，如果不是就不变*/
p:nth-child(1){
background: red;
}
/*p标签的父类下的第一个p标签孩子*/
p:nth-of-type(1){
background: red;
}
a:hover{
background: #000;
}
</style>
<!-- 正文-->
<a href="">666</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>p4</li>
<li>p5</li>
<li>p6</li>
</ul>
2.4、属性选择器
- 基本格式：
a[]{
//效果
}
- 测试代码：
<style>
body a {
background: green;
display: block;
height: 50px;
width: 50px;
margin: 10px;
/*margin-right:10px ;*/
text-decoration: yellow;
float: left;
border-radius: 10px;
text-align: center;
font: bold 20px/50px Arial;
}
a[id *= "pan"] {
background: black;
}
a[id = "pan zhong qiu"] {
background: white;
}
a[class^="yi"] {
background: aqua;
}
a[href$="pdf"] {
background: gray;
}
</style>
<body>
<p>
<a href="https://www.baidu.com" id="pan zhong qiu" class="ren yi jie">1</a>
<a href="http://" id="pan zhong " class="ren yi jie">2</a>
<a href="../1.html" class="ren yi jie">3</a>
<a href="../1.pdf">4</a>
<a href="../1.jpg" class="yi jie ">5</a>
<a href="1bc.pdf" class="ren yi jie">6</a>
</p>
</body>
效果图：
-
补充的正则式和属性选择器的结合：
- =：全等于
- *=：包含于
- ^=：以等号后的为开头的
- $=：以等号后的为结尾的
3、美化网页
3.1、为什么要美化网页
1、有效的传递页面信息
2、美化网页，页面漂亮，才能吸引用户
3、凸显页面的主题
3、提高用户的体验
span标签：重点要突出的字，使用span标签标注出来（约定俗成）
3.2、字体样式
- font-family：字体样式（英文和中文可以分开）
- font-size：字体大小
- font-weight：字体粗细
- color：字体颜色
补充：
- font:oblique lighter 16px "楷体" 字体风格（四个属性：斜体 字体粗细 字体大小 字体样式）
- font:bold 20px/50px Arial （字体的粗细，大小，行高，样式）
3.3、文本样式
- 颜色
- 文本的对齐方式
- 首行缩进
- 行高
- 装饰
基本用法如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07文本样式</title>
<style>
.p1 {
/*用十六进制的方式进行颜色分配*/
/*color: rgb(0,0,255);*/
/*rgba，该函数的最后一个数字表示透明度（数字位于0~1）*/
color: rgba(0, 255, 0, 1);
}
.p2 {
/*文本的位置*/
text-align: center;
}
.p3 {
/*文本的首行缩进*/
text-indent: 2em;
}
.p4 {
/*当行高和高度相同的时候，文本自动居中对齐*/
height: 160px;
line-height: 160px;
}
.p5 {
/*下划线*/
text-decoration: underline;
}
.p6 {
/*中划线*/
text-decoration: line-through;
}
.p7 {
/*上划线*/
text-decoration: overline;
}
img ,apan{
/*使用时需要有参考线*/
vertical-align: middle;
}
</style>
</head>
<body>
<p class="p1">
第一段
</p>
<p class="p2">
第二段
</p>
<p class="p3">
第三段
</p>
<p class="p4">
第四段
</p>
<p class="p5">
第五段
</p>
<p class="p6">
第六段
</p>
<p class="p7">
第七段
</p>
<p class="p8">
<img src="../images/1.jpg" alt="" width="400px" height="200px">
<span>这是一幅风景画</span>
</p>
</body>
</html>
效果图：
3.4、阴影
3.5、超链接伪类
3.4与3.5的综合应用代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09超链接伪类与阴影</title>
<style>
body {
/*所有的内容居中显示*/
text-align: center;
}
a {
/*去掉下划线，设置默认字体颜色*/
text-decoration: none;
color: black;
}
/*伪类使用：效果是鼠标经过的时候变色*/
a:hover {
color: yellow;
font-size: 50px;
}
/*伪类使用：效果是鼠标点击的时候变色*/
a:active {
color: white;
}
.mu {
text-shadow: red 5px 5px 2px;
}
</style>
</head>
<body>
<a href="">
<img src="../images/1.jpg" height="400" width="700" alt="" class="pic">
</a>
<p>
<a href="#">重庆三峡学院</a>
</p>
<p>
<a href="#">计算机科学与工程学院</a>
</p>
<p class="mu">3600亩</p>
</body>
</html>
效果图：
3.6、显示商品信息的综合练习
1、html页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" href="./css/style.css">
<body>
<div>
<h2 class="title1"> 全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像 </a></li>
<li><a href="#">加用电器</a> <a href="#">手机 </a></li>
<li><a href="#">电脑</a> <a href="#">办公 </a></li>
<li><a href="#">家居</a> <a href="#">家装 </a></li>
<li><a href="#">服饰鞋帽</a> <a href="#">个护化妆 </a></li>
<li><a href="#">礼品箱包</a> <a href="#">钟表 </a></li>
<li><a href="#">食品饮料</a> <a href="#">保健食品 </a></li>
<li><a href="#">彩票</a> <a href="#">旅游 </a></li>
</ul>
</div>
</body>
</html>
2、css样式
body {
text-indent: 2em;
}
body > div {
width: 300px;
background: gray;
}
.title1 {
line-height: 60px;
height: 60px;
background: red;
font-weight: bolder;
}
ul {
background: gray;
}
ul li {
text-indent: 1em;
/*改变序号的显示方式*/
/*list-style: circle;*/
list-style: none;
height: 30px;
}
a:hover {
background: orange;
}
a {
text-decoration: none;
}
3、测试结果
3.7、背景图片
1、设置图片的不同的展开方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10背景</title>
<style>
div{
width: 800px;
height: 500px;
/*设置背景图片*/
background-image: url("../images/5.png");
}
.div1{
/*设置图片的展开方式为仅一个（默认的展开情况是平铺）*/
background-repeat: no-repeat;
}
.div2{
/*设置图片的展开方式为横向*/
background-repeat: repeat-x;
}
.div3{
/*设置图片的展开方式为纵向*/
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
2、设置图片的样式：两种方法效果一样
background: red;
background-image: url("../images/7.png");
background-repeat: no-repeat;
background-position: 260px 21px;
background: gray url("../images/6.png") 217px 0px no-repeat;
3.8、渐变色
代码示例：
body{
background-color: #21D4FD;
background-image: linear-gradient(19deg,#21D4FD 0%, #B721FF 100%);
}
效果图：
4、盒子模型
4.1、什么是盒子？
margin：外边距
border：边框
padding：内边距
4.2、边框
1、边框的粗细
2、边框的样式
3、边框的颜色
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<style>
#box {
background-color: red;
border: 1px solid black;
margin: 0px;
width: 300px;
}
#form1 {
background-color: yellow;
}
div:nth-of-type(1) input {
border: 1px solid black;
margin: 13px;
padding: 5px;
}
div:nth-of-type(2) input {
border: 11px dashed purple;
margin: 13px;
padding: 5px;
}
</style>
</head>
<body>
<div id=box>
<span>会员登录</span>
<form action="#" id="form1">
<div><span>姓名：</span><input type="text"></div>
<div><span>密码：</span><input type="text"></div>
<div><span>邮箱：</span><input type="text"></div>
</form>
</div>
</body>
</html>
效果图示：
重点：
/*设置边框的各个属性：边框大小、边框样式、边框颜色（前者是实线，后者是虚线）*/
border: 1px solid black;
border: 11px dashed purple;
4.3、内外边距
1、ma'rgin的妙用：可以让整个盒子自动的居中对齐
margin: 1px auto;
2、margin的对齐方式
/*顺时针的旋转对齐*/
margin: 0px;
margin: 0 1px;
margin: 0 1px 2px 3px;
3、计算盒子的大小：
盒子大小=margin+border+padding+实际内容的大小
4.4、圆角边框
一个简单的圆形（利用这个特点可以用来绘制半圆、扇形）
<style>
div{
width:100px;
height:100px;
border:10px solid red;
border-radius:100px;
}
</style>
边框的四个参数位置分别是：左上、右上、右下、左下
4.5、阴影
向下和右偏移10px，并且模糊100px，模糊的颜色是黄色
<style>
div{
width:100px;
height:100px;
border:10px solid red;
border-shadow:10px 10px 100px yellow;
}
</style>
5、浮动
5.1、标准文档流
块级元素：独占一行
h1~h6 p div 列表 ...
行内元素：不独占一行
span a img strong ...
行内元素可以包含在块级元素之内，反之，则不 行
5.2、display
1、左右浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>13display</title>
<style>
div {
border: black solid 1px;
width: 100px;
height: 100px;
}
span {
border: 1px solid yellow;
width: 100px;
height: 100px;
/*将行级元素变成块级元素
行级元素与块级元素的不同：行级元素是一行，不会因为设置了高度和宽度就会改变他的大小
*/
display: block;
/*将原本的这个块，变成既是块元素又是行内元素
display: inline-block;*/
}
</style>
</head>
<body>
<div>块内元素</div>
<span>行级元素</span>
</body>
</html>
添加之前：
添加之后：
补充：
5.3、float
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>13display</title>
<style>
.title1 {
border: blue solid 1px;
width: 100px;
height: 100px;
}
#pic1 {
border: black solid 1px;
width: 300px;
height: 250px;
display: block;
float: right;
}
.pic2 {
width: 200px;
height: 150px;
display: block;
float: right;
}
</style>
</head>
<body>
<div class="title1">块内元素</div>
<span>行级元素</span>
<div>
<img src="../images/1.jpg" alt="" id="pic1">
<img src="../images/2.jpg" alt="" class="pic2">
<img src="../images/3.jpg" alt="" class="pic2">
</div>
</body>
</html>
执行结果：
总结：目前使用浮动后的图片会随着界面的大小而进行相对应的改动，可以这样假设理解：图片是漂浮在页面之上的，他会对着你的界面，进行一个漂流浮动。
5.4、父级边框塌陷
clear
/*
clear:right;右侧不允许有浮动
clear:left;左侧不允许有浮动
clear:both;两侧不允许有浮动
clear:none;
*/
四大解决方案：
1、增加父级元素的高度：给父级边框设置一个高度，让浮动的图片在边框里面，这样图片就不会在外面去了
.father {
border: 1px #000 solid;
height: 8000px;
}
2、增加一个空的div标签，清除浮动
#over {
margin: 0;
padding: 0;
clear: both;
}
3、overflow：
/*当文本的内容超过显示的范围的时候，就会出现一个滑动条来显示剩余的内容*/
.father{
width:200px;
height: 150px;
overflow: scroll;
}
/*此方式：内容的覆盖会自动地被撑开*/
.father{
border: 1px #000 solid;
overflow: hidden;
}
4、父类添加一个伪类：用编程地方式，实现与方法一同样地效果（使用偏多）
.father{
content: '';
display: block;
clear: both;
}
小结：
-
浮动元素后面增加空div
简单，代码中尽量避免空地div
-
设置父元素的高度
简单，元素假设有了固定的高度，就会被限制高度
-
overflow
简单，下拉的一些场景避免使用
-
父类添加一个伪类：after（推荐）
写法稍微复杂一点，但是没有副作用，推荐使用
5.5、对比
-
display
方向不可控制
-
float
浮动起来会脱离标准文档流，所以需要解决父级边框塌陷的问题
6、定位
6.1、相对定位
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15相对定位</title>
<style>
#father {
border: 1px solid black;
font-size: 20px;
padding: 10px;
}
#first {
background-color: red;
border: 1px solid red;
/*相对定位，上下左右，数值表示距离上下左右的意思*/
position: relative;
top:-20px;
}
#second {
background-color: pink;
border: 1px solid red;
position: relative;
right: -20px;
}
#third {
background-color: yellow;
border: 1px solid red;
position: relative;
bottom: -20px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
效果图示：
总结：相对定位：position: relative
相对于原来的位置，进行指定的便宜，相对定位的话，它仍然在标准的文档中，原来的位置会被保留
6.2、绝对定位
定位：基于XXX定位，上下左右（absolute）用法于相对定位相同
- 没有父级元素定位前提下，相对于浏览器定位
- 假设父级元素存在定位，我们通常会相对于父级元素进行偏移（在父级元素中定义出绝对定位的那一句话，具体的位置多少，由具体的子元素去显示）
- 在父级元素范围内移动
总结：相对于父级或浏览器的位置，进行指定的便宜，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
6.3、固定定位fixed
测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>17绝对定位与固定定位</title>
<style>
body{
border: 1px solid black;
height: 1000px;
margin: 0;
}
div:nth-of-type(1){
position: absolute;
height: 100px;
width: 100px;
background: yellow;
right: 0;
}
div:nth-of-type(2){
position: fixed;
height: 50px;
width: 50px;
background: pink;
right: 0;
}
</style>
</head>
<body>
<div>第一块</div>
<div>第二块</div>
</body>
</html>
效果图示：
第一块会动，第二块不会动。
6.4、z-index
z-index：默认是0，最高无限~999（需要使用定位，即浮起来以后才有层级，不然就是一个平铺的概念）
代码图示：
效果图示：
补充：opactity：0.5/* 背景透明度*/
