web-dev-qa-db-fra.com

Comment changer l'épaisseur de ma balise <hr>

Je veux changer l'épaisseur de ma règle horizontale (<hr>) en CSS. Je sais que cela peut être fait en HTML comme ceci -

<hr size="10">

Mais j’entends dire que c’est obsolète comme mentionné sur MDN ici . En CSS, j'ai essayé d'utiliser height:1px mais cela ne change pas l'épaisseur. Je veux que la ligne <hr> soit 0.5px épaisse.

J'utilise Firefox 3.6.11 sur Ubuntu

htmlcssuser-interface
279
Srikar Appalaraju

Par souci de cohérence, supprimez toutes les bordures et utilisez la hauteur pour l'épaisseur <hr>. L'ajout d'une couleur d'arrière-plan donnera à votre <hr> un style avec la hauteur et la couleur spécifiées.

Dans votre feuille de style:

hr {
    border: none;
    height: 1px;
    /* Set the hr color */
    color: #333; /* old IE */
    background-color: #333; /* Modern Browsers */
}

Ou en ligne comme vous l'avez:

<hr style="height:1px;border:none;color:#333;background-color:#333;" />

Explication plus longue ici

481
Gregg B

Rendu sous-pixel dans les navigateurs

rendu sous-pixel est délicat. En réalité, vous ne pouvez pas vous attendre à ce qu'un moniteur affiche une ligne inférieure à un pixel. Mais il est possible de fournir des dimensions inférieures au pixel. Selon le navigateur, ils les rendent différemment. Vérifiez cette John Resig article de blog à ce sujet.

Fondamentalement, si votre moniteur est un LCD et que vous tracez des lignes verticales, vous pouvez facilement dessiner une ligne de 1/3 pixel. Si votre arrière-plan est blanc, donnez à votre ligne la couleur #f0f. À l’œil, cette ligne aura 1/3 de pixel de large. Bien qu'il s'agisse d'une couleur, si vous agrandissez le moniteur, vous verrez qu'un seul segment du pixel entier (constitué de RVB) sera sombre. C’est à peu près la technique utilisée pour les indications de type fin i.e. ClearType .

Mais les lignes horizontales ne peuvent avoir qu'une hauteur maximale en pixels. C'est la limite technologique des LCD moniteurs. Les tubes cathodiques étaient encore plus compliqués avec leurs luminophores triangulaires (à moins qu’ils ne soient type calandre c'est-à-dire Sony Trinitron), mais c’est une autre histoire.

Fondamentalement, fournir une dimension de sous-pixel et s’attendre à obtenir un rendu de cette manière revient à s’attendre à ce que la variable entière stocke un nombre de 1,2034759349. Si vous comprenez que cela est impossible, vous devez comprendre que les moniteurs ne sont pas en mesure de restituer les dimensions inférieures aux pixels.

Style de navigateur sécurisé

Mais la manière dont les règles horizontales qui se fondent dans est généralement réalisée à l'aide de couleurs. Ainsi, si votre arrière-plan est par exemple blanc (#fff), vous pouvez toujours éclairer votre HR. Comme #eee.

Le style de sécurité inter-navigateur pour une règle horizontale très légère serait:

hr
{
    background-color: #eee;
    border: 0 none;
    color: #eee;
    height: 1px;
}

Et utilisez un fichier CSS au lieu de styles en ligne. Ils fournissent une définition centrale pour l'ensemble du site et pas seulement pour un élément particulier. Cela rend la maintenabilité bien meilleure.

51
Robert Koritnik

Je recherchais le moyen le plus rapide de tracer une ligne 1px, car tout un ensemble de CSS séparées n’est pas la solution la plus rapide ni la plus courte.

Jusqu'en HTML5, la méthode WAS était plus courte pour 1px hr: <hr noshade> but .. l'attribut noshade de <hr> n'est pas pris en charge en HTML5. Utilisez plutôt CSS. (ni les autres attributs utilisés auparavant , comme taille, largeur, aligner ) ...

Maintenant, celui-ci est assez délicat, mais fonctionne bien si plus simple 1px h nécessaire:

Variation 1, BLACK hr: (meilleure solution pour le noir)

<hr style="border-bottom: 0px">

Sortie: FF, Opera - noir/Safari - gris foncé

Variation 2, GRIS heure (le plus court!):

<hr style="border-top: 0px">

Sortie: Opera - gris foncé/FF - gris/Safari - gris clair

<hr style="border: none; border-bottom: 1px solid red;">

Sortie: Opera/FF/Safari: 1px rouge.

8
Muscaria

Je recommanderais de définir la HR elle-même sur 0px high et d'utiliser sa bordure pour être visible à la place. J'ai remarqué que lorsque vous effectuez un zoom avant ou arrière (ctrl + molette de la souris), l'épaisseur de HR change elle-même, tandis que lorsque vous définissez la bordure, elle reste toujours la même:

hr {
    height: 0px;
    border: none;
    border-top: 1px solid black;
}
4
Yaerius

l'attribut height est obsolète en html 5. Ce que je voudrais faire est de créer une bordure autour de l'heure et augmenter l'épaisseur de la bordure en tant que tel: hr style = "border: solid 2px black;"

4
meddy

J'ai ajouté de l'opacité à la ligne, elle semble donc plus fine:

<hr style="opacity: 0.25">
1
Gaunt