Welche Arten von CSS-Eigenschaften gibt es?
css属性类型有:1、html标签;2、CSS文字属性;3、CSS符号属性;4、CSS背景样式;5、CSS表单运用;6、CSS边界样式。
本教程操作环境:windows7系统、css3版,DELL G3电脑。
css属性类型有:
一、html标签
...
文字格式化- ......Spaltenblockcontainer
SchriftgrößenänderungDas Wort, das Sie eingeben möchten
SchriftfarbeDas Wort, das Sie eingeben möchten Geben Sie ein. Unterstreichen Siedas Wort, das Sie eingeben möchten. ㄉGrammatik< ;p align="left">Inhalt
Nach rechts ausrichtenㄉSyntax
Inhalt
Schrift durchgestrichen
Geben Sie das Wort, das Sie eingeben möchten, in eine neue Zeile ein
Das Wort, das Sie eingeben möchtenHyperlinkName des Link-Standorts
-
Die Wörter, die Sie anzeigen möchten, geben Sie hier einWebmail-Label
Image
Marquee (Schleife)
Externes Dateiimportformat-Tag
CSS Externes Importformat: <link rel="stylesheet" type="text/css" href="/css.css" />
Nach dem Login kopierenDirektes Zitat:
<style type="text/css"> <!-- id{...} --> </style>
Nach dem Login kopierenjavascript - Externe .js-unabhängige Datei laden: - 2. CSS-Textattribute:
<script type="text/javascript" src="/script.js"></script>
Nach dem Login kopieren - Farbe: #999999; /*Textfarbe*/
- Schriftart -Familie: Song Dynasty, serifenlos; /*Textschrift*/Schriftgröße: 9pt; /*Textgröße*/
- Schriftart:itelic; /*Text kursiv*/Schriftart: Kapitälchen; /*Kleine Schriftart */
- Buchstabenabstand: 1pt; /*Leerzeichen zwischen Wörtern*/Zeilenhöhe: 200 %; /*Schriftstärke festlegen:fett; *Text fett*/
- vertikal-align:sub; /*subscript*/vertikal-align:super; /*superscript*/
- text-decoration:line-through; /*durchgestrichen*/text- Dekoration: Overline; Erster Text in Großbuchstaben*/
- Texttransformation: Großbuchstaben; /*Englischer Kleinbuchstabe*/text-align:right; /*Text rechtsbündig*/
vertical-align:bottom; /*Vertikal nach unten ausrichten*/
vertical-align:middle; /*Vertikal in der Mitte ausrichten*/Hintergrundposition: nach rechts ausrichten* /vertikal -align: text-top; /*Text vertikal nach oben ausrichten*/
vertical-align:text-bottom; /*Text vertikal nach unten ausrichten*/
3. CSS-Symbolattribute:
list-style -type:none; /*Keine Zahl*/
list-style-type:decimal; /*Arabische Ziffern*/
list-style-type:lower-roman; /*Kleine römische Ziffern*/
list- Style-Type:upper-roman; Buchstaben* /
List-Style-Type:Disc; /*Solid-Rundschreiben-Symbol*/
List-Style-Type:Kreis; /*Hohl-Rundschreiben-Symbol*/
List-Style-Type:Quadrat; Quadratisches Symbol*/
list-style-image:url(/dot.gif); /*Picture symbol*/
list-style-position:outside; /*Convex row*/
list-style-position : innen; /*Einzug*/
Hintergrundfarbe: #F5E2EC; /*Hintergrundfarbe*/
Hintergrund- Bild: URL(/image/bg.gif); /*Hintergrundbild*/
Hintergrundanhang: behoben; /*Wasserzeichen fester Hintergrund*/
Hintergrundwiederholung: wiederholen; /*Anordnung wiederholen – Webseite Standard* /
Hintergrundwiederholung: keine Wiederholung; /*Keine Wiederholungsanordnung*/
Hintergrundwiederholung: Wiederholung-x; /*Hintergrundwiederholung: Wiederholung-y / *Wiederholen Sie die Anordnung auf der Y-Achse*/
Geben Sie die Hintergrundposition anHintergrundposition: 90 % 90 %; /*Die Position des Hintergrundbilds auf der X- und Y-Achse*/
Hintergrundposition : oben; /*Nach oben ausrichten */
Hintergrundposition: unten; /*Nach unten ausrichten*/
background -position : center; /*centeralignment*/
5. CSS-Verbindungseigenschaften:
a /*Alle Hyperlinks*/
a:Link /*Hyperlink-Textformat*/
a:besucht /*Gesehener Link-Textformat*/
a:aktiv /*Gedrücktes Linkformat */
a: Hover /*Maus zum Verknüpfen*/
Mauszeiger-Stil:
Linker Finger-CURSOR: Hand
Kreuzkörper-Cursor: Fadenkreuz
Pfeil-nach-unten-Cursor:s-Größe ändern
Kreuzpfeil-Cursor: Bewegen
Pfeil zeigt nach rechts Cursor: bewegen
plus Fragezeichen Cursor: Hilfe
Pfeil zeigt nach links Cursor: w-Größe ändern
Pfeil zeigt nach oben Cursor: n-Größe ändern
Pfeil zeigt nach oben rechter Cursor: ne-Größe ändern
Pfeil zeigt Cursor nach oben und links:nw-resize
Text Ich tippe Cursor:text
Pfeil diagonal nach unten rechts Cursor:se-resize
Pfeil diagonal nach unten links Cursor:sw-resize
Trichtercursor:wait
Cursormuster ( IE6 ) p {cursor:url("cursor file name.cur"),text;}
6. CSS-Rahmenliste:
border-top : 1px solid #6699cc; /*Top border* /
border-bottom : 1px solid #6699cc; /*Bottom border*/
border-left : 1px solid #6699cc; /*Left border*/
border-right : 1px solid #6699cc; /*Right border line*/
Oben ist die empfohlene Schreibmethode, Sie können aber auch die herkömmliche Methode wie folgt verwenden:
border-top-color: #369 /*Legen Sie die obere Farbe der oberen Randlinie fest*/
border- top- width :1px /*Legen Sie die obere Breite des oberen Randes fest*/
border-top-style : solid/*Legen Sie den oberen Stil des oberen Randes fest*/
Andere Randstile
solid /* Voller Rand*/
gepunktet /*gepunkteter Rahmen*/
doppelt /*doppelter Rahmen*/
Rille /*dreidimensionaler konvexer Rahmen*/
Rippe /*dreidimensionaler Reliefrahmen*/
Einsatz / *konkaver Rahmen*/
Ausgang /*konvexer Rahmen*/
7. CSS-Formularanwendung:
Textfeld
button
checkbox
select button< ; input type="radio" value="V1" geprüft name="R1">
Mehrzeiliges Textfeld
Dropdown-Menü
select> ;
8. CSS-Randstil:
margin-top:10px; /*top border*/
margin-right:10px; /*right border value*/
margin-bottom: 10px ; /*Unterer Randwert*/
margin-left:10px; /*Linker Randwert*/
9. CSS-Randwert:
Oberen Rand lassen blank* /
padding-right:10px; /*Lass den rechten Rand leer*/
padding-bottom:10px; /*Lass den unteren Rand leer*/
padding-left:10px; Rand leer*/
Verwandte Tutorial-Empfehlungen: CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonWelche Arten von CSS-Eigenschaften gibt es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Erstellen Sie dynamische Hintergrundeffekte: Durch die flexible Verwendung von CSS-Attributen im Webdesign sind Hintergrundeffekte ein sehr wichtiger Bestandteil, sie können der Website eine lebendige Atmosphäre verleihen und das Benutzererlebnis verbessern. Als Schlüsselsprache für die Gestaltung von Webseitenstilen bietet CSS volle Flexibilität und Vielfalt und bietet eine Fülle von Attributen und Techniken zum Erstellen verschiedener dynamischer Hintergrundeffekte. In diesem Artikel wird anhand spezifischer Codebeispiele die flexible Verwendung einiger gängiger CSS-Eigenschaften vorgestellt, um wunderbare dynamische Hintergrundeffekte zu erzielen. 1. Hintergrund mit Farbverlauf. Der Hintergrund mit Farbverlauf kann Webseiten Charme verleihen

Das Standardanzeigeverhalten für Komponenten im Angular-Framework gilt nicht für Elemente auf Blockebene. Diese Designwahl fördert die Kapselung von Komponentenstilen und ermutigt Entwickler, bewusst zu definieren, wie jede Komponente angezeigt wird. Durch explizites Festlegen der CSS-Eigenschaft display kann die Anzeige von Angular-Komponenten vollständig gesteuert werden, um das gewünschte Layout und die gewünschte Reaktionsfähigkeit zu erreichen.

In CSS stellt Groove einen Rahmenstil dar, der einen Groove-ähnlichen Effekt erzeugt. Die spezifische Anwendung ist wie folgt: Verwenden Sie die CSS-Eigenschaft border-style: Groove; der rillenförmige Rand hat eine konkave Innenkante, eine erhöhte Außenkante und einen Schatteneffekt.

In HTML können Sie den Rahmen über das CSS-Attribut „border-style“ auf eine gepunktete Linie festlegen: Bestimmen Sie das Element, für das Sie einen gepunkteten Rahmen festlegen möchten, verwenden Sie beispielsweise das p-Element, um einen Absatz darzustellen. Verwenden Sie das Attribut border-style, um den Stil der gepunkteten Linie festzulegen. Gepunktet steht beispielsweise für eine gepunktete Linie und gestrichelt für eine kurze gestrichelte Linie. Legen Sie andere Randeigenschaften fest, z. B. Randbreite, Randfarbe und Randposition, um die Randbreite, -farbe und -position zu steuern.

Es gibt zwei Möglichkeiten, das Hintergrundbild in Layui festzulegen: Verwenden Sie den CSS-Stil: body { background-image: url("path/to/image.jpg" } verwenden Sie die Laui-API:layui.use('element', function( ) { element.addStyle('.layui-body{background-image: url("path/to/image.jpg");}') });

Wie verwende ich CSS3-Eigenschaften, um den Umbrucheffekt von Webseitentext zu erzielen? Im modernen Webdesign sind Textumbrucheffekte eine gängige und interessante Präsentationsmethode. Durch die Verwendung von CSS3-Eigenschaften können wir problemlos den Umbrucheffekt von Webtext erzielen. In diesem Artikel werden einige häufig verwendete CSS3-Eigenschaften und ihre Anwendung zum Erzielen von Textumbrucheffekten vorgestellt. 1. Float-Attribut Das Float-Attribut ist ein Attribut, das in CSS verwendet wird, um den Float eines Elements festzulegen. In Kombination mit dem Clear-Attribut kann der Effekt erzielt werden, dass Text das Bild umgibt. Hier ist ein Beispiel: &

CSS-Eigenschaftstechniken zum Erzielen cooler Scrolling-Effekte erfordern spezifische Codebeispiele. CSS ist ein unverzichtbarer Bestandteil des Webdesigns, um das interaktive Erlebnis von Webseiten zu verbessern. Unter diesen ist der Bildlaufeffekt ein sehr häufiger und sehr cooler Effekt, mit dem Webseitenelemente mit einem sanften Animationseffekt an eine bestimmte Position gescrollt werden können. In diesem Artikel werden einige CSS-Eigenschaftstechniken vorgestellt, um coole Scrolleffekte zu erzielen, und spezifische Codebeispiele bereitgestellt. 1. Verwenden Sie das CSS-Attribut scroll-behavior, um ein reibungsloses Scrollen zu erreichen

Wie kann das Problem der Header-Fehlausrichtung einer WordPress-Website gelöst werden? Wenn Sie auf Ihrer WordPress-Site auf Probleme mit der Kopffehlausrichtung stoßen, kann das verwirrend und frustrierend sein. Dieses Problem kann verschiedene Ursachen haben, z. B. CSS-Stilfehler, Javascript-Konflikte, Plug-in-Probleme usw. In diesem Artikel besprechen wir, wie das Problem der Header-Fehlausrichtung in WordPress gelöst werden kann, und stellen spezifische Codebeispiele bereit. 1. Überprüfen Sie die CSS-Stile. Überprüfen Sie zunächst das CSS-Stylesheet Ihres Themes auf Fehler oder Konflikte.
