Was sind CSS-Regeln?

Was sind die CSS-Regeln?

Hier sind 31 CSS-Grammatikregeln:

1 . Nutzen Sie die CSS-Abkürzungsregeln

/*Achten Sie auf die Schreibreihenfolge von oben, rechts, unten und links*/

1. Informationen zu Rändern (4 Seiten):

1px 2px 3px 4px (oben, rechts, unten, links)

1px 2px 3px (das weggelassene linke ist gleich rechts)

1px 2px (das weggelassene obere ist gleich unten )

1px (alle vier Seiten sind gleich)

2. Alles vereinfachen:

*/ body{margin:0}--------- --- stellt alle Elemente auf der Webseite dar. Der Rand ist 0

#menu{ margin:0}------------Gibt den Rand aller Elemente unter dem Menüfeld an ist 0

3. Abkürzung (Rahmen) spezifischer Stil:

Border:1px solid #ffffff;

Border-width:0 1px 2px 3px;

4. Abkürzungsregeln für Text:

Schriftart: kursiv

Schriftart: Kapitälchen/normal

Schriftstärke:fett;

Schriftgröße:12px;

Zeilenhöhe:1,2em(120%)/1,5em(150%);

Schriftfamilie:arrial,sans-serif, verdana;

abgekürzt zu:

Schriftart:italic small-caps fat 12px/1.5em arrial,sans-serif;

Hinweis: Schriftgröße und Zeilenhöhe werden verwendet. Schrägstriche können nicht separat geschrieben werden, wenn sie zusammen kombiniert werden.

5. Über das Hintergrundbild:

Hintergrund:#FFF url(log.gif) nicht wiederholt oben links;

6. Über die Liste:

List-style-type:square/none;

List-style-position:inside;

List-style-image:url(filename.gif);

Abgekürzt als:

List-style:none inside url(filename.gif)

2. Verwenden Sie 4 Methoden, um CSS-Stile einzuführen

1.link

rel-Beziehung

Typ-Datentyp, es gibt viele

href-Pfad

Einige Browser unterstützen alternative Stile, Schlüsselwörter: alternative:

2. Interner Stilblock

h1{color:red;}

–>

3.@import

@import url {a .css🎜>

Hinweis: Diese Direktive muss im Einstellungen in

--Extern referenzierte CSS-Dateien

(2) Die Priorität wird nicht gemäß der Zugriffsreihenfolge festgelegt, sondern anhand der Deklarationsreihenfolge im CSS. Einrichten.

Wie im obigen Beispiel wird

auch hier als Gelb angezeigt, da .Yellow in der CSS-Definition nach .Blue steht.

8. Schreiben Sie den richtigen Linkstil

Achten Sie beim Definieren der verschiedenen Status des Links auf die Schreibreihenfolge: :link :visited :hover :active mit dem ersten Buchstaben: L V H A , Sie können sich die Reihenfolge merken, indem Sie sich die beiden Wörter LoVe, Hate merken.

:link --------Die Farbe des Links

:visited -----Die Farbe nach dem Mausklick

:hover -- --- --Die Farbe, wenn die Maus platziert, aber nicht angeklickt wird (Hover)

:aktiv-------Die Farbe, wenn die Maus angeklickt wird

9 von :hover

IE6 unterstützt das Attribut :hover außer dem Tag a nicht. Wir verstehen, dass das Attribut :hover der Maus-Hover-Effekt ist. In IE7 und FF können Sie den :hover-Attributeffekt für fast jedes Element festlegen. Das funktioniert hervorragend, wenn wir verschiedene Besuche durchführen.

Zum Beispiel:

Breite: 360 Pixel;

Höhe: 80 Pixel;

Rand: 50px auto 0 auto;

Rahmen: 1px durchgezogen #ccc; 🎜 >}

p:hover {

border : 1px solid #000;background : #ddd;

- --------------Dieser Effekt gilt für IE7 und FF

p a {

color : #00f; Dekoration: keine;

Schriftgröße: 13px

p a:hover {

Farbe: #036; Textdekoration: unterstrichen;

}

-----------------Dieser Effekt ist für IE6

10. Definieren die A-Tag-Anforderungen. Kleine Punkte, die es zu beachten gilt

Wenn wir a{color:red;} definieren, stellt es die Stile der vier Zustände von A dar. Wenn Sie einen Zustand definieren möchten, in dem sich die Maus befindet, tun Sie dies einfach Definieren Sie a:hover. Okay, die anderen drei Zustände sind die in A definierten Stile.

Wenn nur ein a:link definiert ist, denken Sie unbedingt daran, die anderen drei Zustände zu definieren!

Verbieten des Umbrechens von Inhalten und Erzwingen des Umbrechens von Inhalten

In Tabellen oder Ebenen möchten wir möglicherweise, dass der Inhalt nicht umgebrochen wird oder dass wir das Umbrechen erzwingen.

Zeilenumbrüche verbieten: white-space:nowrap

Zeilenumbrüche erzwingen: word-break: break-all;

Der Unterschied zwischen relativ und absolut

Absolut---Die Schreibmethode in CSS ist: position:absolute; Dies bedeutet absolute Positionierung. Es bezieht sich auf die obere linke Ecke des Browsers und arbeitet mit TOP, RIGHT, BOTTOM und LEFT zusammen (im Folgenden als TRBL bezeichnet) Die Positionierung erfolgt standardmäßig auf den Ursprungspunkt des übergeordneten Elements, wenn TRBL nicht festgelegt ist. Wenn TRBL festgelegt ist und das übergeordnete Element das Positionsattribut nicht festlegt, wird der aktuelle Absolutwert mit der oberen linken Ecke des Browsers als Originalpunkt positioniert und die Position wird durch TRBL bestimmt.

Relativ---Die Schreibmethode in CSS ist: position:relative; Es bezieht sich auf den ursprünglichen Punkt des übergeordneten Elements, wenn es keinen übergeordneten Punkt gibt Wird als Originalpunkt für die Positionierung verwendet. Wenn in der übergeordneten Ebene CSS-Attribute wie Auffüllung vorhanden sind, wird der Originalpunkt der aktuellen Ebene in Bezug auf den Originalpunkt des übergeordneten Inhaltsbereichs positioniert.

13. Unterschied zwischen Block-Level-Elementen und Inline-Elementen

Block-Level --- Sie können die Breite und Höhe definieren und eine neue Zeile beginnen (z. B. div ul )

Inline---Die Breite und Höhe können nicht definiert werden, z. B. Textelemente (z. B. eine Spanne)

14. Der Unterschied zwischen Anzeige und Sichtbarkeit

Anzeige :none und Visibility:hidden können beide ein Element ausblenden, Visibility:hidden verbirgt jedoch nur den Inhalt des Elements, der verwendete Positionsraum bleibt jedoch weiterhin erhalten. Display:none entspricht dem Entfernen des Elements von der Seite und seine belegte Position wird ebenfalls gelöscht.

15. Etwas Syntax von Hintergrund

Hintergrundbild:url(Hintergrundmuster.jpg,gif,bmp);

Hintergrundfarbe:#FFFFFF; )

Hintergrundfarbe: transparent;

Hintergrundwiederholung Ändern Sie die Wiederholungseinstellung des Hintergrundbilds nebeneinander

Anleitung

repeat Hintergrundbilder sind nebeneinander

repeat-x Hintergrundbilder sind nebeneinander in X-Richtung

repeat-y Hintergrundbilder sind nebeneinander in Y-Richtung

Nein - sich wiederholende Hintergrundbilder werden nicht nebeneinander verarbeitet

Ob der Hintergrundanhang die Bildposition fixiert

Beschreibung

scrollen Wenn die Schriftrolle gezogen wird, verschiebt sich das Hintergrundbild (Standardwert)

behoben Wenn die Schriftrolle gezogen wird, verschiebt sich das Hintergrundbild nicht

Hintergrundposition nach Länge positionieren: x y

Prozentsatz zum Positionieren der Hintergrundposition verwenden: x% y%

Beschreibung

x% Nach rechts verschieben

y% Nach unten verschieben

Hintergrundposition: 0 % 0 %; oben links

Hintergrundposition: 0 % 50 %; links in der Mitte

Hintergrundposition: 50 % 0 %; Mitte oben

Hintergrundposition: 50 % 50 %; Mitte

Hintergrundposition: 100 % 0 %; oben rechts

Hintergrundposition: 0 % 100 %; unten links

Hintergrundposition: 100 % 50 %; Mitte rechts

Hintergrundposition: 50 % 100 %; unten rechts

Hintergrundposition: 100 % 100 %; >

nach Schlüsselwörtern positioniert

Schlüsselwortbeschreibung

oben (y = 0)

Mitte (x = 50, y = 50)

unten ( y = 100 )

left Left ( x= 0 )

Exp:

background-position:center;

Das Bild befindet sich am X =50% Y=50% Position der angegebenen Hintergrundmitte

Hintergrundposition: 200px 30px

16. So schreiben Sie Kommentare

in HTML:

content

in CSS:

/ * ---------- Header --- ------------- */

Stil

17. CSS-Namenskonventionen

1. Benennung von IDs

(1) Seitenstruktur

Container: Container

Header: Header

Inhalt: Inhalt/Container

Seitentext: Hauptseite

Fußzeile: Fußzeile

Navigation: Navigation

Seitenleiste: Seitenleiste

Spalte: Spalte

Seitenperipheriesteuerung Gesamtlayoutbreite: Wrapper

links rechts in der Mitte

(2)Navigation

Navigation: nav

Hauptnavigation: mainnav

Unternavigation: Subnav

Navigation oben: Topnav

Seitennavigation: Seitenleiste

Linke Navigation: linke Seitenleiste

Rechte Navigation: rechte Seitenleiste

Menü: Menü

Untermenü: Untermenü

Titel: Titel

Zusammenfassung: Zusammenfassung

(3) Funktion

Logo: Logo

Werbung: Banner

Login: Login

Login-Leiste: Loginbar

Registrieren: Regsiter

Suchen: Suchen

Funktionsbereich: Shop

Titel: Titel

Beitreten: joinus

Status: Status

Button: btn

Scrollen: scrollen

Tab-Seite: Tab

Artikelliste: Liste

Eingabeaufforderung: msg

Aktuell: aktuell

Tipps : Tipps

Symbol: Symbol

Hinweis: Hinweis

Anleitung: Gilde

Service: Service

Hot Spot: Hot

Neuigkeiten: Neuigkeiten

Download: Download

Abstimmung: Abstimmung

Partner: Partner

Freundlicher Link: Link

Urheberrecht: Copyright

2. Klassenbenennung

(1) Farbe: Verwenden Sie den Farbnamen oder einen Hexadezimalcode, z. B.

.red { color: red; >

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2) Schriftgröße, verwenden Sie direkt „Schriftart+Schriftgröße“. Name, z. B.

.font12px { Schriftgröße: 12px; }

.font9pt {Schriftgröße: 9pt; Englischer Name des Ausrichtungsziels, z. B.

.left { float:left; }

.bottom { float:bottom }

(4) Titelleistenstil, Verwenden der Methode „Kategorie + Funktion“ Benennung, z. B.

.barnews { }

.barproduct { }

Hinweis::

u ist immer Kleinbuchstaben;

u Verwenden Sie so viel wie möglich Englisch;

u Fügen Sie keine Bindestriche und Unterstriche hinzu

u Für 2 Wortkombinationen können Sie den ersten Buchstaben von großschreiben das zweite Wort ohne Bindestriche und Unterstreichungen (z. B. mainContent) ;

u Versuchen Sie, Wörter nicht abzukürzen, es sei denn, es handelt sich um Wörter, die Sie auf einen Blick verstehen können.

3. Hauptseite-CSS-Datei

Hauptmaster.css

Modulmodul .css

Grundsätzlich base.css (root.css) teilen

Layout, layout.css

themes.css

columns.css

Textfont.css

Forms.css

Patch mend.css

Drucken print.css

18. Auffüllen wirkt sich auf die Breite aus Problem

Wenn zwischen einer Gruppe verschachtelter Tags ein gewisser Abstand erforderlich ist, belassen Sie ihn beim Randattribut des Tags, das sich darin befindet, anstatt den Abstand zu definieren

table{border-collapse:collapse;}

td{border:1px solid #000;}

20. Wenn der Text zu lang ist, wird der Ein zu langer Teil wird als Ellipsen angezeigt >21. Nicht alle Stile müssen abgekürzt werden

Wenn das Stylesheet wie p{padding:1px 2px 3px 4px} definiert ist, wurde in nachfolgenden Projekten ein weiterer Stil mit 5px oberem Abstand und 6px unterem Abstand hinzugefügt . Wir müssen nicht unbedingt p.style1{padding:5px 6px 3px 4px} schreiben. Es kann als p.style1{padding-top:5px;padding-right:6px;} geschrieben werden. Sie haben vielleicht das Gefühl, dass es nicht so gut ist, es auf diese Weise zu schreiben, aber haben Sie jemals darüber nachgedacht? Die Methode definiert wiederholt den Stil. Darüber hinaus müssen Sie nicht herausfinden, wie hoch die ursprünglichen Werte für die untere und linke Polsterung sind! Wenn sich der vorherige Stil P in Zukunft ändert, ändert sich auch der Stil von p.style1, den Sie definiert haben. (Diese Methode ist sehr wichtig für die spätere Änderung von Stilen)

22. Mehrere häufig verwendete CSS-Detailsverarbeitungsstile

1) Ausrichtung chinesischer Zeichen an beiden Enden: text-align: justify;text -justify:inter-ideograph;

2) Kürzung chinesischer Zeichen mit fester Breite: overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(erlaubt keinen Umbruch, sondern kann nur verarbeitet werden Text in einer Zeile abschneiden, mehrere Zeilen nicht verarbeiten (IE5 und höher) FF kann nicht, es wird nur ausgeblendet.

***Universeller erzwungener Zeilenumbruch: white-space:normal;word-break:break-all

Verbotener Zeilenumbruch: white-space:nowrap

Erzwungene Zeile break: word -wrap: break-word; word-break: normal;

.AutoNewline

{

/*word-break: break-all; Methode 1 ist erforderlich*/

/*word-wrap:break-word;overflow:hidden; Methode 2*/

/*word-wrap:break-word; Methode 3*/

word-wrap:break-word; word-break:break-all;

}

.NoNewline

{

/ *word-break: keep-all; Methode 1 muss*/

white-space:nowrap;

}

3) Chinesisches Schriftzeichen mit fester Breite (word) line break: table-layout:fixed; word-break:break-all; (IE5 und höher) FF nicht.

4)TextPlatzieren Sie den vorherigen Text mit der Maus, um den Effekt zu sehen. Dieser Effekt ist auf vielen ausländischen Websites zu beobachten, jedoch nur auf sehr wenigen inländischen.

5) Stellen Sie das Bild auf halbtransparent ein: .halfalpha {background-color:#000000;filter:Alpha(Opacity=50)} hat den Test in IE6 und IE5 bestanden, ist jedoch in FF fehlgeschlagen weil es sich bei diesem Stil um privates IE-Material handelt; object> Das Obige gilt für IE-Code.

Fügen Sie für FIREFOX einen ähnlichen Parameter wmode=“transparent“ zum -Tag hinzu.

7) Beim Erstellen von Webseiten wird dieser häufig verwendet, um die Maus auf das Bild zu setzen Machen Sie das Bild heller. Sie können die Bildersetzungstechnik verwenden oder die folgenden Filter verwenden:

.pictures img {

filter: alpha(opacity=45); >

.pictures a:hover img {

filter: alpha(opacity=90); }

8) Das Problem der Ebenenausrichtung in der Mitte des Browsers

body { text-align: center }

#content { text-align: left; width: 700px; margin: 0 auto }

9) Problem mit der vertikalen Ausrichtung von einzeiligem Inhalt die Ebene

# content{ height:19px; line-height:19px }Der Nachteil ist, dass der Inhalt nicht umbrochen werden muss.

10) Das Problem der vertikalen Mittelausrichtung von Ebenen im Browser

Der Nachteil ist: Bildlaufleisten können nicht horizontal oder vertikal angezeigt werden, sondern nur auf einem Bildschirm

Tatsächlich Die Lösung ist folgende: Wir brauchen position:absolute; absolute Positionierung. Verwenden Sie für die Ebenenpositionierung die Methode der Verwendung negativer äußerer Patch-Ränder. Die Größe eines negativen Werts ist die Breite und Höhe der Ebene selbst geteilt durch 2.

Zum Beispiel: Die Breite einer Ebene beträgt 400 und die Höhe 300. Verwenden Sie die absolute Positionierung und stellen Sie den oberen und linken Abstand auf 50 % ein. Der Wert von margin-top beträgt -150. Der Wert von margin-left beträgt -200. Auf diese Weise erreichen wir ein Stilschreiben, bei dem die Ebene im Browser vertikal zentriert ist.

Bitte sehen Sie sich den Beispielcode an:

div {

position:absolute;

top:50%;

left:50 % ;

margin:-150px 0 0 -200px;

width:400px;

height:300px;

border:1px solid red;

}

11) CSS-Steuerung Bild adaptive Größe

div img {

max-width:600px;

width:600px;

width:expression(document.body.clientWidth>600?"600px":"auto");

overflow:hidden;

}

23. Zu beachtende Probleme bei der Verwendung von Elementen mit Float-Attributen

1. Verwenden Sie das Border-Attribut, um die Layouteigenschaften des Fehlerelements zu bestimmen

Die Verwendung des Float-Attributlayouts kann zu Fehlern führen, wenn Sie nicht vorsichtig sind. Fügen Sie zu diesem Zeitpunkt das Randattribut zum Element hinzu, um die Elementgrenze zu bestimmen, und die Fehlerursache wird aufgedeckt.

2. Das übergeordnete Element eines Float-Elements kann nicht das Clear-Attribut angeben.

Wenn Sie das Clear-Attribut für das übergeordnete Element eines Float-Elements unter MacIE verwenden, ändert sich das Layout der umgebenden Float-Elemente wird verwirrt sein. Dies ist ein berühmter Fehler von MacIE. Wenn Sie ihn nicht kennen, werden Sie Umwege gehen.

3. Float-Elemente müssen das Breitenattribut angeben

Viele Browser haben Fehler bei der Anzeige von Float-Elementen ohne angegebene Breite. Unabhängig vom Inhalt des Float-Elements muss also das width-Attribut dafür angegeben werden.

Versuchen Sie außerdem, bei der Angabe von Elementen em anstelle von px als Einheit zu verwenden.

4. Float-Elemente können keine Attribute wie Rand und Abstand angeben.

IE hat einen Fehler bei der Anzeige von Float-Elementen mit angegebenem Rand und Abstand. Geben Sie daher keine Rand- und Auffüllattribute für Float-Elemente an (Sie können ein div innerhalb des Float-Elements verschachteln, um Rand und Auffüllung festzulegen). Sie können Hacks auch verwenden, um spezielle Werte für den IE festzulegen.

5. Die Summe der Breiten der Float-Elemente muss weniger als 100 % betragen.

Wenn die Summe der Breiten der Float-Elemente genau 100 % beträgt, werden einige alte Browser nicht richtig angezeigt. Bitte achten Sie daher darauf, dass die Summe der Breiten weniger als 99 % beträgt.

24. Browser-Kompatibilitätsprobleme (für FF/IE6/IE7)

1. CSS-Hack: Unterscheiden Sie zwischen IE6, IE7, Firefox

Unterscheiden Sie zwischen FF, IE7, IE6 :

Hintergrund:grün !important; Hintergrund:orange; *Hintergrund:blau;

IE6 kann * erkennen, aber nicht !important,

IE7 kann * erkennen und kann erkennt auch !important;

FF kann * nicht erkennen, kann aber !important;

Weiteres hinzufügen, unterstreichen „_“,

IE6-Unterstützung Unterstreichen, weder IE7 noch Firefox unterstützt Unterstreichungen.

Sie können also auch Firefox, IE7, IE6 auf diese Weise unterscheiden

Hintergrund:grün!important; *Hintergrund:orange; _Hintergrund:blau;

Hinweis: Egal Was es ist: Methoden werden in der Reihenfolge geschrieben, in der Firefox zuerst geschrieben wird, IE7 in der Mitte und IE6 am Ende.

2. Die BOX-Modellinterpretation in Firefox und IE ist inkonsistent, was zu einem Unterschied von 2 Pixeln führt

div{margin:30px!important;margin:28px;}

Achten Sie darauf: Die Reihenfolge der beiden Ränder darf nicht vertauscht werden. Der IE kann das Attribut !important nicht erkennen, andere Browser jedoch schon. Daher wird es im IE tatsächlich so interpretiert: Wenn div{maring:30px;margin:28px} wiederholt definiert wird, wird das letzte ausgeführt, sodass Sie nicht einfach margin:XXpx!important;

schreiben können 3. Bedingte Kommentare zur Auswahl eines anderen Browsers (prägnanter als CSS-Hack)

4. Unterscheiden Sie IE8

.color{

Hintergrundfarbe: #CC00FF; /*Alle Browser werden lila angezeigt*/

Hintergrundfarbe: #FF00009; /*IE6, IE7, IE8 wird rot angezeigt* /

*background-color: #0066FF; /*IE6 und IE7 werden blau*/

_background-color: #009933; /*IE6 wird grün*/

25. Von W3C befolgte Standardprinzipien

1. Überlegen Sie sich bitte sorgfältig, welche Lösung die Verschachtelung von Tabellen innerhalb von drei Ebenen ist. rowspan> sollte so weit wie möglich vermieden werden. Die Erfahrung zeigt, dass diese beiden Tags viel Ärger verursachen können.

2. Eine Webseite sollte versuchen, die Verwendung einer ganzen großen Tabelle zu vermeiden, da der Browser die Elemente der Seite einzeln in Tabelleneinheiten anzeigt Wenn eine Webseite in einer großen Tabelle verschachtelt ist, besteht die wahrscheinliche Konsequenz darin, dass der Besucher beim Eingeben der URL zunächst lange Zeit mit einem Leerzeichen konfrontiert wird und dann der gesamte Webinhalt gleichzeitig angezeigt wird. Wenn Sie dies tun müssen, verwenden Sie das Tag

, um die Anzeige der großen Tabelle in Blöcken zu ermöglichen.

3. Beim Schriftsatz kommt es häufig vor, dass die erste Zeile eingerückt wird. Verwenden Sie keine Leerzeichen in voller Breite, um den Effekt zu erzielen. Fügen Sie dann zu jedem Absatz die Markierung

hinzu.

4. Wir verbieten grundsätzlich die Verwendung von , um die Größe der Bildanzeige künstlich zu beeinträchtigen, und es wird empfohlen, die Attribute width und height nicht in das Bild einzubeziehen -Tag: Dies liegt daran, dass Bilder während des Produktionsprozesses häufig wiederholt geändert werden müssen, wodurch menschliche Eingriffe in die Größe der Bildanzeige vermieden und die eigenen Funktionen des Browsers maximiert werden können Wenn die Webseite das Bild nicht geladen hat, wird es nicht angezeigt. Die Site-Größe des Bildes bleibt erhalten, was dazu führen kann, dass die Webseite während des Ladevorgangs wackelt (wenn das Bild in eine Tabelle mit fester Größe eingefügt wird). (dieses Phänomen tritt nicht auf), insbesondere wenn das Bild groß ist. Dieses Phänomen ist offensichtlich. Wenn Sie also erwarten, dass diese Situation offensichtlich zu einem Zittern der Webseite führen wird, fügen Sie bitte unbedingt die Attribute „Breite“ und „Höhe“ hinzu bis

5. Um die automatische Layoutfunktion des Browsers zu maximieren, versuchen Sie bitte, nicht manuell in die Segmentierung eines gesamten Textes einzugreifen.

6. Zwischen Wörtern in verschiedenen Sprachen sollte ein Leerzeichen in halber Breite stehen, außer vor dem Kopfzeilensymbol und nach dem Endzeichen. Die Interpunktion zwischen chinesischen Zeichen sollte in voller Breite erfolgen und die Klammern um englische Buchstaben und Zahlen sollten Klammern halber Breite verwenden.

7. Alle Schriftgrößen sollten mithilfe von Stylesheets implementiert werden und das Tag

8. Bitte erscheinen Sie nicht mehr als eins hintereinander auf der Webseite und verwenden Sie so wenig Leerzeichen wie möglich (im englischen Zeichensatz werden Leerzeichen in voller Breite zu verstümmelten Zeichen). Texteinzug, Auffüllung, möglichst großer Rand für Leerzeichen, Hspace, Vspace und transparente GIF-Bilder.

9. Bei der Mischung von Chinesisch und Englisch versuchen wir unser Bestes, Englisch und Zahlen als Verdana- und Arial-Schriftarten zu definieren.

10. Es wird empfohlen, den Zeilenabstand in Prozent zu definieren. Die üblicherweise verwendeten zwei Zeilenabstandswerte sind line-height:120%/150%.

Alle Pfade im Im Allgemeinen muss der Linkpfad zur Standarddatei in einem bestimmten Verzeichnis nicht im vollständigen Namen angegeben werden: sollte aber so aussehen:

Wenn in Firefox alle untergeordneten Elemente schweben, kann die Höhe des übergeordneten Elements das gesamte untergeordnete Element nicht vollständig umschließen. Verwenden Sie daher diesen HACK, um die schwebenden Elemente zu löschen. Wenn das übergeordnete Element einmal definiert ist, kann dieses Problem gelöst werden .

.clearfix {

display:inline-block;

}

/* Versteckt sich vor IE-Mac */

* html .clearfix {

height:1%;

}

.clearfix {

display:block;

}

/* End hide from IE-mac */

** Diese Art der Verwendung kommt häufiger vor, wenn Bilder und Text gemischt werden, ist aber nicht einfach zu kontrollieren. Verwenden Sie margin mit clear{clear: Both} Übernehmen Sie direkt die Kontrolle.

28. Textverarbeitung

1. Allgemeine Schriftarten:

Schriftfamilie: „Lucida Grande“, Verdana, Lucida, Arial, Helvetica, „宋体“, sans- Serife;

Titelschriftart (h1/h2): Schriftfamilie: Cambria, Georgia, „Times New Roman“, Times, Serife;

2. Initiale:

P:first-letter{padding:10px,fontsize:32pt;float:left}

3. Pinyin-Chinesische Schriftzeichen:

Bruce Wolfmin-height:450px;

height:auto!important;

height:450px;

overflow:visible;???? }

30. CSS-Layout-Mantra - CSS-BUG-Jingle

· Wenn der IE-Rahmen erscheint oder verschwindet, beachten Sie bitte, dass die Höheneinstellung vergessen wurde

· Floats Wenn Sie möchten, dass die übergeordnete Ebene sie enthält, müssen Sie sie sofort nach den Floats löschen. Der Container wird dann automatisch angezeigt. Keine Panik, wenn sich der Drei-Pixel-Text bewegt Langsam wird Ihnen die Höheneinstellung helfen.

· Um mit verschiedenen Browsern kompatibel zu sein, beachten Sie bitte, dass die Standardeinstellung für die Zeilenhöhe ein Killer sein kann Beachten Sie, dass die Zeilenhöhe auf „Keine“ und die Höhe auf „Null“ eingestellt sein sollte. Der Designeffekt stimmt mit dem Durchsuchen überein. Das Erlernen des Layouts erfordert Ideen, das Layoutprinzip ist natürlich und einfach Kontrollieren Sie HTML, optimiertes Layout mit weniger Hacks, sauberer Code, gute Kompatibilität und benutzerfreundliche Engines.

· Alle Tags haben eine Quelle, aber die Standardeinstellung ist Wuji. Wuji hat zwei Dinge: Img ist etwas Besonderes, aber es folgt auch den rechtlichen Grundsätzen. eins * Die Zahl entspricht wieder dem Original, das Schichtmuster erfordert mehr Übung, alles ist regelmäßig.

· Seien Sie beim Formatieren von Bildlinks vorsichtig. Wenn der Bildlink-Textlink ausgerichtet ist, müssen padding und Vertical-Align:Middle eingestellt werden. Es spielt keine Rolle, ob der Unterschied gering ist.

· Für schwebende Doppelränder im IE verwenden Sie bitte display: inline.

· Die Liste sollte horizontal eingegeben werden, die Listencodes müssen nahe beieinander liegen und die Lücken müssen beachtet werden.

31. Schriftanwendungen im Web

Fassen Sie mehrere Sätze praktischer und einfacher Schriftfamilien zusammen

Schriftfamilien: Tahoma, Helvetica, Arial, Sans-Serif ;

Neutrale Schriftart im Tahoma-Stil. Es wird empfohlen, eine Umgebung mit mehr als 13 Pixeln zu verwenden.

Schriftfamilie: Trebuchet MS, Verdana, Helvetica, Arial, serifenlos;

Verdana breite, flache Schriftart. Es wird empfohlen, es in einer Umgebung unter 11 Pixel zu verwenden.

Schriftfamilie: Geogia, Times New Roman, Times, Serif;

Die perfekte Wahl für Serifenschriften. Wird hauptsächlich für große Titelschriftarten über 16 Pixel verwendet.

Schriftfamilie: Lucida Console, Monaco, Courier New, Mono, Monospace;

Eine Reihe von Monospace-Schriftarten. Das Schreiben von Code ist sehr nützlich. Wenn Ihnen die Lucida Console außerdem zu breit ist, können Sie auf die schmalere Lucida Sans Typewriter umsteigen. Übrigens verwendet der Codeblock im Blog von Lao Zhao Lucida Sans Typewriter~

Wenn die Sichtbarkeit im Div-Stil auf „Ausgeblendet“ eingestellt ist, wird das Div ausgeblendet, aber es belegt den Leerraum. und wenn es auf „display: none“ eingestellt ist, belegt es das Leerzeichen nicht; „sichtbar“ = „false“ bedeutet, dass das Div nicht in HTML zurückgegeben wird;

Das obige ist der detaillierte Inhalt vonWas sind CSS-Regeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!