这是我参与「第四届青训营 」笔记创作活动的第2天
引言
这是字节青训营的第二天，我们学到了CSS的部分。今天我去面试一家游戏公司，居然收我实习了。我现在觉得技术还有很多，到了公司还需要更加努力才行。
走进CSS
在网页中使用CSS
内联式：（字体颜色设置成红色）
<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>Document</title>
</head>
<body>
<span style="color: red;">这是一个测试</span>
</body>
</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>Document</title>
<style>
#text{
font-weight: 700;
}
</style>
</head>
<body>
<span id="text" style="color: red;">这是一个测试</span>
</body>
</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>Document</title>
<link rel="stylesheet" href="style.css">
<style>
#text{
font-weight: 700;
}
</style>
</head>
<body>
<span id="text" style="color: red;">这是一个测试</span>
</body>
</html>
margin: 0px;
padding: 0px;
}
#text{
font-size: 30px;
}
CSS伪类
<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>Document</title>
<link rel="stylesheet" href="style.css">
<style>
#btn{
width: 120px;
height: 30px;
color: red;
/* background-color: aqua; */
}
#btn:hover{
color: wheat;
}
</style>
</head>
<body>
<button id="btn">按钮</button>
</body>
</html>
显式继承
inherit 关键字使得元素获取其父元素的计算值。它可以应用于任何 CSS 属性，包括 CSS 简写 all。
对于继承属性，inherit 关键字只是增强了属性的默认行为，通常只在覆盖原有的值的时候使用。
继承始终来自文档树中的父元素，即使父元素不是包含块。
