css基础知识
[TOC]
## 注释
在CSS内，注释代码的方法是 `/* */`，例如：
```
<style>
.c1{
background-color: #5924F1;
height: 48px;
}
.c2{
background-color: #2459a2;
height: 48px;
} */
</style>
```
## 定义和引用
### 直接定义
- 为 `<div>` 着色，这个颜色代码来自：REB颜色对照表，height 表示这个 div 的高度
```
<div style="background-color:#2459a2;height: 48px;">这是内容</div>
```
### id选择器
在 `head` 内以 `.` 开头定义好样式，然后在 `body` 内使用 `class` 引用这个样式的代码
```
<head>
<style>
#i1{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div id="i1">这是内容</div>
<br />
<span id="i1">这是内容</span>
</body>
```
### class选择器
在 `head` 内以 `.` 开头定义好样式，然后在 `body` 内使用 `class` 引用这个样式的代码
```
<head>
<style>
.c1{
background-color: #2459a2;
height: 48px;
}
.c2{
background-color: #9443a2;
height: 48px;
}
</style>
</head>
<body>
<div class="c1">这是内容</div>
<br />
<span class="c2">这是内容</span>
</body>
```
### 标签选择器
- 标签选择器，为标签统一风格，在 head 定义标签的风格，会把这个样式应用到所有的标签
```
<head>
<style>
div{
background-color: #11f011;
height: 48px;
}
</style>
</head>
<body>
<div class="c1">这是内容</div>
<br />
<div class="c1">这是内容</div>
<br />
<span class="c2">这是内容</span>
</body>
```
### 层级选择器
- 层级选择器，`.c1 div a`，定义标签选择器的时候使用层级的结构，来表示为那个子标签设定样式。
```
<head>
<style>
.c1 div a{
background-color: #722311;
height: 48px;
}
</style>
</head>
<body>
<div>这是内容</div>
<br />
<span class="c1">
<div>
<a href="baidu.com">这是内容</a>
</div>
</span>
</body>
```
### 组合选择器
- 组合选择器，`.c1,.c2,.c3`，使用逗号分隔多个样式，使用任意一个都可以引用这个样式。
```
<head>
<style>
.c1,.c2,.c3{
background-color: #722311;
height: 48px;
}
/*input,div,p{
background-color: #722311;
height: 48px;
}*/
</style>
</head>
<body>
<div class="c3">这是内容</div>
<br />
<div class="c2">这是内容</div>
<br />
<span class="c3">这是内容</span>
</body>
```
### 属性选择器
- 属性选择器，为指定的属性设置样式，也可以根据自定义属性来设置样式
```
<head>
<style>
input[type="text"]{ <!--标签属性选择器-->
background-color: #722311;
}
input[xingming="yangjinheng"]{ <!--标签自定义属性选择器-->
background-color: #334311;
}
.c1[type="password"]{ <!--class选择器，和属性选择器同时-->
background-color: #eeaafdff;
}
</style>
</head>
<body>
<input type="text"></input>
<input xingming="yangjinheng"></input>
<input type="password"></input>
<input class="c1" type="password"></input>
</body>
```
## 边框定义
### 边框样式
- border 定义一个边框，它是1像素，solid red 是红色实线。
```
<div style="border:1px solid red">
这是内容
</div>
```
### 边框大小
需要注意的是，行内标签 `<span>` 是不能设置边框大小的
```
<body>
<div style="height: 48px;width: 200px;border:1px solid red"> <!--按像素-->
这是内容
</div>
<br />
<div style="height: 48px;width: 80%;border:1px solid red"> <!--按占比-->
这是内容
</div>
</body>
```
### 背景颜色
```
<body>
<div style="height: 48px;width: 80%;border:1px solid red;background-color: #2459a2;">
这是内容
</div>
</body>
```
### 定制边框
```
<body>
<p><div style="height: 20px;width: 80%;border:1px solid red">全边框</div></p>
<p><div style="height: 20px;width: 80%;border-top:1px solid red"></div>上边框</div></p>
<p><div style="height: 20px;width: 80%;border-bottom:1px solid red">下边框</div></p>
<p><div style="height: 20px;width: 80%;border-left:1px solid red">左边框</div></p>
<p><div style="height: 20px;width: 80%;border-right:1px solid red">右边框</div></p>
</body>
```
### 外边距
`margin`定义外边距
```
<body>
<div style="border: 1px solid red;height: 100px;">
<div style="background-color: rgb(230, 202, 78);height: 70px;margin: 20px">
</div>
</div>
</body>
<!--应用-->
<body>
<div style="width: 98%;margin: 0 auto;">
<div style="float: left">收藏本站</div>
<div style="float: right">
<a href="baidu.com">登陆</a>
<a href="baidu.com">注册</a>
</div>
</div>
</body>
```
### 内边距
`padding`定义内边距
```
<body>
<div style="border: 1px solid red;height: 100px;">
<div style="background-color: rgb(230, 202, 78);height: 70px;padding: 0px">
这是内容
</div>
</div>
</body>
```
## 字体定义
### 字体大小
```
<body>
<div style="font-size: 40px;">
字体大小为40px
</div>
</body>
```
### 水平居中
```
<body>
<div style="font-size: 40px;text-align: center">
字体大小为40px，并且水平居中
</div>
</body>
```
### 垂直居中
```
<body>
<div style="font-size: 40px;line-height: 500px;">
字体大小为40px，并且垂直居中
</div>
</body>
```
### 加粗字体
```
<body>
<div style="font-size: 40px;font-weight: bold">
字体大小为40px，并且加粗
</div>
</body>
```
## 浮动样式
### 浮动样式
- 它可以使块级别标签从一个方向开始堆叠，直到占满才新起一行
```
<body>
<div style="width: 20%;background-color: rgb(99, 125, 196);float: left;">左侧堆叠</div>
<div style="width: 20%;background-color: rgb(167, 67, 125);float: left;">左侧堆叠</div>
<div style="width: 20%;background-color: rgb(67, 255, 192);float: right;">右侧堆叠</div>
<div style="width: 20%;background-color: rgb(187, 247, 92);float: right;">右侧堆叠</div>
</body>
```
### 嵌套浮动
- 指定一个父 `div` 的宽度，然后在其内部定义若干个浮动的 `div` ，可以实现一个类似商城的展示柜
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.page-header{
background-color: rgb(189, 189, 189);
height: 38px;
line-height: 38px;
}
</style>
</head>
<body style="margin: 0 auto;"> <!--去除body带来的网页开头的空白部分-->
<div class="page-header">
<div style="float: left">收藏本站</div>
<div style="float: right">
<a href="baidu.com">登陆</a>
<a href="baidu.com">注册</a>
</div>
</div>
<div style="width: 300px;border: 1px solid red;">
<div style="width: 96px;height: 30px;border: 1px solid green;float: left;;">内容</div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left;;">内容</div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left;;">内容</div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left;;">内容</div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left;;">内容</div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left;;">内容</div>
</div>
</body>
</html>
```
## 级别转换
默认情况下：`<div>`为块级别标签占用一行，`<span>`为行内标签占用自身需要的大小，它们之间可以转换。
### 块级转行内
`display: inline` 可以转换块级别标签为行内标签
```
<body>
<div style="background-color: rgb(73, 202, 202);display: inline;">原来是块标签</div>
</body>
```
### 行内转块级
`display: block` 可以转换行内标签为块级标签
```
<body>
<span style="background-color: blueviolet;display: block;">原来是行内标签</span>
</body>
```
### 多重属性
`display: inline-block` 可以使标签具有行内标签的属性：默认只占用自己需要的大小，还具有块级标签的属性：可以设置宽度高度。
```
<body>
<span style="background-color: blueviolet;display: inline-block;width: 100px;height: 40px;">多重属性</span>
</body>
```
## 去除标签
通过 `javascript` 控制 `display` 属性为 `none`，可以让这个标签从页面消失
```
<body>
<div style="background-color: rgb(73, 202, 202);display: inline;">原来是块标签</div>
<span style="background-color: blueviolet;display: block;">原来是行内标签</span>
<span style="background-color: blueviolet;display: none;">消失的标签</span>
</body>
```
## 样式优先级
- 一个标签可以应用多个样式，把 `<style>` 看作一个整体，后定义的覆盖先定义的，这是优先级。
```
<head>
<style>
.c1{
background-color: red;
color: white;
}
.c2{
font-size: 28px;
color: black;
}
</style>
</head>
<body>
<div class="c1 c2" style="color: pink;">这是内容</div>
</body>
```
## 使用CSS文件
以上内容都是在HTML内直接定义样式，如果一个样式需要跨HTML文件那么代码的重用性又降低了。
- 编写 css 文件，文件名：comm.css
```
.c1{
background-color: red;
color: white;
}
.c2{
font-size: 28px;
color: black;
}
```
- 在html文件中引用 css 文件，1.html
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="comm.css" />
</head>
<body>
<div class="c2">这是内容</div>
</body>
</html>
```
- 在html文件中引用 css 文件，2.html
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="comm.css" />
</head>
<body>
<div class="c1">这是内容</div>
</body>
</html>
```
