Heim > Web-Frontend > js-Tutorial > Hauptteil

CSS-Klassifizierung, Attribute und Selektoren

php中世界最好的语言
Freigeben: 2018-03-19 13:51:08
Original
1418 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Klassifizierung von CSS, Attributen und Selektoren, die Klassifizierung der Verwendung von CSS und die Vorsichtsmaßnahmen für Attribute und Selektoren vorstellen. Das Folgende ist ein praktischer Fall. Schauen wir uns das an.

CSS Cascading Style Sheet Widget zur Verschönerung der Seite

Kategorie:

Inline (inline) innerhalb des Tags mit Presented In Form von Attributen wird der Attributname style

in Form eines Tags innerhalb des eingebetteten Head-Tags dargestellt, und der Tag-Name ist style

🎜>

Link-Tag
<link rel="stylesheet" type="text/css" href="file:///D|/SSs/作业/3.12/图标.css" />
Nach dem Login kopieren

Symbolsymbol einfügen (Symbolsymbol hinzufügen, der Pfad muss absolut sein)

Symbolsymbol
<link rel="shortcut icon" href="xxx.ico" type="image/x-icon"/>
Nach dem Login kopieren

Selektor:

Wird zum Suchen von Elementen und zum Anwenden von Stilen auf Beschriftungen verwendet.

 

tag selector.p{}

 id selector #id{

}  class selector.class{}

 Parallel (Komma hinzufügen) Selektor 1, Selektor 2

 Parent und Kind (Leerzeichen hinzufügen) Elternselektor

Untergeordneter Selektor

  *{}Ganze Seite

Attribute:

Text:

 text-decoration Textdekoration (Unterstreichung oder so)text-indent indent

Text -shadow Schatten 1 Pixel (Position des horizontalen Schattens) 1 Pixel (vertikal) 1 Pixel (unscharfer Abstand) # (Schattenfarbe)

Schriftstärke fett

em Tabelle 1 Wortgröße

Hintergrund:

BZ-Position

 
<head>
    <style>        
        #p{ 
        width:100%;
        height:111px;
        background-image:url();
            background-position:34% 0        }
    </style></head><body>
    <p id="p"></p></body>
Nach dem Login kopieren

HintergrundgrößeBildgröße Proportional skalieren

Hintergrund: Positionsgröße der Farbbildkachel

Zusammenfassung des Problems :

1. Das text-indent-Einzugsattribut kann nur für Block-Tags wie „Span“ verwendet werden.

Lösung: Fügen Sie das Attribut display:inline-block; zu span hinzu, um es in eine Inline-Blockbezeichnung umzuwandeln.

2. Das große p legt das kleine p fest. Wenn das übergeordnete p nicht die Breite und Höhe festlegt, ändert es sich mit der Position des untergeordneten p .

Wenn das Margin-Float-Attribut auf das untergeordnete p geschrieben wird, wird auch das übergeordnete p verschoben.

Lösung: Legen Sie einen Rahmen fest oder definieren Sie die Breite und Höhe für das übergeordnete p.

 3. Ändern Sie die Farbe von


 


Löschen Sie den Rand und legen Sie die Hintergrundfarbe und -höhe fest.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Grundkenntnisse über HTML im Frontend

Analyse bekannter Website-Front- Endlayout

Grundkenntnisse über Front-End-CSS

Das obige ist der detaillierte Inhalt vonCSS-Klassifizierung, Attribute und Selektoren. 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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!