11.2 CSS CSS的作用就是给HTML页面标签添加各种样式， 定义网页的显示效果 。简单一句话：CSS将网页 内容和显示样式进行分离 ，提高了显示功能。 CSS 优点： 使数据和显示分开 降低网络
11.2 CSS
CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
CSS 优点：
-
使数据和显示分开
-
降低网络流量
-
使整个网站视觉效果一致
-
使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）
11.2.1 导入方式
<!--css基本设置-->
?
11.2.2 选择器
基本选择器
1.标签选择器
标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color: red;
}
span{
color: blue;
}
a{
color: green;
}
</style>
</head>
<body>
<div>
标签选择器:div1的颜色 /* red */
<span>标签选择器:div中的span的颜色</span> /* blue */
</div>
<span>标签选择器:单独span的颜色</span> /* blue */
<div>
标签选择器:div2的颜色 /* red */
<a href="http://www.baidu,com">标签选择器:链接的颜色</a> /* green */
</div>
</body>
</html>
?
?
/* 1.子元素会继承父元素的的样式,但是a标签除外
2.要想对a标签进行设置,必须直接找到a标签的位置,对a单独设置
3.样式之间的重叠部分是有优先级的,继承下来的优先级为0(最低)*/
2.id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
color: purple;
}
</style>
</head>
<body>
<div id="div1">
id选择器:有id的div1的颜色 /* purple */
<span>id选择器:div中的span颜色</span> /* purple */
</div>
<div>
id选择器:div2的颜色
</div>
</body>
</html>
3.类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cl{
color: orangered;
}
</style>
</head>
<body>
<div>
类选择器:div1的颜色
<span class="cl">类选择器:div1中的span颜色</span> /* orangered */
</div>
<div>
类选择器:div2的颜色
<span class="cl">类选择器:div2中的span颜色</span> /* orangered */
</div>
</body>
</html>
4.通用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
color: yellow;
}
</style>
</head>
<body>
<div>
通用选择器:div1颜色 /* yellow */
<span>通用选择器:span颜色</span> /* yellow */
</div>
<div>
通用选择器:div2颜色 /* yellow */
</div>
</body>
</html>
高级选择器
1. 后代\子代选择器
后代选择器:找的是子子孙孙,全部都找出来.
子代选择器:只找后面一代
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代*/
div span{
color: tomato;
}
/*子代*/
div>span{
color: tomato;
}
</style>
</head>
<body>
<div>
我是div标签的content
<span>后代1:西红柿色</span> /*后代变色*/ , /*子代只有这个变色*/
<p>
在div-p标签中
<span>后代2:西红柿色</span> /*后代变色*/
</p>
</div>
<span>我只是一个单纯的span标签</span>
</body>
</html>
2. 毗邻\弟弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*毗邻*/
span+a{
color: tomato;
}
/*弟弟*/
span~a{
color: tomato;
}
</style>
</head>
<body>
<div>
<a>我是a0标签</a>
<span>span标签</span>
/* 如果这里还有一个非a标签,毗邻.下面不变色 */
<a>我是a1标签</a> /*弟弟:变色*/ , /*毗邻:变色*/
<a>我是a2标签</a> /*弟弟:变色*/
</div>
</body>
</html>
3. 属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a[href]{
color: green;
}
a[href=‘http://www.taobao.com‘]{
color: lightpink;
}
input[type=‘text‘]{
background-color: lightblue;
}
</style>
</head>
<body>
<div>
<a href="http://www.taobao.com">我是a0标签</a> /*属性:href变色*/ /*属性:href有网址的变色*/
<span>span标签</span>
<a href="http://www.jd.com">我是a1标签</a> /*属性:href变色*/
<a href="http://www.mi.com">我是a2标签</a> /*属性:href变色*/
<a>没有href属性</a>
</div>
<input type="text"> /*属性:type=‘texe‘变色*/
<input type="password">
</body>
</html>
4. 并集\交集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 并集选择器 */
ul,ol,span{
background-color: gainsboro;
}
</style>
</head>
<body>
<ul>
<li>u-first</li> /* 并集变色 */
</ul>
<ol>
<li>o-first</li> /* 并集变色 */
</ol>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 交集选择器 */
div.box1.box2{
background-color: red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box1 box2">box1box2</div> /* 交集:变色 */
<div class="box1">box1</div>
<div>aaa</div>
<span class="box1">span标签</span>
</body>
</html>
5. 伪类选择器
-
a 专属 : link visited active
-
input 专属 : focus
-
通用 : hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 链接点击之前的颜色 */
a:link{
color:tomato;
}
/* 链接点击之后的颜色 */
a:visited{
color: gray;
}
/* 点击时的颜色 */
a:active{
color: green;
}
/* 点击对话框的颜色 */
input:focus {
background-color: aquamarine;
}
div{
width: 100px;
height: 100px;
background-color: lightgray;
}
/* 鼠标悬浮变色 */
div:hover{
background-color: pink;
}
</style>
</head>
<body>
<a href="http://www.jd.com">京东</a>
<a href="http://www.xiaohuar.com">校花</a>
<input type="text">
<div></div>
</body>
</html>
6. 伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 第一个字变色 */
p:first-letter{
color: green;
}
/* 所选内容前面添加的内容:变色 */
p:before{
content: ‘**‘;
color: pink;
}
/* 所选内容后面添加的内容:变色 */
p:after{
content: ‘.....‘;
color: lightblue;
}
</style>
</head>
<body>
<p>春江水暖鸭先知</p>
</body>
</html>
7. 选择器的优先级
行内>id选择器>类选择器>标签选择器>继承
1000 100 10 1 0
?
所有的值可以累加但是不进位
相同优先级的放在后面的生效
!important 提高样式的优先级到最高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background-color: lavender;
}
div#AA{
background-color: red;
}
div.aa{
background-color: green;
}
div.aa.bb{
background-color: yellow;
}
div#BB{
background-color: pink;
}
</style>
</head>
<body>
<div>普通的div</div> /* lavender */
<div id="AA">有一个id的div</div> /* red */
<div class="aa">有一个类的div</div> /* green */
<div class="aa bb">有两个个类的div</div> /* yellow */
<div class="aa" id="BB">有一个类并且有一个id的div</div> /* pink */
</body>
</html>
11.2.3 颜色表示
rgb表示法:
rgb:red green blue 光谱三原色
rgb(255,255,255) 白色
rgb(0,0,0) 黑色
?
16进制的颜色表示法:
#000000 - #ffffff
#000 - #fff
?
单词表示法:
red blue yellow
?
rgba表示法:
a表示透明度,0-1,0是完全透明,1是不透明
?
颜色对照表
https://htmlcolorcodes.com/zh/yanse-ming/
11.2.4 字体设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font-family: ‘楷体‘,‘宋体‘;
font-weight: bolder;
font-size: 50px;
}
</style>
</head>
<body>
<p>字体设置</p>
</body>
</html>
11.2.5 文本设置
<!-- 文字溢出 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-overflow</title>
<style type="text/css">
.div0 {
width: 300px;
border: 1px solid darkblue;
}
.div1 {
width: 300px;
border: 1px solid red;
/*强制在一行内显示*/
white-space: nowrap;
/*超出部分隐藏*/
overflow: hidden;
}
.div2 {
width: 300px;
border: 1px solid black;
/*强制在一行内显示*/
white-space: nowrap;
/*超出部分隐藏*/
overflow: hidden;
/*修剪超出的文本*/
text-overflow: clip;
}
.div3 {
width: 300px;
border: 1px solid chocolate;
/*强制在一行内显示*/
white-space: nowrap;
/*超出部分隐藏*/
overflow: hidden;
/*显示省略符号来代表被修剪的文本*/
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="div0">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
<div class="div1">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
<div class="div2">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
<div class="div3">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
</body>
</html>
11.2.6 背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
height: 1000px;
background-color: deepskyblue;
background-image: url(xjs.jpg);
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-position: 100px 100px;
background-position: center top;
background-attachment: fixed;
background: red url("xjs.jpg") no-repeat left center; /* 综合写法 */
}
</style>
</head>
<body>
<div>
<p>我是一个小僵尸</p>
</div>
</body>
</html>
11.2.7 边框的设置
可分别设置四边的颜色,粗细,样式,遵循上右下左的顺序
-
一个值:上下左右
-
两个值:遵循上下 / 左右
-
三个值:上 / 右左 / 下
-
四个值:遵循顺时针上右下左
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
border-color: blue;
border-width: 5px;
border-style: solid double dotted dashed;
border-top-color: orangered;
border-top-style: solid;
border-top-width: 3px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
11.2.8 块和行内的概念 / 转换
行内元素：
-
与其他行内元素并排；
-
对于行内标签来说不能设置宽和高,默认的宽度，就是文字的宽度
块级元素：
-
独占一行，不能与其他任何元素并列；
-
能设置宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
<!-- 有些时候需要行内标签也设置宽和高,需要进行 行内 转 块,行内 转 行内块 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
/*display: block;*/
display: inline-block;
/*width: 100px;*/
height: 20px;
background-color: purple;
text-align: center;
line-height: 20px;
text-decoration: none;
}
div{
display: inline-block;
width: 50px;
height: 50px;
border-color: orangered;
border-style: solid;
}
div.div{
display: none;
width: 50px;
height: 50px;
border-color: blue;
border-style: solid;
}
</style>
</head>
<body>
<div class="div"></div>
<div></div>
<a href="">a标签1</a>
<a href="">a标签2</a>
</body>
</html>
11.2.9 盒模型
-
背景包含的部分: padding + content
-
盒模型大小计算:
width/height + padding*2 + border*2
<!-- 注意 : 上下的盒子如果设置bottom和top会导致塌陷,取两个设置的最大值作为外边距 -->
<!-- 设置父盒子与子盒子的距离用padding -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div.box1{
width: 100px;
height: 100px;
background-color: red;
border: solid purple 10px;
padding: 20px;
/*margin: 20px;*/
margin-bottom: 20px;
}
div.box2{
width: 100px;
height: 100px;
background-color: red;
border: solid purple 10px;
padding: 20px;
}
</style>
</head>
<body>
<div class="box1">盒模型大小计算:宽+padding*2+border*2</div>
<div class="box2">盒子2</div>
</body>
</html>
<!-- 盒子模型例子 -- 三角形 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 0;
height: 0;
border-color: red transparent transparent transparent; /* trandparent:透明 */
border-width: 50px;
border-style: solid;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
11.2.10 浮动
-
浮动的元素会脱离标准文档流,原本块级元素就不再独占整行了,并且在原页面中也不占位置了,之后的元素会挤到页面上影响页面的排版
浮动的四大特性：
-
浮动的元素会脱离标准文档流
-
浮动的元素互相贴靠
-
浮动的元素有"子围"效果
-
收缩的效果:：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div.main{
height: 100px;
background-color: darkgray;
}
div.box{
width: 100px;
height: 100px;
border: solid red;
background-color: yellow;
float: right;
}
div.father{
background-color: forestgreen;
/*overflow: hidden;*/ /*清除浮动二 BFC*/
}
/* .clear{ */ /* 清除浮动一 */
/* clear: both; */
/* } */
/* 伪元素清除浮动 */
.clearfix:after{
content: ‘‘;
clear: both;
display: block;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="box"></div>
<div class="box"></div>
<!-- <div class="clear"></div>-->
</div>
<div class="main">
主页的内容
</div>
</body>
</html>
11.2.11 定位
相对定位:相对自己原来的位置移动,移动之后还占据原来的位置
绝对定位 :绝对定位是相对于整个html页面,不会占据原来的位置,层级会提升.如果设置了绝对定位的子元素的父元素没有设置position,那么子元素的所有设置都是基于整个页面.如果设置了position,子元素的绝对定位会根据父元素的位置定位.父相子绝:子元素设置的绝对位置会对应着祖级元素的相对位置
固定定位 :固定是相对于整个窗口的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
}
.d{
width: 400px;
height: 1000px;
background-color: lavender;
position: relative;
left: 200px;
}
.d1{
background-color: red;
}
.d2{
background-color: yellow;
position: absolute;
left: 100px;
}
.d3{
background-color: green;
}
img{
position: fixed;
right: 10px;
bottom: 10px
}
</style>
</head>
<body>
<div class="d">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</div>
<img src="xjs.jpg" alt="xiaojiangshi">
</body>
</html>
11.2.12 z-index
用法说明:
-
z-index 值表示谁压着谁，数值大的压盖住数值小的，
-
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
-
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
-
从父现象：父亲怂了，儿子再牛逼也没用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
z-index: 10;
}
.d2{
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
z-index: 5;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
</body>
</html>
11.2.13 opacity
调整整个标签的透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
opacity: 0.5;
}
</style>
</head>
<body>
<div>
我只是一个小僵尸
<img src="xjs.jpg" alt="小僵尸">
</div>
?
</body>
</html>
11.2.14 overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background-color: chartreuse;
overflow: hidden;
}
</style>
</head>
<body>
<div>
<p>23期的学生都饿了想吃饭 非常想</p>
<p>23期的学生都饿了想吃饭 非常想</p>
<p>23期的学生都饿了想吃饭 非常想</p>
<p>23期的学生都饿了想吃饭 非常想</p>
</div>
</body>
</html>
<!-- 补充: -->
分方向的设置
在css中去掉列表的样式
ul,li{
list-style: none;
}