CSS est une feuille de style en cascade, qui est un langage pour décrire l'apparence des pages Web. L'un des principaux avantages de CSS est la possibilité de remplacer la disposition des tableaux par une disposition des blocs.
Il est nécessaire
Éditeur de code HTML
Instructions
Étape 1
Créez le premier bloc. Au format HTML, cela ressemblera à une balise div avec l'ID 'block01'. Ici, l'identifiant block01 indique que dans la description CSS, toutes les propriétés de ce bloc sont spécifiées pour le sélecteur # block01.
Étape 2
Décrivez le bloc en CSS. Dans les styles CSS, précisez le nom de l'identifiant (# block01) et entre accolades décrivez ses paramètres - largeur, positionnement, décalage, couleur de fond, etc. Par exemple, cela pourrait ressembler à ceci: # block01 {width: 150px; hauteur: 150px; position: absolue; haut: 0px; à gauche: 0px; couleur de fond: rose}. Cette description suppose que la boîte aura une longueur de 150 pixels et une largeur de 150 pixels, elle sera positionnée de manière rigide dans le coin supérieur gauche du document et son arrière-plan sera de couleur rose.
Étape 3
Donnez au bloc un positionnement relatif. Si vous n'utilisez pas un positionnement absolu, mais relatif dans la description CSS, vous pouvez alors placer des blocs non pas avec un accrochage rigide à une grille de coordonnées, mais par rapport à d'autres blocs déjà existants. Pour ce faire, modifiez la position du code: absolu; haut: 0px; à gauche: 0px par position: relative; haut: 200px; à gauche: 100px.
Étape 4
Donnez un arrondi au bloc. En CSS, l'instruction border-radius est responsable de cela. Ajoutez le code suivant à votre feuille de style: border-radius: 8px. Le bloc aura maintenant des coins arrondis. Si vous ne souhaitez arrondir que certains coins, décrivez le rayon séparément pour chacun d'eux: border-radius: 8px 8px 0px 0px.
Étape 5
Donnez un coup au bloc. Pour mettre en évidence le contour d'un bloc avec un trait fin, ajoutez le code suivant à sa description CSS: border-top: 1px en pointillés noirs. Cette instruction signifie que la bordure du bloc sera noire et aura une épaisseur d'un pixel. Dans ce cas, la ligne de contour elle-même sera affichée sous forme de ligne en pointillés (en pointillés - une ligne en pointillés, en pointillés - des points, en continu - une ligne continue).
Étape 6
Définissez les propriétés de bloc restantes. Spécifiez dans la description CSS quelle police de caractères doit être utilisée pour le texte à l'intérieur du bloc, quelle doit être la taille de la police, l'alignement et l'indentation à partir des bords du bloc. Ces propriétés sont décrites dans les définitions font-family, font-size, text-align et padding.
Étape 7
Vous pouvez utiliser la propriété float pour personnaliser le flux d'un bloc par rapport à un autre. Si vous le définissez sur « gauche », le reste des éléments circulera autour du bloc à gauche et « droite » - à droite. Si vous définissez la valeur flottante sur « aucun », l'alignement du bloc ne sera pas défini. La propriété clear dans CSS empêche le bloc de s'écouler vers la droite, la gauche ou les deux côtés, et remplace l'instruction float.
