Une collection complète de codes de style CSS de conception web, venez la récupérer !

Réduisez beaucoup de code inutile, html+css peuvent facilement mettre en page la page Web. Amis, gardez-le dans votre collection ~

1. Paramètres de texte

1, font-size : paramètres de taille de police

2, font-style : format de police

3, font-weight : épaisseur de la police

4. Attribut de couleur

color : Paramètres

Veillez à utiliser des couleurs sûres pour les pages Web

2. Paramètres des liens hypertexte

text-decoration: 参数

L'objectif principal est de modifier le soulignement lorsque le navigateur affiche des liens texte.

Plage de valeurs du paramètre :

• souligné : souligner le texte

• surligner : souligner le texte

• line-through : barrer le texte

• blink : faire clignoter le texte

• aucun : n'affiche aucun des effets ci-dessus

3. Arrière-plan

1 Couleur d'arrière-plan

background-color: 参数

2.

• L'URL est le chemin de stockage de l’image d’arrière-plan, aucun signifie aucun.

3. Répétition de l'image d'arrière-plan

background-image: url(URL)

Plage de valeurs du paramètre :

• no-repeat : Ne pas répéter les images d'arrière-plan en mosaïque

• repeat-x : Rendre l'image en mosaïque uniquement dans le sens horizontal

• répétition : créez l'image en mosaïque uniquement dans le sens vertical

Si vous ne spécifiez pas l'attribut de répétition de l'image d'arrière-plan, le navigateur affiche par défaut l'image d'arrière-plan en mosaïque dans les directions horizontale et verticale.

4. Image d'arrière-plan fixe

L'image d'arrière-plan fixe contrôle si l'image d'arrière-plan défile avec le défilement de la page Web. Si vous ne définissez pas l'attribut fixe de l'image d'arrière-plan, l'image d'arrière-plan par défaut du navigateur défilera avec le défilement de la page Web. Afin d'éviter que des images d'arrière-plan trop sophistiquées ne détournent l'attention du spectateur lors du défilement, elles sont généralement définies sur fixe

background-repeat: 参数

Plage de valeurs des paramètres :

• fixe : lorsque la page Web défile, l'image d'arrière-plan est relative au navigateur. fenêtre, fixe

• défilement : lorsque la page Web défile, l'image d'arrière-plan défile ensemble par rapport à la fenêtre du navigateur

4. Bloc

1. Espacement des mots

background-attachment: 参数

2, lettre. espacement

word-spacing: 间隔距离

3. Alignement du texte

letter-spacing: 字母间距

valeurs des paramètres :

• gauche : alignement à gauche

• droite : alignement à droite

• centre : alignement au centre

• justifier : relatif Alignement gauche et droite

4, alignement vertical

• Vertical-Align : paramètre

• Top : appairage supérieur Qi

• bottom : alignement inférieur

• Text-top : alignement supérieur du texte relatif

• text-bottom : alignement relatif du bas du texte

• baseline : alignement de la ligne de base

• milieu : alignement au centre

sub : affiché sous forme d'indice

super : affiché sous forme d'exposant

• 5. L'indentation du texte

text-align: 参数

• 12px équivaut à une distance de texte

  6. Espaces

  text-indent: 缩进距离

• normal normal

• pré réservé

nowrap sans saut de ligne

7. block : éléments de niveau bloc, ligne sauts avant et après l'objet

🎜🎜🎜inline : pas de saut de ligne avant et après l'objet 🎜🎜🎜🎜🎜list-item : sauts de ligne avant et après l'objet, augmenter les puces 🎜🎜🎜🎜🎜aucun : pas d'affichage 🎜 🎜🎜🎜🎜🎜 5. Coffret 🎜🎜 🎜🎜

• height 高度

• width 宽度

• padding 内边距

• margin 外边距

• float（浮动）：可以让块级元素在一行中排列，例如横向菜单。

• clear 清除浮动

六、边框

1、样式

border-style 参数

边框样式的参数：

• none：无边框

• dotted：边框为点线

• dashed：边框为长短线

• solid：边框为实线

• double：边框为双线

2、宽度

border-width:参数

3、颜色

border-color:参数

七、列表

list-style-type:列表样式

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

控制用户界面的样式

八、鼠标

cursor:鼠标形状参数

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" 　　左下箭头形

总结：

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

推荐学习：CSS视频教程

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!