HTML设置类

最新推荐文章于 2024-03-16 01:30:00 发布

asiaqi

最新推荐文章于 2024-03-16 01:30:00 发布

阅读量1k

点赞数 2

分类专栏： HTML asiaqi每日打卡文章标签： html 前端

本文链接：https://blog.csdn.net/m0_62200674/article/details/125610087

版权

asiaqi每日打卡同时被 2 个专栏收录

17 篇文章 2 订阅

订阅专栏

HTML

7 篇文章 0 订阅

订阅专栏

类

对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。

为相同的类设置相同的样式，或者为不同的类设置不同的样式。

大白话：把多个属性和属性值打包成的包裹可以作为（指定元素）的类

<head>
<style>
<!--不要以数字为开头命名类-->
.example1{  
	color:blue;
}  <!--这个类可以给所有能用class属性的元素使用-->
h1.example2{  
	text-align:center;
}  <!--这个类只可以给h1使用，且不是h1就默认生效的-->
.note{
	background-color:black;
	color:white;
}
</style>
</head>

class属性

class 属性规定元素的类名（classname）。

可以给 HTML 元素赋予多个 class，例如：<element class=“value1 value2”>。这么做可以把若干个 CSS 类合并到一个 HTML 元素。

class 属性不能在以下 HTML 元素中使用：base, head, html, meta, param, script, style 以及 title。

大白话：用在元素（标签）里面，使用类

此处使用的类见上面的示例代码

<h1 class="example1 example2">A HEADER</h1>
<p class="example1">hello world</p>

<div>元素

<div> 可定义文档中的分区或节（division/section）,把文档分割为独立的、不同的部分，一种添加结构的通用机制。浏览器会在前后放置一个换行符
[[HTML div元素]]

<span>元素

<span> 元素是行内元素，能够用作文本的容器。

设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式。

完整的示例代码

<html>
<head>
    <title>Document</title>

    <style>

    span.important{

        color:palevioletred;

        font-weight: bold;

    }

    h1.header{

        color:gold;

        text-align:center;

    }

    .note{

        background-color:black;

        color:white;

        margin:50px;

        padding:40px;

        font-size:20px;

    }

    </style>

</head>

<body>

<h1 class="header">example</h1>

<div class="note">

<h1><span class="important">静夜思</span></h1>

<pre>

床前明月光,

疑是地上霜。

举头望明月,

低头思故乡。

</pre>

</div>

<div class="note">

<h1><span class="important">绝句</span></h1>

<pre>

两个黄鹂鸣翠柳，

一行白鹭上青天。

窗含西岭千秋雪，

门泊东吴万里船。

</pre>

</div>

</body>

</html>