In deze tutorial voor HTML-creatie en CSS-bestanden gebruiken we de Notepad++-editor, deze is bedoeld voor gebruikers Microsoft Windows en alle voorbeelden zullen daarin worden uitgevoerd.
Als je een Mac hebt, kun je de voorbeelden in de Brackets-editor uitvoeren, net als Kladblok++ helemaal gratis. Wat de redacteur betreft Beugels, dan is het ook geschikt voor gebruikers Microsoft Windows, u kunt vervolgens kiezen wat het dichtst bij u in de buurt is.
Een intern stijlblad maken
Laten we eens kijken naar een voorbeeld waarin u uw eerste interne stylesheet gaat maken.
Stap 1: Open een teksteditor
Druk tegelijkertijd op de WIN + R-knoppen (analoog aan Start - Uitvoeren) en er wordt een dialoogvenster geopend "Loop" enter en druk op Enter (het programma wordt geopend ), of voer het programma uit via haar snelkoppeling.
Het hoofdprogrammavenster wordt voor u geopend:
Stap 2: Creëer een documentstructuur
Kopieer of plak in de editor volgende HTML-code code:
In de codevoorbeelden van deze tutorial zal ik geven aanvullende opmerkingen, gemarkeerd in lichtgroen. HTML gebruikt een speciale tag om commentaar in uw code te plaatsen, wordt de tekst in zo'n element niet weergegeven door de browser. Als u in CSS-code een opmerking wilt toevoegen, moet u de commentaartekst in de volgende structuur plaatsen: /* commentaartekst */. U kunt opmerkingen maken in CSS-code, zowel binnen ingebouwde stijlen als in externe stijlen (in apart bestand).
Stap 3: Voeg inlinestijlen toe
De volgende stap is het toevoegen van ingebouwde stijlen aan uw pagina: voor de kop van het eerste niveau is de tekstkleur rood (kleur: rood) en voor alinea's blauw (kleur: blauw). Bovendien zullen we voor de kop van het eerste niveau de tekst uitlijnen in het midden (text-align: center). Controleer dat elk CSS-eigenschap en de betekenis ervan werd gescheiden door een dubbele punt, met een puntkomma aan het einde van elke verklaring.
Het is goed dat ik bezig ben met zelfontwikkeling.
Ik kan CSS binnen een maand of minder leren.
Stap 4: Bekijk de HTML-pagina in een browser
Open het voorbeeld in een browser en zorg ervoor dat het resultaat van ons voorbeeld overeenkomt met de afbeelding:
Een extern stijlblad aansluiten
Nu gaan we een apart bestand maken dat een stijlblad bevat en dit aan ons HTML-document koppelen.
- IN Kladblok-programma++ maak een nieuwe leeg bestand en sla het op onder de naam page.css (bij het opslaan van het bestand moet u selecteren Cascade-stijlbladen *.css) in dezelfde map waarin u het HTML-document hebt gemaakt.
- Verplaats de CSS-code uit het vorige voorbeeld (de inhoud van de tag
Koptekst van het eerste niveau
Kop van het tweede niveau, blauw
Kop van het derde niveau