二.CSS
1.基本使用
1.1CSS介绍
1.CSS是什么？
CSS 全称 Cascading Style Sheets ，翻译过来就是层叠样式表
如果说HTML是网页的结构，那么CSS就是网页化妆师
2.CSS 写在哪里？
CSS 有三种写法
1.
直接写在标签内
2.
写在
style
标签内
3.
使用外部
.
css
文件
例：
外部的 index.css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外链css样式-->
<link rel="stylesheet"href="index.css">
<style>
/*内嵌的css样式*/
div{
width:300px;
height:200px;
background:rebeccapurple;
}
</style>
</head>
<body>
<!--
cssCascadingStyleSheet层叠样式表——修饰、美化网页，化妆师
行间样式>内嵌css样式>外链css样式（在style之前引入）
-->
<div>1</div>
<div style="background:red;">2</div>
<!--行间样式-->
<p style="width:200px;height:100px;background:skyblue;"></p>
<p></p>
</body>
</html>
运行结果：
1.2 CSS 常用样式类别
2.选择器
2.1基本选择器
1.选择器是什么？
CSS 的选择器是 CSS最基础也是最重要的一个知识点 很重要
2.
选择器权重
谁的权力大，就听谁的，同理，选择器权重也是一样，谁的权重值高，应用谁的
3.
选择器用处
用于准确的选中元素，并赋予样式
4.选择器类型
- class选择器 ：通过标签的 class 属性 ，选择对应的元素 借助了一个类的概念，一处定义，可以多处使用
class命名的元素使用: . + 元素名称，来找到一个元素
- id选择器 ：通过标签的 id 属性，选择 对应的元素 ( 注： id 选择器唯一)
id命名的元素使用: # + 元素名称，来找到一个元素
- 群组选择器 : 群组选择器是可以同时选择多个标签的选择器
- 层次选择器 : 层次选择器分为，子代、后代、相邻和兄弟等四种选择器
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**通配符选择器匹配任何元素*/
*{
margin:0;
padding:0;
}
/*元素选择器选择相同的元素对相同的元素设置一种css样式选中页面中所有的此元素*/
div{
width:300px;
height:25px;
background:rebeccapurple;
}
/*id选择器给标签设置一个id属性，在写样式时，在id名字前面加个#*/
#box{
background:red;
}
/*class选择器给标签设置一个class属性，在写样式时，在class名字前面加个.一般给具有相同属性的元素设置同一个class*/
.wrap{
background:skyblue;
}
p{
width:200px;
height:30px;
}
</style>
</head>
<body>
<!--id>class>标签(TagName)>*-->
<div class="wrap">1</div>
<div id="box"class="wrap">2</div>
<div>3</div>
<div class="wrap">4</div>
<p class="wrap"></p>
</body>
</html>
运行结果：
2.2复杂选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*群组选择器对几个有相同属性的选择器进行样式设置两个选择器之间必须用逗号隔开*/
/*div,p{*/
/*width:200px;*/
/*height:30px;*/
/*background:rebeccapurple;*/
/*p{*/
/*background:red;*/
/*}*/
/*p{*/
/*width:200px;*/
/*height:30px;*/
/*background:rebeccapurple;*/
/*}*/
/*~兄弟选择器操作的对象是该元素下的所有兄弟元素*/
/*div~p{*/
/*width:200px;*/
/*height:30px;*/
/*background:skyblue;*/
/*}*/
/*!*+相邻选择器操作的对象是该元素的同级元素选择div相邻的下一个兄弟元素选择到紧随目标元素后的第一个元素*/
/*div+p+p{*/
/*width:200px;*/
/*height:30px;*/
/*background:yellow;*/
/*}*/
/*div+p{*/
/*width:200px;*/
/*height:30px;*/
/*background:yellow;*/
/*}*/
/*li{*/
/*list-style:none;*/
/*}*/
/*>子代选择器选择某个元素下面的子元素*/
div>ul{
list-style:none;
}
</style>
</head>
<body>
<p>p头部</p>
<div>div1</div>
<p>p1</p>
<p>p2</p>
<div>div2</div>
<p>p3</p>
<div>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3
<ul>
<li>li里面的Li1</li>
<li>li里面的Li2</li>
<li>li里面的Li3</li>
</ul>
</li>
</ul>
</div>
</body>
2.3后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器空格找所有满足条件的后代*/
Div ul li ul{
list-style:none;
}
</style>
</head>
<body>
<div>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4
<ul>
<li>li里面的1</li>
<li>li里面的2</li>
<li>li里面的3</li>
</ul>
</li>
</ul>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>运行结果：
2.4复杂后代选择器的优先级
复杂后代选择器1
1.先比id(最高位)class（中间位）tagName（个数位）
123
2.id选择器个数不相等，id越多，优先级越高
3.id选择器个数相同,则看class,class多的优先级高
4.class个数相等，就看tagName个数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{
list-style:none;
background:rebeccapurple;
}
.box li{
background:red;
}
/*ul.box这个标签是ul其次他的class叫做box*/
/*ul .box找到是ul的后代这个后代class名字叫做box*/
ul.box li{
background:skyblue;
}
#wrap1{
background:rebeccapurple;
}
</style>
</head>
<body>
<!--id>class>标签-->
<!--
111
复杂后代选择器111
1.先比id(最高位)class（中间位）tagName（个数位）
123
2.id选择器个数不相等，id越多，优先级越高
3.id选择器个数相同,则看class,class多的优先级高
4.class个数相等，就看tagName个数
-->
<div>
<ul class="box"id="wrap">
<li>ul1</li>
<li id="wrap1">ul2</li>
<li>ul3</li>
</ul>
<ol class="box">
<li>ol1</li>
<li>ol2</li>
<li>ol3</li>
</ol>
</div>
</body>
</html>
运行结果：
3.文字/文本
3.1文字
注意：
font-family字体类型浏览器默认的字体是微软雅黑，字体中有多个字体的时候，如果前面的字体没有就使用后面的字体
font-size字体大小
单位pxrem%em
px谷歌浏览器默认字体大小16px,最小是12px
rem相对于html(根标签)的字体大小
em等于父级的字体尺寸——相对于父级字体大小而言的
%相对于父容器中字体的%调整这个要知道
font-weight字体粗细
关键字
normal默认字体
lighter较细
bold加粗这个要知道
bolder很粗
给值
只能100-900的整百数
400相当于正常的
700相当于bold
color文字颜色
关键字
英文单词redgreen
16进制（0-9a-f）
#5544aa#54a#abd456
#dddddd#ddd
rgb(0-255,0-255,0-255)
rred
ggreen
bblue
rgba(0-255,0-255,0-255,0-1)
rred
ggreen
bblue
aalpha(透明度)
0完全透明
1完全不透明
例：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<style>
/*html{*/
/*font-size:20px;*/
/*}*/
/*font-family字体类型浏览器默认的字体是微软雅黑，字体中有多个字体的时候，如果前面的字体没有就使用后面的字体*/
.box1{
font-family:Arial,harlow;
}
/*
font-size字体大小
单位pxrem%em
px谷歌浏览器默认字体大小16px,最小是12px
rem相对于html(根标签)的字体大小
em等于父级的字体尺寸——相对于父级字体大小而言的
%相对于父容器中字体的%调整这个要知道
*/
/*.box2{*/
/*font-size:32px;*/
/*}*/
/*.box3{*/
/*font-size:3rem;*/
/*}*/
/*div{*/
/*font-size:20px;*/
/*}*/
/*span{*/
/*font-size:200%;*/
/*}*/
/*
font-weight字体粗细
关键字
normal默认字体
lighter较细
bold加粗这个要知道
bolder很粗
给值
只能100-900的整百数
400相当于正常的
700相当于bold
*/
.box3{
font-weight:bolder;
}
.box4{
font-weight:700;
}
/*
font-style字体类型
normal默认文字正常
italic文字斜体（属性）
oblique文字斜体
*/
.box5{
font-style:italic;
}
/*
color文字颜色
关键字
英文单词redgreen
16进制（0-9a-f）
#5544aa#54a#abd456
#dddddd#ddd
rgb(0-255,0-255,0-255)
rred
ggreen
bblue
rgba(0-255,0-255,0-255,0-1)
rred
ggreen
bblue
aalpha(透明度)
0完全透明
1完全不透明
*/
.box6{
color:rebeccapurple;
}
.box7{
color:#555;
}
.box8{
color:rgb(200,10,20);
}
.box9{
color:rgba(208,34,42,0.85);
}
</style>
</head>
<body>
<div class="box1">helloWord123</div>
<div class="box2">helloWord123</div>
<div class="box3">helloWord123</div>
<div class="box4">helloWord123</div>
<div class="box5">helloWord123</div>
<div class="box6">helloWord123</div>
<div class="box7">helloWord123</div>
<div class="box8">helloWord123</div>
<div class="box9">helloWord123</div>
<div class="box10">helloWord123</div>
<div>
<span>555</span>
</div>
</body>
</html>
运行结果：
3.2文本
关键字：
white-space:换行方式
normal正常换行
nowrap不换行
text-indent首行缩进（em）
line-height行高*****
letter-spacing字距
word-spacing词距
text-indent首行缩进（em）
line-height行高*****
letter-spacing字距
word-spacing词距
text-align文本水平对齐方式
left默认值向左对其
right
center
text-transform文本大小写
none默认值无转换发生
uppercase转换成大写
lowercase转换成小写
capitalize将英文单词的首字母大写
text-decoration:none;*****
text-decoration:line-through;
text-decoration:overline;
text-decoration:underline;
text-decoration:line-through;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
white-space:换行方式
normal正常换行
nowrap不换行
*/
div.box{
width:300px;
background:skyblue;
white-space:nowrap;
/*超出隐藏*/
overflow:hidden;
/*省略号*/
text-overflow:ellipsis;
}
/*
text-indent首行缩进（em）
line-height行高*****
letter-spacing字距
word-spacing词距
*/
p{
text-indent:2em;
line-height:30px;
}
/*
text-indent首行缩进（em）
line-height行高*****
letter-spacing字距
word-spacing词距
*/
/*
text-align文本水平对齐方式
left默认值向左对其
right
center*****
*/
div.wrap{
width:100px;
height:50px;
background:skyblue;
/*水平对齐方式*/
text-align:center;
line-height:50px;
}
/*
text-transform文本大小写
none默认值无转换发生
uppercase转换成大写
lowercase转换成小写
capitalize将英文单词的首字母大写
*/
/*
text-decoration:none;*****
text-decoration:line-through;
text-decoration:overline;
text-decoration:underline;
*/
a{
text-decoration:none;
}
span{
/*text-decoration:line-through;*/
text-decoration:overline;
}
</style>
</head>
<body>
<div class="box">
Python是一种计算机程序设计语言。是一种动态的、面向对象的脚本语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。
</div>
<p>
Python是一种计算机程序设计语言。是一种动态的、面向对象的脚本语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。
</p>
<div class="wrap">
你好
</div>
<a href="http://www.baidu.com">去百度</a>
<p>不要<span>999</span>只要99</p>
</body>
</html>
运行结果：
4.背景
4.1背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:500px;
height:500px;
border:1pxsolidred;
/*background-color:skyblue;*/
/*background-image:url("img/01.jpg");*/
/*background-repeat:no-repeat;*/
/*background-repeat:repeat-x;*/
/*background-repeat:repeat-y;*/
/*background-position:topright;*/
/*background-position:righttop;*/
/*background-position:20px50px;*/
/*background-position:50px20px;*/
/*background-size:200px;*/
/*background-size:cover;*/
/*background-size:contain;*/
/*background-size:200px;*/
background:skyblueurl("img/01.jpg")no-repeat50px20px/200px;
/*background:colorurlrepeatposition/size;*/
}
/*
background-color背景色
background-image背景图片
background-repeat背景平铺
repeat平铺默认
repeat-x平铺x
repeat-y平铺y
np-repeat不平铺
注意：只有背景图片的宽高小于被设置的元素的宽高，才会有平铺效果
background-position背景位置x轴y轴
x轴leftcenterright
y轴topcenterbottom
如果只给一个值，默认在x轴，y轴默认center(50%)
%px
background-size背景大小
%px
给一个值的时候，默认x轴，y轴默认autoauto会等比缩放
cover等比例缩放直到铺满x,y轴可以铺满整个框但是不一定能看到完整的图片
contain等比例缩放x轴或者y轴其中的一个方向不一定铺满但是可以看到整个图片
*/
</style>
</head>
<body>
<div>
</div>
</body>
</html>
4.2伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a,div{
font-size:56px;
}
/*LoVeHAte*/
a:link{/*link未被点击的链接*/
color:red;
}
a:visited{/*已被点击的链接*/
color:black;
}
a:hover{/*鼠标悬停其上的元素这个一定要掌握*/
color:rebeccapurple;
cursor:default;
}
a:active{/*鼠标已经再其上按下但是还没有释放的元素*/
color:yellow;
}
div:hover{/*div:hover改变都是div本身*/
/*cursor:pointer;小手指*/
/*cursor:wait;等待*/
/*cursor:help;帮助*/
/*cursor:default;箭头*/
background:rebeccapurple;
}
.box{
width:200px;
height:100px;
background:rebeccapurple;
}
p{
width:50px;
height:50px;
background:skyblue;
}
.box:hover{/*div:hoverp改变的是div的后代p*/
width:150px;
height:80px;
background:yellowgreen;
}
</style>
</head>
<body>
<a href="http://jd.com">去京东</a>
<div>
llal
</div>
<div class="box">
<p></p>
</div>
</body>
</html>
运行结果：
例：做一个百度登录页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度登录页面</title>
<style>
img{
width: 137px;
height:60px;
}
div span{
display:inline;
color: darkgrey;
}
.box{
background-color:cyan;
width: 400px;
height:50px;
}
.whit{
background-color:blue;
}
</style>
</head>
<body>
<div>
<img src="https://www.baidu.com/img/bd_logo1.png" title="百度一下">
<span>|  注册百度账号</span><br><br>
<form action="" method="post" autocomplete="off">
 用户名:<input type="text" name="user" placeholder="请设置用户名" ><br><br>
 手机号:<input type="text" name="phone" placeholder="可用于登录和找回密码" ><br><br>
  密码:<input type="password" name="psd" placeholder="请设置登录密码" ><br><br>
 验证码:<input type="text" name="" placeholder="请输入验证码" >
<input type="button" value="获取短信验证码" ><br><br>
  <input class= "whit" type="radio"><span>阅读并接受</span> <a href=""> 《百度用户协议》</a><span>及</span><a href="">《百度隐私权保护声明》</a><br><br>
     <input class="box" type="submit" value="注册" >
</form>
</div>
</body>
</html>运行结果：
例：小米官网的导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_922719_877rjxfl4vm.css">
<style>
*{ margin:0;
padding: 0;
}
div.box{
background-color: black;
width: 1425px;
padding:10px;
padding-left: 100px;
}
a{
text-decoration:none;
color:lightgray;
}
a:hover{
color: green;
width: 200px;
}
p.box1{
background-color: #555555;
display: inline;
}
div .right{
padding-right: 100px;
float:right;
}
img{
width: 55px;
height: 55px;
}
.box2{
background-color: white;
width: 1415px;
height: 60px;
padding:20px;
padding-left: 100px;
float: right;
}
.box2 .box3{
padding:20px;
padding-left: 100px;
float:right;
padding-right: 200px;
}
span{
margin-left: 10px;
padding-top: 20px;
}
.box2 .box3 form{
display: inline;
float:right;
padding-left: 100px;
padding-bottom: -2px;
}
.box2 .box3 form input{
width: 300px;
height:40px;
}
</style>
</head>
<body>
<div class="box">
<div class="right">
<a href="https://order.mi.com/site/login?redirectUrl=https://www.mi.com/index.html">登录</a>  
<a href="https://account.xiaomi.com/pass/register">注册</a> 
<a href="https://order.mi.com/message/list">消息通知</a> 
<p class="box1">
<a href="https://static.mi.com/cart/"><i class="iconfont icon-gouwuche" style="color: white"></i> 购物车(0)</a>
</p> 
</div>
<div>
<p>
<a href="https://www.mi.com/index.html">小米商城</a>  
<a href="https://www.miui.com/">MIUI</a> 
<a href="https://iot.mi.com/index.html">loT</a> 
<a href="https://i.mi.com/">云服务</a> 
<a href="https://jr.mi.com/?from=micom">金融</a> 
<a href="https://youpin.mi.com/">有品</a> 
<a href="https://shuidi.mi.com/">小爱开放平台</a> 
<a href="https://b.mi.com/?client_id=180100031058&masid=17409.0358">企业服务</a> 
<a href="https://www.mi.com/appdownload/">下载App</a> 
<a href="https://www.mi.com/index.html#J_modal-globalSites/">Select Region</a> 
</p>
</div>
</div>
<div class="box2">
<a href="https://www.mi.com/index.html"><img src="https://img-blog.csdnimg.cn/2022010615085080712.png"></a>
<div class="box3">
<span>小米手机</span>
<span>红米</span>
<span>电视</span>
<span>笔记本</span>
<span>空调</span>
<span>新品</span>
<span>路由器</span>
<span>智能硬件</span>
<span>服务</span>
<span>社区</span>
<form action="" >
<input type="text" placeholder="小米8 小米MIX 2S"> <i class="iconfont icon-sousuo"style="color: #51cfff"></i>
</form>
</div>
</div>
</body>
</html>运行结果：
453
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
