文章目录
一、CSS层叠样式表
1、CSS 基本概念
- CSS：Cascading Style Sheets。CSS是一种用来表现HTML或XML等文件样式的计算机语言，能够统一设置页面的样式。
2、CSS 常用属性
- color: red; 设置文字颜色；
- font-family: 楷体; 设置文字字体样式；
- font-size: 25px; 设置文字大小，后面必须要加上px，表示像素；
- font-style: italic; 设置文字斜体；
- letter-spacing: 1pt; 设置字间距离；
- line-height : 200%; 设置行高；
- font-weight:bold; 设置文字粗体；
- text-align: center; 设置文本居中；
- width：设置宽度；
- height：设置高度；
- border: 1px; 设置颜色，实线；
- background-color：设置背景颜色；
- background-image：设置背景图片；
- opacity：设置div的透明度；
- margin-(left,right,top,buttom)：外边距；
- padding-(left,right,top,buttom)：内边距；
- position: fixed：设置固定定位；
- border-radius：设置圆角；
- float：浮动；
- text-align：文本水平居中；
- line-height：文本垂直居中；
- border-color：边框颜色。
Demo：
<!--使用css设置文本-->
<!--设置颜色-->
<span style="color: red;">使用css来设置文本的样式</span><br />
<!--设置字体大小-->
<span style="font-size: larger;">使用css来设置文本的样式</span><br />
<span style="font-size: 20px;">使用css来设置文本的样式</span><br />
<!--设置字体类型-->
<span style="font-family: 楷体;">使用css来设置文本的样式</span><br />
<!--设置字体加粗-->
<span style="font-weight: bold;">使用css来设置文本的样式</span><br />
<!--设置字体斜体-->
<span style="font-style: italic;">使用css来设置文本的样式</span><br />
得到结果如下
3、使用方式
（1）内联方式：在想要设置样式的标签里面加上style = css样式值，在style属性中设置css的样式，可以设置该标签的样式，如果这个标签是一个容器（范围），可以设置该范围内内容的css属性。
<img src = "url路径" style = "width: 100px" />
<table style = "color: red"></table>
（2）内部方式：在head和/head之间加上<style></style>标签，css的样式写在style标签之间，和标签是完全分离的，将css的样式和标签进行结合必须使用选择器。
① id选择器
一个id选择器只能使用一次。
选择器命名不能以数字开头，不能使用关键字，尽量设置的见文识意，方便识别和调用。
定义方式：
#id选择器名称{
css属性;
}
#表示是id选择器
调用：在需要使用的标签中直接选择选择器：
id = "选择器名称";
Demo：id选择器示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--id选择器-->
<style>
#table1{
border: 1px red solid;
color: green;
font-family: 楷体;
font-size: 25px;
}
</style>
</head>
<body>
<table id = "table1">
<tr>
<td>打篮球</td>
<td>打篮球</td>
<td>打篮球</td>
</tr>
<tr>
<td>打篮球</td>
<td>打篮球</td>
<td>打篮球</td>
</tr>
<tr>
<td>打篮球</td>
<td>打篮球</td>
<td>打篮球</td>
</tr>
</table>
</body>
</html>
得到结果如下
② class选择器（类选择器）
类选择器可以多次使用。
定义方式：
.选择器名称{
css的属性;
}
"."表示class选择器
调用：在需要调用的标签中调用：
class = "选择器名称";
一个标签可以调用多个选择器，如果是调用多个class选择，格式为：
class = "选择器名称1 选择器名称2 选择器名称3 ..."
class选择器Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*class选择器用于定义外部边框*/
.classOut{
border: 3px blue solid;
}
/*class选择器用于定义单元格属性*/
.classIn{}
border: 1px red solid;
color: red;
font-family: "楷体";
font-size: 25px;
}
</style>
</head>
<body>
<table class="classOut">
<tr>
<td class = "classIn">打篮球</td>
<td>打篮球</td>
<td class = "classIn">打篮球</td>
</tr>
<tr>
<td>打篮球</td>
<td class = "classIn">打篮球</td>
<td>打篮球</td>
</tr>
<tr>
<td class = "classIn">打篮球</td>
<td>打篮球</td>
<td class = "classIn">打篮球</td>
</tr>
</table>
</body>
</html>
得到的结果
③ 标签选择器
以能够被浏览器识别的标签名称作为选择器名称，不需要主动调用。
标签选择器Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*class选择器用于定义外部边框*/
.classOut{
border: 3px blue solid;
}
/*class选择器用于定义单元格属性*/
.classIn{
border: 1px red solid;
color: red;
font-family: 楷体;
font-size: 25px;
}
/*标签选择器*/
span{
color: aqua;
font-family: 楷体;
font-size: 30px;
font-style: italic;
}
</style>
</head>
<body>
<table class="classOut">
<tr>
<td class = "classIn">打篮球</td>
<td><span>打篮球</span></td>
<td class = "classIn">打篮球</td>
</tr>
<tr>
<td><span>打篮球</span></td>
<td class = "classIn">打篮球</td>
<td><span>打篮球</span></td>
</tr>
<tr>
<td class = "classIn">打篮球</td>
<td><span>打篮球</span></td>
<td class = "classIn">打篮球</td>
</tr>
</table>
</body>
</html>
得到得到
④ 组合选择器
在前面三个选择器的基础之上存在的，多个选择器一起使用，前面的选择器都是用于确定范围，只有离大括号最近的一个选择器才是css的真正作用位置。如果只是在标签中间写了id = “名字”，没有对应的选择器，那么这个id将作为标识符。
比如：选择器1 选择器2 选择器3{
css属性
}
<style>
/*组合选择器*/
#table classDemo{
border: 1px red solid;
}
</style>
如果选择器3是id选择器或者class选择器，则需要调用。组合选择器Demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*组合选择器*/
#table td{
border: 1px red solid;
}
</style>
</head>
<body>
<table id=table>
<tr>
<td>打篮球</td>
<td>打篮球</td>
<td>打篮球</td>
</tr>
<tr>
<td>打篮球</td>
<td>打篮球</td>
<td>打篮球</td>
</tr>
</table>
</body>
</html>
组合选择器不建议使用太多层，层数太多会降低网页执行效率。
⑤ 伪类选择器（鼠标悬停）：为了完成当触发了某些动作的时候，修改的css样式。
选择器:动作{
css属性;
}
伪类选择器Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*伪类选择器*/
td:hover{
background-color: aqua;
}
</style>
</head>
<body>
<table>
<tr>
<td>打篮球</td>
<td>打篮球</td>
<td>打篮球</td>
</tr>
<tr>
<td>打篮球</td>
<td>打篮球</td>
<td>打篮球</td>
</tr>
</table>
</body>
</html>
（3）外部引用：在一个html文件中，加入一个css的文件
二、div
1、概念
- div相当于是将表格每一个单元格进行分离，每一个单元格表示一个div，div相当于容器，可以存放页面的所有能够显示的内容：图片、文本、超链接、div、表格，并且作用于网页布局（将网页分成多块，每一块存放不同的内容）。
- 注意：div必须和css一起使用
2、属性
（1）margin 属性
-
设置外边距的css：只要是边框与边框之间距离，就叫做外边距。
-
margin属性可以是任何长度单位，可以是像素、英寸、毫米或 em。
-
margin 可以设置为 auto。
margin-left：左外边距 margin-top：上外边距 margin-right：右外边距 margin-bottom：下外边距
（2）padding 属性
-
设置内边距：div盒模型中的内容（图片，文本、超链接）与边框之间的距离叫做内边距。
padding-left: 左内边距 padding-right 右内边距 padding-bottom 下内边距 padding-top: 上内边距 -
设置居中：文本的上下会自动占有两个像素，如果div中的内容是文本，设置居中的方式可以是：
1、 align: center; line-height: 像素值; 2、 padding-top: 像素值; padding-left: 像素值;
（3）float属性
-
float属性用于设置浮动。
float:left; 以左边为标准，往右填充，直到填满后往下一行填充
（4）经典四行
border: 1px red solid;
width: 100px;
height: 100px;
float: left;
- 文本的水平居中 text-align: center;
- 垂直居中 line-height: 300px;
（5）position属性
- position 属性值的含义：
- static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 - relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 - absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 - fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
- static
② 固定窗口Demo
<style>
#special{
border: 1px red solid;
width: 150px;
height: 150px;
float: left;
position: fixed; //固定定位
}
</style>
（5）opacity属性
- opacity属性用于设置div的透明度
