CSS基础总结

1、CSS概述

CSS（Cascading Style Sheets）层叠样式表：用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）。

2、CSS的引入方式

CSS不能单独使用，必须与HTML或XML一起协同工作，为HTML或XML起装饰作用。

① 外部样式：通过link标签引入一个外部的css文件

<link rel="stylesheet" type="text/css" href="test.css">

② 内部样式：直接在style标签内编写CSS代码

<style type="text/css">
        
</style>

③ 行内样式：直接在标签中添加一个style属性, 编写CSS样式

<p>
	<span style="color: red">
		这是一个行内样式
	</span>
</p>

3、CSS选择器

① 元素选择器

标签名 {
	属性名称:属性的值;
	属性名称:属性的值;
}

② ID选择器

#ID名 {
	属性名称:属性的值;
	属性名称:属性的值;
}

③ 类选择器

.类的名称 {
	属性名称:属性的值;
	属性名称:属性的值;
}

④ 属性选择器

标签名[属性名][属性名=“属性值”] {
	属性名称:属性的值;
	属性名称:属性的值;
}

⑤ 后代选择器

标签名 子标签名 {
	属性名称:属性的值;
	属性名称:属性的值;
}

⑥ 子元素选择器

标签名 > 子标签名 {
	属性名称:属性的值;
	属性名称:属性的值;
}

⑦ 伪类选择器

标签名:特殊的伪类选择 {
	属性名称:属性的值;
	属性名称:属性的值;
}

4、CSS浮动

浮动的元素会脱离正常的文档流，形成流式布局，在正常的文档流中不占空间

float属性：
 left 向左浮动
 right 向右浮动
clear属性： 清除浮动
 left: 不允许左边浮动
 right: 不允许右边浮动
 both: 不允许两边浮动

5、一些CSS属性

line-height:60px;	<!-- 设置行高 -->
border: 1px solid red;	<!-- 设置边宽 -->
text-decoration: none;	<!-- 清除a标签中文字的下划线 -->
text-align: center;	<!-- 设置文字的对齐方式 -->

6、CSS选择器的优先级

① 按照选择器的搜索精确度

行内样式 ＞ ID选择器 ＞ 类选择器 ＞ 元素选择器

② 按照就近原则

在同一级中，谁的样式离得近就使用谁的样式

7、CSS盒子模型

① 内边距

padding-top:
padding-right:
padding-bottom:
padding-left:
padding: padding-top, padding-right, padding-bottom, padding-left

② 外边距

margin-top:
margin-right:
margin-bottom:
margin-left

8、CSS绝对定位

position:absolute;
top:控制距离顶部的距离
left:控制距离左边的距离