Maison > Article > interface Web > Comment effacer les styles par défaut en HTML

Comment effacer les styles par défaut en HTML

PHPzoriginal: 2023-04-23 10:22:493722parcourir

HTML est un langage de balisage utilisé pour créer des pages Web. En HTML, différents éléments ont différents styles par défaut, qui sont automatiquement appliqués par le navigateur. Parfois, nous devons effacer ces styles par défaut pour rendre la page plus flexible et personnalisable.

Pourquoi devez-vous effacer le style par défaut ?

Les styles par défaut peuvent nous empêcher de concevoir nos propres styles pour les pages Web. Par exemple, le titre et le corps d'une page Web ont des polices et un espacement des lignes par défaut. Sans effacer ces styles, nous ne pouvons pas choisir et définir librement nos propres polices et espacements des lignes. Les styles par défaut peuvent également entraîner des différences entre les navigateurs, ce qui fait que les pages Web apparaissent de manière incohérente dans les différents navigateurs. Par conséquent, la suppression des styles par défaut peut rendre nos pages Web plus cohérentes et contrôlables.

Méthode 1 : utilisez le fichier reset.css

Le fichier Reset CSS est une feuille de style pré-écrite qui inclut la réinitialisation du style pour tous les éléments HTML. Il suffit de l'introduire dans le fichier HTML pour effacer le style par défaut.

Voici un simple fichier reset.css :

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

Ce fichier réinitialise les marges, le remplissage, les bordures, la taille de la police et l'alignement vertical de tous les éléments à leurs valeurs par défaut.

Il suffit d'ajouter le code suivant en tête du fichier HTML et de sauvegarder le fichier reset.css dans le dossier CSS du dossier du projet :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Website</title>
    <link rel="stylesheet" href="css/reset.css">
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

Méthode 2 : Utiliser un sélecteur

Si on ne veut pas pour introduire un fichier qui réinitialise le style, et vous pouvez également utiliser un sélecteur pour effacer le style par défaut.

Voici quelques sélecteurs couramment utilisés :

/* 清除所有元素的边距和内边距 */
* {
  margin: 0;
  padding: 0;
}

/* 清除所有元素的默认样式 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* 清除链接默认样式 */
a {
  text-decoration: none;
  color: inherit;
}

/* 清除列表默认样式 */
ul, ol {
  list-style: none;
}

/* 清除图片默认边框 */
img {
  border: none;
}

/* 清除表格默认边框 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

Il nous suffit d'ajouter les sélecteurs ci-dessus au fichier CSS.

Résumé

La suppression du style par défaut est l'une des étapes importantes dans la création d'une page Web. L'utilisation d'un fichier ou d'un sélecteur reset.css peut effacer rapidement et efficacement les styles par défaut, rendant nos pages plus flexibles et personnalisables.

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!

css html 选择器样式表外边距内边距

Déclaration：

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

Article précédent：Comment ajouter, lire et contrôler des vidéos en HTMLArticle suivant：Comment ajouter, lire et contrôler des vidéos en HTML

Articles Liés

Voir plus