Cascading style sheets een mechanisme voor het toevoegen van stijlen om webpagina's en het scheiden van pagina presentatie semantiek van de pagina-inhoud. CSS werd oorspronkelijk ontwikkeld om problemen veroorzaakt door de opname van stijlinformatie in HTML-tags, een praktijk die tot onbeheersbare en dure HTML lossen. Style sheets bieden ontwikkelaars de mogelijkheid om het uiterlijk van webpagina's stijl in een consistente en uitbreidbare wijze, terwijl het reserveren van HTML-tags voor de beschrijving van de inhoud zelf.
instructies
Hoe opmaken webpagina's met behulp van een externe Style Sheet
1 Open een tekstverwerker en een nieuw bestand te maken. Noem het bestand myStylesheet.css.
2 myStylesheet.css Bewerken. Voeg een stijl om het bestand dat de kleuren "<p>" tags die gebruikt worden in elke webpagina die myStylesheet.css rood verwijst. Opslaan en sluiten myStylesheet.css.
p
{
kleur rood;
}
3 Keer terug naar de tekst editor, en een nieuw bestand te maken. Noem het bestand useExternal.html en sla het op dezelfde locatie als myStylesheet.css.
4 useExternal.html Bewerken. Voeg wat HTML naar het bestand dat een open HTML "<html>" tag, een open HTML "<head>" tag, een nauwe HTML "</ head>" tag, een open HTML "<body>" tag, een bevat dicht HTML "</ body>" tag en een nauwe HTML "</ html>" tag.
<Html>
<Head> </ head>
<Body> </ body>
</ Html>
5 Doorgaan bewerken useExternal.html. Voeg een link naar myStylesheet.css in "<head>" sectie van het bestand. Stel het "href" waarde "myStylesheet.css", de "rel" waarde "text / stylesheet" en het "type" waarde "text / css".
<Html>
<Head>
<Link href = "myStylesheet.css" rel = "stylesheet" type = "text / css">
</ Head>
<Body> </ body>
</ Html>
6 Doorgaan bewerken useExternal.html. Voeg een HTML "<h1>" header tag om het bestand in de sectie "<body>", stelt de header om de tekst "Koptekst" en sluit het "</ h1>" tag.
<Html>
<Head>
<Link href = "myStylesheet.css" rel = "stylesheet" type = "text / css">
</ Head>
<Body>
<H1> Koptekst </ h1>
</ Body>
</ Html>
7 Doorgaan bewerken useExternal.html. Voeg een HTML "<p>" paragraaf tag om het bestand na de "<h1>" tag, zet de paragraaf tekst "Paragraaf Tekst" en sluit het "</ p>" tag. Opslaan en sluiten useExternal.html.
<Html>
<Head>
<Link href = "myStylesheet.css" rel = "stylesheet" type = "text / css">
</ Head>
<Body>
<H1> Koptekst </ h1>
<P> Paragraaf Tekst </ p>
</ Body>
</ Html>
8 Open useExternal.html in een webbrowser. Controleer of de tekst geplaatst in de "<p>" en "</ p>" tags te rood is gekleurd.
Hoe maak je een webpagina met een interne Style Sheet Format
9 Open een tekstverwerker en een nieuw bestand met de naam useInternal.html creëren. Voeg wat HTML naar het bestand dat een open HTML "<html>" tag, een open HTML "<head>" tag, een nauwe HTML "</ head>" tag, een open HTML "<body>" tag, een bevat dicht HTML "</ body>" tag, en een nauwe HTML "</ html>" tag.
<Html>
<Head> </ head>
<Body> </ body>
</ Html>
10 Doorgaan bewerken useInternal.html. Voeg een stijl tussen de "<head>" en "</ head>" tags die kleuren elke tekst die de "<p>" tag blue gebruikt.
<Html>
<Head>
<Style type = "text / css">
p
{
kleur blauw;
}
</ Style>
</ Head>
<Body> </ body>
</ Html>
11 Doorgaan bewerken useInternal.html. Voeg een HTML "<h1>" header tag aan de sectie "<body>" van het bestand en stel de koptekst naar "Koptekst". Sluit de "</ h1>" tag.
<Html>
<Head>
<Style type = "text / css">
p
{
kleur blauw;
}
</ Style>
</ Head>
<Body>
<H1> Koptekst </ h1>
</ Body>
</ Html>
12 Doorgaan bewerken useInternal.html. Voeg een HTML "<p>" paragraaf tag om het bestand na de "<h1>" tag en zet de paragraaf tekst "Paragraaf Text". Sluit de "</ p>" tag en slaan en te sluiten useInternal.html.
<Html>
<Head>
<Style type = "text / css">
p
{
kleur blauw;
}
</ Style>
</ Head>
<Body>
<H1> Koptekst </ h1>
<P> Paragraaf Tekst </ p>
</ Body>
</ Html>
13 Open useInternal.html in een webbrowser. Controleer of de tekst geplaatst in de "<p>" en "</ p>" labels blauw gekleurd.
Hoe maak je een webpagina met behulp van een Inline Style Sheet Format
14 Open een tekstverwerker en een nieuw bestand met de naam useInline.html creëren. Voeg wat HTML naar het bestand dat een open HTML "<html>" tag, een open HTML "<head>" tag, een nauwe HTML "</ head>" tag, een open HTML "<body>" tag, een bevat dicht HTML "</ body>" tag, en een nauwe HTML "</ html>" tag.
<Html>
<Head> </ head>
<Body> </ body>
</ Html>
15 Doorgaan bewerken useInline.html. Voeg een HTML "<h1>" header tag in de sectie "<body>" van het bestand, stelt u de header om de tekst "Koptekst" en sluit het "</ h1>" tag.
<Html>
<Head> </ head>
<Body>
<H1> Koptekst </ h1>
</ Body>
</ Html>
16 Doorgaan bewerken useInline.html. Voeg een HTML "<p>" paragraaf tag om het bestand na de "<h1>" tag, zet de paragraaf tekst "Paragraaf Tekst" en sluit het "<p>" tag.
<Html>
<Head> </ head>
<Body>
<H1> Koptekst </ h1>
<P> Paragraaf Tekst </ p>
</ Body>
</ Html>
17 Doorgaan bewerken useInline.html. Bewerk de "<p>" paragraaf tag en voeg een parameter "stijl", dat kleuren elke tekst die de "<p>" tag groen gebruikt.
<Html>
<Head> </ head>
<Body>
<H1> Koptekst </ h1>
<P style = "color: green;"> Paragraaf Tekst </ p>
</ Body>
</ Html>
18 Open useInline.html in een webbrowser. Controleer of de tekst geplaatst in de "<p>" en "</ p>" labels groen gekleurd is.
Hints
- CSS kan worden gebruikt om lettertypen, achtergronden, tekst stijl, en biedt doos en classificatie eigenschappen.
- CSS3 maakt gebruik van modules die meer geavanceerde stijl functies, zoals afgeronde knoppen en tekst effecten.
- CSS2 maakt targeting regels om specifieke soorten media met behulp van de "media" attribuut.
- Sommige browsers, met name Internet Explorer, ondersteunen eigen CSS extensies. Deze extensies kunnen problemen veroorzaken wanneer deze worden weergegeven in andere browsers.
- Inline stijlen worden niet beschouwd als een best practice, omdat ze geen HTML-tags (inhoud) van de stijl niet te scheiden.
- Het verpakken stijlen in HTML opmerkingen ( "<-") en ( "->") verbergt stijl code van de oude browsers die steun stijl ontbreekt.