Styles en cascade (CSS) pour toute sa logiquela simplicité permet non seulement de créer une solution de conception efficace, mais aussi de fournir des éléments avec une action réelle, d'émuler l'exécution de code réel.
Toute balise de balisage HTML visuelle -une zone rectangulaire de structure et de contenu spécifiques. L'élément contient l'indication des coordonnées, tailles, retraits, couleurs, police, son style, etc. Le cadre de l'élément CSS spécifie la zone occupée par celui-ci, étant situé de sa bordure vers l'intérieur par la largeur indiquée dans la description.
Syntaxe de la description
La zone de placement des éléments est définie par des coordonnéespar rapport au coin supérieur gauche de la page (gauche, haut), horizontalement et verticalement (largeur, hauteur). Toute la conception et l'animation d'un élément sont effectuées par paires: "propriété: valeur".
La description est effectuée directement dans le code de la page, sur le style d'insertion, ou dans un fichier séparé, pointant vers celui-ci avec un lien LINK. Syntaxe:
#name {propriété: valeur; valeur de la propriété; valeur de la propriété; ...}
ou
.name {propriété: valeur; valeur de la propriété; valeur de la propriété; ...}
Le nom peut également être p, body, html, table, td ..., c'est-à-dire le nom de la balise de balisage HTML. Il est permis d'inclure une description de style directement sur l'élément.
Avant de faire vos propres optionsd'écrire des styles, cela ne fait pas de mal de voir comment cela se fait sur les sites populaires, en enregistrant le code de la page ou en appuyant sur Ctrl-U pour l'afficher directement dans le navigateur.
Paramètres de base
Le cadre CSS réel de l'élément est présentéstyle (style de bordure), couleur (couleur de bordure), largeur (largeur de bordure). Tout peut être décrit avec une propriété - la frontière. Vous pouvez décrire chaque bordure du cadre indépendamment (bordure-haut, bordure-bas, bordure-gauche, bordure-droite).
Le cadre CSS est décrit selon les règles générales des feuilles de style en cascade:
bordure: 3px;
couleur de la bordure: rouge;
border-style: double pointillé solide pointillé.
Cette description définit la largeur de la bordure sur 3 pixels, la couleur sur le rouge, le style du côté: le côté supérieur double, le côté droit en pointillé, le bas solide, le côté gauche en pointillé.
largeur de la bordure: 1px 2px 4px 8px;
couleur de la bordure: bleu;
border-style: pointillé.
Ici, les tailles de chaque côté sont également séquentielles, en partant du haut, dans le sens des aiguilles d'une montre, la couleur est bleue et le style est pointillé.
couleur de la bordure: bleu rouge vert noir;
cette description montre la couleur de chaque côté séparément. La propriété border peut inclure plusieurs paramètres à la fois et les coins de la bordure peuvent être arrondis:
bordure: 1px solide vert;
rayon de la bordure: 0px 4px 8px 12px;
-moz-border-radius: 0px 4px 8px 12px;
- rayon de la bordure du webkit: 0px 4px 8px 12px;
Comment faire la bordure en CSS dépendla commodité du visiteur, car cet effet de style est généralement utilisé à des fins techniques: lorsqu'il est important de montrer exactement l'emplacement ou la taille de la zone sur la page.
Épaisseur du cadre et son objectif
Lors du choix de l'épaisseur du cadre, vous pouvez utiliser px, pt,em ..., mais gardez à l'esprit qu'il est toujours à l'intérieur de la zone de l'élément. Il est difficile de supposer qu'une bordure CSS a un but de conception, mais d'un point de vue technique, elle est très pratique à utiliser pour mettre en évidence des éléments de page.
Si le cadre est verrouillé dans la classe principale, alorsest manquant, puis en le spécifiant dans la pseudo-classe: hover, vous pouvez montrer l'élément de page au visiteur lorsque le curseur de la souris est dessus, par exemple, sélectionnez un élément de menu. Parfois, vous devez sélectionner quelque chose en cliquant sur l'image, ou faites glisser et déposez quelque chose quelque part. Il est très pratique d'utiliser une bordure en pointillé ici plutôt que de changer l'arrière-plan d'un élément ou son contenu.
Certaines applications doivent être mises en évidencezone de la page ou sélection d'éléments pour un traitement ultérieur. Dans ce cas, vous pouvez créer un div avec une bordure au moment du clic et, jusqu'à ce que le visiteur relâche le bouton de la souris, le redimensionner, en affichant visuellement le résultat de la sélection.
Au-delà du prévu
Les leçons CSS sont très intéressantes, il est également important d'étudier les codes des pages des sites populaires. Cependant, sa propre ressource doit être unique, elle doit avoir sa propre identité.
La bordure CSS fournie par la syntaxe ne donne pasune telle variété que leur propre initiative. Impromptu est un bon début, et rien n'empêche un développeur de créer son propre framework. De plus, avec toutes les réalisations des technologies Internet et les capacités des normes existantes, il existe de nombreuses idées prometteuses basées sur de réels défauts dans la syntaxe existante, qui (par définition) a toujours été strictement formelle.
En particulier, si nous créons vraiment un cadre pour ceux-ci ouautres éléments, il semble souhaitable de le faire de manière globale. En sélectionnant les côtés et les coins d'une zone dans des balises séparées, vous pouvez obtenir des effets étonnants. Et en attribuant les gestionnaires appropriés, vous pouvez créer des éléments de page dynamiques en modifiant la position, la forme et le contenu.
