Lassen Sie uns über CSS sprechen, mit Ausnahme des letzten Stils

<p>CSS ist eine Sprache zur Beschreibung des Stils von Webseiten. Sie kann verschiedene Elemente in Webseiten formatieren, um Webseiten zu verschönern und aufzuwerten. Der letzte Stil in CSS bezieht sich auf den letzten Stil im CSS-Stylesheet, aber tatsächlich gibt es in CSS neben dem letzten noch viele andere Dinge, die es wert sind, erkundet zu werden.

<p>1. CSS-Selektor

<p>Der CSS-Selektor wird zum Auswählen von HTML-Elementen verwendet. Sie treffen eine Auswahl basierend auf den Attributen, Beziehungen und Positionen von Elementen. Häufig verwendete Selektoren sind:

1. Tag-Selektor

<p>Der Tag-Selektor ist der am häufigsten verwendete Selektor, der Stile durch Auswahl des Tag-Namens eines HTML-Elements festlegt. Zum Beispiel:

h1 {
    color: red;
    font-size: 24px;
}

<p>Der obige Code verwendet den Tag-Selektor, um alle <h1>-Elemente auszuwählen. <h1>元素。

2. 类选择器（Class Selector）

<p>类选择器通过设置class属性来选择HTML元素，并对其进行样式设置。例如：

.text-red {
    color: red;
}

<p>然后在HTML中使用该类：

<p class="text-red">这里的文字是红色的。</p>

<p>类选择器可以用于同一页面中进行风格的统一设置。

3. ID选择器（ID Selector）

<p>ID选择器选择的是具有唯一ID属性的HTML元素，并设置其样式。例如：

#my-title {
    font-size: 36px;
}

<p>在HTML中使用该ID：

<h1 id="my-title">这是我的标题</h1>

<p>需要注意，一个HTML文档中只能有一个相同的ID值。

4. 属性选择器（Attribute Selector）

<p>属性选择器根据HTML元素的属性来进行选择，并设置样式。例如：

input[type="submit"] {
    background-color: blue;
}

<p>上述代码将对所有type属性为submit的<input>元素进行蓝色的背景设置。

5. 后代选择器（Descendant Selector）

<p>后代选择器是选择某个HTML元素的后代元素，即其子元素、孙子元素、曾孙子元素等。例如：

.container .title {
    font-size: 24px;
}

<p>上述代码表示选择class为container的元素中的所有class为title的后代元素，并将它们的字体大小设为24像素。

6. 伪类选择器（Pseudo Class Selector）

<p>伪类选择器是一个定义在选择器冒号后的关键词，用于选择特定状态的元素。例如:

a:hover {
   color: red;
}

<p>上述代码表示将链接在鼠标悬停时的颜色设置为红色。

<p>二、CSS盒子模型

<p>CSS盒子模型是指一个HTML元素的每个部分都是一个“盒子”，包括内容区域、内边距区域、边框区域和外边距区域。这个模型对于理解HTML元素的总体结构和样式设置非常重要。

<p>三、CSS单位

<p>CSS中有各种不同的单位，可以用来表示不同的样式属性，从而实现各种效果。常见的单位有：

1. 像素（Pixel）

<p>像素是一个基本的长度单位，通常被用于规定屏幕上的元素的大小。例如：

p {
    font-size: 14px;
}

2. 百分比（Percentage）

<p>百分比是相对于父元素的长度单位。例如：

.container {
    width: 80%;
}

<p>上述代码表示将.container的宽度设置为其父元素宽度的80%。

3. em和rem

<p>em和rem是相对于当前元素的字体大小的长度单位。em是相对于自身元素的字体大小，而rem是相对于根元素（通常为HTML元素）的字体大小。例如：

h1 {
    font-size: 2.5em;
}

.container {
    width: 40rem;
}

<p>上述代码中，h1元素的字体大小为自身元素字体大小的2.5倍，而.container元素的宽度为根元素字体大小的40倍。

4. 视口单位

<p>视口单位是相对于视口尺寸的长度单位，通常用于响应式设计。常见的视口单位有：

• vw/vh：相对于视口宽度和高度的1%；
• vmin/vmax：相对于视口宽度和高度中较小或较大的值的1%。

<p>例如：

.container {
    width: 80vw;
    height: 50vmin;
}

<p>上述代码中，.container元素的宽度为视口宽度的80%，高度为视口宽度和高度中较小的值的50%。

<p>四、CSS属性

<p>CSS属性是用来设置元素样式的各种属性。其中一些常见的属性包括：

1. color

<p>color属性用于设置文本颜色。

h1 {
    color: red;
}

<p>上述代码将所有的<h1>元素的文本颜色设置为红色。

2. background-color

<p>background-color属性用于设置元素的背景色。

.container {
    background-color: #f8f8f8;
}

<p>上述代码将.container元素的背景色设置为浅灰色。

3. border

<p>border属性用于设置元素的边框。

.container {
    border: 2px solid black;
}

<p>上述代码将.container元素的边框宽度设置为2像素，颜色为黑色，边框样式为实线。

4. font-size

<p>font-size属性用于设置字体大小。

p {
    font-size: 16px;
}

<p>上述代码将所有的<p>

Klassenselektor
5. Der Klassenselektor wählt HTML-Elemente aus und formatiert sie durch Festlegen des Klassenattributs. Zum Beispiel:

h1 {
    text-align: center;
}

<p> Dann verwenden Sie diese Klasse in HTML:
rrreee🎜Der Klassenselektor kann verwendet werden, um den Stil auf derselben Seite einheitlich festzulegen. 🎜
🎜ID-Selektor🎜🎜🎜Der ID-Selektor wählt HTML-Elemente mit eindeutigen ID-Attributen aus und legt deren Stile fest. Zum Beispiel: 🎜rrreee🎜Verwenden Sie diese ID in HTML: 🎜rrreee🎜 Bitte beachten Sie, dass es in einem HTML-Dokument nur einen gleichen ID-Wert geben kann. 🎜
🎜Attributselektor 🎜🎜🎜Der Attributselektor wählt Stile basierend auf den Attributen von HTML-Elementen aus und legt sie fest. Zum Beispiel: 🎜rrreee🎜Der obige Code legt einen blauen Hintergrund für alle <input>-Elemente fest, deren Typattribut submit ist. 🎜🎜🎜Descendant Selector (Descendant Selector)🎜🎜🎜Der Descendant Selector wählt die Nachkommenelemente eines HTML-Elements aus, dh seine untergeordneten Elemente, Enkelelemente, Urenkelelemente usw. Zum Beispiel: 🎜rrreee🎜Der obige Code bedeutet, alle Nachkommenelemente der Klasse title im Element mit der Klasse container auszuwählen und ihre Schriftgröße auf 24 Pixel festzulegen. 🎜
🎜Pseudo-Klassenselektor 🎜🎜🎜Pseudo-Klassenselektor ist ein nach dem Doppelpunkt des Selektors definiertes Schlüsselwort, das zum Auswählen von Elementen in einem bestimmten Zustand verwendet wird. Zum Beispiel: 🎜rrreee🎜Der obige Code bedeutet, die Farbe des Links auf Rot zu setzen, wenn die Maus darüber schwebt. 🎜🎜2. CSS-Box-Modell🎜🎜Das CSS-Box-Modell bedeutet, dass jeder Teil eines HTML-Elements eine „Box“ ist, einschließlich des Inhaltsbereichs, des Füllbereichs, des Randbereichs und des Randbereichs. Dieses Modell ist wichtig für das Verständnis der Gesamtstruktur und des Stils von HTML-Elementen. 🎜🎜3. CSS-Einheiten 🎜🎜Es gibt verschiedene Einheiten in CSS, mit denen verschiedene Stilattribute dargestellt werden können, um verschiedene Effekte zu erzielen. Gängige Einheiten sind: 🎜🎜🎜Pixel (Pixel) 🎜🎜🎜Pixel ist eine grundlegende Längeneinheit und wird normalerweise verwendet, um die Größe von Elementen auf dem Bildschirm anzugeben. Zum Beispiel: 🎜rrreee
🎜Percentage (Prozentsatz) 🎜🎜🎜Prozentsatz ist die Längeneinheit relativ zum übergeordneten Element. Zum Beispiel: 🎜rrreee🎜Der obige Code bedeutet, die Breite von .container auf 80 % der Breite seines übergeordneten Elements festzulegen. 🎜
🎜em und rem🎜🎜🎜em und rem sind Längeneinheiten relativ zur Schriftgröße des aktuellen Elements. em ist die Schriftgröße relativ zum eigenen Element, während rem die Schriftgröße relativ zum Stammelement (normalerweise ein HTML-Element) ist. Zum Beispiel: 🎜rrreee🎜Im obigen Code beträgt die Schriftgröße des Elements h1 das 2,5-fache der Schriftgröße seines eigenen Elements und die Breite des .container Das Element ist 40-mal so groß wie das Stammelement. 🎜
🎜Viewport-Einheiten🎜🎜🎜Viewport-Einheiten sind Längeneinheiten im Verhältnis zur Viewport-Größe, die häufig im responsiven Design verwendet werden. Übliche Ansichtsfenstereinheiten sind: 🎜

🎜vw/vh: 1 % relativ zur Breite und Höhe des Ansichtsfensters 🎜🎜vmin/vmax: 1 relativ zum kleineren oder größeren Wert der Breite und Höhe des Ansichtsfensters %. 🎜

🎜Zum Beispiel: 🎜rrreee🎜Im obigen Code beträgt die Breite des .container-Elements 80 % der Breite des Ansichtsfensters und die Höhe 50 % des kleineren Werts Breite und Höhe des Ansichtsfensters. 🎜🎜4. CSS-Eigenschaften 🎜🎜CSS-Eigenschaften sind verschiedene Eigenschaften, die zum Festlegen des Stils von Elementen verwendet werden. Zu den allgemeinen Eigenschaften gehören: 🎜🎜🎜Farbe🎜🎜🎜Die Farbeigenschaft wird zum Festlegen der Textfarbe verwendet. 🎜rrreee🎜Der obige Code setzt die Textfarbe aller <h1>-Elemente auf Rot. 🎜

🎜background-color🎜🎜🎜Die Eigenschaft „background-color“ wird verwendet, um die Hintergrundfarbe des Elements festzulegen. 🎜rrreee🎜Der obige Code setzt die Hintergrundfarbe des .container-Elements auf Hellgrau. 🎜
🎜border🎜🎜🎜border-Attribut wird verwendet, um den Rand eines Elements festzulegen. 🎜rrreee🎜Der obige Code legt die Rahmenbreite des Elements .container auf 2 Pixel, die Farbe auf Schwarz und den Rahmenstil auf eine durchgezogene Linie fest. 🎜
🎜font-size🎜🎜🎜font-size-Attribut wird verwendet, um die Schriftgröße festzulegen. 🎜rrreee🎜Der obige Code legt die Schriftgröße aller <p>-Elemente auf 16 Pixel fest. Die Eigenschaft „text-align“ wird zum Festlegen der Textausrichtung verwendet. 🎜

h1 {
    text-align: center;
}

<p>上述代码将所有的<h1>元素的文本居中对齐。
<p>五、CSS框架
<p>CSS框架是指提供一组预定义的CSS样式和JavaScript交互，可以快速搭建网页的开发工具。常见的CSS框架有Bootstrap、Foundation、Materialize等。它们提供了大量的预设样式和交互组件，可以极大地加速开发的进度和提升用户体验。
<p>以上就是CSS的一些基本内容和重要性，虽然CSS的最后一个很重要，但我们也要关注其它内容，以了解并掌握CSS的全部知识，从而开发出更为优秀的网页。

Das obige ist der detaillierte Inhalt vonLassen Sie uns über CSS sprechen, mit Ausnahme des letzten Stils. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!