Slik formaterer websider ved hjelp av My Style Sheet
Cascading Style Sheets gi en mekanisme for å legge stiler til websider og skille side presentasjons semantikk fra sideinnhold. CSS ble opprinnelig utviklet for å løse problemer introdusert av inkluderingen av stilen informasjon i HTML-koder, en praksis som førte til uhåndterlig og dyre HTML-kode. Stilark gi utviklere muligheten til å style utseendet på nettsidene på en konsistent og utvidbar måte mens reservere HTML-koder for beskrivelse av selve innholdet.
Bruksanvisning
Slik formaterer websider ved hjelp av et eksternt stilark
1 Åpne en teksteditor og opprette en ny fil. Gi filen myStylesheet.css.
2 Rediger myStylesheet.css. Legg en stil til filen farger "<p>" kodene som brukes i en hvilken som helst nettside som henviser myStylesheet.css rødt. Lagre og lukk myStylesheet.css.
p
{
color: red;
}
3 Gå tilbake til teksteditor, og opprette en ny fil. Gi filen navnet useExternal.html og lagre den på samme sted som myStylesheet.css.
4 Rediger useExternal.html. Legg litt HTML til filen som inneholder en åpen HTML "<html>" tag, en åpen HTML "<head>" tag, en nær HTML "</ head>" tag, en åpen HTML "<body>" tag, en nær HTML "</ body>" tag og en nær HTML "</ html>" tag.
<Html>
<Head> </ head>
<Body> </ body>
</ Html>
5 Fortsett å redigere useExternal.html. Legg en link til myStylesheet.css i filens "<head>" -delen. Sett "href" verdien til "myStylesheet.css", den "rel" verdien til "text / stylesheet" og "type" verdien til "text / css".
<Html>
<Head>
<Link href = "myStylesheet.css" rel = "stylesheet" type = "text / css">
</ Head>
<Body> </ body>
</ Html>
6 Fortsett å redigere useExternal.html. Legg en HTML "<h1>" overskriften koden til filen i "<body>" delen, satt overskriften til teksten "Topptekst" og lukk "</ h1>" tag.
<Html>
<Head>
<Link href = "myStylesheet.css" rel = "stylesheet" type = "text / css">
</ Head>
<Body>
<H1> Header Text </ h1>
</ Body>
</ Html>
7 Fortsett å redigere useExternal.html. Legg en HTML "<p>" paragrafen tag til filen etter "<h1>" tag, sette avsnitt teksten til "Avsnitt Tekst" og lukk "</ p>" tag. Lagre og lukk useExternal.html.
<Html>
<Head>
<Link href = "myStylesheet.css" rel = "stylesheet" type = "text / css">
</ Head>
<Body>
<H1> Header Text </ h1>
<P> Avsnitt Text </ p>
</ Body>
</ Html>
8 Åpne useExternal.html i en nettleser. Kontroller at teksten plasseres inne i "<p>" og "</ p>" koder er farget rødt.
Slik formaterer du en webside ved hjelp av en intern Style Sheet
9 Åpne en teksteditor og opprette en ny fil med navnet useInternal.html. Legg litt HTML til filen som inneholder en åpen HTML "<html>" tag, en åpen HTML "<head>" tag, en nær HTML "</ head>" tag, en åpen HTML "<body>" tag, en nær HTML "</ body>" tag, og en nær HTML "</ html>" tag.
<Html>
<Head> </ head>
<Body> </ body>
</ Html>
10 Fortsett å redigere useInternal.html. Legg en stil mellom "<head>" og "</ head>" koder som farger tekst som bruker "<p>" tag blå.
<Html>
<Head>
<Style type = "text / css">
p
{
color: blue;
}
</ Style>
</ Head>
<Body> </ body>
</ Html>
11 Fortsett å redigere useInternal.html. Legg en HTML "<h1>" overskriften koden til "<body>" delen av filen og sette overskriftsteksten til "Topptekst". Lukk "</ h1>" tag.
<Html>
<Head>
<Style type = "text / css">
p
{
color: blue;
}
</ Style>
</ Head>
<Body>
<H1> Header Text </ h1>
</ Body>
</ Html>
12 Fortsett å redigere useInternal.html. Legg en HTML "<p>" paragrafen tag til filen etter "<h1>" tag og sette avsnittet teksten til "Avsnitt Tekst". Lukk "</ p>" tag og lagre og lukke useInternal.html.
<Html>
<Head>
<Style type = "text / css">
p
{
color: blue;
}
</ Style>
</ Head>
<Body>
<H1> Header Text </ h1>
<P> Avsnitt Text </ p>
</ Body>
</ Html>
1. 3 Åpne useInternal.html i en nettleser. Kontroller at teksten plasseres inne i "<p>" og "</ p>" koder er farget blå.
Slik formaterer du en webside ved hjelp av en Inline Style Sheet
14 Åpne en teksteditor og opprette en ny fil med navnet useInline.html. Legg litt HTML til filen som inneholder en åpen HTML "<html>" tag, en åpen HTML "<head>" tag, en nær HTML "</ head>" tag, en åpen HTML "<body>" tag, en nær HTML "</ body>" tag, og en nær HTML "</ html>" tag.
<Html>
<Head> </ head>
<Body> </ body>
</ Html>
15 Fortsett å redigere useInline.html. Legg en HTML "<h1>" overskriften koden i "<body>" delen av filen, angi toppteksten til teksten "Topptekst" og lukk "</ h1>" tag.
<Html>
<Head> </ head>
<Body>
<H1> Header Text </ h1>
</ Body>
</ Html>
16 Fortsett å redigere useInline.html. Legg en HTML "<p>" paragrafen tag til filen etter "<h1>" tag, sette avsnitt teksten til "Avsnitt Tekst" og lukk "<p>" tag.
<Html>
<Head> </ head>
<Body>
<H1> Header Text </ h1>
<P> Avsnitt Text </ p>
</ Body>
</ Html>
17 Fortsett å redigere useInline.html. Rediger "<p>" paragrafen tag og legge til en "stil" parameter som farger eventuell tekst som bruker "<p>" tag grønt.
<Html>
<Head> </ head>
<Body>
<H1> Header Text </ h1>
<P style = "color: green;"> Avsnitt Text </ p>
</ Body>
</ Html>
18 Åpne useInline.html i en nettleser. Kontroller at teksten plasseres inne i "<p>" og "</ p>" koder er farget grønt.
Hint
- CSS kan brukes til å style fonter, bakgrunner, tekst, og gir boks og klasseegenskaper.
- CSS3 utnytter moduler som gir mer avanserte stil funksjoner, som for eksempel avrundede knapper og tekst effekter.
- CSS2 tillater målretting av regler til bestemte medietyper med "media" attributt.
- Noen nettlesere, spesielt Internet Explorer, støtter proprietære CSS utvidelser. Disse utvidelsene kan skape problemer når de vises i andre nettlesere.
- Inline stiler regnes ikke som en beste praksis, siden de ikke skille HTML-tagger (innhold) fra stil.
- Innpakning stiler i HTML-kommentarer ( "<-") og ( "->") skjuler stil kode fra gamle nettlesere som mangler stil støtte.