CSS入门：HTML及CSS对应设置

-小白七七-

已于 2023-04-26 17:03:56 修改

阅读量303

点赞数

文章标签： html 前端 css

于 2023-04-26 16:55:12 首次发布

本文链接：https://blog.csdn.net/Charmmy77/article/details/130388939

版权

1、CSS引入方式

内嵌式

<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>Document</title>
    <!--以下为在style标签中设置p标签内容字体颜色为红色的代码-->
    <style>
        p {
            color: red;
        }
    </style>
</head>

直接在style标签下编写，此处p为选择器，在第二节中解释。

.css文件外接引入

<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>Document</title>
    <!--以下为外接引入style.css文件的代码-->
    <link rel="stylesheet" href="./style.css">
</head>

在<head>标签下使用link标签引入同一目录下已编写好的style.css文件

行内式引入

<body>
    <div style="color:gold; font-size:14px">这是一个div</div>
</body>

在body的标签中直接设置其属性style的值

2、选择器类型

标签选择器

CSS文件中标签选择器的设置方法

p {
color: red;
font-size: 60px;
}

对应HTML中标签的设置：

<p>这个标签的名字就是p</p>
<p>如果使用标签选择器设置p标签的文本颜色为蓝色，所有p标签都会被设置</p>
<div>这个标签的名字为div</div>

类选择器

CSS文件中类选择器的设置方法，以下我们设置了两个类red和size，类选择器的格式为

.类名

.red {
    color: red;
}

.size {
    font-size: 60px;
}

对应HTML中类的设置，比如我们想要让某个标签使用我们设置的字体样式为红

<p class="red"> 给这个标签设置为red类，就能使用css中为red类设置的字体样式</p>
<p class="red size"> 给这个标签设置为red类，就能使用css中为red,size类设置的字体样式</p>

id 选择器

CSS文件中id选择器的设置方法，格式为 #id

#one {
    color: blue;
}

对应HTML中id的设置，比如我们想要让某个标签使用我们设置的字体样式为蓝色

<div id="one"> 这个部分id 为 one，字体会变成蓝色 </div>

注意：id 主要是用于js的编写，不是为字体样式等服务的。

-小白七七-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS入门：HTML及CSS对应设置

CSS入门：引入方式及选择器
复制链接

扫一扫

CSS入门：HTML及CSS对应设置

1、CSS引入方式

2、选择器类型

“相关推荐”对你有帮助么？