一.css的引入方式
方式一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color: rebeccapurple;
background-color:gray;
}
</style>
</head>
<body>
<div>hello world</div>
</body>
</html>
方式二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p style="color: rebeccapurple">hello world</p>
</body>
</html>
方式三:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" rel="stylesheet" href="css.css">
</head>
<body>
<div>hello world</div>
</body>
</html>
新建一个css.css文件
方式四:不推荐使用–html文件全部读完才给加载css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@import "css.css";
</style>
</head>
<body>
<div>hello world</div>
</body>
</html>
二.css选择器
1.通用选择器 * —匹配任何元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
color: gray;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div>hello div</div>
<p>hello p</p>
</body>
</html>
2.标签选择器–根据标签名加载样式,例如p{},div{}
<style>
p{
color: gray;
background-color: rebeccapurple;
}
</style>
3.根据id值选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
color: gray;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div id="div1">hello div1</div>
<p id="div2">hello p</p>
</body>
</html>
4.class选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.p1{
color: gray;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div id="div1">hello div1</div>
<p class="p1">hello p1</p>
</body>
</html>
5.组合选择器
1)后代选择器–空格–无论儿子辈还是孙子辈还是更深层次的样式都进行改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*空格--后代选择器,对div下的所有的p标签无论是儿子还是孙子都加样式,*/
div p{
color: brown;
}
/*后代选择器--#div3下的.p4加样式*/
#div3 .p4{
color: rebeccapurple;
}
</style>
</head>
<body>
<div id="div1">
<div class="div2">
<p class="p1">hello p1</p>
</div>
<p class="p2">hello p2</p>
<p class="p3">hello p3</p>
</div>
<div id="div3">
<p class="p4">hello p4</p>
</div>
<div id="div4">hello div4</div>
</body>
</html>
尽量少用标签名进行组合选择,通过id或者class标签进行组合更稳妥
2)子代选择器–>–只给儿子辈的添加样式,孙子辈的不改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1>p{
color: brown;
}
</style>
</head>
<body>
<div id="div1">
<div class="div2">
<p class="p1">hello p1</p>
</div>
<p class="p2">hello p2</p>
<p class="p3">hello p3</p>
</div>
<div id="div3">
<p class="p4">hello p4</p>
</div>
<div id="div4">hello div4</div>
</body>
</html>
3)并列选择器–,–不管有没有关系,只改变选择的几个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1,.p4{
color: brown;
}
</style>
</head>
<body>
<div id="div1">
<div class="div2">
<p class="p1">hello p1</p>
</div>
<p class="p2">hello p2</p>
<p class="p3">hello p3</p>
</div>
<div id="div3">
<p class="p4">hello p4</p>
</div>
<div id="div4">hello div4</div>
</body>
</html>
4)毗邻选择器–+–只改变同级中紧邻的下一行的标签,上一行的不改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1+p{
color: brown;
}
</style>
</head>
<body>
<p >hello p</p>
<div id="div1">
<p class="p1">hello p1</p>
</div>
<p class="p2">hello p2</p>
<p class="p3">hello p3</p>
<div id="div3">
<p class="p4">hello p4</p>
</div>
<div id="div4">hello div4</div>
</body>
</html>
只有hello p2样式改变
6.属性选择器
[id]{}---将属性为id的样式全部改变
[class="div2"]--只改变class为div2的样式
[class ~="div2"]--属性有多个空格分隔的值,其中只要有一个值为div2就将其样式改变
<div class="div1 div2 div3">
[class ^="div2"]--属性匹配必须以指定值div2开始
[class $="div2"]--属性匹配必须以指定值div2结尾
[class *="div2"]--属性匹配包含div2的
三.伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*链接*/
a:link{
color: rebeccapurple;
}
/*悬浮*/
a:hover{
color: brown;
}
/*访问结束*/
a:visited{
color: gray;
}
/*点击那一刻*/
a:active{
color: aqua;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
四.before和after用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:after{
content: "pp";
}
p:before{
content: "haha";
}
</style>
</head>
<body>
<p>hello</p>
</body>
</html>
五.CSS属性–渲染和布局,控制网页数据的表现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--颜色--(红,绿,蓝)0-255进行配色-->
<div style="color:rgb(255,0,0)">hello1</div>
<!--颜色--(红,绿,蓝,透明度)0-255进行配色-->
<div style="color:rgba(255,0,0,0.5)">hello2</div>
<div style="color: brown">hello3</div>
<div style="color:#ffffff">hello4</div>
<!--字体大小-->
<div style="font-size: 45px">hello5</div>
<!--字体形式-->
<div style="font-style: italic">hello6</div>
<!--字体样式-->
<div style="font-family: 'Arial Narrow'">hello7</div>
<!--字体粗细-->
<div style="font-weight: bolder">hello8</div>
<!--背景颜色-->
<div style="background-color: brown">hello9</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
/*插入图片 */
/*background-image: url(123.jpg);*/
/*图片布局repeat-平铺,no-repeat-只要一张图片,repeat-x-沿着x轴平铺,repeat-y-沿着y轴平铺 */
/*background-repeat:no-repeat;*/
/*简写如下*/
background: url(123.jpg) no-repeat 100px 100px bisque;
}
</style>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-image: url("123.jpg");
/*图片位置*/
background-position: center;
}
div{
height:150px;
width:150px;
/*边框*/
border:1px solid red;
}
</style>
</head>
<body>
<div>div1</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
/*字体居中,靠右,靠左等横向排列*/
text-align: center;
/*文字上下高度*/
line-height: 200px;
/*字母间距*/
letter-spacing: 2px;
/*单词间距*/
word-spacing: 10px;
/*每个单词首字母大写*/
text-transform: capitalize;
}
</style>
</head>
<body>
<p>hello world</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-image: url("123.jpg");
/*图片位置*/
background-position: center;
}
div{
height:150px;
width:150px;
/*边框*/
border:1px solid red;
}
</style>
</head>
<body>
<div>div1</div>
</body>
</html>
六.boder,margin,padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*给body设置外边框,能够看见边框,证明body和html不是一层*/
/*所以要设置margin:0px*/
body{
border: dashed 1px purple;
}
.div1{
height:100px;
width:100px;
background-color: red;
}
.div2{
height:100px;
width:100px;
background-color:green;
}
.div3{
height:200px;
width:200px;
background-color:yellow;
}
</style>
</head>
<body>
<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>
</body>
</html>
一个元素的宽度的计算=width+2*border+2*padding
七.正常文档流和脱离文档流
display属性可以设置元素为块级标签还是内联标签
none:隐藏标签不在文档流中占位置
block:块级标签
inline:内联标签
inline-block:行内元素(保持块的宽度)
块级标签(独占一行)有哪些
<div> <p> <h1-h6> <ul> <ol> <dl>
内联标签(只占文本长度)有哪些
<a> <img> <input> <span> <select> <textarea>
正常文档流:将元素(标签)在进行排版布局的时候按照从上到下从左到右的顺序排版的布局流
脱离文档流:将元素从文档流中取出,进行覆盖,其他元素会按照文档流中不存在该元素重新进行布局
脱离正常文档流的操作:
float:浮动(非完全脱离文档流)
position:定位(完全脱离)
例如:div块级标签,在页面中独占一行,自上而下,也就是流,无论多么复杂的布局,如何在一行显示多个div元素,浮动理解为让某个div元素脱离标准文档流,漂浮在标准流之上和标准流不在一个层次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
.div1{
height:100px;
width:100px;
background-color: red;
}
.div2{
height:100px;
width:100px;
background-color:green;
float: left;
}
.div3{
height:200px;
width:200px;
background-color:yellow;
}
</style>
</head>
<body>
<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>
</body>
</html>
执行结果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
.div1{
height:100px;
width:100px;
background-color: red;
float: left;
}
.div2{
height:100px;
width:100px;
background-color:green;
float: left;
}
.div3{
height:200px;
width:200px;
background-color:yellow;
}
</style>
</head>
<body>
<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>
</body>
</html>
执行结果:
结论:float,会先判断前一个标签,如果是浮动标签,则跟在后面;如果不是,则保持前面不变,顶上去。假如前一个div元素222是浮动的,如果222的前一个元素111也是浮动的,那么222元素会跟随在上一个元素的后面(如果一行放不下两个元素,则222元素会被挤入下一行)如果111元素是标准文档流中的元素,那么222的相对垂直位置不会改变)也就是222的顶部会和111的底部对齐。
float的本质是文字会被挤出来环绕图形,只是覆盖了背景,所以说float是非完全脱离文档流
清除浮动clear:
none:左右均可浮动
left:元素左边不可以有浮动
right:元素右边不可以有浮动
both:元素两边都不可以有浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
.div1{
height:100px;
width:100px;
background-color: red;
}
.div2{
height:100px;
width:100px;
background-color:green;
float: left;
}
.div3{
height:200px;
width:200px;
background-color:yellow;
clear: left;
}
</style>
</head>
<body>
<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>
</body>
</html>
结果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
.outer{
background: darkorchid;
}
.m1{
height:100px;
width:200px;
background-color: red;
float: left;
}
.m2{
height:100px;
width:200px;
background-color:green;
float: left;
}
.b{
background-color:yellow;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="outer">
<div class="m1">menu1</div>
<div class="m2">menu2</div>
<!--以上两个元素均浮动出现错乱,必须清除浮动,记住!!-->
<div class="clear"></div>
</div>
<div class="b">bottom</div>
</body>
</html>
position:
static:默认值,没有特殊定位,遵循正常文档流,top,bottom,right,left均不被应用
absolute:对象脱离正常文档流,使用top,bottom,rigth,left进行绝对定位【在文档中已经不占位置了】
relative:对象遵循正常文档流,使用top,right,bottom,left等属性在正常文档流中偏移位置,层叠通过z-index【元素依然占据文档中原来的位置,只是视觉上相对原来的位置移动了】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
.div1{
height:100px;
width:100px;
background-color: red;
}
.div2{
height:100px;
width:100px;
background-color:green;
position: absolute;
}
.div3{
height:200px;
width:200px;
background-color: yellow;
}
.box{
position: relative;
}
</style>
</head>
<body>
<div class="div1">111</div>
<div class="box">
<div class="div2">222</div>
</div>
<div class="div3">333</div>
</body>
</html>
执行结果: