首页 前端知识 [HTML]层叠样式表CSS

[HTML]层叠样式表CSS

2024-07-08 09:07:06 前端知识 前端哥 294 653 我要收藏

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>

        在实际开发中,推荐使用外部样式表,因为它可以更好地实现样式的复用和维护。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13852.html
标签
评论
发布的文章

html左右两栏布局实现

2024-08-04 00:08:50

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!