今天小编给大家分享一下html如何连接css的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
一、关于HTML和CSS
HTML是网页的基础结构，可以理解为房子的骨骼，它定义了网页中的内容、排版、标签和链接等。CSS则是样式表，可以理解为房子的装修，它控制网页的外观、布局和颜色等。
二、在HTML中添加CSS
在HTML文档中添加CSS样式表有两种方式，分别是内部样式和外部样式，下面将分别进行介绍：
内部样式
内部样式是在HTML文档中的<head>和</head>标签之间添加<style>标签，之后在<style>标签内编写CSS样式代码。例如：
<html>
<head>
<title>My Website</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h2 {
color: #333333;
}
</style>
</head>
<body>
<h2>Welcome to my website</h2>
<p>This is the home page of my website</p>
</body>
</html>在上面的代码中，<style>标签包含了CSS样式，其中“body”标签控制了网页的背景色和字体，而“h2”标签控制了标题颜色。
2.外部样式
外部样式是将CSS代码放在一个独立的CSS文件中，之后通过HTML文档的<link>标签将CSS文件导入到HTML文档中。例如：
<html> <head> <title>My Website</title> <link rel="stylesheet" type="text/css" href="https://www.maopiaopiao.com">
在上面的代码中，<link>标签指向了一个名为“style.css”的CSS文件，HTML代码将使用这个来控制网页的样式。
三、CSS选择器
要了解如何创建CSS样式，必须首先了解CSS选择器。选择器是一种指定要添加样式的HTML元素的方法。以下是一些常见的CSS选择器：
1.元素选择器
元素选择器是使用标签名称作为选择器的一种方法。例如，下面的CSS代码将所有的段落元素设置成颜色为红色：
p {
color: red;
}2.类选择器
类选择器是给HTML元素分配类名称，这些类名称可以在样式表中使用来指定样式。例如，下面的CSS代码将所有类属性为“my-class”的元素设置为红色背景色和16pt的字体大小：
.my-class {
background-color: red;
font-size: 16pt;
}在HTML代码中，可以通过添加class属性将此样式应用到元素上，方式如下：
<div class="my-class"> <p>Hello, this is a paragraph</p> </div>
ID选择器
ID选择器是为一个HTML元素指定唯一的ID名称，通过在样式表中使用此名称，可以为ID元素设置样式。例如，下面的CSS代码将ID属性值为“my-id”的元素设置为蓝色背景和18pt字体大小：
#my-id {
background-color: blue;
font-size: 18pt;
}在HTML代码中，可以通过添加id属性将此样式应用到元素上，方式如下：
<div id="my-id"> <p>Hello, this is a paragraph</p> </div>