CSS简介

层叠样式表 (英文全称：Cascading Style Sheets) 是一种用来表现 HTML（标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 不只能够静态地修饰网页，还能够配合各类脚本语言动态地对网页各元素进行格式化。
CSS 可以对网页中元素位置的排版进行像素级精确控制，支持几乎全部的字体字号样式，拥有对网页对象和模型样式编辑的能力。css

选择器 {
     声明1;
     声明2;
    }

复制代码

详细样例：html

h1 {
    font-size:12px;
    color:#F00;
}

复制代码

CSS 的最后一条声明后的 “;” 可写可不写，可是，基于 W3C 标准规范考虑，建议最后一条声明的结束“;” 都要写上。markdown

基本用法——给元素添加样式

行内样式

经过直接在元素上写个 style 属性字体

<h1>改变标题颜色</h1>

复制代码

这个语句的效果就是调整标题的颜色spa

运行效果：
3d

内部样式

经过选择器，选择当前的文档中的元素，统一添加样式code

<style type="text/css">
  选择器{
    样式的属性名：属性值;
  }
  h1{
      color:red;
  }
</style>

<h1>内容</h1>

复制代码

完整样例代码：orm

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			h1{
			    color: red;
			  }
		</style>
		<title></title>
	</head>
	<body>
		<h1>内容</h1>
	</body>
</html>

复制代码

效果截图：
htm

这样咱们就经过内部样式的方式来修饰了 h1。对象

外部样式

单独将 style 标签中的内容统必定义在一个 css 文件中，css 文件中，不须要写 style 标记，直接写样式便可。

定义样式 css 文件

CSS 代码保存在扩展名为. css 的样式表中. HTML 文件引用扩展名为. css 的样式表

h1{
   color:red;
}

复制代码

在 html 中引入 css 文档

<head>
  ……
<link href="css文件的位置" rel="stylesheet" type="text/css" />
……
</head>


复制代码

<h1>须要样式的标记</h1>

复制代码

样例：

↓这个是 css 文件

↓这个是 html 代码

05.html 文件经过 <link href="css/h1red.css" rel="stylesheet" type="text/css" />这句代码调用同级文件夹 css 中的 h1red.css 的 css 文件，来对 h1 标题进行颜色修改

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<link href="css/h1red.css" rel="stylesheet" type="text/css" />
		
	</head>
	<body>
		<h1>须要样式的标记</h1>
	</body>
</html>

复制代码

效果截图：

标签选择

<h1>一级标题</h1>

复制代码

h1{
    color: cornflowerblue;
}

复制代码

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			h1{
				color: blue;
			}
		</style>
	</head>
	<body>
		<h1>一级标题</h1>
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h2>二级标题</h2>
		<h2>二级标题</h2>
	</body>
</html>

复制代码

效果截图：

从上面的效果截图咱们能够全部的一级标题都变成了蓝色，由于咱们对全部的 h1 标签都进行了设置颜色，这就是标签选择。

类选择

<h1>一级标题</h1>
<h2>二级标题</h2>

复制代码

.colorblue{
    color: cornflowerblue;
}

复制代码

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.colorblue{
			    color: cornflowerblue;
			} 
		</style>
	</head>
	<body>
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h2>二级标题</h2>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
	</body>
</html>

复制代码

效果截图：

从上图咱们能够发现全部的 class=“colorblue” 的标题都是蓝色，不管是几级标题，而其余的非 colorblue 类都没有变颜色，这就是对类进行选择。

id 选择

<h2>二级标题</h2>

复制代码

#idh2{
    color: red;
}

复制代码

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#aa{
			    color: red;
			}
		</style>
	</head>
	<body>
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h2>二级标题</h2>
	</body>
</html>


复制代码

运行效果截图：

经过上面的截图，咱们不难发现只有只有 id=“aa” 的标题变了颜色，与是几级标题无关，只看是否是 id=“aa” ，这就是 id 选择

写做不易，若是看完对你有帮助，感谢点赞支持！

加油！

共同努力！

Keafmd

CSS入门基础（样式，css文件，选择器）

CSS简介

基本用法——给元素添加样式

行内样式

内部样式

外部样式

定义样式 css 文件

在 html 中引入 css 文档

标签选择

类选择

id 选择