CSS的优势:
1.内容和表现分离
2.网页结构表现统一,可以实现复用
3.样式十分丰富
4.建议使用独立于html的css文件
5.利用SEO,容易被引擎收录
CSS三种导入方式
就近原则,哪种样式距离修饰内容近,就选择那个。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!--内部样式-->
h1{
color:chartreuse;
}
</style>
</head>
<body>
<link rel="stylesheet" href="style.css">
<!--行内样式:在标签内编写style属性-->
<h1 style="color: aqua">hello,world!</h1>
</body>
</html>
外部样式两种写法
链接式:
<link rel="stylesheet" href="style.css">外部样式
导入式:
<style>
@import url("style.css");
</style>
选择器:选择页面某一个,或者某一类元素
标签选择器:会选择这个页面所有标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--标签选择器会对统一标签进行选择-->
<style>
h1{
color: #27c52e;
background: aqua;
border-radius: 34px ;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>好好学习</h1>
<h1>天天向上</h1>
<p>hello,world</p>
</body>
</html>
类选择器:可以复用。形式为:英文状态下点加类名加大括号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.qingjiang{
color: aqua;
}
.kuangshen{
color: blue;
}
</style>
</head>
<body>
<h1 class="qingjiang">好好学习</h1>
<h2 class="kuangshen">好好学习</h2>
<h3>好好学习</h3>
</body>
</html>
id选择器:全句唯一,不可复用。形式为:英文状态下井号加ID名加大括号。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#qingjiang{
color: brown;
}
</style>
</head>
<body>
<h1 id="qingjiang">世上无难事</h1>
<h1 >世上无难事</h1>
</body>
</html>
ID选择器>类选择器>标签选择器
层次选择器:
1.后代选择器在某个元素后边
<style>
body p{
background: aqua;
}
</style>
2.子选择器
body>p{
background: blue;
}
3.相邻兄弟选择器:对下边相邻的内容进行选择
.active+p{
background: aqua;
}
4.通用选择器:对向下所有兄弟
.active~p{
background: aqua;
}
5.结构伪类选择器
ul li:first-child{
background: antiquewhite;
}
ul li:last-child{
background: #27c52e;
}
p:nth-child(1){/*对父元素的第几个元素进行操作*/
background: blue;
}
p:nth-of-type(2){/*对p元素第几个操作*/
background: red;
}
6.属性选择器
=是绝对等于
*=包含这个元素
^=以这个开头
$=以这个结尾
字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 80px;
}
/*font-family:字体
font-size:字体大小
font-weight:字体粗细
color:字体颜色
*/
body{
font-family: 华文楷体;
color: aqua;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bold;
}
</style>
</head>
<body>
<h1>第一章</h1>
<p class="p1">“天家儿郎,凭我挑选,便是当着陛下的面,此话我亦敢言。”
她高贵、冷艳、睥睨众生,世间无一人一事能令她动容。
直到她遇见了那一杯顶级雨前龙井。
他为贪腐尚书屈膝求情:“罪不祸及妻儿。”
百官感念:太子仁善。</p>
<p>只有她知,罪是他揭露,尚书之位是他的人接手。
他为疑似谋逆亲王奔走:“二哥孝悌,孤不信他大逆不道。”</p>
</body>
</html>
文本样式
1.颜色rgb rgba
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
/*rgb:000000-ffffff
rgba a:0-1
text-align:文字对齐方式
text-indent: 2em;首行缩进
line-height: 100px;行高
行高跟块高一致就可以上下居中
*/
color:rgba(128,128,188,0.9) ;
text-align: center;
}
.p1{
text-indent: 2em;
line-height: 100px;
}
/*上划线中划线下划线*/
.l1{
text-decoration: underline;
}
.l2{
text-decoration: line-through;
}
.l3{
text-decoration: overline;
}
</style>
</head>
<body>
<h1>第一章</h1>
<p class="l1">111111</p>
<p class="l2" >3333333</p>
<p class="l3" >22222222</p>
<p class="p1">“天家儿郎,凭我挑选,便是当着陛下的面,此话我亦敢言。”
她高贵、冷艳、睥睨众生,世间无一人一事能令她动容。
直到她遇见了那一杯顶级雨前龙井。
他为贪腐尚书屈膝求情:“罪不祸及妻儿。”
百官感念:太子仁善。</p>
<p>只有她知,罪是他揭露,尚书之位是他的人接手。
他为疑似谋逆亲王奔走:“二哥孝悌,孤不信他大逆不道。”</p>
</body>
</html>
2.文本对齐方式text-align:center;
3.首行缩进text-indent;
4.行高line-height=height单行文字水平居中
5.装饰text-decoration去装饰
6.图片文本水平对齐:vertical-align:middle
阴影
/*阴影颜色,水平距离,垂直距离,阴影模糊程度*/
text-shadow: aqua 10px 5px 1px;
超链接伪类
a{
text-decoration: none;
color: black;
}
/*鼠标点击*/
a:hover{
color: yellow;
font-size: 50px;
}
列表
#nav{
width: 300px;
}
.title{
line-height: 40px;
text-indent: 1em;
font-size: 18px;
font-weight: bold;
background: blue;
}
/*list-style:
none去掉黑点
circle变成空心圆
decimal变成数字
suqare正方形*/
ul{
background: gray;
}
ul li{
list-style: none;
height: 30px;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 15px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
渐变
body {
/*background-color: #0093E9;*/
background: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}
/*graient网站*/
盒子模型:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 300px;
border:1px solid cornflowerblue;
}
form{
background: yellow;
}
div:nth-of-type(1) input{
border:3px solid black;
}
div:nth-of-type(2) input{
border:2px dashed deeppink;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<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:
边框颜色:
边框距离:
边框样式:
外边距margin
内边距padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 300px;
border:1px solid cornflowerblue;
}
h2{font-size: 30px;
background-color: yellow;
line-height: 30px;
margin: 0 auto;
color: #27a82a;
}
form{
background: yellow;
}
div:nth-of-type(1){
border:3px solid black;
padding: 10px;
}
div:nth-of-type(2) input{
border:2px dashed deeppink;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<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>
display:把行和块进行调整通过display:inline-block,使得行和块互通。float:是把行块元素进行左右浮动,进行这种操作,会出现一些元素突出,可以使用第一:把父区域高度调大。第二:把设置div通过clear:both,和margin:0,padding:0设置。第三通过overflow来设置hidden完成。第四父元素添加伪类after:content:";display:block;clear:both;(最常用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#contend{
width: 100px;
height: 100px;
border: 1px solid red;
overflow: scroll;
}
</style>
</head>
<body>
<div id="contend">
<img src="image/1.jpg" alt="">
<p>《哈哈哈哈哈第二季》是由爱奇艺、腾讯视频出品的励志旅行真人秀,“五哈旅行团”由邓超、陈赫、鹿晗、彭昱畅、郭京飞、王勉组成,共11期。 [4-5] [7]
节目由嘉宾们组成“五哈旅行团”从繁忙琐碎的日常生活中挤出时间开启穿越中国的旅途,讲好“与我有关”的普通人的生活故事。 [3]
节目于2021年11月20日起每周六、周日晚20:00播在爱奇艺、腾讯视频联合播出,于2022年1月30日完结</p>。
</div>
</body>
</html>
相对偏移:相对于原来的位置进行偏移,它仍然在标准文档流中,原来的位置会被保留。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--相对定位相对于自己原来的位置进行偏移-->
<style>
div{
margin:10px;
padding:5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0px;
}
#first{
background-color: #27c52e;
border: 1px dashed #0093E9;
position: relative;
top: -20px;
}
#second{
background-color: #c5332f;
border: 1px dashed #a85c9a;
}
#third{
background-color: #269189;
border: 1px dashed #291d19;
position: relative;
bottom: 40px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
方块练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 300px;
height: 300px;
padding: 10px;
border: 2px solid red;
}
a{
width: 100px;
height: 100px;
text-decoration: none;
line-height: 100px;
background: deeppink;
text-align: center;
color: black;
display: block;
}
a:hover{
background: #0093E9;
}
.a2,.a4{
position: relative;
left: 200px;
top:-100px;
}
.a5{
position: relative;
left: 100px;
top: -300px;
}
</style>
</head>
<body>
<div id="box">
<a class="a1" href="#">链接1</a>
<a class="a2" href="#">链接2</a>
<a class="a3" href="#">链接3</a>
<a class="a4" href="#">链接4</a>
<a class="a5" href="#">链接5</a>
</div>
</body>
</html>
绝对定位:
1.父元素没有定位,相对于浏览器定位。
2.父元素定位,相对于父元素定位
3.在父元素内移动。
绝对偏移:相对于浏览器或父元素进行偏移,它不在标准文档流中,原来的位置不会被保留。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--相对定位相对于自己原来的位置进行偏移-->
<style>
div{
margin:10px;
padding:5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0px;
position: relative;
}
#first{
background-color: #27c52e;
border: 1px dashed #0093E9;
}
#second{
background-color: #c5332f;
border: 1px dashed #a85c9a;
position: absolute;
left: 100px;
}
#third{
background-color: #269189;
border: 1px dashed #291d19;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
固定定位:fixed
z-index:
#content{
width: 280px;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size:12px;
line-height: 25px;
border: 1px #000 solid;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 280px;
height: 25px;
top: 120px;
}
.tipText{
color: #0093E9;
z-index: 999;
}
.tipBg{
background: #291d19;
/*opacity:0.5;*/
}