Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Welche Arten von CSS-Eigenschaften gibt es?

coldplay.xixi
Freigeben： 2023-01-03 09:31:18
Original
5926 Leute haben es durchsucht

css属性类型有：1、html标签；2、CSS文字属性；3、CSS符号属性；4、CSS背景样式；5、CSS表单运用；6、CSS边界样式。

Welche Arten von CSS-Eigenschaften gibt es?

本教程操作环境：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öchten

  • HyperlinkName des Link-Standorts

  • Die Wörter, die Sie anzeigen möchten, geben Sie hier einWebmail-Label

  • Image

  • Marquee (Schleife) Wörter, die Sie eingeben möchten

  • Externes Dateiimportformat-Tag

    • CSS Externes Importformat: 
  • <link rel="stylesheet" type="text/css" href="/css.css" />
    Nach dem Login kopieren

    Direktes Zitat: 

    <style type="text/css">
<!--
id{...}
-->
</style>
    Nach dem Login kopieren
    • javascript - Externe .js-unabhängige Datei laden: 
  • <script type="text/javascript" src="/script.js"></script>
    Nach dem Login kopieren

    2. CSS-Textattribute:

  • 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*/
text -align:left; /*text-linke Ausrichtung*/

text-align:center; /*text-zentrierte Ausrichtung*/

text-align:justify; /*text-streuende Ausrichtung*/

vertikal-align-Attribut

vertikal ausrichten:top; /*Vertikal nach oben ausrichten*/

vertical-align:bottom; /*Vertikal nach unten ausrichten*/

vertical-align:middle; /*Vertikal in der Mitte 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 an

Hintergrundposition: 90 % 90 %; /*Die Position des Hintergrundbilds auf der X- und Y-Achse*/

Hintergrundposition : oben; /*Nach oben ausrichten */

Hintergrundposition: unten; /*Nach unten ausrichten*/

Hintergrundposition: nach rechts 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