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>在实际开发中，推荐使用外部样式表，因为它可以更好地实现样式的复用和维护。
3445
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
