交互方式：CSS样式和HTML的交互方式
- CSS是控制html的，我们需要选中元素再进行控制
- CSS的常见使用方式分别是行间式、内嵌式与外链式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 样式</title>
<link rel="stylesheet" type="text/css" href="./css/index.css" />
<style>
#leo {
background-color: red;
}
#sky {
background-color: yellow;
}
#demo {
background-color: aqua;
}
</style>
</head>
<body style="background-color: orange;">
<div style="background-color: green;">123</div>
<div id="leo">1234</div>
<div id="sky">bbb</div>
<div id="blue">456</div>
<!-- 行间式最优先级最高的 -->
<div id="demo" style="background: blue;">demo</div>
</body>
</html>
运用CSS基本样式设定案例宽高
如果是span的话，给它调整宽高是没有用的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素宽高</title>
<Style>
#leo {
background: orange;
width: 200px;
height: 500px;
}
#span {
width: 3000px;
height: 4000px;
background-color: red;
}
</Style>
</head>
<body>
<div id="leo">
12345
</div>
<span id="span">123456</span>
</body>
</html>
运用CSS的群组选择器来控制B站导航的一群元素
群组选择器：
标签选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>class</title>
<style>
.abc {
background-color: orange;
}
#leo {
background-color: red;
}
.bbb {
background-color: green;
}
div {
background-color: slategrey;
}
</style>
</head>
<body>
<div class="abc" id="leo">
第一个元素
</div>
<div class="abc">
第二个元素
</div>
<div class="bbb">
第三个元素
</div>
<div>
第四个元素
</div>
</body>
</html>
运用 CSS的基本样式设定文字的行高、对齐的样式
- CSS中我们可以使用text-align样式来设定文字的左中右对齐
- CSS中我们可以使用line-height样式来设定文字的上下行高。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字宽高</title>
<style>
.leo {
width: 147px;
height: 60px;
background: #f6f7f9;
text-align: center;
line-height: 60px;
}
.sky {
width: 147px;
height: 64px;
background: gray;
/* 设定文字的左中右对齐 */
text-align: center;
/* 来设定文字的上下行高。 该值由到上边距*2+文字高度得出*/
/* line-height 等于文字的高度，那么该文字就在中间的中心 */
line-height: 38px;
/* 设置文字高度 */
font-size: 20px;
}
</style>
</head>
<body>
<div class="leo">
舞蹈
</div>
<div class="sky">
哈哈
</div>
</body>
</html>
运用CSS的基本样式设定元素的边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字边框</title>
<style>
.leo {
width: 147px;
height: 60px;
background: #f6f7f9;
border-left-width: 5px;
border-left-style: solid;
border-left-color: green;
border-right-width: 5px;
border-right-style: dashed;
border-right-color: red;
}
.sky {
width: 147px;
height: 60px;
background: gray;
border: 5px solid red;
}
.blue {
width: 147px;
height: 60px;
background: gray;
border: 5px solid red;
border-left-color: green;
border-right-color: white;
border-bottom-color: white;
border-top-color: white;
}
</style>
</head>
<body>
<div class="leo">
舞蹈
</div>
<div class="sky">
鬼畜
</div>
<div class="blue">
开心
</div>
</body>
</html>
运用CSS的基本样式设定元素的圆角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆角</title>
<style>
.leo {
width: 147px;
height: 60px;
background: #f6f7f9;
text-align: center;
line-height: 60px;
border: 2px solid #f3f3f5;
border-radius: 10px;
}
.sky {
width: 100px;
height: 100px;
border: 5px solid black;
border-radius: 10px 20px 30px 40px;
}
.blue {
width: 100px;
height: 100px;
border: 5px solid red;
border-top-left-radius: 30px;
border-top-right-radius: 40px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 60px;
}
.abc {
width: 100px;
height: 100px;
background: orange;
/* 设置圆 - 为正方形宽度高度的一半 */
border-radius: 50px;
}
</style>
</head>
<body>
<div class="leo">
舞蹈
</div>
<div class="sky">
</div>
<div class="blue"></div>
<div class="abc"></div>
</body>
</html>
深入CSS集选择器
CSS层级选择器