CSS引入方式

最新推荐文章于 2024-09-29 22:01:11 发布

冰逸.itbignyi

最新推荐文章于 2024-09-29 22:01:11 发布

阅读量454

点赞数 1

分类专栏： javaWeb 前端文章标签： css 前端 html5

本文链接：https://blog.csdn.net/jbykmzls/article/details/132494791

版权

javaWeb 同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

前端

12 篇文章 0 订阅

订阅专栏

本文介绍了HTML中的行内样式、内嵌样式（写在`<style>`标签中）和外联样式（通过`.css`文件引入）的应用，以及CSS选择器（包括元素选择器、类选择器和ID选择器）在设置样式中的优先级和用法。

摘要由CSDN通过智能技术生成

行内样式：写在标签的style属性中

<!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>焦点访谈：中国底气</title>
</head>
<body>
    <img src="https://pic2.zhimg.com/80/v2-597a23f8427f41a41dfd2f5b8474d09d_1440w.webp"width="300px"  >新浪
<!--     方式1.行内样式 -->    y
    <h1 style="color: crimson;">焦点访谈：中国底气</h1>
    <hr>
</body>
</html>

内嵌样式：写在style标签中（通常写在head中）

<!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>焦点访谈：中国底气</title>
    <!-- 方式2：内嵌样式 -->
    <style>
        h1{
            color: crimson;
        }
    </style>
</head>
<body>
    <img src="https://pic2.zhimg.com/80/v2-597a23f8427f41a41dfd2f5b8474d09d_1440w.webp"width="300px"  >新浪
    <h1>焦点访谈：中国底气</h1>
    <hr>
</body>
</html>

外联样式：写在一个单独的.css文件中（通过link标签在网页中引入）

<!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>焦点访谈：中国底气</title>
    <link rel="stylesheet" href="./css/news.css">
</head>
<body>
    <img src="https://pic2.zhimg.com/80/v2-597a23f8427f41a41dfd2f5b8474d09d_1440w.webp"width="300px"  >新浪
    <h1>焦点访谈：中国底气</h1>
    <hr>
</body>
</html>

h1{
    color: crimson;
}

颜色表示形式：

表示方式

关键字--------预定义的颜色名---------red，green，blue

rgb表示法-----红绿蓝三原色，每项取值范围：0-255-----rgb（0，0，0），rgb（255，255，255）

十六进制表示法-----#开头，将数字转换成十六进制表示--------#00000000，#ff000000

CSS选择器：用来选取需要设置样式的元素（标签）

元素选择器

/* 元素选择器 */

span{

color: #ff0000;

}

类选择器

<!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>焦点访谈：中国底气</title>
    <style>
        h1{
            color: blue;
        }
       .cla{
            color: #0f0;;
       }
    </style>
</head>
<body>
    <img src="https://pic2.zhimg.com/80/v2-597a23f8427f41a41dfd2f5b8474d09d_1440w.webp"width="300px"  >新浪
    <h1>焦点访谈：中国底气</h1>
    <hr>
    <span class="cla">2023.8.25</span>
    <hr>
</body>
</html>

ID选择器

<!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>焦点访谈：中国底气</title>
    <style>
        h1{
            color: blue;
        }
       #time{
            color: rgb(240, 11, 53);
       }
    </style>
</head>
<body>
    <img src="https://pic2.zhimg.com/80/v2-597a23f8427f41a41dfd2f5b8474d09d_1440w.webp"width="300px"  >新浪
    <h1>焦点访谈：中国底气</h1>
    <hr>
    <span id="time">2023.8.25</span>
    <hr>
</body>
</html>