Hoe maak je een eenvoudige CSS-stylesheet met behulp van Kladblok

ThisTeaches u Hoe kunt u Windows `Notepad-app gebruikt om informatie op te slaan voor een webpagina geschreven in HTML en CSS. HTML is de programmeertaal die wordt gebruikt om uw webpagina te maken, terwijl CSS de taal is die de stijlkleur, het lettertype, en dus op de HTML-elementen op de webpagina bepaalt.

Stappen

Deel 1 van 3:

Een HTML-pagina maken

1. Open Kladblok. Open Begin

, typ in kladblok, en klik op het blauw Kladblok app bovenaan het startvenster.

Titel afbeelding Maak een eenvoudige CSS-stylesheet met Kladblok Stap 2

2. Geef het documenttype aan. Type In Kladblok, druk vervolgens op ↵ Enter om een nieuwe regel te starten.

Titel afbeelding Maak een eenvoudige CSS-stylesheet met behulp van Kladblok Stap 3

3. Voeg de HTML-tag toe. Typ in en druk op ↵ Enter.

Toonde afbeelding Maak een eenvoudige CSS-stylesheet met Kladblok Stap 4

4. Voer het lichaamstag in. Typ in en druk op ↵ Enter. U kunt nu beginnen met het invoeren van de informatie van uw webpagina.

Titel afbeelding Maak een eenvoudige CSS-stylesheet met behulp van Kladblok Stap 5

5. Voeg een koptekst toe. Typ in TEKST, Zorg ervoor dat u moet vervangen "TEKST" met de kop van uw gewenste pagina en druk op ↵ ENTER.

Om bijvoorbeeld een pagina-header te maken die zegt "Welkom!", je zou typen Welkom! in Kladblok.

Titel afbeelding Maak een eenvoudige CSS-stylesheet met Kladblok Stap 6

6. Voeg tekst onder de kop toe. Typ in TEKST, Zorg ervoor dat u moet vervangen "TEKST" met uw gewenste bericht en druk op ↵ Enter.

Bijvoorbeeld om tekst toe te voegen die zegt "Ik ben een leguaan", je zou binnengaan Ik ben een leguaan in Kladblok.

Titel afbeelding Maak een eenvoudige CSS-stylesheet met Kladblok Stap 7

7. Voeg meer headers en paragrafen toe. Elke volgende koptekst en paragraaf moeten een oplopende nummer hebben toegepast, bijvoorbeeld, uw tweede koptekst heeft bijvoorbeeld tags eromheen, en de tweede alinea heeft tags.

Zorg ervoor dat u blijft drukken op ↵ Voer na elke regel code in.

Titel afbeelding Maak een eenvoudige CSS-stylesheet met Kladblok Stap 8

8. Sluit het lichaam en HTML-tags. Nadat u uw laatste regel code hebt ingevoerd, typt u op zijn eigen lijn en druk op ↵ Enter en typ vervolgens in . Uw document is nu klaar om te worden gestyled met CSS.

Deel 2 van 3:

CSS toevoegen

1. Begrijp hoe CSS werkt. U gebruikt CSS om het uiterlijk van een HTML-element (E te wijzigen.g., een paragraaf). CSS wordt meestal geschreven in het volgende regelformaat:

Element Tag { (bijvoorbeeld, p {)
Modifier: eigendom- (bijvoorbeeld, FONT-GROOTTE: 20PX-)
Modifier: eigendom- (bijvoorbeeld, de kleur zwart-)
}

Titel afbeelding Maak een eenvoudige CSS-stylesheet met behulp van Kladblok Stap 10

2. Plaats een ruimte tussen de en tags. Deze moeten in de buurt van de pagina zijn.

Titel afbeelding Maak een eenvoudige CSS-stylesheet met Kladblok Stap 11

3. Voer een hoofdlabel in. Typ in en druk op ↵ Enter.

Titel afbeelding Maak een eenvoudige CSS-stylesheet met Kladblok Stap 12

4. Voeg een stijltag toe. Typ in en druk op ↵ Enter.

Titel afbeelding Maak een eenvoudige CSS-stylesheet met Kladblok Stap 13

5. Verander de achtergrondkleur van je webpagina. Om dit te doen:

Typ in lichaam { en druk op ↵ Enter.

Typ in Achtergrondkleur: lichtblauw- en druk op ↵ Enter.

U kunt hier een ondersteunde kleur gebruiken, evenals "licht" of "donker" modifiers.

Typ in} en druk op ↵ Enter.

Titel afbeelding Maak een eenvoudige CSS-stylesheet met behulp van Kladblok Stap 14

6. Stijl je eerste kop. Typ in H1 { en druk op ↵ Enter, voeg een modifier toe en druk op ↵ Enter en typ in} en druk op ↵ Enter. U kunt meerdere modificatoren toevoegen aan één element zolang elke modifier op zijn eigen lijn staat. Gemeenschappelijke modifiers omvatten het volgende:

Lettergrootte - Typ in FONT-SIZE: 30PX- Om uw tekst in te stellen als 30-punts lettertype. Vervang elk nummer dat u wilt gebruiken.

Tekst kleur - Typ in de kleur zwart- om zwarte tekst te maken. Vervang elke kleur die u wilt gebruiken.

Tekstuitlijning - Typ in Text-Eart: Center- om de tekst te centreren. Je kunt ook typen links of Rechtsaf om de tekst op de juiste manier uit te lijnen.

Lettertype gebruikt - Typ in Font-familie: Times New Roman- om je lettertype in te stellen als Times New Roman. Je kunt ook lettertypen gebruiken zoals Verdana of Georgië.

Titel afbeelding Maak een eenvoudige CSS-stylesheet met Kladblok Stap 15

7. Stijl je eerste alinea. Typ in P1 { en druk op ↵ Enter, voeg een modifier toe en druk op ↵ Enter en typ in} en druk op ↵ Enter.

De modifiers die u hier kunt gebruiken, zijn identiek aan die voor de koptekst.

Titel afbeelding Maak een eenvoudige CSS-stylesheet met Kladblok Stap 16

8. Stijl de rest van je document. U kunt elk element stylen door zijn tagtekst te verwijzen en een open krullende beugel ({) te plaatsen, modifiers toe te voegen en vervolgens de beugel (}) te sluiten.

Titel afbeelding Maak een eenvoudige CSS-stylesheet met behulp van Kladblok Stap 17

9. Sluit de stijl en hoofdlabels. Typ op een nieuwe regel onder uw laatste stylingtekst, typ in en druk op ↵ Enter en typ vervolgens in en druk op ↵ Enter. Uw CSS-blad is voltooid, wat betekent dat u het nu kunt beoordelen en opslaan.

Deel 3 van 3:

Het document opslaan

1. Bekijk uw CSS-stylesheet. Uw CSS-document varieert enigszins, maar het moet er zoiets uitzien:

lichaam {
Achtergrondkleur: lichtblauw-
}
H1 {
FONT-SIZE: 45PX-
}
P1 {
de kleur zwart-
}
Hoi!
Ik ben een leguaan

Titel afbeelding Maak een eenvoudige CSS-stylesheet met Kladblok Stap 19

2. Klik het dossier. Het zit in de linkerbovenhoek van het Kladblokvenster. Er verschijnt een vervolgkeuzemenu.

Titel afbeelding Maak een eenvoudige CSS-stylesheet met behulp van Kladblok Stap 20

3. Klik Opslaan als…. U ziet dit bij de onderkant van het vervolgkeuzemenu. Erop klikken, vraagt een venster om te openen.

Titel afbeelding Maak een eenvoudige CSS-stylesheet met Kladblok Stap 21

4. Selecteer een opslaglocatie. Klik op een map (e.g., Bureaublad) aan de linkerkant van het venster.

Toonde afbeelding Maak een eenvoudige CSS-stylesheet met behulp van Kladblok Stap 22

5. Klik op de "Opslaan als type" drop-down box. Er verschijnt een vervolgkeuzemenu.

Titel afbeelding Maak een eenvoudige CSS-stylesheet met behulp van Kladblok Stap 23

6. Klik Alle bestanden. Het zit in het vervolgkeuzemenu.

Titel afbeelding Maak een eenvoudige CSS-stylesheet met Kladblok Stap 24

7. Noem uw bestand met een ".html" uitbreiding. In de "Bestandsnaam" Tekstveld, typ uw gewenste documentnaam in (E.g., "Mijn CSS") gevolgd door .html.

Als u bijvoorbeeld uw bestand hebt genoemd "Mijn CSS", je zou typen mijn CSS.html in het veld.

Als u een programma gebruikt dat kan worden uitgevoerd ".CSS" bestanden, u kunt gebruiken .CSS in plaats van .html hier.

Titel afbeelding Maak een eenvoudige CSS-stylesheet met Kladblok Stap 25

8. Klik Sparen. Het zit in de rechterbovenhoek van de "Opslaan als" venster. Hierdoor wordt uw CSS-vel in een uitvoerbaar formaat, wat betekent dat u deze kunt openen in uw favoriete browser of HTML-editor in plaats van in Kladblok.

Tips

Wanneer u in HTML of CSS codeert, maakt het niet uit hoeveel spaties tussen de regels van de code - u kunt op ↵ drukken om meerdere keren na elke regel in te voeren zonder de functie van het programma in te voeren zonder de functie van het programma te wijzigen.

Probeer verschillende delen van uw CSS-stylesheet in te schakelen om het vinden van elementen gemakkelijker te maken. U kunt bijvoorbeeld tweemaal de kopcode en alinea-code indrukken.