CSS
1. 规则
<!-- h1 为选择器，里面由属性和属性值组成，如在head的style中定义h1选择器，并设置属性，将对body中所有h1标签生效 -->
h1 {
width: 600px;
heigh: 1200px;
margin: auto;
}
2. 样式类型
<!-- 内联样式 -->
<!-- 直接写到html元素上，没有选择器，直接声明，仅对当前元素有效 -->
<p style="cloor:red;"> 非顶级程序员</p>
<!-- 内部样式 -->
<!-- HTML头，仅对当前页面生效，box为css规则 -->
<head>
<style>
.box{
width: 600px;
height: 1200px;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
}
</style>
</head>
<!-- 外部样式，最常用 -->
<!-- 通过href指定外部选择器 -->
<head>
<link rel="stylesheet" href="style.css">
</head>
3. 选择器
<head>
<style>
h2 {
color: red
}
</style>
</head>
<!-- 下面为style.css 文件内容-->
h3 {
color: red;
}
<!-- 下面为html文件引用 -->
<head>
<link rel="stylesheet" href="style.css">
</head>
<!-- 下面为style.css 文件内容 -->
.my-p{
color: green;
}
<!-- 下面为html文件内容 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="my-p"> 我是一个段落</p>
</body>
</html>
<!-- 下面为style.css 文件内容 -->
#my-p{
color: orange;
}
<!-- 下面为html文件内容 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p id="my-p"> 我是一个段落 </p>
</body>
</html>
<!-- 下面为style.css 文件内容,生效范围a标签下所有title属性的元素。另外一种为指定属性值为空的为粉色-->
a[title] {
color: red;
}
a[title=""] {
color: pink;
}
<!-- 下面为html文件内容 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="https://www.baidu.com" title="baidu">百度</a>
</body>
</html>
<!-- 在style.css中可以使用*表示通用选择器，所有都会生效-->
*{
font-family: "black";
}
<!-- h1选择器并且具备类选择器的标签，将颜色改变为黄色 -->
h1.my-p {
color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="my-p"> 组合选择器 </h1>
</body>
</html>
<!-- 所有h1和h2标签都修改-->
h1,h2 {
font-size: 20px;
}
<!-- 下面为style.css 文件内容，div下的h1 -->
div h1 {
font-size: 30px;
}
<!-- 下面为html文件内容 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<h1> div中的h1元素 </h1>
</div>
</body>
</html>
4. 优先级
# CSS优先级
1. 相同规则按照加载顺序，写在后面的优先级更高
2. 继承下来的样式优先级永远低于直接指定的样式
3. 内联样式优先级最高，!important是个意外
4. 类型选择器(Type Selector) < 类选择器(Class Selector) < ID选择器(ID Selector)
5. 盒子模型
1. 外边距
2. 边距
3. 填充
4. 内容
.box {
width: 200px;
height: 500px;
background-color: red;
border: 3px solid blue;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 8px;
margin: 15px;
margin-top: 15px;
margin-bottom: 10px;
margin-left: 8px;
margin-right: 9px;
padding: 10px 9px 8px 7px; # 上右下左直接配置
}
