Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So wählen Sie Tags in CSS aus

WBOY
Freigeben: 2021-12-03 16:34:56
Original
6206 Leute haben es durchsucht

So wählen Sie Tags in CSS aus: 1. Verwenden Sie den ID-Selektor, die Syntax ist „#id name {css code;}“ 2. Verwenden Sie den Klassenselektor, die Syntax ist „.class name {css code;}“ 3. Verwenden Sie den Tag-Selektor, die Syntax lautet „Tag-Name {CSS-Code;}“. 4. Verwenden Sie den Platzhalter-Selektor, die Syntax lautet „*{CSS-Code;}“.

So wählen Sie Tags in CSS aus

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

So wählen Sie Tags in CSS aus

Es gibt vier Möglichkeiten, Tags in CSS auszuwählen, und es gibt auch 4 Selektoren.

1. Der ID-Selektor

findet die entsprechende eindeutige Bezeichnung in der aktuellen Schnittstelle basierend auf dem angegebenen ID-Namen und legt dann das Attribut

#id名称 {
属性:值;
}
Nach dem Login kopieren
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>id选择器</title>
    <style>
        #p1 {
            color: red;
        }
        #p2 {
            color: green;
        }
        #p3 {
            color: blue;
        }
    </style>
</head>
<body>
<p id="p1">大多数人的帅,都是浮在表面的,是外表的帅</p>
<p id="p2">而EGON,不仅具备外表帅,内心更是帅了一逼</p>
<p id="p3">EGON就是我,我就是EGON</p>
</body>
</html>
Nach dem Login kopieren

2 fest Klassenname, suchen Sie das entsprechende Tag in der aktuellen Schnittstelle und legen Sie dann die Attribute fest

  .类名称 {
属性:值;
}
Nach dem Login kopieren

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>id选择器</title>
    <style>
        .p1 {
            color: red;
        }
        .p2 {
            color: green;
        }
        .p3 {
            color: blue;
        }
    </style>
</head>
<body>
<p class="p1">大多数人的帅,都是浮在表面的,是外表的帅</p>
<p class="p2">而EGON,不仅具备外表帅,内心更是帅了一逼</p>
<p class="p3">EGON就是我,我就是EGON</p>
</body>
</html>
#练习
第一行与第三行的颜色都是红色
第一行与第二行的字体大小都是50px
第二行与第三行内容有个下划线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>id选择器</title>
    <style>
        .p1 {
            color: red;
        }
        .p2 {
            font-size: 50px;
        }
        .p3 {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<p class="p1 p2">第一行内容</p>
<p class="p2 p3">第二行内容</p>
<p class="p1 p3">第三行内容</p>
</body>
</html>
Nach dem Login kopieren

3. Suchen Sie anhand des angegebenen Tag-Namens alle Tags mit diesem Namen in der aktuellen Schnittstelle. und legen Sie dann die Attribute fest

标签名称 {
属性:值;
}
Nach dem Login kopieren

Das Beispiel lautet wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style type="text/css">
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>EGON美丽的外表下其实隐藏着一颗骚动的心</p>
    <ul>
        <li>
            <ul>
                <li>
                    <ul>
                        <li>
                            <p>这颗心叫做七巧玲珑心,男人吃了会流泪,女人吃了会怀孕</p>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>
Nach dem Login kopieren

4. Platzhalterauswahl

Alle Tags auswählen

   * {
        属性:值;
    }
Nach dem Login kopieren
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通配符选择器</title>
    <style type="text/css">
        * {
            color: red;
        }
    </style>
</head>
<body>
    <h1 >我是标题</h1>
    <p >我是段落</p>
    <a href="#">我是超链接</a>
</body>
</html>
Nach dem Login kopieren

(Lernvideo-Sharing: css-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo wählen Sie Tags in CSS aus. 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