Heim > Web-Frontend > CSS-Tutorial > So legen Sie die Hintergrundfarbe für Zeilenelemente in CSS fest

So legen Sie die Hintergrundfarbe für Zeilenelemente in CSS fest

WBOY
Freigeben: 2021-12-06 16:41:25
Original
6748 Leute haben es durchsucht

设置方法:1、利用“background-color”属性设置,只需要给行元素添加“background-color:颜色值;”样式即可;2、利用background属性设置,只需要给行元素添加“background:颜色值;”样式即可。

So legen Sie die Hintergrundfarbe für Zeilenelemente in CSS fest

本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。

css如何给行元素设置背景颜色

在css中,可以利用background-color属性来给行元素设置背景颜色,示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .tr1{
        background-color:red;
    }
    </style>
</head>
<body>
<table border="1">
  <tr class="tr1">
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
</body>
</html>
Nach dem Login kopieren

输出结果:

So legen Sie die Hintergrundfarbe für Zeilenelemente in CSS fest

或者可以直接使用background属性来设置背景颜色,示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .tr1{
        background:red;
    }
    </style>
</head>
<body>
<table border="1">
  <tr class="tr1">
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
</body>
</html>
Nach dem Login kopieren

输出结果与上述示例相同。

(学习视频分享:css视频教程

Das obige ist der detaillierte Inhalt vonSo legen Sie die Hintergrundfarbe für Zeilenelemente in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage