CSS-Stilauswahl-CSS-Tutorial-php.cn

CSS-Stilauswahl

高洛峰

Freigeben： 2017-02-14 15:04:32

Original

1736 Leute haben es durchsucht

css ist die Abkürzung für English Cascading Style Sheets, die als Cascading Style Sheets bezeichnet wird und zur Verschönerung der Seite verwendet wird. Es gibt drei Arten der Existenz:

Element-Inline, Seiteneinbettung und externe Einführung. Vergleichen Sie die Vor- und Nachteile der drei Methoden.

Syntax: style='key1:value;key2:value2;'

Verwenden Sie style='xx:xxx;' in Tags

In Seite einbetten: < ;style type='text/css'> Block

Einführung externer CSS-Dateien

Notwendigkeit: Der Künstler wird die Seite bearbeiten Der Entwickler ist für die Farbanpassung und Verschönerung von Bildern verantwortlich und muss wissen, wie dies erreicht wird.

Sehen Sie sich an, wie Sie die oben genannten drei Methoden verwenden:

1. Verwenden Sie Block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/css"; charset="UTF-8">
    <title>页面一</title>
    <link rel="stylesheet" href="commom.css" />
    <style>
        .logo{
            background-color:red;
        }
    </style>
</head>
<body>
    <div class=&#39;logo&#39;>123456</div>
    <div class=&#39;logo&#39;>aaa</div>
</body>
</html>

Nach dem Login kopieren

in die Seite ein. Fügen Sie einen Codeblock, um einen Stil anzupassen, und dann

im folgenden Code wiederholt aufrufen. 3. Externe CSS-Dateien einführen

Falls vorhanden Mehrere HTML-Dateien müssen auf benutzerdefinierte CSS-Stile verweisen. Gemäß der zweiten Methode müssen Sie in jeder HTML-Datei einen Stil definieren. Um dieses Problem zu lösen, können Sie eine Datei definieren, einen benutzerdefinierten Stil schreiben und diesen dann aufrufen Stil aus der Datei.

Stil wird wie folgt geschrieben:

<style>
    .logo{
        background-color:red;
    }
    #logo{
        background-color:red;
    }
    a,div{
        color:red;
    }
    a div{
        color:red
    }
    input[type=&#39;text&#39;]{
    color:blue
    }
    .logo a,.logo p{
        font-size:56px;
    }
</style>

Nach dem Login kopieren

1. Wenn der Klassenselektor

.logo class='logo' anzeigt, referenzieren Sie den Stil

2. ID-Auswahl

# Wenn das Logo id='logo' anzeigt, verweisen Sie auf diesen Stil

3 Selektor Selektor

a, div bedeutet, dass alle a-Tags und div-Tags auf diesen Stil verweisen

4. Assoziationsselektor

ein div darstellt eine hierarchische Beziehung, d. h. alle div-Tags unterhalb des a-Tags wenden diesen Stil an.

5. Attributselektor

input[type='text'], Attribut-Tag, das angibt, dass alle Tags vom Typ „text“ auf diesen Stil verweisen

6 .logo a, .logo p bedeutet, wenn class='logo', alle folgenden a-Tags und wenn class='logo', alle Beziehen Sie sich nach dem p-Tag auf den Stil