CSS:知识详解

css简述

CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

作用及优势：
1.美化网页，提供了丰富的样式
2.与HTML代码分离，降低了代码耦合性

CSS的三种引入方式

1.行内引入：

<p style="color: red;">举个栗子叭</p>

特点：只能为指定元素添加样式

2。内部引入：

<style type="text/css">
			p{
			 color: green;	
			}
		</style>

特点：只能在该HTML文件中使用、

3.外部引入：

在css目录创建test.css文件：
p{
	color: red;	
}
可以在多个HTNL文档中引入该样式：
方式一：<link  href="../css/demo.css" />
方式二：
        <style>
			@import url("../css/demo.css");
		</style>

特点：可以在多个HTML文档中使用

注：由于html文档加载是由上而下的，所以下面的样式会覆盖上面的样式。

CSS选择器

元素选择器

根据元素/标签名进行选择
格式：
div{内容}

类名选择器

根据标签class值进行选择
格式：
.class值{内容}

ID选择器

根据标签id值进行选择
格式：
#id值{内容}

注：
1.id值在文档中是唯一的
2.由属性名和属性值构成，属性名和属性值用 “:”隔开
3.属性值有多个 ，值与值之间用 空格隔开
4.多个属性之间用";"隔开

CSS样式

边框背景样式

所有的HTML标签都有边框，默认边框不可见

属性名	属性说明
border	边框
width	宽度
height	高度
background-color	背景颜色
background-image	背景图片
background-repeat	平铺方式
no-repeat	不平铺

字体

• font-size 字体大小
• color 颜色

布局

float（浮动）

应用场景：通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动属性
格式

选择器{
	float:属性值
}

属性名	属性说明
none	元素不浮动
left	元素向左浮动
right	元素向右浮动

注：因为元素设置浮动属性后，会脱离原有文档流（会脱离原有的板式），从而会影响其他元素的样式，所以设置浮动以后，页面样式需要重新调整

clear（清除浮动）

应用场景：
由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。如果要避免影响，需要使用clear属性进行清除浮动。
格式

选择器{
	clear:属性值
}

属性名	属性说明
both	同时清除左右两侧浮动的影响
left	清除左侧浮动的影响
right	清除右侧浮动的影响

display（转换）

HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块级元素（div）和行内元素(span)。

块级元素：以区域块方式出现。每个块标签独自占据一整行或多整行。块结束会自动换行，可以设置宽高

行内元素：根据内容多少来占用行内空间，不会自动换行，不可以设置宽高

常见的行内元素：
	<span>、<font>、<a>
常见的块级元素：
	<div>、<p>、<hn>

1、块级元素转行内元素
display：inline(显示当前元素为行内元素)

2、行内元素转块级元素
display：block(显示当前元素为块级元素)

3、隐藏元素
display：none 隐藏当前元素(不再占用空间)

CSS盒子模型

概念引入：所有的HTML元素，我们都可以看成一个四边形，即一个盒子。用CSS来设置元素盒子的 内边距、边框 和 外边距 的样式的方式，相当于设置盒子的样式，所以我们将其称之为 盒子模型

边框（border）可以设置：

• border-top:上边框
• border -right:右边框
• border -bottom:下边框
• border -left:左边框

内边距（padding）可以设置：

• padding-top:上边距
• padding-right:右边距
• padding-bottom:下边距
• padding-left:左边距

外边距（margin）可以设置：

• margin-top:上边距
• margin -right:右边距
• margin -bottom:下边距
• margin -left:左边距