在前端发展之旅中，重要的三件事。 HTML, CSS, and javascript。在本文中，我们将介绍CSS的基础知识及其在网页上的工作方式，以及为什么它在网站中是重要的事情。
什么是CSS？
CSS：级联样式表
CSS是一种用于造型网站的语言，它有助于更改网站的外观，并为网页提供了惊人的外观。坦率地说，CSS仅用于定位元素或标签并更改网站或网页的外观
css是一种样式表语言，用于描述用标记语言编写的文档的外观和格式。它为HTML提供了附加功能。它通常与HTML一起使用，以更改网页和用户界面的样式。它也可以与任何类型的XML文档一起使用，包括普通XML，SVG和XUL。 （来源：Javapoint）
CSS如何工作？
您了解其工作原理的更好方式，我将举一个例子：
首先，我们创建一个html文件并在VS代码中打开文件，您将使用不同的IDE，例如Sublime Text，Atom等。然后，我们在文件中编写一个元素，使用CSS选择元素，然后更改某些外观，例如背景颜色等
输出 ：
使用CSS：
输出 ：
一旦您加载并解析了HTML内容和CSS样式。首先，Web浏览器将它们转换为DOM（Document Object Model）。一旦DOM结合了Web文档的内容和样式，并且是计算机内存中Web文档的表示形式，浏览器将显示内容。
我们可以以3种不同的方式添加CSS文件：
-
外部CSS文件：
在外部CSS文件中，我们可以创建一个CSS文件，然后将CSS文件链接到HTML文件。我们在现实生活项目或编程世界中使用的方法。
css文件扩展名是
.css
- 内部CSS文件：
在此方法中，我们可以在HTML页面内编写CSS代码或使用<style>标签文档。
- 内联风格：
在此方法中，我们可以使用style属性直接在HTML元素内部编写CSS规则或样式。
CSS选择器：
选择器仅用于在网页或Web文档上选择元素或标签。在上面的示例中，我们选择H1标签并使用一些样式。
h1{
background-color:blue;
}
这里H1是元素选择器。
在CSS中，我们使用不同的CSS选择器：
通用选择器：
此选择器用于造型HTML文档中存在的所有元素。
*是通用选择器。
CSS通用选择器在HTML页面中选择任何类型的元素。
*{
color: blue;
}
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iwritecode</title>
<style>
*{
background-color: blueviolet;
}
</style>
</head>
<body>
<h1>Hello Smruti Ranjan Nayak,</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos eligendi ratione odit similique nostrum maiores dolor quas! Ipsum reiciendis soluta assumenda nesciunt dolores maiores amet pariatur ullam, culpa et odit molestiae aliquam! Molestiae optio voluptates quo? Nemo fugiat repellat eos vel necessitatibus, sequi, unde eligendi praesentium id officiis quam saepe?</p>
<h2>I am a</h2>
<ul>
<li>Lorem, ipsum.</li>
<li>Lorem ipsum dolor sit.</li>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum.</li>
</ul>
</body>
</html>
在CSS之前：
CSS之后：
个人或元素选择器：
在此选择器中，我们在我们要样式的网页上选择一个特定元素。
在HTML文件中，我们仅选择h1标签，如果我们将颜色从黑色更改为绿色，则在网页内部，所有H1标签所有H1标签都会从黑色变为绿色。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iwritecode</title>
<style>
h1{
background-color: blueviolet;
}
</style>
</head>
<body>
<h1>Hello Smruti Ranjan Nayak,</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos eligendi ratione odit similique nostrum maiores dolor quas! Ipsum reiciendis soluta assumenda nesciunt dolores maiores amet pariatur ullam, culpa et odit molestiae aliquam! Molestiae optio voluptates quo? Nemo fugiat repellat eos vel necessitatibus, sequi, unde eligendi praesentium id officiis quam saepe?</p>
<h2>I am a</h2>
<ul>
<li>Lorem, ipsum.</li>
<li>Lorem ipsum dolor sit.</li>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum.</li>
</ul>
<h1>I am from,</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos eligendi ratione odit similique nostrum maiores dolor quas! Ipsum reiciendis soluta assumenda nesciunt dolores maiores amet pariatur ullam, culpa et odit molestiae aliquam! Molestiae optio voluptates quo? Nemo fugiat repellat eos vel necessitatibus, sequi, unde eligendi praesentium id officiis quam saepe?</p>
</body>
</body>
</html>
输出：
类和ID选择器：
这些选择器用于选择我们要样式的内容。ID和Class都是CSS元素选择器，用于根据其分配的名称来识别元素。 CSS ID和类选择器是CSS中最常用的选择器。
我们可以将类应用于各种元素，以便在单页上多次。该类分配给一个元素，其名称以
.开头，然后是类的名称。页面上的ID是唯一的，我们只能将其应用于一个特定元素。 ID的名称以
#符号开始，然后是唯一的ID名称。
#idName{
color:blue;
}
.className{
color:green;
}
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iwritecode</title>
<style>
.heading {
background-color: blueviolet;
}
#green {
color: green;
}
</style>
</head>
<body>
<h1 class="heading">Hello Smruti Ranjan Nayak,</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos eligendi ratione odit similique nostrum
maiores dolor quas! Ipsum reiciendis soluta assumenda nesciunt dolores maiores amet pariatur ullam, culpa et
odit molestiae aliquam! Molestiae optio voluptates quo? Nemo fugiat repellat eos vel necessitatibus, sequi, unde
eligendi praesentium id officiis quam saepe?</p>
<h2>I am a</h2>
<ul>
<li>Lorem, ipsum.</li>
<li>Lorem ipsum dolor sit.</li>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum.</li>
</ul>
<h1 id="green">I am from,</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos eligendi ratione odit similique nostrum
maiores dolor quas! Ipsum reiciendis soluta assumenda nesciunt dolores maiores amet pariatur ullam, culpa et
odit molestiae aliquam! Molestiae optio voluptates quo? Nemo fugiat repellat eos vel necessitatibus, sequi, unde
eligendi praesentium id officiis quam saepe?</p>
</body>
</body>
</html>
输出：
非常感谢您的阅读。
sm8uti