Premiers pas avec CSS Layout_CSS/HTML

La plus grande différence entre la disposition CSS et la disposition des tableaux traditionnels est que le positionnement d'origine utilise des tableaux et contrôle l'espacement des sections de disposition du texte via l'espacement des tableaux ou en utilisant des images GIF incolores et transparentes, mais maintenant des calques (divs) sont utilisés pour positionner, contrôlez l'espacement des sections via la marge, le remplissage, la bordure et d'autres attributs du calque.

1. Définir DIV
Analyser un exemple de définition typique :

#sample{ MARGIN : ​​10px 10px 10px 10px
PADDING-LEFT : 20px ; HAUT : 20px ;
PADDING-DROITE : 10px ;
PADDING-BOTTOM : 10px ;
BORDURE DROITE : #CCC 2px solide
BORDURE-BAS : #CCC 2px solide ; -GAUCHE : #CCC 2px solide ;
BORDURE-HAUT : #CCC 2px solide
FOND : url(images/bg_poem.jpg) #FEFEFE sans répétition en bas ; 🎜>TEXT-ALIGN: center;
LINE-HEIGHT: 150%; WIDTH:60%; } La description est la suivante :

Le nom du calque est sample, qui peut être appelé en utilisant
sur la page ce style.
MARGE fait référence à l'espace vide laissé à l'extérieur de la bordure du calque, qui est utilisé pour les marges de page ou pour créer un espace avec d'autres calques. "10px 10px 10px 10px" représentent 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. « PADDING-LEFT » fait référence à la distance entre la bordure gauche et le contenu, et ainsi de suite. S'ils sont tous identiques, ils peuvent être abrégés en « PADDING: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 "solid". « ligne droite. Si vous souhaitez un style de ligne pointillée, vous pouvez utiliser « pointillé ».

BACKGROUND est l'arrière-plan qui définit le 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". "on-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 BACKGROUND : #FEFEFE
COLOR 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. Cela 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, comme 500px, 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.
Voici les performances réelles de cette couche :

Voici le contenu de la démo, voici le contenu de la démo, voici le contenu de la démo, voici le contenu de la démo, voici le contenu de la démo, ici est le contenu de la démo, voici le contenu de la démo, voici le contenu de la démo,

Voici le contenu de la démo, voici le contenu de la démo,

Voici le contenu de la démo, voici le contenu de la démo,

Voici le contenu de la démo ..
On voit que la bordure est grise à 2px, l'image de fond n'est pas répétée en bas à droite, le contenu est à 20px de la bordure gauche. , et le contenu est centré. Tout est comme prévu. Hoho, même si cela n'a pas l'air bien, c'est le plus basique. Si vous le maîtrisez, vous aurez appris la moitié de la technologie de mise en page CSS. Voilà, ce n'est pas difficile du tout ! (Quelle est l'autre moitié ? L'autre moitié est le positionnement entre les calques. Je l'expliquerai étape par étape plus tard.)


2. Modèle de boîte CSS2

Depuis CSS1 en 1996. Depuis son lancement, 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, des titres, des images et des calques. . 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.
3. Toutes les images auxiliaires doivent utiliser le traitement en arrière-plan
Utiliser la mise en page XHTML+CSS Il existe une technologie à laquelle vous n'êtes pas habitué au début. en pensant que c'est différent de la disposition traditionnelle des tableaux, c'est-à-dire que toutes les images auxiliaires sont implémentées avec des arrière-plans. Quelque chose comme ceci :

FOND : url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom
Bien que vous puissiez utiliser
pour être inséré directement dans le contenu, cela n'est pas autorisé ; .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 photos, 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 , 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 deux raisons à cela :

Séparez complètement les 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.​