Skapa CSS Style Sheet
På samma sätt skapade vi en separat textfil för HTML, skapar du en textfil för CSS. Om du behöver bilder för den här processen, se den första självstudien. Här är stegen för att skapa ditt CSS-formatmall i Anteckningar:
- Välja Arkiv> Ny i Anteckningar för att få ett tomt fönster
- Spara filen som CSS genom att klicka på Arkiv
- Navigera till mappen my_website på din hårddisk
- Ändra "Spara som typ: "till"Alla filer"
- Namnge din fil "styles.css"(lämna offerten) och klicka Spara
Länka CSS Style Sheet till din HTML
När du har en stilark för din webbplats måste du koppla den till själva webbsidan. För att göra detta använder du länktaggen. Placera följande länktagg var som helst inom.
Fixa sidmarginalerna
När du skriver XHTML för olika webbläsare är en sak du lär dig att de alla verkar ha olika marginaler och regler för hur de visar saker. Det bästa sättet att vara säker på att din webbplats ser likadan ut i de flesta webbläsare är att inte tillåta att saker som marginaler är standard för webbläsarvalet.
Vi föredrar att starta sidor i det övre vänstra hörnet, utan extra stoppning eller marginal som omger texten. Även om vi täcker innehållet sätter vi marginalerna till noll så att vi börjar med samma tomma skiffer. För att göra detta, lägg till följande i ditt styles.css-dokument:
html, body {
marginal: 0px;
stoppning: 0px;
gräns: 0px;
vänster: 0px;
överst: 0px;
}
Ändra teckensnitt på sidan
Typsnittet är ofta det första du vill ändra på en webbsida. Standarden teckensnitt på en webbsida kan vara ful och är faktiskt upp till webbläsaren själv, så om du inte definierar teckensnittet vet du verkligen inte hur din sida kommer att se ut.
Normalt skulle du ändra teckensnittet i stycken eller ibland på hela dokumentet. För den här webbplatsen definierar vi teckensnittet på rubrik- och styckenivå. Lägg till följande i ditt styles.css-dokument:
p, li {
typsnitt: 1em Arial, Helvetica, sans-serif;
}
h1 {
teckensnitt: 2em Arial, Helvetica, sans-serif;
}
h2 {
typsnitt: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
typsnitt: 1.25em Arial, Helvetica, sans-serif;
}
Vi började med 1em som basstorlek för stycken och listobjekt och använde det för att ställa in storleken på mina rubriker. Vi förväntar oss inte att använda en rubrik djupare än h4, men om du planerar det vill du också utforma den.
Gör dina länkar mer intressanta
Standardfärgerna för länkar är blå och lila för obesökta respektive besökta länkar. Även om detta är standard, kanske det inte passar dina sidors färgschema, så låt oss ändra det. Lägg till följande i din styles.css-fil:
en länk {
font-family: Arial, Helvetica, sans-serif;
färg: # FF9900;
text-dekoration: understrykning;
}
a: besökte {
färg: # FFCC66;
}
a: sväva {
bakgrund: #FFFFCC;
font-vikt: fet;
}
Vi ställer in tre länkstilar, a: länken som standard, a: besökt när den har besökts, vi ändrar färg och a: svävar. Med a: sväva har vi länken en bakgrundsfärg och blir fet för att betona att det är en länk som ska klickas.
Styling av navigationsavsnittet
Eftersom vi placerar navigeringsavsnittet (id = "nav") först i HTML, låt oss utforma det först. Vi måste ange hur bred den ska vara och lägga en större marginal på höger sida så att huvudtexten inte stöter på den. vi sätter också en gräns runt den.
Lägg till följande CSS i ditt styles.css-dokument:
#nav {
bredd: 225px;
marginal-höger: 15px;
border: medium solid # 000000;
}
#nav li {
liststil: ingen;
}
.footer {
font-storlek: .75em;
tydlig: båda;
bredd: 100%;
textjustera: centrum;
}
List-stilegenskapen ställer in listan i navigeringsavsnittet så att den inte har några kulor eller nummer, och .footer utformar upphovsrättsavsnittet så att det är mindre och centrerat i avsnittet.
Placering av huvudsektionen
Genom att placera din huvudsektion med absolut positionering kan du vara säker på att den kommer att stanna exakt där du vill att den ska stanna på din webbsida. Vi gjorde den 800 pixlar bred för att rymma större skärmar, men om du har en mindre bildskärm kanske du vill göra det smalare.
Placera följande i ditt styles.css-dokument:
#main {
bredd: 800px;
överst: 0px;
position: absolut;
vänster: 250px;
}
Styling dina stycken
Eftersom jag redan har ställt in teckensnittet ovan, ville jag ge varje stycke lite extra "kick" för att göra det bättre. Jag gjorde detta genom att sätta en kant på toppen som markerade stycket mer än bara bilden ensam.
Placera följande i ditt styles.css-dokument:
.översta raden {
border-top: tjock solid # FFCC00;
}
Vi bestämde oss för att göra det som en klass som kallas "topline" snarare än att bara definiera alla stycken på det sättet. På det här sättet, om vi bestämmer oss för att vi vill ha ett stycke utan en toppgul linje, kan vi helt enkelt avstå från class = "topline" i stycke-taggen och den kommer inte att ha den övre gränsen.
Styling av bilderna
Bilder har vanligtvis en ram runt sig, det är inte alltid synligt om inte bilden är en länk, men vi vill ha en klass inom CSS-formatmall som stänger av gränsen automatiskt. För detta formatmall skapade vi klassen "noborder", och de flesta bilderna i dokumentet ingår i denna klass.
Den andra speciella delen av dessa bilder är deras plats på sidan. Vi ville att de skulle vara en del av det stycke de befann sig i utan att använda tabeller för att anpassa dem. Det enklaste sättet att göra detta är att använda float CSS-egenskapen.
Placera följande i ditt styles.css-dokument:
#main img {
flyta till vänster;
marginal-höger: 5px;
marginal botten: 15px;
}
.ingen gräns {
gräns: 0px ingen;
}
Som du kan se finns det också marginalegenskaper på bilderna för att se till att de inte krossas mot den flytande texten som finns bredvid dem i styckena.
Titta nu på din färdiga sida
När du har sparat din CSS kan du ladda om sidan pets.htm i din webbläsare. Din sida ska se ut som den som visas på den här bilden, med bilderna justerade och navigationen placerad korrekt på vänster sida av sidan.
Följ samma steg för alla dina interna sidor för den här webbplatsen. Du vill ha en sida för varje sida i din navigering.