Heim > Web-Frontend > CSS-Tutorial > Ausführliche Erläuterung der Unterschiede zwischen der grundlegenden CSS-Stylesheet-Klassifizierung und der Selektor-Klassifizierung

Ausführliche Erläuterung der Unterschiede zwischen der grundlegenden CSS-Stylesheet-Klassifizierung und der Selektor-Klassifizierung

高洛峰
Freigeben: 2017-03-16 11:17:24
Original
1627 Leute haben es durchsucht

1. 🎜> Trennung von Inhalt und Leistung

Die Leistung der Webseite ist einheitlich und leicht zu ändern

  • Rich Der Stil macht das Webseitenlayout flexibler

  • Reduzieren Sie die Menge an Webseitencode, erhöhen Sie sie Browsing-Geschwindigkeit der Webseite und sparen Sie Netzwerkbandbreite

  • Durch die Verwendung von CSS unabhängig von der Webseite kann die Webseite von Suchmaschinen indiziert werden

  • Einbettungs-ID> Externe ID>Eingebettete
  • Klasse
  • >Externe Klasse>Eingebettetes Tag>Externes Tag

  • 1.1 Einführungsmethode
  • Vier Arten von

Inline-Stylesheet

Importmethode, versuchen Sie, sie nicht zu verwenden! ! !

  • 1.2
  • Einführungsmethode
  • Priorität

    Inline> ;Intern>Extern>Import
  • 1.3 Der Unterschied zwischen Linktyp und Importtyp:

    -Tag gehört zu XHTML, @import gehört zu CSS2.1;

    Verwenden Sie das CSS von Die Datei wird zuerst in die Webseite geladen und dann kompiliert und angezeigt.

    • Mithilfe der von @import importierten CSS-Datei zeigt der Client die HTML-Struktur an. und lädt dann die CSS-Datei in die Webseite.

    • @import gilt nur für CSS2.1 und ist für Browser ungültig, die nicht mit CSS2 kompatibel sind. 1;

    • 2. Selektor

    • 2.1 Welche Selektoren und ihre Prioritäten

                                                                                                                                                 

    2.2 Priorität des Selektors

    KLASSE >

    3. Grundlegende Stile (häufig für Text, Bilder, Listen verwendet)

    background背景
    Nach dem Login kopieren
        1.background-color  背景色  (16进制数  rgb  rgba  英文名)
    Nach dem Login kopieren
        2.background-image 背景图
    Nach dem Login kopieren
        3.background-size 背景大小 (像素、百分比)
    Nach dem Login kopieren
        4.background-repeat  (repeat-x  repeat-y  no-repeat)
    Nach dem Login kopieren
        5.background-position  (通过方向值来指定,通过百分比指定,通过确切的像素值指定)
    Nach dem Login kopieren
        6.background-attachment  是否随着浏览器滚动,使用它图片会相对浏览器固定住(bg-position和bg-attachment不要一起使用)
    Nach dem Login kopieren
        7.background复合属性  可以把之前的属性定义在这一个里面,【一般书写顺序:颜色、图片、是否重复、是否固定、位置】
    Nach dem Login kopieren

    Farbe Farbe

    1. Farbe Gibt die Farbe des Textes an

    2. Deckkraft Stellen Sie die Transparenz des Elements ein, 1 undurchsichtig 0 vollständig transparent

    Schriftart

    1. font-style gibt den Schriftstil des Textes an (normal, kursiv)

    2. font-variant Gibt an, ob der Text in Kapitälchen geschrieben werden soll (funktioniert für Englisch)

    3. Schriftstärke gibt die Dicke des Textes an ( hat nur zwei Stile) fett fett

    4. Schriftgröße gibt die Textschriftgröße an.

    5. Schriftfamilie legt fest, dass der Text eine bestimmte Schriftart verwenden soll

    Häufig verwendete Liste chinesischer Schriftfamilien //m.sbmmt.com/xiazai/sucai/ziti

    Schriftart Zusammengesetzte Attribute

    Allgemeine Reihenfolge: Schriftart, ob Kapitälchen, Schriftstärke, Schriftgröße, Schriftart

    text text attribute

    color , text-align , line-height , Buchstabenabstand , vertikal ausrichten , Texteinzug ,Textdekoration ;

    -----【vertikal -align----->1. Wird häufig für die Textfeldeingabe verwendet. 2. In Kombination mit {display: table-cell;} kann es verwendet werden Bild vertikal zentrieren]

    -----[valign-----> gilt beispielsweise nur für Zellen in der Tabellethis is cell

    -----[align-----> />, zum Beispiel:


    right" width="200" size="20" color="pink"/> ;

        

    , zum Beispiel:
    ······

       Der Text wird angezeigt relativ zum oberen Bildrand ;

       ······Warten Sie, ich werde sie nicht einzeln auflisten;】

    Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Unterschiede zwischen der grundlegenden CSS-Stylesheet-Klassifizierung und der Selektor-Klassifizierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    Verwandte Etiketten:
    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