选择器 { 声明1; 声明2; ... }
<html> <head> <style> p { color: blue; font-size: 20px; } </style> </head> <body> <p>这是一个段落。</p> </body> </html>
p
-Selektor ein, um den Stil für alle <p>
-Elemente anzugeben. Die color
-Anweisung wird verwendet, um die Textfarbe als Blau anzugeben, und die font-size
-Anweisung wird verwendet, um die Textgröße als 20 Pixel anzugeben. p
选择器,用于指定所有<p>
元素的样式。color
声明用于指定文字颜色为蓝色,font-size
声明用于指定文字大小为20像素。
p
表示所有<p>
元素。#my-id
指定ID为my-id
的元素。.my-class
指定具有my-class
类的所有元素。div p
将选择所有在<div>
元素中的<p>
元素。div > p
将选择所有是<div>
元素的直接子元素的<p>
元素。my-div
的<div>
元素中的所有段落元素:
#my-div p { color: red; }
+----------------------------------+ | Margin | | +------------------------+ | | | Border | | | | +---------------+ | | | | | Padding | | | | | | | | | | | +---------------+ | | | | Content | | | +------------------------+ | | Margin | +----------------------------------+
选择器 { margin: 上 右 下 左; border: 厚度 样式 颜色; padding: 上 右 下 左; width: 宽度; height: 高度; }
.box { margin: 10px; border: 2px solid red; padding: 20px; background-color: blue; }
<div>
元素的宽度设置为50%可以使其跨越屏幕的一半。position: absolute; left: 0; top: 0;
可以将元素固定在左上角。.row { display: flex; flex-wrap: wrap; } .col-2 { width: calc(50% - 20px); margin-right: 20px; } .col-3 { width: calc(33.33% - 20px); margin-right: 20px; }
transition: background-color 0.5s ease;
可以使背景颜色在0.5秒内平滑地过渡。transform: rotate(90deg);
p
alle <p>
Elemente . 🎜🎜ID-Selektor: Geben Sie ein Element mit einer bestimmten ID an, z. B. #my-id
, um ein Element mit der ID my-id
anzugeben. 🎜🎜Klassenselektor: Geben Sie Elemente mit einer bestimmten Klasse an, z. B. .my-class
, um alle Elemente mit der Klasse my-class
anzugeben. 🎜🎜Selektoren kombinieren: Kombinieren Sie verschiedene Arten von Selektoren, um die zu gestaltenden Elemente einzugrenzen. 🎜🎜Nachkommenselektor: Wählt alle Nachkommenelemente des angegebenen Elements aus. Beispielsweise wählt div p
alle <p><div>
aus Element. /code> Element. 🎜🎜Wähler für untergeordnete Elemente: Wählt die direkten untergeordneten Elemente des angegebenen Elements aus. Beispielsweise wählt div > alle <code>-Elemente aus, die direkte untergeordnete Elemente von <code><div> sind ;
-Element. ><p>-Element. 🎜🎜🎜Zum Beispiel formatiert der folgende CSS-Code alle Absatzelemente innerhalb des <div>
-Elements mit der ID my-div
: 🎜@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
.blink { animation: blink 1s infinite; }
<div>
auf 50 % festlegen, würde es sich über die Hälfte des Bildschirms erstrecken. 🎜🎜Festes Layout: Positionieren Sie Elemente auf der Seite mit festen Größen und absoluter Positionierung. Verwenden Sie beispielsweise position: absolute; top: 0;
, um ein Element in der oberen linken Ecke zu positionieren. 🎜🎜Flexibles Layout: Verwenden Sie das Flex-Box-Modell, um die Beziehung zwischen Elementen zu definieren. Sie können Attribute wie Flex-Direction, Justify-Content und Align-Items verwenden, um die Ausrichtung und Anordnung von Elementen zu steuern. 🎜🎜Rasterlayout: Verwenden Sie ein Rastersystem, um Inhalte zu positionieren und auszurichten. Mit dem Bootstrap-Framework können beispielsweise responsive Grid-Layouts problemlos erstellt werden. 🎜🎜🎜Hier ist ein Beispiel für einen CSS-Layoutcode, der mithilfe eines Rasterlayouts mehrere Elemente in zwei und drei Spalten unterteilt: 🎜rrreeetransition: background-color 0.5sease;
verwenden, kann der Übergang der Hintergrundfarbe in 0,5 Sekunden reibungslos erfolgen. 🎜🎜transformieren: Wird zum Transformieren der Form, Größe und Position von Elementen verwendet. Verwenden Sie beispielsweise transform: rotate(90deg);
, um ein Element um 90 Grad zu drehen. 🎜🎜Animation: Wird zum Erstellen benutzerdefinierter CSS-Animationseffekte verwendet. Eine einfache Blink-Animation kann beispielsweise mit dem folgenden Code erstellt werden: 🎜🎜rrreee🎜 Mit dem obigen Beispiel kann die obige Blink-Animation auf ein Element angewendet werden: 🎜.blink { animation: blink 1s infinite; }
Das obige ist der detaillierte Inhalt vonwie man CSS verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!