Comment créer une feuille de style CSS simple à l`aide de Bloc-notes

Thisteaches Vous utiliser comment utiliser l`application Windows `Notepad pour stocker des informations pour une page Web écrite dans HTML et CSS. HTML est le langage de programmation utilisé pour créer votre page Web, tandis que CSS est la langue qui détermine la couleur de style, la police, etc. sur les éléments HTML sur la page Web.

Pas

Partie 1 de 3:

Création d`une page HTML

1. Notepad ouvert. Ouvert Démarrer

, tapez bloc-notes, et cliquez sur le bleu Bloc-notes App en haut de la fenêtre de démarrage.

Image intitulée Créer une feuille de style CSS simple à l`aide de Notepad Step 2

2. Indiquer le type de document. Taper dans le bloc-notes, puis appuyez sur ↵ Entrée pour lancer une nouvelle ligne.

Image intitulée Créer une feuille de style CSS simple à l`aide de Notepad Step 3

3. Ajouter la balise HTML. Tapez et appuyez sur ↵ Entrée.

Image intitulée Créer une feuille de style CSS simple à l`aide de Notepad Step 4

4. Entrez l`étiquette du corps. Tapez et appuyez sur ↵ Entrée. Vous pouvez maintenant commencer à entrer les informations de votre page Web.

Image intitulée Créer une feuille de style CSS simple à l`aide de Notepad Étape 5

5. Ajouter un en-tête. Tapez TEXTE, S`assurer de remplacer "TEXTE" Avec votre en-tête de page préféré, puis appuyez sur ↵ Entrée.

Par exemple, pour créer un en-tête de page qui dit "Bienvenue!", Vous voulez taper Bienvenue! dans le bloc-notes.

Image intitulée Créer une feuille de style CSS simple à l`aide de Notepad Step 6

6. Ajouter du texte sous l`en-tête. Tapez TEXTE, S`assurer de remplacer "TEXTE" avec votre message préféré, puis appuyez sur ↵ Entrer.

Par exemple, pour ajouter du texte qui dit "Je suis une iguana", vous entreriez Je suis une iguana dans le bloc-notes.

Image intitulée Créer une feuille de style CSS simple à l`aide de Notepad Step 7

7. Ajouter plus d`en-têtes et de paragraphes. Chaque en-tête et paragraphe ultérieurs doivent avoir un numéro ascendant appliqué à celui-ci- Par exemple, votre deuxième en-tête aura des étiquettes autour de lui et le deuxième paragraphe aura des balises.

Assurez-vous que vous continuez à appuyer sur ↵ Entrée après chaque ligne de code.

Image intitulée Créer une feuille de style CSS simple à l`aide de Notepad Step 8

8. Fermez le corps et les balises HTML. Une fois que vous avez entré votre dernière ligne de code, tapez sur sa propre ligne et appuyez sur ↵ Entrée, puis tapez . Votre document est maintenant prêt à être stylé avec CSS.

Partie 2 de 3:

Ajout de CSS

1. Comprendre comment fonctionne CSS. Vous utilisez CSS pour modifier l`apparence d`un élément HTML (E.g., un paragraphe). CSS est généralement écrit dans le format ligne suivant:

Élément tag { (par example, p {)
Modificateur: Propriété- (par example, Taille de la police: 20px-)
Modificateur: Propriété- (par example, la couleur noire-)
}

Image intitulée Créer une feuille de style CSS simple à l`aide de Notepad Step 10

2. Placer un espace entre le et tags. Ceux-ci devraient être près du haut de la page.

Image intitulée Créer une feuille de style CSS simple à l`aide de Notepad Step 11

3. Entrez une étiquette de tête. Tapez et appuyez sur ↵ Entrée.

Image intitulée Créer une feuille de style CSS simple à l`aide de Notepad Step 12

4. Ajouter une étiquette de style. Tapez et appuyez sur ↵ Entrée.

Image intitulée Créer une feuille de style CSS simple à l`aide de Notepad Step 13

5. Changez la couleur de fond de votre page Web. Faire cela:

Tapez corps { et appuyez sur ↵ Entrer.

Tapez Couleur de fond: LightBlue- et appuyez sur ↵ Entrer.

Vous pouvez utiliser n`importe quelle couleur prise en charge ici, ainsi que "lumière" ou alors "foncé" modificateurs.

Tapez} et appuyez sur ↵ Entrer.

Image intitulée Créer une feuille de style CSS simple à l`aide de Notepad Step 14

6. Style votre premier en-tête. Tapez h1 { et appuyez sur ↵ Entrer, ajoutez un modificateur et appuyez sur ↵ Entrer et tapez} et appuyez sur ↵ Entrée. Vous pouvez ajouter plusieurs modificateurs à un élément tant que chaque modificateur est sur sa propre ligne. Les modificateurs communs comprennent les éléments suivants:

Taille du texte - Tapez Taille de la police: 30px- Pour définir votre texte sous forme de polices de 30 points. Substituer tout nombre que vous souhaitez utiliser.

Couleur de texte - Tapez la couleur noire- faire du texte noir. Substituer toute couleur que vous souhaitez utiliser.

Alignement du texte - Tapez Text-Align: Centre- Pour centrer le texte. Vous pouvez également taper la gauche ou alors droite Aligner le texte de manière appropriée.

Police utilisée - Tapez Font-famille: fois neuf Roman- Pour définir votre police comme Times New Roman. Vous pouvez également utiliser des polices comme verdana ou alors Géorgie.

Image intitulée Créer une feuille de style CSS simple à l`aide de Notepad Step 15

7. Style ton premier paragraphe. Tapez p1 { et appuyez sur ↵ Entrer, ajoutez un modificateur et appuyez sur ↵ Entrer et tapez} et appuyez sur ↵ Entrée.

Les modificateurs que vous pouvez utiliser ici sont identiques à ceux utilisés pour l`en-tête.

Image intitulée Créer une feuille de style CSS simple à l`aide de Notepad Step 16

8. Style le reste de votre document. Vous pouvez stopper n`importe quel élément en faisant référence à son texte de balise et en plaçant un support bouclé ouvert ({), ajout de modificateurs, puis la fermeture du support (}).

Image intitulée Créer une feuille de style CSS simple à l`aide de Notepad Step 17

9. Fermez le style et les étiquettes de tête. Sur une nouvelle ligne sous votre dernier texte de style, tapez et appuyez sur ↵ Entrée, puis tapez et appuyez sur ↵ Entrée. Votre feuille CSS est complète, ce qui signifie que vous pouvez maintenant le revoir et l`enregistrer.

Partie 3 sur 3:

Sauvegarder le document

1. Passez en revue votre feuille de style CSS. Votre document CSS variera légèrement, mais cela devrait ressembler à quelque chose comme ceci:

corps {
Couleur de fond: LightBlue-
}
h1 {
Taille de la police: 45px-
}
p1 {
la couleur noire-
}
salut!
Je suis une iguana

Image intitulée Créer une feuille de style CSS simple à l`aide de Notepad Step 19

2. Cliquez sur Déposer. C`est dans le coin supérieur gauche de la fenêtre Notepad. Un menu déroulant apparaîtra.

Image intitulée Créer une feuille de style CSS simple à l`aide de Notepad Step 20

3. Cliquez sur Enregistrer sous…. Vous verrez cela près du bas du menu déroulant. En cliquant sur elle invite une fenêtre à ouvrir.

Image intitulée Créer une feuille de style CSS simple à l`aide de Notepad Step 21

4. Sélectionnez une localisation d`enregistrement. Cliquez sur un dossier (E.g., Bureau) sur le côté gauche de la fenêtre.

Image intitulée Créer une feuille de style CSS simple à l`aide de Notepad Step 22

5. Clique le "Sauvegarder comme type" boîte déroulante. Un menu déroulant apparaîtra.

Image intitulée Créer une feuille de style CSS simple à l`aide de Notepad Step 23

6. Cliquez sur Tous les fichiers. C`est dans le menu déroulant.

Image intitulée Créer une feuille de style CSS simple à l`aide de Notepad Step 24

7. Nommez votre fichier avec un ".html" extension. Dans le "Nom de fichier" Champ de texte, tapez votre nom de document préféré (E.g., "Mon CSS") suivie par .html.

Par exemple, si vous avez nommé votre fichier "Mon CSS", tu taches mon CSS.html dans le champ.

Si vous utilisez un programme pouvant exécuter ".CSS" fichiers, vous pouvez utiliser .CSS à la place de .html ici.

Image intitulée Créer une feuille de style CSS simple à l`aide de Notepad Step 25

8. Cliquez sur Sauvegarder. C`est au fond du côté droit de la "Enregistrer sous" la fenêtre. Cela permettra d`enregistrer votre feuille CSS dans un format exécutable, ce qui signifie que vous pouvez l`ouvrir dans votre navigateur préféré ou votre éditeur HTML plutôt que dans le bloc-notes.

Conseils

Lors du codage dans HTML ou CSS, cela n`a pas d`importance combien d`espaces entre les lignes de code - vous pouvez appuyer sur ↵ entrer plusieurs fois après chaque ligne sans modifier la fonction du programme.

Essayez d`indenter différentes parties de votre feuille de style CSS pour faciliter la recherche d`éléments. Par exemple, vous risquez d`indenter le code d`en-tête une fois et un code de paragraphe deux fois.