Gängige Stile von HTML5-Tags, CSS3

Name: hat die folgenden 6 Werte:
Anwendungsname: Dokumentname oder Anwendungsname. Das gesamte Dokument kann nur einen Wert enthalten.
Autor: Dokumentautor
Beschreibung: Dokumentbeschreibung
Generator: Programm, das Dokumente generiert.
Schlüsselwörter: Webseitenschlüsselwörter, durch englische Kommas getrennt.

<a href="http://www.baidu.com">百度一下</a><br><br><span style="background-color: #00ccff">href:路径</span>

<img src="../img/a.jpg" alt="此图无法显示" border="1px solid red" width="400" height="250"/><br><span style="background-color: #00ccff">src：图片路径<br><br></span>

Attribute des Tags
Randgrenze
Außenrand der Zellenabstandstabelle
Innenrand der Zellenpolstertabelle
Position ausrichten
Hintergrundfarbe: Hintergrundfarbe
Hintergrund: Hintergrundbild
Rahmenfarbe: Rahmenfarbe

Tabelle in

colspan umfasst 2 Spalten

Zeilenspanne über Zeilen hinweg

Typwert

Texttext

Passwort Passwort

Radio-Single-Choice

Kontrollkästchen Mehrfachauswahl

zurücksetzen zurücksetzen

Datei hochladen

Einreichungsformular einreichen

Bildgrafik-Einreichung

Schaltfläche normale Schaltfläche

Gruppen-Dropdown-Menü

<<span style="background-color: #00ccff">select</span> name="city" id="city"><br>    <<span style="background-color: #00ccff">optgroup</span> label="山东"><br>        <<span style="background-color: #00ccff">option</span> value="yt">烟台</option><br>        <option value="qd">青岛</option><br>        <option value="wh">威海</option><br>    </optgroup><br>    <optgroup label="北京"><br>        <option value="bj">bj</option><br>        <option value="tam">tam</option><br>        <option value="zong">zong</option><br>    </optgroup><br></select><br><br>文字区域<span style="background-color: #00ccff">textarea</span>

<textarea name="textarea" id="textarea" <span style="background-color: #00ccff">cols="30" rows="10"</span> readonly="readonly"<br>        disabled="disabled"><br>    1</textarea><br>cols 宽度 rows 高度  readonly 只读<br><br><span style="background-color: #800080">css样式</span>

Schriftart, Schriftgröße:
Schriftart (Kurzform)
Schriftstärke (Dicke) normal (normal) fett (fett) kursiv (kursiv)
font-size (Größe)
font-family (Schriftfamilie)
font-style (Schriftstil)

Schriftfarbe:
Farbe
Deckkraft (Transparenz CSS3)

Zeilenabstand, Ausrichtung usw.:
line-height (Zeilenhöhe)
text-align (Ausrichtung)
letter- spacing (Zeichenabstand)
text-decoration (Textdekoration)
overflow Den überschüssigen Teil ausblenden
text-overflow

text-overflow-Textbeschneidung wird beim Beschneiden von Text nicht hinzugefügt ... Auslassungspunkte werden beim Zuschneiden hinzugefügt ... Hinweis: Keine Zeilenumbrüche und Überlaufkontrolle

Textschatten Schatten
Texteinzug

Hintergrundattribute:
Hintergrund (abgekürzt)
Hintergrundfarbe (Hintergrundfarbe)
Hintergrundbild (Hintergrundbild)
Hintergrundwiederholung (Hintergrundbild-Wiederholungsmethode)
Hintergrundposition (Positionskoordinaten, Versatz)

Häufig verwendete Listen

Listenstil: keine, kein Stil, Scheibe, Vollkreis, Kreis, Hohlkreis, Quadrat, Vollquadrat, Dezimalzahl

Box-Attribute:
margin (margin/border) 1, 2 und 4 Werte können hauptsächlich oben geschrieben werden
border (border)
Polsterung (Polsterung/Polsterung)

kann von -top und anderen Anweisungen

gefolgt werden

border-radius border abgerundete Ecken

Box-Shadow-Schatten

Transformationseffekt: transformieren

transform-origin gibt den Startpunkt der Transformation an

keine keine Transformation

translate（长度值或百分比） translateX translateY 在水平、垂直方向平移

scale（数值）scaleX scaleY 在水平方向、垂直方向或两个方向上缩放

rotate（角度）旋转元素

skew（角度）skewX skewY  在水平方向、垂直方向或两个方向上使元素倾斜一定的角度

matrix 自定义

 

过渡效果：transition

transition-property 指定过渡的css属性 默认值 all

transition-duration 完成过渡的时间

transition-timing-function 指定过渡函数  缓动效果默认值ease 等同于（0.25， 0.1， 0.25， 1.0） 

transition-delay 指定过渡开始出现的延迟时间

 

@keyframes：定义一个动画

animation

<span style="color: #0000ff"><</span><span style="color: #800000">style</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #800000">          
  .t5</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
            transition</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 5s ease-out all</span><span style="background-color: #f5f5f5; color: #000000">;</span>   <span style="background-color: #f5f5f5; color: #008000">/*</span><span style="background-color: #f5f5f5; color: #008000">过渡   ease    in 加速   out减速</span><span style="background-color: #f5f5f5; color: #008000">*/</span>
        <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #008000">/*</span><span style="background-color: #f5f5f5; color: #008000">transition-delay延迟</span><span style="background-color: #f5f5f5; color: #008000">*/</span><span style="background-color: #f5f5f5; color: #800000">
        .t5:hover</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">

            transform</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> skew(45deg,45deg)
        </span><span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
        @keyframes key </span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
            0%{
                background-color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> red</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 200px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 200px</span><span style="background-color: #f5f5f5; color: #000000">;</span>
            <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
            25%</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
                background-color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> orange</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 100px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 100px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">transform</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> rotate(-90deg)</span><span style="background-color: #f5f5f5; color: #000000">;</span>
            <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
            50%</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
                background-color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> yellow</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 60px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 60px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">transform</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> none</span><span style="background-color: #f5f5f5; color: #000000">;</span>
            <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
            75%</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
                background-color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> green</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 120px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 120px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">transform</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> none</span><span style="background-color: #f5f5f5; color: #000000">;</span>
            <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
            100%</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
                background-color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> blue</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 200px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 200px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">transform</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> rotate(360deg)</span><span style="background-color: #f5f5f5; color: #000000">;</span>
            <span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
        }
        .kt</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
            animation</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">key 1s</span><span style="background-color: #f5f5f5; color: #000000">;</span>
           <span style="background-color: #f5f5f5; color: #008000">/*</span><span style="background-color: #f5f5f5; color: #008000"> animation-iteration-count: infinite;</span><span style="background-color: #f5f5f5; color: #008000">*//*</span><span style="background-color: #f5f5f5; color: #008000">无限循环</span><span style="background-color: #f5f5f5; color: #008000">*/</span><span style="background-color: #f5f5f5; color: #ff0000">
            background-color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> yellow</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">
            width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 200px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 200px</span><span style="background-color: #f5f5f5; color: #000000">;</span>

        <span style="background-color: #f5f5f5; color: #000000">}<br><br></span> <span style="color: #0000ff"></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>

<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="kt t5"</span><span style="color: #0000ff">></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>

 

<span style="background-color: #00ccff"><br><br><br><br></span>

 

Verwandte Etiketten：

html5标签css3的常用样式

Quelle：php.cn

Vorheriger Artikel：[Lesenotizen „Bootstrap Practical Combat“] 6. Einseitige Marketing-Website Nächster Artikel：Ausführliche Erklärung von CSS in JavaWeb

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

• Was ist eine NullPointerException und wie behebe ich sie?
  2024-10-22 09:46:29
• Vom Anfänger zum Programmierer: Ihre Reise beginnt mit C-Grundlagen
  2024-10-13 13:53:41
• Webentwicklung mit PHP freischalten: Ein Leitfaden für Anfänger
  2024-10-12 12:15:51
• C entmystifizieren: Ein klarer und einfacher Weg für neue Programmierer
  2024-10-11 22:47:31
• Entfalten Sie Ihr Programmierpotenzial: C-Programmierung für absolute Anfänger
  2024-10-11 19:36:51
• Entfesseln Sie Ihren inneren Programmierer: C für absolute Anfänger
  2024-10-11 15:50:41
• Automatisieren Sie Ihr Leben mit C: Skripte und Tools für Anfänger
  2024-10-11 15:07:41
• PHP leicht gemacht: Ihre ersten Schritte in der Webentwicklung
  2024-10-11 14:21:21
• Erstellen Sie alles mit Python: Ein Leitfaden für Anfänger, um Ihrer Kreativität freien Lauf zu lassen
  2024-10-11 12:59:11
• Der Schlüssel zum Programmieren: Die Leistungsfähigkeit von Python für Anfänger freischalten
  2024-10-11 12:17:31

Aktuelle Ausgaben

Wie kann ich dafür sorgen, dass mein Bild auf der Hauptanzeige der Seite erscheint? Ich möchte einige Fotos über NASAAPI erhalten. Diese Fotos werden dann im Miniaturbild und...

Aus 2024-04-06 15:33:12

0

1

433

Wie verwende ich CSS-Selektoren, um auf div-Elemente abzuzielen, die bestimmte Attribute oder Tags enthalten? Ich arbeite an einem POS-System, das eine Website generiert. Der größte Teil des Codes ist...

Aus 2024-04-03 22:25:59

0

1

277

GetElementsByTagName-Formatfilter (benötige dringend Hilfe) Ich versuche, eine NodeList zu formatieren, die ich über getElementsByTagName erhalte. Eig...

Aus 2024-04-02 00:41:46

0

2

419

Der Flex-Abstand ist fehlerhaft, wenn versucht wird, das HTML-Tag <pre><code> überlaufen zu lassen, anstatt es umzubrechen Ich wende CSS auf den Vorcode-Selektor an, um gestaltete Codeblöcke zu erstellen, wie Sie ...

Aus 2024-04-01 12:22:06

0

1

296

verwandte Themen

Mehr>

• Die Rolle des Füllattributs in CSS
• Linux-Suchbefehlsverwendung
• Der Win10-Bluetooth-Schalter fehlt
• So legen Sie die PPT-Seitenzahl fest
• So verwenden Sie die Filterfunktion
• Was bedeutet c#?
• Verwendung von UpdatePanel
• Verwendung von „distinct' in SQL

Beliebte Empfehlungen

• Was bedeutet URL?
• Was bedeutet DOM?
• So ändern Sie die Bildgröße
• So machen Sie die Schriftart in HTML fett
• So legen Sie die Größe von HTML-Bildern fest

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

• 
  最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

  1420982
• 
  php入门教程之一周学会PHP

  4264469
• 
  JAVA 初级入门视频教程

  2513854
• 
  小甲鱼零基础入门学习Python视频教程

  506031
• 
  PHP 零基础入门教程

  861138

• 
  最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

  1420982 Lernzeiten
• 
  JAVA 初级入门视频教程

  2513854 Lernzeiten
• 
  小甲鱼零基础入门学习Python视频教程

  506031 Lernzeiten
• 
  Web前端开发极速入门

  215593 Lernzeiten
• 
  零基础精通 PS 视频教程

  885646 Lernzeiten

• 
  【web前端】Node.js快速入门

  7161 Lernzeiten
• 
  国外Web开发全栈课程全集

  5559 Lernzeiten
• 
  Go语言实战之 GraphQL

  4682 Lernzeiten
• 
  550W粉丝大佬手把手从零学JavaScript

  670 Lernzeiten
• 
  python大神Mosh，零基础小白6小时完全入门

  23674 Lernzeiten

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage

• [Formular-Schaltfläche] Kontaktcode für das jQuery-Enterprise-Nachrichtenformular
• [Spezialeffekte für Spieler] Wiedergabeeffekte für HTML5-MP3-Spieluhren
• [Menünavigation] HTML5 coole Partikelanimations-Navigationsmenü-Spezialeffekte
• [Formular-Schaltfläche] Drag-and-Drop-Bearbeitungscode für visuelle jQuery-Formulare
• [Spezialeffekte für Spieler] VUE.JS imitiert den Kugou-Musik-Player-Code
• [HTML5-Spezialeffekte] Klassisches HTML5-Pushing-Box-Spiel
• [Bildspezialeffekte] jQuery-Scrollen zum Hinzufügen oder Reduzieren von Bildeffekten
• [Fotoalbumeffekte] Persönlicher CSS3-Albumcover-Hover-Zoom-Effekt

• [Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen
• [Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben
• [Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer
• [Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens
• [Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen
• [Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren
• [Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen
• [Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil

• [PNG material] 可爱的夏天元素矢量素材(EPS+PNG)
• [PNG material] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)
• [Banner image] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)
• [PNG material] 金色的毕业帽矢量素材(EPS+PNG)
• [PNG material] 黑白风格的山脉图标矢量素材(EPS+PNG)
• [PNG material] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)
• [Banner image] 扁平风格的植树节banner矢量素材(AI+EPS)
• [PNG material] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)

• [Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen
• [Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben
• [Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer
• [Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens
• [Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen
• [Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren
• [Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen
• [Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil

Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！

Über uns Haftungsausschluss Sitemap

© php.cn All rights reserved