CSS基础学习01

1. 什么是CSS

CSS叫层叠样式表(Cascading Style Sheets)

它是用来定义html元素的显示样式用的

HTML标记是用来显示内容，至于这个内容长成什么样子HTML元素无法再进一步控制

CSS被用来进一步控制html元素的具体显示样子

有HTML的时候一定会有CSS对其内容进行修饰

2.如何在html文件中使用css?

2.1.内联定义 (Inline Styles)

在html元素的开始标记中通过style属性来为当前的html元素设置样式

格式:

<html标记 style="css属性名称1:属性值1;css属性名称2:属性值2"><html标记>

<p style="font-size:30px;color:chartreuse;background-color:red">
			测试css的内联定义 (Inline Styles)方式
</p>

显示如下：

 缺点：

当为当前元素所设置的样式比较丰富的时候，会使得这个html元素变得很长，以后修改的时候不容易查找

这是因为这个缺点，所以我们一般不使用这种方式

2.2.内部样式块 (Embedding a Style Block)

在html网页的head元素中使用style标记，来设置对具体html元素的样式设置

实际上就是将定义在html元素中的style属性设置的样式，统一抽取到head标记中用style标记来统一管理

格式：

<style type="text/css">

css选择器{

css属性名称1:属性值1;

css属性名称2:属性值2;

}

</style>

<style>
			span {
				font-size: 30px;
				color: red;
				background-color: black;
			}
		</style>
<span>测试css的内部样式块 (Embedding a Style Block)</span>

显示如下：

 缺点：

当我们设置的样式很多的时候，会让html网页的头部显得很多

这是因为这个缺点，所以我们一般当需要设置的样式很少的时候使用

 2.3. 链入外部样式表文件 (Linking to a Style Sheet)

在html文件之外建立一个独立的样式表文件【.css】,在html文件中的head标记中通过link标记将独立的样式表文件连接进入html文件

具体步骤: