▶学完了 HTML 的基础知识，我们就要学习CSS的相关知识啦！为了让我们的网页更更更更更漂亮，那就立刻开始学习吧↓↓↓

CSS基础学习

CSS

1. css基础

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

样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

CSS 规则由两个主要的部分构成：

选择器

，以及一条或多条

声明

:
选择器通常是需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性是希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。CSS声明以分号(;)结束，声明以大括号({})括起来。

示例+详解：

p
{
    color:red;/*color:属性；red:值*/
    text-align:center;/*color:属性；red:值*/
}

css 注释形式：
/*注释内容*/

2. css id和class选择器

如果你要在HTML元素中设置CSS样式，你需要在元素中设置”id” 和 “class”选择器。

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，以 “#” 来定义。
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用，以一个点”.”号显示。

示例+详解：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
#para1/*定义id选择器*/
{
	text-align:center;
	color:red;
} 
.para2/*定义class选择器*/
{
	text-align:center;
	color:blue;
} 
</style>
</head>
<body>
<p id="para1">Hello World1!</p> <!--为标有特定id的HTML元素指定para1的样式-->
<p class="para2">Hello World2!</p><!--描述一组元素的样式均为para2-->
<p class="para2">Hello World3!</p>
<p>Hello World4!</p><!--默认普通样式-->
</body>
</html>

运行结果如图：

id和class选择器

注意： ID属性不要以数字开头；类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 浏览器中起作用。

3. css 样式表

浏览器会根据一个样式表来格式化 HTML 文档。插入样式表的方法有三种:

外部样式表、内部样式表和内联样式

。

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。因此在这里就不过多介绍内联样式了，学会内部样式表和外部样式表就基本够用啦~♥♥♥

3.1 内部样式表

当单个文档需要特殊的样式时，就应使用内部样式表，用

style 标签

在文档头部定义内部样式表。

示例+详解：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内部样式表</title>
		<style>
		/*style标签里所包含的内容即为定义的内部样式，可使HTML元素变为指定样式*/
		.h1{
		color:purple;
		text-align:center;
		}
		.p{
		color:royalblue;
		text-align:center;
		}
		</style>
	</head>
	<body>
		<h1 class="h1">插入样式表的方法:</h1>
		<p class="p">内部样式表</p>
		<p class="p">外部样式表</p>
		<p class="p">内联样式</p>
	</body>
</html>

运行结果如图：

内部样式表

3.2外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。外部样式表可通过改变一个文件来改变整个站点的外观。每个页面使用

link 标签

链接到样式表。

浏览器会从以 .css 扩展名进行保存的文件中读到样式声明，并根据它来格式文档。

注意：文件不能包含任何的 html 标签！

示例+详解：
Step 1：在项目里新建一个以“外部样式表”命名的 html 文件，写入所需内容的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部样式表</title>
		<link rel="stylesheet" type="text/css" href="外部样式表css/style.css">
	</head>
	<body>
		<h1 class="center">这是主页</h1>
		<p id="para1">id 段落居中。</p> 
		<p class="center">段落居中。</p>
	</body>
</html>

Step 2：在项目里新建一个以“外部样式表css”命名的目录；
Step 3：在目录里新建一个以“style”命名的 css

文件，写入所需样式的代码：

body
{
	background-color:#d0e4fe;/*设置背景色*/
}
h1/*class选择器*/
{
	color:orange;/*设置颜色*/
	text-align:center;
}
p/*class选择器*/
{
	font-family:"Times New Roman";/*设置字体*/
	font-size:20px;/*设置字号大小*/
}
#para1/*id选择器*/
{
	text-align:center;
	color:red;
} 
.center/*所有拥有center类的HTML元素均为居中*/
{
	text-align:center;
}

运行效果如图：

外部样式表

4. css 背景

CSS 属性定义背景效果:

background-color 属性定义元素的背景颜色。
background-image 属性定义元素的背景图像。
background-repeat 属性设置背景图像的定位、平铺方向&不平铺。
background-attachment 属性指定一个固定的背景图像。
background-position 属性改变图像在背景中的位置。

示例+详解：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景</title>
		<style>
		h1
		{
			background-color:#6495ed;
		}
		p
		{
			background-color:#e0ffff;
		}
		div
		{
			background-color:#b0c4de;
		}
		#para1
		{
			background-color:yellow;
		}
		</style>
		</head>
		<body>
		<h1>CSS background-color：</h1>
		<div>
		文本1插入在div元素中~
		<p>此段落有自己的背景颜色☺</p>
		文本2与文本1在同一个div中哦！
		<p id="para1">此段落也有自己的背景颜色☺</p>
		</div>
		</body>
</html>

运行成果如图：

5. css 链接样式

注意： a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。 a:active 必须在 a:hover 之后。

示例+详解：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style>
	a:link {color:#000000;}      /* 未访问链接时：黑色*/
	a:visited {color:#00FF00;}  /* 已访问链接：绿色*/
	a:hover {color:#FF00FF;}  /* 鼠标移动到链接上：粉色*/
	a:active {color:#0000FF;}  /* 鼠标点击时：蓝色*/
	</style>
	</head>
	<body>
	<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
	</body>
	</html>

6. css列表

CSS 列表属性作用如下：

设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像

示例+详解：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>列表</title> 
<style>
ul.a {list-style-type:circle;}/*无序标记的形式为圆圈*/
ul.b {list-style-type:square;}/*无序标记的形式为正方形*/
ol.c {list-style-type:upper-roman;}/*有序标记的数字为古罗马数字*/
ol.d {list-style-type:lower-alpha;}/*有序标记的数字为英文字母*/
</style>
</head>
<body>
<p>无序列表实例:</p>
<ul class="a">
  <li>无</li>
  <li>序</li>
</ul>
<ul class="b">
  <li>列</li>
  <li>表</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">
  <li>有</li>
  <li>序</li>
</ol>
<ol class="d">
  <li>列</li>
  <li>表</li>
</ol>
</body>
</html>

运行结果如图：

★CSS的学习并没有随本篇文章结束哦，敬请期待下一篇更精彩有趣的内容吧★

CSS后续来啦：

CSS基础——学习周记4

！喜欢的话不要忘记【一键三连】哦！撒花花啦~

原文链接：https://blog.csdn.net/weixin_54919878/article/details/114993634