HTML类 1年前

编程语言
855
HTML类

HTML 类

对 HTML 进行分类(设置类),使我们能够为元素的类定义 CSS 样式。

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

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.


实例

<!DOCTYPE html>
<html>
<head>
<style>
    .cities {
        background-color:black;
        color:white;
        margin:20px;
        padding:20px;
    } 
</style>
</head>
<body>
    <div class="cities">
        <h2>London</h2>
        <p>
        London is the capital city of England. 
        It is the most populous city in the United Kingdom, 
        with a metropolitan area of over 13 million inhabitants.
        </p>
    </div> 
</body>
</html>

分类块级元素

HTML <div> 元素是块级元素。它能够用作其他 HTML 元素的容器。

设置 <div> 元素的类,使我们能够为相同的 <div> 元素设置相同的类:

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.


Paris

Paris is the capital and most populous city of France.

Situated on the Seine River, it is at the heart of the 蝜e-de-France region, also known as the r間ion parisienne.

Within its metropolitan area is one of the largest population centers in Europe, with over 12 million inhabitants.


Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.

The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.


实例

<!DOCTYPE html>
<html>
<head>
<style>
    .cities {
        background-color:black;
        color:white;
        margin:20px;
        padding:20px;
    } 
</style>
</head>
<body>
    <div class="cities">
        <h2>London</h2>
        <p>London is the capital city of England. 
        It is the most populous city in the United Kingdom, 
        with a metropolitan area of over 13 million inhabitants.</p>
    </div>
    <div class="cities">
        <h2>Paris</h2>
        <p>Paris is the capital and most populous city of France.</p>
    </div>
    <div class="cities">
        <h2>Tokyo</h2>
        <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
        and the most populous metropolitan area in the world.</p>
    </div>
</body>
</html>

分类行内元素

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

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

实例

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>
    <h1>My <span class="red">Important</span> Heading</h1>
</body>
</html>
image
EchoEcho官方
无论前方如何,请不要后悔与我相遇。
1377
发布数
439
关注者
2223832
累计阅读

热门教程文档

Spring Cloud
8小节
React
18小节
QT
33小节
Rust
84小节
CSS
33小节