css的引入方式
行内样式：通过style属性
内嵌样式：style标签
外链样式：link标签进行导入css文件
导入样式：@import url(),但是要注意放到style标签内部
1.行内样式：通过style标签
CSS的行内样式是指直接在HTML元素中使用style属性来设置样式。这种方式直接在元素上应用样式，而不是在CSS文件中定义。行内样式的语法如下：
<element style="property: value; property: value; ...">
例如，如果你想给某个段落设置字体颜色和背景颜色，可以这样写：
<p style="color: red; background-color: yellow;">这是一个带有行内样式的段落。</p>
行内样式的优点是直接、简单，不需要额外的CSS文件。但是，它不适合大型项目，因为它使得样式和HTML结构紧密耦合，不利于样式的复用和维护。通常推荐使用内部样式表或外部样式表来组织CSS代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行内样式示例</title> </head> <body> <h1 style="color: blue; font-size: 24px;">这是一个带有行内样式的标题</h1> <p style="color: green; font-weight: bold;">这是一个带有行内样式的段落。</p> <div style="background-color: lightgray; padding: 10px;"> <p>这是一个带有行内样式的div元素内的段落。</p> </div> </body> </html>
2.内嵌样式：style标签
内嵌样式（Inline Styles）是CSS（层叠样式表）的一种使用方式，它允许你在HTML元素中直接通过style属性来设置样式。内嵌样式直接应用于元素，而不是定义在CSS文件中。
例如，在HTML中，你可以这样使用内嵌样式：
<p style="color: red; font-size: 14px;">这是一个内嵌样式的段落。</p>
在这个例子中，<p>标签内的文本颜色被设置为红色，字体大小为14像素。
内嵌样式的优点是简单直接，不需要外部CSS文件，但缺点是样式不能重用，且如果页面上有多个相同的样式，就需要重复编写多次，不利于维护。因此，在实际开发中，通常会使用外部CSS文件或内部样式表来组织样式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ color: aquamarine; font-size: 12px; width: 200px; height: 200px; border: 1px solid red; } p{ color: blueviolet; } </style> </head> <body> <div>这是一个div</div> <p>这是一个段落标签</p> </body> </html>
3. 外链样式：link标签进行导入css文件
外链css是指将css样式定义在一个.css格式的文件中，接着使用html的link标签将该css文件链接到html文档中。外链式css会在网页文件主体装载前装载css文件，因此显示出来的网页从一开始就是带样式的效果的，它不会像导入式那样先显示无样式的网页，然后再显示有样式的网页。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="..\css\demo01.css"> </head> <body> <div>这是一个div</div> <p>这是一个段落标签</p> </body> </html>
div{ color: rgb(169, 219, 53); font-size: 12px; width: 200px; height: 200px; border: 1px solid rgb(7, 105, 218); } p{ color: rgb(139, 18, 70); }
4.导入样式：@import url(),但是要注意放到style标签内部
在HTML中，@import规则用于导入外部CSS样式表。如果你想在<style>标签内部使用@import，你可以这样做：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 在这里使用@import */ @import url('https://example.com/path/to/your/stylesheet.css'); /* 接下来是内部样式 */ body { font-family: Arial, sans-serif; } h1 { color: blue; } </style> </head> <body> <h1>Hello, World!</h1> </body> </html>
在这个例子中，@import规则被放置在<style>标签内部，用于导入一个外部CSS样式表。然后，你可以在@import规则之后继续编写内部样式规则。
但是，@import规则通常放在<style>标签的开始部分，以确保在应用内部样式之前，外部样式表已经被加载。此外，由于@import规则可能会影响页面的加载性能，建议仅在确实需要时才使用它，并且尽量减少使用多个@import规则。
PS:引入方式的优先级：就近原则，距离修饰标签位置近优先级高
5.css的运用位置和常见实例
CSS（层叠样式表）主要用于网页设计中，用于设置HTML元素的样式。CSS可以运用在以下几个位置：
1. 内联样式（Inline Styles）：直接在HTML元素中使用style属性定义样式。
2. 内部样式表（Internal Styles）：在HTML文档的<head>部分使用<style>标签定义样式。
3. 外部样式表（External Styles）：将CSS代码保存在一个单独的.css文件中，然后通过HTML的<link>标签引入。
常见例题：
①. 内联样式：
<p style="color: blue; font-size: 14px;">这是一个内联样式的例子。</p>
②. 内部样式表：
<!DOCTYPE html> <html> <head> <style> p { color: green; font-size: 16px; } </style> </head> <body> <p>这是一个内部样式表的例子。</p> </body> </html>
③. 外部样式表：
/* styles.css */ p { color: red; font-size: 18px; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>这是一个外部样式表的例子。</p> </body> </html>
在实际开发中，推荐使用外部样式表，因为它可以更好地实现样式的复用和维护。
