CSS
css的四种引入方式
- 直接写在标签中,用分号隔开
<div style='background-color:red;color:yellow'>这里的背景是红色，字是黄色</div>
- 写在head标签中
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: red;
color:yellow;
}
</style>
</head>
<body>
<div>这里的背景是红色，字是黄色</div>
</body>
- 写在css文件中，用link导入
建议使用方法
<!--css文件：style.css-->
div{
background-color: red;
color:yellow;
}
<!--html文件style.html-->
<head>
<link type='text/css' rel='stylesheet' href='style.css'>
</head>
<body>
<div>这里的背景是红色，字是黄色</div>
</body>
- import 导入
不建议用：在页面全部加载完之后，再整体渲染
<!--css文件：style.css-->
div{
background-color: red;
color:yellow;
}
<!--html文件style.html-->
<head>
<style>
@import'style.css';
</style>
</head>
<body>
<div>这里的背景是红色，字是黄色</div>
</body>
4种方法的输出页面：
css选择器(selector)
- 基础选择器
<style>
*{
<!--通配符，选择全部-->
}
</style>
- 标签选择器
<style>
p{
<!--选择所有p标签-->
}
</style>
- css选择器
<style>
#p1{
<!--选择所有id='p1'的标签-->
}
.p2{
<!--选择所有class='p2'的标签-->
}
</style>
- 多项选择器
<style>
p,div,.span1{
<!--选择所有p标签-->
}
</style>
- 后代选择器
<style>
#div1 p{
<!--选择id='div1'的后代中的所有p标签-->
}
</style>
- 子代选择器
<style>
#div1>p{
<!--选择id='div1'的子代中的所有p标签-->
}
</style>
- 毗邻选择器
<style>
#div1+p{
<!--选择id='div1'后面紧挨着的一个p标签，如果没有就没用-->
}
</style>
- 属性选择器
<head>
<style>
[class]{
<!--选择所有有class属性的标签-->
}
[class='div1']{
<!--选择所有class='div1'的标签-->
}
[class~='div2']{
<!--选择所有class='div1 div2'中含有div2的标签-->
}
[class^='div1']{
<!--选择所有class='div1 div2'以div1开头的标签-->
}
[class$='div2']{
<!--选择所有class='div1 div2'以div2结尾的标签-->
}
[wolf]{
<!--可以自己写一个属性，选择所有有wolf属性的标签-->
}
div[class='p']{
<!--选择div标签中class='p'的标签-->
}
</style>
</head>
<style>
p:after{
content:'add';
color:red;
}
p:before{
content:'add';
color:yellow;
}
<!--在p标签文本前后添加文本和样式-->
</style>
伪类()
<head>
<style>
a:link{
<!--未选择样式-->
}
a:hover{
<!--鼠标悬浮时样式-->
}
.a1:hover .a2{
// 鼠标悬浮在a1时，a2改变样式
}
a:visited{
<!--访问后样式-->
}
a:active{
<!--鼠标点击时样式-->
}
</style>
</head>
<body>
<a href='https://blog.csdn.net/weixin_42016382/article/details/100873921'></a>
</body>
css的属性
color/font-size/font-weigth/font-family/height/width/line-height/position/display/z-index/opacity/float/clear/overflow/visibility
hover/active/after/before
padding/marign/border/border-radius/
- 字体属性
<style>
div{
/*字体颜色*/
color:red;
/*color:#G3c;*/
/*color:#GG33cc*/
/*color:rgb(255,255,255)*/
/*字体大小*/
font-size:45px;
/*字体粗细(0,100,200~900,bold,bolder,lighter...)*/
font-weight:900;
/*font-style:italic;*/
/*字体样式*/
font-family:'Times New Roman';
/*字体居中：center、left、right*/
text-align: center;
/*背景行高*/
height: 100px;
/*文本行高：文本上下居中*/
line-height: 100px;
/*单词间距*/
word-spacing: 5px;
/*字母间距*/
letter-spacing: 2px;
/*文本转换格式*/
text-transform: capitalize;
/*宽度*/
width:50%;
}
</style>
- 背景属性
<style>
/*background-color: #cc3399;*/
/*background-image: url('ico.png');*/
/*!*平铺方式：repeat/no-repeat*!*/
/*background-repeat: no-repeat;*/
/*位置*/
background-position: center center;
background: url('ico.jpg') no-repeat 100px 50px red;
</style>
- 边框属性
<style>
/*3种边距都可以设置4个方向*/
/*盒子之间的间距/居中*/
margin:0 auto;
/*margin-bottom: 1px;*/
/*margin-left: 1px;*/
/*margin-right: 1px;*/
/*margin-top:1px;*/
/*盒子边框：粗细/颜色/样式*/
border:1px red groove;
padding:1px;
</style>
- 列表属性
ul,ol{
list-style:decimal-leading-zero;
list-style:none;<br> list-style:circle;
list-style:upper-alpha;
list-style:disc;
}
- display属性
块级标签内联标签转换
<style>
div{
display:block;/*none;inline;inline-block;*/
}
</style>
- a标签属性
a{
text-decoration: none; /*设置超链接下划线格式*/
}
文档流
正常文档流：
脱离文档流：
1. float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
height:50px;
width:50px;
background-color: blue;
}
.div2{
height:50px;
width:50px;
background-color: green;
}
.div3{
height:100px;
width:100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
设置左float：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
height:50px;
width:50px;
background-color: blue;
}
.div2{
height:50px;
width:50px;
background-color: green;
/*设置左浮动设置左浮动设置左浮动设置左浮动*/
float:left;
}
.div3{
height:100px;
width:100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
<style>
.div2{
height:50px;
width:50px;
background-color: green;
/*设置右浮动设置右浮动设置右浮动设置右浮动*/
float:right;
}
</style>
在这里背景会浮动覆盖，但是文本不会被覆盖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color:gold;
}
.div1{
height:50px;
width:50px;
background-color: blue;
}
.div2{
height:50px;
width:50px;
background-color: green;
float:left;
}
.div3{
height:100px;
width:100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>
</body>
</html>
2. clear
<style>
div{
color:gold;
}
.div1{
height:50px;
width:50px;
background-color: blue;
}
.div2{
height:50px;
width:50px;
background-color: green;
float:right;
}
.div3{
height:100px;
width:100px;
background-color: purple;
/*clear:right;*/
}
</style>
<style>
div{
color:gold;
}
.div1{
height:50px;
width:50px;
background-color: blue;
}
.div2{
height:50px;
width:50px;
background-color: green;
float:right;
}
.div3{
height:100px;
width:100px;
background-color: purple;
/*右边清除，右边有浮动时自动向下移*/
clear:right;
}
</style>
clear解决浮动混乱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0 auto;
}
div{
color:gold;
font-weight: 900;
}
.top{
background-color: blue;
}
.div1{
width: 200px;
color:black;
float: left;
}
.div2{
width: 200px;
float: left;
}
.bottom{
background-color: #cc3399;
text-align: center;
}
</style>
</head>
<body>
<div class="top">
<div class="div1">111111111</div>
<div class="div2">222222222</div>
</div>
<div class="bottom">3333333</div>
</body>
</html>
这里并不能得到我们想要的浮动结果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0 auto;
}
div{
color:gold;
font-weight: 900;
}
.top{
background-color: blue;
}
.div1{
width: 200px;
color:black;
float: left;
}
.div2{
width: 200px;
float: left;
}
.div3{
clear:both;
}
.bottom{
background-color: #cc3399;
text-align: center;
}
</style>
</head>
<body>
<div class="top">
<div class="div1">111111111</div>
<div class="div2">222222222</div>
<div class="div3"></div>
</div>
<div class="bottom">3333333</div>
</body>
</html>
在浮动标签下面添加一个空标签，设定样式 clear:both; 隔离下面的标签，解决浮动混乱
清除浮动的主流方法：
<style>
// 写这样一个样式：
.clearfix:after{ // 在浮动的盒子父级最后添加以下盒子
content:'...'; // 盒子内容(随意，但不能为空)
display:block; // 使盒子为块级元素，占整行
clear:both; // 隔离上面的浮动元素
visibility:hidden; // 隐藏盒子文本内容content
height:0; // 使盒子高度为0，不占页面位置
}
</style>
// 用这样一个空标签来隔离浮动
3. overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0 auto;
}
div{
color:gold;
font-weight: 900;
}
.top{
background-color: blue;
overflow: hidden;
}
.div1{
width: 200px;
color:black;
float: left;
}
.div2{
width: 200px;
float: left;
}
.bottom{
background-color: #cc3399;
text-align: center;
}
</style>
</head>
<body>
<div class="top">
<div class="div1">111111111</div>
<div class="div2">222222222</div>
</div>
<div class="bottom">3333333</div>
</body>
</html>
在外层class='top’的样式加入 overflow:hidden; 也能实现正确的需求。隐藏超出部分
4.position
- fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0 auto;
}
.div1{
height: 1000px;
background-color: aqua;
}
.div2{
height: 1000px;
background-color: aquamarine;
}
.a{
position: fixed;/*固定标签*/
bottom:10px;
right:10px;
}
</style>
</head>
<body>
<div class="div1" id="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<a class="a" href="#div1">回到顶部</a>
</body>
</html>
在滚动条的滚动中，标签有position:fixed的标签位置固定
2.position:relative; 改变盒子位置，不脱离文档流，以原位置为基础移动。
2. position:absolute; 改变盒子位置，脱离文档流，后面的盒子前移，该标签会向上找有position:releative; 的前辈标签为基础移动，找不到时以html为基础移动。
对于脱离文档流的，即 position:absolute; 使用 text-align:center; 时，必须加入宽度 width:100%; 脱离文档流后，不指定宽度，盒子不知道浏览器宽度，无法居中
悬浮示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wolf</title>
<style>
*{
margin:0;
}
.left{
float:left; // 左飘
}
.right{
float:right; // 右飘
}
.pg-head{ // 上部分背景，基本样式
height:48px;
background-color: deepskyblue;
line-height: 48px;
}
.pg-head .logo{ // logo样式，background
width:200px;
height:48px;
text-align: center;
}
.pg-head .info{ // 右侧头像部分样式及position定位前提relative
width: 100px;
height:48px;
position:relative;
right:200px;
text-align: center;
}
.pg-head .info:hover{ // 头像悬浮样式
background-color: darkgray;
}
.pg-head .info:hover .accessory{ // 鼠标悬浮到头像时，展示额外内容
display: block;
}
.pg-head .info .a img{ // 头像样式
width:40px;
height:40px;
border-radius: 50%;
margin: 4px;
}
.body-left{ // 下部分左边菜单基本样式
width:200px;
position: absolute;
top:50px;
bottom:0;
left:0;
border:1px red solid;
}
.body-right{ // 下部分右边主要内容样式
z-index: 9; // 与头像额外内容分层
position: absolute;
left: 210px;
right:0;
bottom:0;
overflow: auto;
top:50px;
border:1px red solid;
}
.pg-head .info .opr{ // 额外内容标签样式
display: block;
background-color: deepskyblue;
}
.pg-head .info .accessory{ // 额外内容整体样式及position定位
display: none;
text-align: center;
line-height:48px;
width: 100px;
height: 48px;
position: absolute;
top:48px;
z-index: 10;
}
.pg-head .info .accessory a:hover{ // 额外内容鼠标悬浮样式
background-color: darkgray;
}
</style>
</head>
<body>
<div class="pg-head">
<div class="left logo">Python</div>
<div class="right info">
<a class="a">
<img src="09.jpg">
</a>
<div class="accessory">
<a class='opr'>用户信息</a>
<a class="opr">注销用户</a>
</div>
</div>
</div>
<div class="pg-body">
<div class="body-left"></div>
<div class="body-right">
<p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p>
<p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p>
<p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p>
<p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p>
<p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p><p>pppp</p>
</div>
</div>
<script src="jquary-3.4.js"></script>
<script>
</script>
</body>
</html>
效果：鼠标悬浮时，展示额外内容
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
