Comment effacer les styles par défaut en HTML-Questions et réponses frontales-php.cn

Comment effacer les styles par défaut en HTML

PHPz

Libérer： 2023-04-23 10:30:31

original

3720 Les gens l'ont consulté

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;
}

Copier après la connexion

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>

Copier après la connexion

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;
}

Copier après la connexion

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!