Maison > interface Web > tutoriel CSS > Une collection complète de codes de style CSS de conception web, venez la récupérer !

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

奋力向前
Libérer: 2021-07-09 18:26:15
avant
20738 Les gens l'ont consulté

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

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

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: 参数
Copier après la connexion

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: 参数
Copier après la connexion

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)
Copier après la connexion

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: 参数
Copier après la connexion

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: 参数
Copier après la connexion

2, lettre. espacement

word-spacing: 间隔距离
Copier après la connexion

3. Alignement du texte

letter-spacing: 字母间距
Copier après la connexion

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: 参数
    Copier après la connexion
  • 12px équivaut à une distance de texte

    6. Espaces

    text-indent: 缩进距离
    Copier après la connexion
  • 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 参数
Copier après la connexion

边框样式的参数:

  • none:无边框

  • dotted:边框为点线

  • dashed:边框为长短线

  • solid:边框为实线

  • double:边框为双线

2、宽度

border-width:参数
Copier après la connexion

3、颜色

border-color:参数
Copier après la connexion

七、列表

list-style-type:列表样式
Copier après la connexion

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

控制用户界面的样式

八、鼠标

cursor:鼠标形状参数
Copier après la connexion

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"   左下箭头形
Copier après la connexion

总结:

用常用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!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal