CSS学习笔记
3、美化网页
3.1、为什么要美化网页
1、有效的传递信息页面信息
2、美化网页、页面漂亮、吸引用户
3、凸显页面主题
4、提供用户体验
span标签：重点要突出的字
3.2、字体样式
3.3、文本样式
<--!
text-decoration
-->
p.ex1
{
font:15px arial,sans-serif;
}
p.ex2
{
font:italic bold 12px/30px Georgia, serif;
}
水平对齐 参照物
1.颜色 color
2.文本对齐方式 text-align = center
3.首行缩进 text-lindent：2em字符
text-decoration 超链接去下划线
4.行高 line-hright
5.文本图片水平对齐 vertical
6.让网页字体渲染更清晰：text-shadow：0px 0px 1px #ACACAC
3.5、lesson01.超链接伪类
a:link :正常，未访问的状态
a:visited:用户已访问过的链接
a:hover：当用户鼠标放在连接上
a:active：链接被点击
lesson01.超链接伪类
3.6、lesson01.列表
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型title>
<style>
h1,ul,li,body{
/*body总有外边距 对此进行初始化操作*/
margin: 0;
padding: 0;
text-decoration: none;
}
/*border: 粗细 样式 颜色 */
#box{
width: 300px;
border: 2px solid #08c463;
}
form{
background: #14a359;
}
h2{
background: #4158D0;
font-size: 19px;
line-height: 20px;
margin: 0;
}
div:nth-of-type(1) input{
border: 2px solid #4158D0;
width: 291px;
}
style>
head>
<body>
<div id="box">
<h2>会员登录h2>
<div>
<span>用户名：span>
<input type="text">
div>
<div>
<span>密 码：span>
<input type="text">
div>
<div>
<span>邮 箱：span>
<input type="text">
div>
div>
body>
html>
4、盒子模型
4.1、什么是盒子模型
marigin 外边距
border 边框
padding 内边距
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型title>
<style>
h1,ul,li,body{
/*body总有外边距 对此进行初始化操作*/
margin: 0;
padding: 0;
text-decoration: none;
}
/*border: 粗细 样式 颜色 */
#box{
width: 300px;
border: 2px solid #08c463;
}
form{
background: #14a359;
}
h2{
background: #4158D0;
font-size: 19px;
line-height: 20px;
margin: 0;
}
div:nth-of-type(1) input{
border: 2px solid #4158D0;
width: 291px;
}
style>
head>
<body>
<div id="box">
<h2>会员登录h2>
<div>
<span>用户名：span>
<input type="text">
div>
<div>
<span>密 码：span>
<input type="text">
div>
<div>
<span>邮 箱：span>
<input type="text">
div>
div>
body>
html>
4.2、边框
4.3、内外边距
margin 0 0 0 0 ：上右下左 顺时针
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型title>
<style>
/*外边距的妙用 居中元素
margin:0 auto
*/
h1,ul,li,body{
/*body总有外边距 对此进行初始化操作*/
margin: 0;
padding: 0;
text-decoration: none;
}
/*border: 粗细 样式 颜色 */
#box{
width: 300px;
margin: 0 auto;
border: 2px solid #08c463;
}
form{
background: #14a359;
}
h2{
background: #08c463;
font-size: 19px;
line-height: 20px;
margin: 0 0;
}
#div1{
background: #08c463;
}
#div2{
background: #08c463;
}
#div3{
background: #08c463;
}
span{
background: #08c463;
}
input{
border: 1px solid black;
}
style>
head>
<body>
<div id="box">
<h2>会员登录h2>
<div id="div1">
<span>用户名：span>
<input type="text">
div>
<div id="div2">
<span>密 码：span>
<input type="text">
div>
<div id="div3">
<span>邮 箱：span>
<input type="text">
div>
div>
body>
html>
盒子的计算方式：你这个元素到底多大
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1Nbgzu10-1655882562436)(/home/ziyu/文档/screenshot/image-20220617164436100.png)]
margin+border+padding+内容宽度 = 总要求
4.4、圆角边框
border-radius
4个角
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角边框title>
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 10px 5px;//分配：左上10px 右上5px 右下10px 左下5px
}
style>
head>
<body>
<div>div>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div{
width: 50px;
height: 50px;
margin: 30px;
background: red;
border-radius: 50px 0px 0px 0px;
}
img{
width: 100px;
height: 100px;
border-radius: 100px;//头像
}
style>
head>
<body>
<div>div>
<img src="../img/tx.jpg" alt="">
body>
html>
4.5、盒子阴影
margin：0 auto 居中前体条件：外有块元素 并且有固定长度
margin: 0 auto 设置的是模块在页面中的显示位置，而div没有设置模块宽度所以是和浏览器一样宽
text-align:center 设置的是div模块中img元素的位置
text-align：center和matgin：0 auto可以一起使用，但在这里属实是多次一举
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阴影title>
<style>
div{
height: 200px;
width: 100%;
border: 2px;
border-radius: 50px;
box-shadow: 10px 10px 10px yellow;
text-align: center;
}
img{
height: 200px;
width: 200px;
border-radius: 100px;
}
style>
head>
<body>
<div>
<img src="../img/tx.jpg" alt="">
div>
body>
html>
5、浮动
5.1、标准文档流
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KbEZ43j0-1655882562437)(/home/ziyu/文档/screenshot/01.png)]
快级元素：独占一行
h1~h6 P div 列表....
行内元素：不独占一行
span a img strong...
行内元素 可以被包含在块级元素里面，反之不可以
5.2、display
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>displaytitle>
<style>
div{
width:100px;
height: 100px;
border: 1px solid red;
}
span{//行内元素与width和height无关
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
style>
head>
<body>
<div>div块元素div>
<span>span行内元素span>
body>
html>
这个也是实现实现内元素排列的方式，但是我们很多情况都是使用float
5.3、float
1.左右浮动：float
/*
block 块元素
inline 行内元素
inline-block：是块元素 但是可以是内联
float:浮动 相当于图层 可以独立于背景存在
解决浮动边框塌陷
*/
div{
margin: 10px;
padding: 5px;
}
#div1{
border: 1px solid #C850C0;
display: inline-block;
}
#img01{
border: 1px solid #C850C0;
display: inline-block;
float: left;
}
#img02{
border: 1px solid #C850C0;
display: inline-block;
float: left;
}
#img03{
border: 1px solid #C850C0;
display: inline-block;
float: left;
}
#txt{
border: 1px solid #C850C0;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: left;
}
5.4、父级边框塌陷的问题
clear
clear属性 左 右 两侧
clear:right；清楚右侧浮动
clear:left; 清楚左侧浮动
clear:both;清楚两侧浮动
clear:none;
解决方案：
1、增加父级元素的高度
#fatheer{
border:1px solid read;
height:800px
}
2、增加一个空的div标签，清楚浮动
.clear{
clear: both;
margin: 0;
padding: 0 ;
}
3、overflow
在父级元素总增加一个 overflw:hidden;
4、在父级添加一个伪类 ：arter
#father:after{
content: '';//空文本
display:block;//空文本变为块元素
clear: both;
}
小结
1.浮动元素后面增加空div
简单，代码中尽量避免空div
2.设置父元素的高度
简单，元素假设有固定高度，就会被显示
3、overflow
简单，下拉的一些场景避免使用
4、父类添加一个伪类：after（推荐）
写法稍微复杂一点，但是没有副作用，推荐
5.5、对比
dispaly
方向不可控
float
浮动起来会脱离标准文档，所以要解决父级边框塌陷的问题
6、定位
6.1、相对定位 position:relative;
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>默认情况title>
<style>
/*相对定位：相对于自己原来的位置进行偏移 position : relative;*/
body{
padding: 20px;
background: #ce880e;
}
div{
margin: 10px;
padding: 5px;
font-size: 15px;
line-height: 25px;
}
#father{
border: 1px solid #08c463;
padding: 0;
}
#first{
border: 1px dashed #4158D0;
background: #ffbf4b;
position: relative;
/*距离原来下边20px -号表示相反位置*/
top: -20px;
/*距离左边空出20px*/
left: 20px;
/* 上下左右
相对于原来的位置进行移动，元素设置此属性后任然处在文档流中，不影响其他元素的一些布局
*/
}
#second{
border: 1px dashed #4158D0;
background: #C850C0;
}
#third{
border: 1px dashed #4158D0;
background: #C850C0;
}
style>
head>
<body>
<div id="father">
<div id="first">第一个盒子div>
<div id="second">第二个盒子div>
<div id="third">第三个盒子div>
div>
body>
html>
相对定位：position：relative
相对于原来的位置，进行指定的偏移,相对定位的话，它任然在标准文档中，原来的位置会被保留
top:-20px
left:20px
bottom:-10px
right:20px
6.2、绝对定位 position:absolute;
用来做首页
定位：基于xxxx定位，上下左右
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3、在父级元素中定位
相对于父级或者浏览器的位置，进行制定的偏移，绝对定位的话它不在标准文档流中，原来的位置不会被保留
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>默认情况title>
<style>
/*相对定位：相对于自己原来的位置进行偏移 position : relative;*/
body{
padding: 20px;
background: #ce880e;
}
div{
margin: 10px;
padding: 5px;
font-size: 15px;
line-height: 25px;
}
#father{
border: 1px solid #08c463;
padding: 0;
/*父级元素定位 但是不改变*/
position: relative;
}
#first{
border: 1px dashed #4158D0;
background: #ffbf4b;
position: relative;
}
#second{
border: 1px dashed #4158D0;
background: #c850c0;
/*绝对定位*/
position: absolute;
right: 30px;
}
#third{
border: 1px dashed #4158D0;
background: #13af50;
}
style>
head>
<body>
<div id="father">
<div id="first">第一个盒子div>
<div id="second">第二个盒子div>
<div id="third">第三个盒子div>
div>
body>
html>
6.3、固定定位：position:fixed;
应用场景：导航栏等等
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){/*绝对定位：相对于浏览器 */
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){/*固定定位 */
height: 50px;
background: #4158D0;
position: fixed;
right: 0;
bottom: 0;
}
style>
head>
<body>
<div>div1div>
<div>div2div>
body>
html>
6.4、z-index
相当于ps里面的图层
z-index: 999;/* 优先级别：0-999 */
opacity: 0.5%;/* 背景透明度 html以上 */
filter:Alpha(opacity=50)IE8以及更早的版本支持
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link rel="stylesheet" href="css/css.css">
head>
<body>
<div id="content">
<ul>
<li><img src="img/tx.jpg" alt="">li>
<li class="tipText">恍然大悟li>
<li class="tipBg">li>
<li>时间2022.06.19li>
<li>头像li>
ul>
div>
body>
html>
div{
width: 480px;
margin:0;
padding: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid #000000;
}
ul,li{
margin: 0;
padding: 0;
list-style: none;/*去圆点*/
}
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 480px;
height: 25px;
top: 300px;
}
.tipText{
color: white;
z-index: 999;/* 优先级别：0-999 */
}
.tipBg{
background: black;
opacity: 0.5%;/* 背景透明度 */
filter: alpha(opacity=50);/* IE8以及更早的支持*/
}