CSS Boîtes Tutorial

May 18

Si vous concevez un site Web qui intègre CSS dans le code, vous devez savoir sur le modèle de boîte qui utilise CSS. Chaque élément d'un site est considéré comme une boîte d'une sorte ou d'une autre, et CSS vous permet de modifier l'apparence et la configuration des boîtes de façon que le HTML brut ne peut égaler. L'utilisation de CSS pour modifier les boîtes de votre site, vous pouvez modifier complètement l'apparence et même la mise en page du site en changeant seulement quelques petites parties du code lui-même.

Instructions

1 Créez un nouveau document, HTML vierge dans un programme de traitement de texte tel que Notepad.

2 Entrez les balises standards nécessaires pour un document HTML dans le document. Ce sont la tête et le corps HTML balises, et dans le bon ordre, ils devraient ressembler à ceci: <html> <head> </ head> <body> </ body> </ html>.

3 Ajouter un certain nombre de lignes vides entre les balises du corps. Ceci est l'endroit où vous allez mettre le code de votre boîte de test.

4 Créer une boîte avec le texte en lui en ajoutant le code suivant:

<Div> texte de test </ div>

Vous pouvez remplacer "texte de test» avec tout ce que vous voulez. Si vous ouvrez le document HTML dans un navigateur maintenant, vous verrez le texte dans la boîte, mais la boîte elle-même sera invisible.

5 Ajoutez le code suivant:

style = ""

dans la div balise d'ouverture, entre le div et la parenthèse fermante. Ça devrait ressembler à ça:

<Div style = ""> texte de test </ div>

Cet attribut de style vous permet d'insérer du code CSS dans la balise div HTML pour affecter la boîte. Tout le reste du code, vous allez ajouter devrait passer entre les guillemets.

6 Ajoutez le code suivant:

background-color: jaune

à l'attribut style. Cela change la couleur de la boîte de fond, donc si vous ouvrez le document maintenant, vous verrez votre texte de test dans une boîte jaune.

7 Ajouter un point-virgule après votre code de couleur et ajoutez le code

border: solid

le style. Cela ajoute une bordure noire solide autour de la boîte, ce qui en fait un peu plus grande. boîte CSS frontières vont toujours à l'extérieur de leurs boîtes. Vous pouvez également ajouter un espace après le mot «solide» et inclure une mesure de la largeur, comme 5px, ou un nom de couleur, ou les deux, pour modifier l'apparence de la frontière.

8 Ajouter un point-virgule après votre code frontière et ajoutez le code

padding: 5px

le style. Le rembourrage d'une boîte est un espace invisible entre les bords de la boîte et le contenu réel dans la boîte. Faire la taille de rembourrage plus grande fera la boîte elle-même plus grand, car il doit accueillir plus d'espace vide à l'intérieur de celui-ci autour du texte.

9 Ajouter un point-virgule après votre code de rembourrage et ajoutez le code

margin: 20px

le style. La marge est similaire à rembourrage, mais alors que le rembourrage est un espace vide à l'intérieur de la boîte, la marge est l'espace vide autour de la boîte. Plus la marge, plus loin de tout autour de lui la boîte sera obtenir.

dix Expérimentez avec différents numéros de vos frontières, padding et marge codes pour voir comment ils affectent l'apparence générale de la boîte. Chaque boîte vous éditer avec CSS automatiquement a ces trois composantes, ainsi que le contenu lui-même, mais si vous ne définissez pas leur apparition dans le code, ils ont une taille de zéro et sera invisible.


          

Post a comment: