1.Définir DIV
Analysez un exemple typique de div de définition :
#échantillon{ MARGE : 10px 10px 10px 10px ;
REMBOURRAGE : 20px 10px 10px 20px ;
BORDURE-TOP : #CCC 2px solide ;
BORDURE DROITE : #CCC 2px solide ;
BORDURE-BAS : #CCC 2px solide ;
BORDURE GAUCHE : #CCC 2px solide ;
CONTEXTE : url(images/bg_poem.jpg) #FEFEFE sans répétition en bas à droite ;
COULEUR : #666 ;
TEXTE-ALIGN : centre ;
HAUTEUR DE LIGNE : 150 % ; LARGEUR : 60 % ;
Les instructions sont les suivantes :
Le nom du calque est sample Vous pouvez appeler ce style en utilisant <div id="sample"> sur la page.
MARGE fait référence à l'espace vide laissé à l'extérieur de la bordure du calque, utilisé pour les marges de page ou pour créer un espace avec d'autres calques. "10px 10px 10px 10px" représente respectivement les quatre marges "haut, droite, bas et gauche" (dans le sens des aiguilles d'une montre). Si elles sont toutes identiques, elles peuvent être abrégées en "MARGIN: 10px;". Si la marge est nulle, écrivez "MARGIN: 0px;". Remarque : Lorsque la valeur est zéro, à l'exception de la valeur de couleur RVB 0% qui doit être suivie d'un signe de pourcentage, dans les autres cas, l'unité "px" n'a pas besoin d'être suivie. MARGIN est un élément transparent et ne peut pas définir de couleur.
PADDING fait référence à l'espace entre la bordure du calque et le contenu du calque. Comme la marge, spécifiez respectivement la distance entre les bordures supérieure, droite, inférieure et gauche du contenu. S'ils sont tous identiques, vous pouvez le raccourcir en "PADDING:0px". Pour spécifier le côté gauche individuellement, vous pouvez écrire "PADDING-LEFT: 0px;". PADDING est un élément transparent et ne peut pas définir de couleur.
BORDER fait référence à la bordure du calque. "BORDER-RIGHT: #CCC 2px solid ;" définit la couleur de la bordure droite du calque comme "#CCC", la largeur comme "2px" et le style comme ligne droite "solide". .
Si vous souhaitez un style de ligne pointillée, vous pouvez utiliser « pointillé ».
BACKGROUND définit l’arrière-plan du calque. Il est défini en deux niveaux. Définissez d'abord le fond de l'image et utilisez "url(../images/bg_logo.gif)" pour spécifier le chemin de l'image de fond ; deuxièmement, définissez la couleur de fond "#FEFEFE". "no-repeat" signifie que l'image d'arrière-plan n'a pas besoin d'être répétée. Si vous devez la répéter horizontalement, utilisez "repeat-x", pour la répéter verticalement, utilisez "repeat-y" et répétez-la pour la couvrir. tout l'arrière-plan, utilisez "répéter". Le « en bas à droite » suivant signifie que l'image d'arrière-plan commence à partir du coin inférieur droit. S'il n'y a pas d'image de fond, vous pouvez uniquement définir la couleur de fond FOND : #FEFEFE
COULEUR est utilisé pour définir la couleur de la police, qui a été introduite dans la section précédente.
TEXT-ALIGN est utilisé pour définir la disposition du contenu dans le calque, le centre est au milieu, la gauche est à gauche et la droite est à droite.
LINE-HEIGHT définit la hauteur de la ligne. 150 % signifie que la hauteur est de 150 % de la hauteur standard. Elle peut également s'écrire : LINE-HEIGHT : 1,5 ou LINE-HEIGHT : 1,5em, qui ont la même signification.
WIDTH est la largeur du calque défini, qui peut être une valeur fixe, telle que 500 px, ou un pourcentage, comme « 60 % » ici. Il convient de noter que cette largeur fait uniquement référence à la largeur de votre contenu et n'inclut pas la marge, la bordure et le remplissage. Mais cela n'est pas défini de cette façon dans certains navigateurs, vous devez donc en essayer davantage.
2.Modèle de boîte CSS2
Depuis le lancement de CSS1 en 1996, l'organisation W3C recommande que tous les objets de la page Web soient placés dans une boîte. Les concepteurs peuvent contrôler les propriétés de cette boîte en créant des définitions. Ces objets incluent des paragraphes, des listes et des titres. et la couche <div>. Le modèle de boîte définit principalement quatre zones : contenu, remplissage, bordure et marge. L’échantillon de couche dont nous avons parlé ci-dessus est une boîte typique. Pour les débutants, ils sont souvent confus quant aux niveaux, aux relations et aux influences mutuelles entre la marge, la couleur d'arrière-plan, l'image d'arrière-plan, le remplissage, le contenu et la bordure. Voici un schéma 3D du modèle de boîte, j'espère qu'il vous sera plus facile à comprendre et à retenir.
Lorsque vous utilisez la mise en page XHTML+CSS, il existe une technologie à laquelle vous n'êtes peut-être pas habitué au début. Il faut dire que c'est une façon de penser qui est différente de la mise en page traditionnelle des tableaux, à savoir : toutes les images auxiliaires sont implémentées avec. arrière-plans. Quelque chose comme ça :
CONTEXTE : url(images/bg_poem.jpg) #FEFEFE sans répétition en bas à droite ;
Bien qu'il soit possible d'insérer <img> directement dans le contenu, cela n'est pas recommandé. Les « images auxiliaires » font ici référence à des images qui ne font pas partie du contenu à exprimer sur la page, mais ne sont utilisées qu'à des fins de décoration, d'intervalle et de rappel. Par exemple : les images des albums photo, les images des actualités en images et les images du modèle de boîte 3D ci-dessus font toutes partie du contenu. Elles peuvent être directement insérées dans la page à l'aide de l'élément <img>, tandis que d'autres sont similaires aux logos, au titre. images et images de préfixe de liste. Tous doivent être affichés en mode arrière-plan ou d'autres méthodes CSS.
Il y a 2 raisons à cela :
Séparez complètement les performances de la structure (reportez-vous à la lecture d'un autre article : « Comprendre la séparation des performances de la structure ») et utilisez CSS pour contrôler toute l'apparence et les performances afin de faciliter la révision.
Rendre la page plus utilisable et conviviale. Par exemple, si une personne aveugle utilise un lecteur d’écran, les images réalisées à l’aide de la technologie d’arrière-plan ne seront pas lues à haute voix.