CSS
CSS是一种可以给HTML每个元素添加样式的语言。
不必记住每一个CSS，使用查阅文档即可。菜鸟教程CSS文档
CSS语法
选择器是需要改变样式的HTML元素。
每一条声明由属性和值组成，分号结尾，并由花括号包括。
属性：指的是样式属性，并不是HTML中的标签属性
如何在HTML中使用CSS
行内式
定义在元素的style属性中。
栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p style="font-size:50px;...">单位是像素</p>
</body>
</html>
运行效果如下：
内嵌式
定义在头部，使用<style></style>包括
栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font-size: 50px;
}
</style>
</head>
<body>
<p>单位是像素</p>
</body>
</html>
运行效果如下：
外部引入
通过头部中link标签引入。菜鸟link标签手册
在目录中新建.css文件
/*Test.css文件 这是CSS的注释*/
p{
font-size: 50px;
}
栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="Test.css" rel="stylesheet">
</head>
<body>
<p>单位是像素</p>
</body>
</html>
运行效果如下：
CSS选择器
因为CSS是另一种语言，所以需要选择器来选择HTML中的元素。从而更改其样式。
CSS选择器更多用法1
CSS选择器更多用法2
标签选择器
通过标签名选择元素，修改其样式
栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font-size: 50px;
}
</style>
</head>
<body>
<p>标签选择器会修改所有被选择标签的样式</p>
<p>标签选择器会修改所有被选择标签的样式</p>
<p>标签选择器会修改所有被选择标签的样式</p>
</body>
</html>
运行效果如下：
ID选择器
通过#id来选择，标签中属性ID为某的元素，修改其样式
ID不要以数字开头
栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#p2{
font-size: 50px;
}
</style>
</head>
<body>
<p>标签选择器会修改所有被选择标签的样式</p>
<p id="p2">ID选择器会选择名为某ID的元素</p>
<p>标签选择器会修改所有被选择标签的样式</p>
</body>
</html>
运行效果如下：
CLASS选择器
通过.class来选择，标签中属性CLASS为某的元素，修改其样式
CLASS可以理解为组，某组元素。(某类也行，并不是JAVA中类的意思)
CLASS不要以数字开头
栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.p{
font-size: 50px;
}
</style>
</head>
<body>
<p>id仅能为1个标签</p>
<p class="p">class可以是多个标签</p>
<p class="p">class可以是多个标签</p>
</body>
</html>
运行效果如下：
如为一个元素声明多个CLASS，用空格分隔类名。
CSS浮动
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
其初衷是为了解决文字环绕图片问题，元素浮动后，一定不会把文字挡住。菜鸟教程浮动
现有代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#outdiv{
height: 500px;
width: 500px;
background: antiquewhite;
}
.indiv{
height: 100px;
width: 100px;
}
.d1{
background: #c200ff;
}
.d2{
background: #feff0e;
}
.d3{
background: #00ff4b;
}
</style>
</head>
<body>
<div id="outdiv">
<div class="indiv d1">div1</div>
<div class="indiv d2">div2</div>
<div class="indiv d3">div3</div>
</div>
</body>
</html>
运行效果如下：
需求：div1，div2，div3处于同一行
向右浮动解析：
至此，修改代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#outdiv{
height: 500px;
width: 500px;
background: antiquewhite;
}
.indiv{
height: 100px;
width: 100px;
}
.d1{
background: #c200ff;
float: right;
}
.d2{
background: #feff0e;
float: right;
}
.d3{
background: #00ff4b;
float: right;
}
</style>
</head>
<body>
<div id="outdiv">
<div class="indiv d1">div1</div>
<div class="indiv d2">div2</div>
<div class="indiv d3">div3</div>
</div>
</body>
</html>
运行效果如下：
如果是向左浮动
CSS定位
CSS 的 Position（定位），可以定义元素的位置。菜鸟教程定位
| Position值 | 描述 |
|---|---|
| static | 默认定位 |
| absolute | 绝对定位，填写多少就是多少 |
| relative | 相对定位，相对于之前的位置 |
| fixed | 相对定位，相对于浏览器的位置 |
现有代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.indiv {
height: 100px;
width: 100px;
}
.d1 {
background: #c200ff;
}
.d2 {
background: #feff0e;
}
.d3 {
background: #00ff4b;
}
</style>
</head>
<body>
<div class="indiv d1">div1</div>
<div class="indiv d2">div2</div>
<div class="indiv d3">div3</div>
</body>
</html>
运行效果如下：
absolute
绝对定位，填写多少就是多少
栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.indiv {
height: 100px;
width: 100px;
}
.d1 {
background: #c200ff;
position: absolute;
left: 50px;
top: 50px;
}
.d2 {
background: #feff0e;
}
.d3 {
background: #00ff4b;
}
</style>
</head>
<body>
<div class="indiv d1">div1</div>
<div class="indiv d2">div2</div>
<div class="indiv d3">div3</div>
</body>
</html>
运行效果如下：
absolute
相对定位，相对于之前该元素的位置
栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.indiv {
height: 100px;
width: 100px;
}
.d1 {
background: #c200ff;
position: absolute;
left: 50px;
top: 50px;
}
.d2 {
background: #feff0e;
}
.d3 {
background: #00ff4b;
}
</style>
</head>
<body>
<div class="indiv d1">div1</div>
<div class="indiv d2">div2</div>
<div class="indiv d3">div3</div>
</body>
</html>
运行效果如下：
fixed
相对定位，相对于浏览器的位置
栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.indiv {
height: 100px;
width: 100px;
}
.d1 {
background: #c200ff;
position: fixed;
left: 50px;
top: 50px;
}
.d2 {
background: #feff0e;
}
.d3 {
background: #00ff4b;
}
</style>
</head>
<body>
<div class="indiv d1">div1</div>
<div class="indiv d2">div2</div>
<div class="indiv d3">div3</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--为了使浏览器窗口可以拖动添加的很多个换行-->
</body>
</html>
运行效果如下：
拖动浏览器窗口发现还是在此处，证明就是相对于浏览器的定位
CSS盒子模型（重点）
菜鸟教程盒子模型
学会看文档也是一种自律！