HTML之CSS
一、css选择器
css选择器有：
1、id选择器 ##针对唯一性 2、class选择器 ###可以共用 3、标签选择器 4、层级选择器（空格） 5、组合选择器（逗号） 6、属性选择器（中括号）
主要是用id、class、标签选择器 ，下面介绍一下
css样式应用，有三处：当三处同时作用于一个标签时，离标签越近优先级越高：优先取方式1，然后方式2或方式3（方式2/3取决于谁离标签近优先取谁）
方式1：在标签内部通过style属性，来给标签设置css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css样式1</title>
</head>
<body>
<!--增加style属性-->
<div style="background-color: red;height: 100px;width: 100px">背景色</div>
</body>
</html>
方式2.通过id选择器修饰：通过head中增加style标签，在style标签内部，通过选择器为目标html配置css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css样式2</title>
<style>
#i1{ ##### #i1表示通过id选择器来定位
background-color:red;
height:100px;
width:100px;
}
</style>
</head>
<body>
<div id="i1">id背景色</div>
</body>
</html>
方式3.通过编写样式表文件xx.css，用link引入到当前html中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css样式2</title>
<style>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<div id="i2">引入cssdemo文件</div>
</body>
</html>
css文件：
#i2{
background-color:black;
height:100px;
width:100px;
}
##########上面已经说了id选择器，下边介绍一下class选择器：###############
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color:red;
height:100px;
width:100px;
}
</style>
</head>
<body>
<div class="c1">class选择器</div> <！--class选择器可以共用一个c1-->
<div class="c1">class选择器</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wh{
height:100px;
width:100px;
}
.bc-1{
background-color:red;
}
.bc-2{
background-color:black;
}
</style>
</head>
<body>
<!--不同颜色，相同宽高的正方形。class属性允许有多个，通过空格分隔即可-->
<div class="wh bc-1">class选择器</div>
<div class="wh bc-2">class选择器</div>
</body>
</html>
########标签选择器：直接对所有标签操作########
<!--标签选择器:直接对所有标签操作-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color:red;
}
</style>
</head>
<body>
<div>111</div> <!--所有div都是红色-->
</body>
</html>
#######层级标签选择器############
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color:red;
}
div span{
background-color: blue;
}
</style>
</head>
<body>
<div>
<span>啦啦啦</span>
</div> <!--span标签中的啦啦啦是蓝色；除此之外的div都是红色-->
</body>
</html>
CSS属性
height、width、font-size、font-weight、text-align、line-height、float、display、margin、padding
<!-- display 属性 展示属性 块级标签和行内标签之间切换的属性 display:inline 块级标签转换为行内标签-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wh{
height:100px;
width:100px;
}
.bc-1{
background-color:red;
}
.bc-2{
background-color:blue;
}
.dis-inline{
/*由块级标签转行内标签*/
display: inline;
}
.dis-block{
/*由行内标签转块级标签*/
display: block;
}
</style>
</head>
<body>
<div class="dis-inline bc-1">块转内</div>
<span class="dis-block bc-2">内转块</span>
</body>
</html>
