Trois conseils CSS que vous devez connaître-tutoriel CSS-php.cn

Trois conseils CSS que vous devez connaître

零下一度

Libérer： 2017-04-27 13:59:44

original

1393 Les gens l'ont consulté

La concurrence croissante entre les différents navigateurs signifie que de plus en plus de personnes utilisent désormais des appareils prenant en charge les normes Web les plus récentes et les plus avancées du W3C pour accéder à Internet de manière plus interactive. Cela signifie que nous pouvons enfin profiter de CSS plus puissants et plus flexibles pour créer un code frontal de navigateur plus simple et mieux entretenu. Jetons maintenant un coup d'œil à quelques fonctionnalités CSS intéressantes que vous ne connaissez peut-être pas encore.

Utilisez attr() pour afficher les valeurs d'attribut HTML en CSS

attr() La fonction est apparue dès la norme CSS 2.1, mais ce n'est que devient maintenant généralement populaire. Il fournit un moyen intelligent d'utiliser les attributs des balises HTML en CSS, ce qui, dans de nombreux cas, peut vous aider à enregistrer le processus qui nécessitait auparavant un traitement Javascript.

Pour utiliser cette fonctionnalité, vous devez utiliser trois éléments : un style de pseudo-classe CSS :before ou :after, .content attribut et une expression attr() avec le nom de l'attribut HTML que vous souhaitez utiliser. Par exemple, si vous souhaitez afficher la valeur de l'attribut data-prefix sur le titre

, vous pouvez l'écrire comme ceci :

h3:before {
    content: attr(data-prefix) " ";
    }

    <h3 data-prefix="Custom prefix">This is a heading</h3>

Copier après la connexion

Évidemment, cet exemple ne montre pas à quel point il est utile, juste son utilisation de base. Essayons un exemple plus utile. Une excellente application de attr() consiste à afficher des liens vers des pages lorsque l'utilisateur imprime la page. Pour y parvenir, vous pouvez écrire comme ceci :

@media print {
    a:after {
    content: " (link to " attr(href) ") ";
    }
    }

    <a href="example.com">Visit our home page</a>

Copier après la connexion

Une fois que vous connaîtrez cette technique, vous serez surpris de voir à quel point elle peut être pratique à plusieurs reprises dans votre travail !

Conseils : Dans la nouvelle version du standard CSS3, la fonction attr() a été étendue et peut être utilisée dans diverses balises CSS. En CSS2.1, attr() renvoie toujours une chaîne. En CSS3, attr() peut renvoyer de nombreux types différents.

Utilisez counter() pour ajouter automatiquement des numéros de série à la liste

Une autre fonction déjà prise en charge dans CSS 2.1 est counter() En l'utilisant, vous pouvez facilement ajouter une série. numéros aux titres de page, aux blocs et à divers autres contenus de page consécutifs. Avec lui, vous n'avez pas besoin de vous limiter à utiliser uniquement

Définition et utilisation du compteur-réinitialisation

L'attribut counter-reset définit la valeur du compteur pour le nombre d'occurrences d'un certain sélecteur. La valeur par défaut est 0.

Grâce à cette propriété, le compteur peut être réglé ou réinitialisé à n'importe quelle valeur, positive ou négative. Si le numéro n’est pas fourni, la valeur par défaut est 0.

Remarque : Si "affichage : aucun" est utilisé, le compteur ne peut pas être réinitialisé. Si vous utilisez « visibilité : masquée » vous pouvez réinitialiser le compteur.

Remarque : Internet Explorer 8 (et versions ultérieures) prend en charge l'attribut counter-reset si !DOCTYPE est spécifié.

Compteur-réinitialisation des valeurs possibles

Valeur

Description

aucun

Par défaut. Le compteur du sélecteur ne peut pas être réinitialisé.

值

描述

none

默认。不能对选择器的计数器进行重置。

id number

id 定义重置计数器的选择器、id 或 class。

number 可设置此选择器出现次数的计数器的值。可以是正数、零或负数。

inherit

规定应该从父元素继承 counter-reset 属性的值。

numéro d'identifiant

id Définir le sélecteur, l'identifiant ou la classe pour réinitialiser le compteur .

numéro

body {
    counter-reset: heading;
    }

    h4:before {
    counter-increment: heading;
    content: "Heading #" counter(heading) "."; 
    }

Copier après la connexion

définit la valeur du compteur pour le nombre d'occurrences de ce sélecteur. Peut être positif, nul ou négatif.

inherit

Spécifie que la valeur de l'attribut counter-reset doit être héritée de l'élément parent.

contenu

:before Attributs de classe ajoutés à counter() :

Si vous souhaitez en savoir plus sur cette méthode de remise à zéro et d'incrémentation du compteur, veuillez vous référer à la page Mozilla

.parent {
    width: 100%;
    border: solid black 1px;
    position: relative;
    }

    .child {
    position: absolute;
    left: 100px;
    width: calc(90% - 100px);
    background-color: #ff8;
    text-align: center;
    }

Copier après la connexion

Enfin, parlons de la fonction

. Calc est l'abréviation du mot anglais calculate. C'est une nouvelle fonction de CSS3 et est utilisée pour spécifier la longueur des éléments. Cette fonction vous permet d'effectuer des calculs arithmétiques simples, comme le calcul de la longueur et de la largeur d'un élément, sans avoir à écrire du code Javascript non maintenable. Cette fonction prend en charge toutes les opérations arithmétiques de base simples, notamment l'addition, la soustraction, la multiplication et la division.

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!