Heim > Web-Frontend > CSS-Tutorial > Eine komplette Sammlung von Webdesign-CSS-Stilcodes, kommen Sie und holen Sie sie ab!

Eine komplette Sammlung von Webdesign-CSS-Stilcodes, kommen Sie und holen Sie sie ab!

奋力向前
Freigeben: 2021-07-09 18:26:15
nach vorne
20738 Leute haben es durchsucht

Reduzieren Sie viel unnötigen Code, HTML + CSS können die Webseite einfach gestalten. Sammelt es, Freunde~

Eine komplette Sammlung von Webdesign-CSS-Stilcodes, kommen Sie und holen Sie sie ab!

1. Texteinstellungen

1, font-size: Schriftgrößenparameter font-size: 字号参数 

2、font-style: 字体格式

3、font-weight: 字体粗细

4、颜色属性

color

2, Schriftstil: Schriftformat

3, font-weight: Schriftstärke4, FarbattributFarbe: Parameter
Hinweis Verwendung Websichere Farben

2. Hyperlink-Einstellungen

  • text-decoration: 参数
    Nach dem Login kopieren
    Der Hauptzweck besteht darin, die Unterstreichung zu ändern, wenn der Browser Textlinks anzeigt.

  • Wertebereich des Parameters:

  • underline: Unterstreiche den Text

  • overline: unterstreiche den Text

  • line-through: füge den Text durchgestrichen hinzu

blinken: Text erstellen blinken keine: Keine der oben genannten Effekte anzeigen


3. Hintergrund

  • 1. Hintergrundfarbe

rrree

2. Hintergrundbild

background-color: 参数
Nach dem Login kopieren

  • URL ist der Speicherpfad des Hintergrundbildes, „keine“ bedeutet „keine“.

  • 3. Hintergrundbildwiederholung

    background-image: url(URL)
    Nach dem Login kopieren

    Parameterwertebereich:
  • no-repeat: Gekachelte Hintergrundbilder nicht wiederholen

repeat-x: Das Bild nur in horizontaler Richtung kacheln lassen

repeat-y: Das Bild nur in vertikaler Richtung kacheln lassen

  • Wenn Sie das Hintergrundbild-Wiederholungsattribut nicht angeben, wird das Hintergrundbild standardmäßig sowohl in horizontaler als auch in vertikaler Richtung gekachelt.

    4. Hintergrundbild behoben
  • Hintergrundbild behoben steuert, ob das Hintergrundbild beim Scrollen der Webseite mitläuft. Wenn Sie das Attribut „Hintergrundbild fest“ nicht festlegen, scrollt das Standardhintergrundbild des Browsers mit dem Scrollen der Webseite. Um zu vermeiden, dass übermäßig ausgefallene Hintergrundbilder die Aufmerksamkeit des Betrachters beim Scrollen ablenken, werden sie im Allgemeinen auf fest eingestellt.

    background-repeat: 参数
    Nach dem Login kopieren
    Fenster, fest

scrollen: Wenn die Webseite gescrollt wird, scrollt das Hintergrundbild zusammen relativ zum Browserfenster

4. Block

1. Wortabstand

background-attachment: 参数
Nach dem Login kopieren

2, Buchstabe Abstand

word-spacing: 间隔距离
Nach dem Login kopieren
    3. Textausrichtung
  • letter-spacing: 字母间距
    Nach dem Login kopieren

    Parameterwerte:

  • left: linke Ausrichtung

  • right: rechte Ausrichtung

  • center: zentrierte Ausrichtung

justify: relative Links- und Rechtsausrichtung

  • 4, vertikale Ausrichtung

  • Vertical-Align: Parameter

  • Top: Top-Pairing-Qi

  • bottom: Gesamtausrichtung

  • Text-Top: Relativer Text oben

  • text-bottom: relative Textausrichtung unten

baseline: Grundlinienausrichtung

middle: zentrierte Ausrichtung

  • sub: wird in Form von tiefgestellten Zeichen angezeigt

  • super: wird in Form von hochgestellten Zeichen angezeigt

  • 5. Texteinzug
  • text-align: 参数
    Nach dem Login kopieren

    12px entspricht einem Textabstand 6. Leerzeichen

  • Block: Blockebene Elemente, Zeilenumbrüche vor und nach dem Objekt

inline: keine Zeilenumbrüche vor und nach dem Objekt
list-item: Zeilenumbrüche vor und nach dem Objekt, Aufzählungszeichen erhöhen

🎜🎜🎜🎜none: Keine Anzeige 🎜🎜🎜🎜🎜🎜 5. Box 🎜🎜 🎜🎜
  • height 高度

  • width 宽度

  • padding 内边距

  • margin 外边距

  • float(浮动):可以让块级元素在一行中排列,例如横向菜单。

  • clear 清除浮动

六、边框

1、样式

border-style 参数
Nach dem Login kopieren

边框样式的参数:

  • none:无边框

  • dotted:边框为点线

  • dashed:边框为长短线

  • solid:边框为实线

  • double:边框为双线

2、宽度

border-width:参数
Nach dem Login kopieren

3、颜色

border-color:参数
Nach dem Login kopieren

七、列表

list-style-type:列表样式
Nach dem Login kopieren

不同浏览器的列表符可能不相同,可能会影响到网页,所以网页中的列表大多都是由背景图片显示。

控制用户界面的样式

八、鼠标

cursor:鼠标形状参数
Nach dem Login kopieren

CSS鼠标形状参数表:

鼠标形状:CSS代码

style="cursor:hand"      手形
style="cursor:crosshair"   十字形
style="cursor:text"      文本形
style="cursor:wait"      沙漏形
style="cursor:move"     十字箭头形:
style="cursor:help"      问号形
style="cursor:e-resize"    右箭头形
style="cursor:n-resize"    上箭头形
style="cursor:nw-resize"   左上箭头形
style="cursor:w-resize"    左箭头形
style="cursor:s-resize"    下箭头形 
style="cursor:se-resize"   右下箭头形 
style="cursor:sw-resize"   左下箭头形
Nach dem Login kopieren

总结:

用常用HTML+CSS的代码做一个漂亮简单的个人网页,小伙伴来试试。

推荐学习:CSS视频教程

Das obige ist der detaillierte Inhalt vonEine komplette Sammlung von Webdesign-CSS-Stilcodes, kommen Sie und holen Sie sie ab!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage