Zusammenstellung von CSS-Wissenspunkten

CSS ist die Abkürzung für Cascading Style Sheets, die auf Chinesisch als Cascading Style Sheets bezeichnet wird. Es dient zur Steuerung der Leistung von Webseitendaten und kann die Leistung von Webseiten vom Dateninhalt trennen.

1. Wie man CSS einführt

1. Inline-Stil: Inline-Stil legt den CSS-Stil im Stilattribut des Tags fest. Diese Methode spiegelt nicht die Vorteile von CSS wider und wird nicht empfohlen.

2. Eingebettet: Eingebettet ist das Schreiben von CSS-Stilen in das -Tagpaar des Das Format ist wie folgt:

..Schreiben Sie hier den CSS-Stil

3. Importieren: Fügen Sie eine unabhängige CSS-Datei in die HTML-Datei ein. Der -Tag wird ebenfalls verwendet wie folgt:

@import"mystyle.css" Achten Sie hier auf den Pfad der .css-Datei

4. Linktyp: Fügen Sie auch eine .css-Datei in die HTML-Datei ein

Hinweis: Die Importmethode lädt die CSS-Datei, nachdem die gesamte Webseite geladen wurde. Dies führt also zu einem Problem. Wenn die Webseite relativ groß ist, wird nach einem Flash zuerst eine nicht gestaltete Seite angezeigt wird wieder erscheinen. Das

Es handelt sich um einen inhärenten Importfehler. Der Unterschied zwischen der Verwendung des Linktyps und dem Importtyp besteht darin, dass die CSS-Datei vor dem Laden des Hauptteils der Webseitendatei geladen wird, sodass die angezeigte Webseite von Anfang an einen Stileffekt hat Importtyp

Zeigen Sie zuerst die nicht gestaltete Webseite und dann die gestaltete Webseite an. Dies ist der Vorteil des Linkstils.

2. CSS-Selektor Der „Selektor“ gibt das Objekt des „Stils“ in {} an, d. h., auf welche Elemente auf der Webseite der „Stil“ wirkt

1. Basisauswahl:

＊: übereinstimmen

E: .info und E.info: .

#Info und E#Info ID-Selektor, der die Elemente aller ID-Attribute gleich FOOTER #Info {background:#ff0;} P#Info {background:#ff0;} abgleicht

2. Kombinationsauswahl:

E,F Multi-Element-Selektor, der alle E-Elemente oder F-Elemente gleichzeitig abgleicht, durch Kommas zwischen E und F getrennt Div,p { color:#f00; }

EF E > F Untergeordnetes Elementselektor, entspricht allen untergeordneten Elementen F des E-Elements

E F Angrenzender Elementselektor, der alle gleichgeordneten Elemente F abgleicht, die unmittelbar auf das E-Element F p p { color:#f00 } folgen

注意嵌套规则：

块级元素可以包含内联元素或 某些 块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。 块级元素不能放在p里面 。 有几个特殊的块级元素只能包含内联元素，不能包含块级元素 。如h1,h2,h3,h4,h5,h6,p,dt li内可以包含div 块级元素与块级元素并列、内联元素与内联元素并列。（错误的： ）

3、属性选择器

E[att] 匹配所有具有att属性的E元素，不考虑它的值。

（注意：E在此处可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; }

E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }

E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; }

E[att|=val] 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素，主要用于lang属性，

比如“en”、“en-us”、“en-gb”等等 p[lang|=en] { color:#f00; }

E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;}

E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}

E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}

p:before 在每个 元素的内容之前插入内容 p : before {content : "hello" ;color : red }

p:after 在每个 元素的内容之前插入内容 p:after{ content:"hello"；color:red}

4、伪类选择器

伪类选择器： 专用于控制链接的显示效果，伪类选择器：

a:link（没有接触过的链接）,用于定义了链接的常规状态。

a:hover（鼠标放在链接上的状态）,用于产生视觉效果。

a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。

a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。

伪类选择器 : 伪类指的是标签的不同状态:

a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

三、css常用属性

1、颜色属性

ppppp

2. Schriftartattribute

Schriftgröße: 20px/50%/größer

Schriftfamilie:'Lucida Bright'

Schriftstärke: heller/fett/randvoll/

Old Boy

3. Hintergrundattribute

Hintergrundfarbe: kornblumenblau

Hintergrundbild: url('1.jpg');

Hintergrundwiederholung: keine Wiederholung; (Wiederholung: vollständige Kachel)

Hintergrundposition: rechts oben (20px 20px); (horizontal: links Mitte rechts) (vertikal: oben Mitte unten)

Abkürzung:

Hinweis: Wenn Sie dem Körper das Hintergrundattribut hinzufügen, denken Sie daran, dem Körper eine Höhe hinzuzufügen. Dies liegt daran, dass der Körper leer ist und das Hintergrundbild nicht unterstützen kann Ich möchte ein festlegen

Breite = 100 Pixel, Sie werden den Effekt nur sehen, wenn Sie HTML festlegen.

1 2 " en " > 3 4 " UTF-8 " > 5 Title 6 7 html{ 8 background- color: antiquewhite; 9 10 } 11 body{ 12 width: 100px; 13 height: 600px; 14 background- color: deeppink; 15 background-image: url(1 .jpg); 16 background-repeat: no- repeat; 17 background- position: center center; 18 } 19 20 21 Code anzeigen 4. Textattribute

white-space: Legen Sie fest, wie mit Leerraum in Elementen umgegangen wird

normal: Standardverarbeitungsmethode. Vorher: Leerzeichen beibehalten und nicht umbrechen, wenn der Text die Grenze überschreitet nowrap: Behalten Sie keine Leerzeichen bei, erzwingen Sie, dass der gesamte Text in derselben Zeile angezeigt wird, bis das Ende des Textes oder das br-Tag erreicht wird Vorumbruch: Leerzeichen beibehalten und Text umbrechen, wenn er die Grenze erreicht Vorzeile: Behalten Sie keine Leerzeichen bei, behalten Sie den Textumbruch bei und brechen Sie um, wenn der Text die Grenze erreicht Richtung: Gibt die Richtung des Textes an

ltr Standardmäßig ist die Textrichtung von links nach rechts. RTL-Textrichtung ist von rechts nach links. text-align: Horizontale Ausrichtung des Textes

links Mitte richtig Zeilenhöhe: Textzeilenhöhe

normale Standardeinstellung vertikal ausrichten: Die vertikale Ausrichtung der Zeilenhöhe des Textes

Grundvorgabe sub richtet den Index des Textes vertikal aus, der gleiche Effekt wie das -Tag richtet den hochgestellten Text super vertikal aus, der gleiche Effekt wie das -Tag Die Oberseite des obersten Objekts ist an der Oberseite des Behälters ausgerichtet Der obere Rand des obersten Textobjekts wird am oberen Rand des Textes in der Zeile ausgerichtet Objekte des mittleren Elements werden basierend auf der Grundlinie vertikal ausgerichtet Der untere Rand des unteren Objekts wird am unteren Rand des Textes in der Zeile ausgerichtet Der untere Rand des Textobjekts wird am unteren Rand der Textzeile ausgerichtet Texteinzug: Texteinzug

Buchstabenabstand: Leerraum zwischen Buchstaben hinzufügen

Wortabstand: Fügen Sie zwischen jedem Wort einen Abstand ein

text-transform: Attribut steuert die Groß-/Kleinschreibung von Text

Großschreibung Jedes Wort im Text beginnt mit einem Großbuchstaben. uppercase definiert nur Großbuchstaben. lowercase definiert nur Kleinbuchstaben. Textüberlauf: Textüberlaufstil

Clip schneidet Text ab. Ellipse zeigt Ellipsen an, um zugeschnittenen Text darzustellen. string Verwenden Sie die angegebene Zeichenfolge, um den zugeschnittenen Text darzustellen. Textdekoration: Textdekoration keine Standardeinstellung. unterstreichen unterstreichen. Überstreichen Überstreichen. Linie durch die Mittellinie. text-shadow: Textschatten

Der erste Parameter ist die linke und rechte Position Der zweite Parameter ist die Auf- und Ab-Position Der dritte Parameter ist der Unschärfeeffekt Der vierte Parameter ist die Farbe Textschatten: 5px 5px 5px #888; Wortumbruch: automatischer Zeilenumbruch

Zeilenumbruch: Wortumbruch;

5. Attribute auflisten

list-style-type: Der Typ der Listenelementmarkierung

keine Markierung entfernen Dezimal-führende Null; 02. quadratisch; Kasten Kreis; Hohlkreis oberer Alpha; ausgefüllter Kreis list-style-image: Legen Sie das Bild als Logo für das Listenelement fest

List-style-position: Die Position der Listenelementmarkierung

drinnen draußen Listenstil: Abkürzung

6. Rand

Rahmenstil: Rahmenstil

durchgezogene Standardeinstellung, durchgezogene Linie doppelte Doppellinie gepunktete gepunktete Linien gestrichelte gestrichelte Linie Rahmenfarbe: Rahmenfarbe

Rahmenbreite: Rahmenbreite

border-radius: abgerundete Ecken

1 Parameter: auf alle vier Ecken angewendet 2 Parameter: Der erste Parameter wird oben links und unten rechts angewendet; der zweite Parameter wird unten links und oben rechts angewendet 3 Parameter: Der erste Parameter wird oben links angewendet; der zweite Parameter wird unten links angewendet und der dritte Parameter wird unten rechts angewendet 4 Parameter: oben links, oben rechts, unten rechts, unten links (im Uhrzeigersinn) Rand: Abkürzung

Rand: 2 Pixel gelber Vollton; Box-Shadow: Randschatten

Der erste Parameter ist die linke und rechte Position Der zweite Parameter ist die Auf- und Ab-Position Der dritte Parameter ist der Unschärfeeffekt Der vierte Parameter ist die Farbe box-shadow: 10px 10px 5px #888;

7、display

none 不显示。 block 显示为块级元素。 inline 显示为内联元素。 inline-block 行内块元素（会保持块元素的高宽）。 list-item 显示为列表元素。

8、盒子模型

什么是盒子模型？

padding:用于控制内容与边框之间的距离;

margin: 用于控制元素与元素之间的距离;

一个参数，应用于四边。

两个参数，第一个用于上、下，第二个用于左、右。

三个参数，第一个用于上，第二个用于左、右，第三个用于下

边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），解决办法

1 body { 2 margin : 0 ; 3 } View Code 9. Float

Die Anzeige von zwei Tags auf Blockebene in einer Zeile unterbricht den Dokumentenfluss

keine links Float links rechts schweben rechts Clear Clear Float:

keine: Standardwert. Auf beiden Seiten schwebende Objekte zulassen links: Schwebende Objekte sind auf der linken Seite nicht erlaubt rechts: Auf der rechten Seite sind keine schwebenden Objekte erlaubt beide: Schwimmende Objekte sind auf beiden Seiten nicht erlaubt 10. Position

1 statisch, Standardwert statisch: keine spezielle Positionierung, das Objekt folgt dem normalen Dokumentenfluss.

Oben, rechts, unten, links und andere Attribute werden nicht angewendet. Apropos, wir müssen eine Definition erwähnen – Dokumentenfluss ist eigentlich die Ausgabereihenfolge von Dokumenten, die wir normalerweise von links nach rechts sehen, von

Im Top-Down-Ausgabeformular wird jedes Element auf der Webseite in dieser Reihenfolge sortiert und angezeigt, und die Attribute float und position können die Elemente aus dem Dokumentfluss trennen und anzeigen. Der Standardwert besteht darin, das Element weiterhin

folgen zu lassen Der Dokumentenfluss wird angezeigt, ohne dass Änderungen vorgenommen werden.

2 Position:relativ

relativ: Das Objekt folgt dem normalen Dokumentfluss, wird jedoch im normalen Dokumentfluss basierend auf den Attributen oben, rechts, unten, links und anderen versetzt. Und seine Kaskadierung wird durch das Z-Index-Attribut definiert.

Absolut: Das Objekt ist vom normalen Dokumentenfluss getrennt und verwendet die Attribute oben, rechts, unten, links und andere für die absolute Positionierung. Und seine Kaskadierung wird durch das Z-Index-Attribut definiert. Wenn Sie position:relative festlegen, können Sie

verwenden Oben, unten, links und rechts, um das Element relativ zu der Stelle zu verschieben, an der es im Dokument erscheinen soll. [Das bedeutet, dass das Element tatsächlich immer noch seine ursprüngliche Position im Dokument einnimmt, aber nur optisch relativ zu seiner ursprünglichen Position im Dokument

ist Verschoben] Wenn position:absolute angegeben ist, befindet sich das Element außerhalb des Dokuments [d. h. es nimmt keine Position mehr im Dokument ein] und kann gemäß der Einstellung oben, unten, links und rechts genau positioniert werden. Wenn ein Element absolut

ist Nach der Positionierung basiert seine Referenz darauf, ob das Element, das sich selbst am nächsten liegt, eine relative Positionierung festgelegt hat. Wenn es festgelegt ist, wird das Element positioniert, das sich selbst am nächsten liegt. Wenn nicht, wird nach dem relativen Positionierungselement in seinem Vorfahren gesucht Element, bis es HTML findet.

3 Position:fest

Theoretisch wird ein Element, das auf „Fest“ gesetzt ist, an einer bestimmten Koordinate im Browserfenster positioniert und an dieser Position fixiert, unabhängig davon, ob das Fenster gescrollt wird oder nicht.

Behoben: Das Objekt ist vom normalen Dokumentfluss getrennt. Verwenden Sie die Attribute „oben“, „rechts“, „unten“, „links“ und andere, um das Fenster als Referenzpunkt zu positionieren. Wenn die Bildlaufleiste angezeigt wird, wird das Objekt nicht gescrollt. Und seine Kaskadierung wird durch das Z-Index-Attribut

bestimmt Bedeutung. Hinweis

Hinweis: Wenn ein Element mit „position:absolute |“ festgelegt ist, kann das Element nicht auf „float“ festgelegt werden. Dies ist ein allgemein bekannter Punkt, da es sich um zwei verschiedene Streams handelt, einer ist ein schwebender Stream und der andere ist „Positionierung

“. „Fluss“. Da der ursprünglich belegte Platz immer noch den Dokumentenfluss einnimmt

Die Positionierung erfolgt über die folgenden vier Attribute:

links oben richtig unten Z-Index