Skapa CSS Style Sheet
På samma sätt skapade vi en separat textfil för HTML, så skapar du en textfil för CSS. Om du behöver visuella bilder för den här processen, vänligen se den första handledningen. Så här är stegen för att skapa ditt CSS-stilark i Anteckningar:
- Välj Arkiv> Ny i anteckningsblock för att få ett tomt fönster
- Spara filen som CSS genom att klicka på Arkiv <Spara som …
- Navigera till mappen my_website på hårddisken
- Ändra "Spara som typ:" till "Alla filer"
- Namnge din fil "styles.css" (lämna av citat) och klicka på Spara
Länk CSS Style Sheet till din HTML
När du har ett stilark för din webbplats måste du associera den med webbsidan själv. För att göra detta använder du länktaggen. Placera följande länktag någonstans inom
taggar av ditt pets.htm-dokument:
03 av 10 När du skriver XHTML för olika webbläsare är en sak du lär dig att alla verkar ha olika marginer och regler för hur de visar saker. Det bästa sättet att vara säker på att din webbplats ser ut i de flesta webbläsare är att inte tillåta att marginaler som standard är standard för webbläsarens val. Jag föredrar att starta mina sidor i övre vänstra hörnet, utan extra fyllning eller marginal som omger texten. Även om jag ska lägga in innehållet ställer jag marginalerna till noll så att jag börjar med samma tomma skiffer. För att göra detta, lägg till följande i ditt styles.css-dokument: Teckensnittet är ofta det första du vill ändra på en webbsida. Standard teckensnitt på en webbsida kan vara ful och är faktiskt uppe i webbläsaren själv, så om du inte definierar teckensnittet vet du inte riktigt vad din sida kommer att se ut. Vanligtvis skulle du ändra teckensnittet på stycken, eller ibland på hela dokumentet själv. För den här webbplatsen definierar vi teckensnittet på rubrik och stycksnivå. Lägg till följande i ditt styles.css-dokument: Jag började med 1em som min basstorlek för punkter och listobjekt, och sedan använde det för att ställa in storleken för mina rubriker. Jag förväntar mig inte att använda en rubrik djupare än h4, men om du planerar att du kommer att vilja stile det också. Standardfärgerna för länkar är blå och lila för ovisade respektive besökta länkar. Medan det här är standard kan det inte passa färgscheman på dina sidor, så låt oss ändra det. Lägg till följande i din styles.css-fil: Jag har upprättat tre länkstilar, a: länken som standard, a: besökte när den har besökts, jag byter färg och a: svävar. Med en: svävar jag har länken får du en bakgrundsfärg och bli djärv för att betona att det är en länk som ska klickas på. Eftersom vi placerar navigationsdelen (id = "nav") först i HTML-filen, låt oss först stilera den. Vi måste ange hur bred det ska vara och placera en bredare marginal på höger sida så att huvudtexten inte kommer att stöta på den. Jag lägger också en kant runt den. Lägg till följande CSS i ditt styles.css-dokument: Listegenskapen sätter upp listan i navigeringsdelen för att inte ha några kulor eller nummer, och .footer-formatet upphovsrättsdelen är mindre och centrerad i avsnittet. Genom att placera huvuddelen med absolut positionering kan du vara säker på att den kommer att stanna exakt var du vill att den ska ligga på din webbsida. Jag gjorde mina 800px breda för att rymma större bildskärmar, men om du har en mindre bildskärm kanske du vill göra det smalare. Placera följande i ditt styles.css-dokument: Eftersom jag redan har angivit punktfönstret ovan, ville jag ge varje stycke lite extra "kick" för att göra det bättre. Det gjorde jag genom att lägga en kant längst upp som markerade stycket mer än bara bilden ensam. Placera följande i ditt styles.css-dokument: Jag bestämde mig för att göra det som en klass som heter "topline" istället för att bara definiera alla punkter på det sättet. På det här sättet, om jag bestämmer mig för att jag vill ha en punkt utan en topp gul linje, kan jag helt enkelt lämna klassen = "topline" i stycketiketten och det kommer inte att ha den övre gränsen. Bilder har typiskt en gräns runt dem, det här är inte alltid synligt om inte bilden är en länk, men jag gillar att ha en klass i mitt CSS-stilark som automatiskt stänger av gränsen.För det här formatet skapade jag klassen "noborder" och de flesta av bilderna i dokumentet ingår i denna klass. Den andra speciella delen av dessa bilder är deras placering på sidan. Jag ville att de skulle vara en del av det stycke de var i utan att använda tabeller för att anpassa dem. Det enklaste sättet att göra det här är att använda Float CSS-egenskapen. Placera följande i ditt styles.css-dokument: Som du kan se finns det också marginegenskaper som är inställda på bilderna, för att se till att de inte krossas mot den flytande texten som ligger bredvid dem i punkterna. När du har sparat din CSS kan du ladda om sidan pets.htm i webbläsaren. Din sida ska likna den som visas i den här bilden, med bilder justerade och navigeringen 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. Fixa sidmarginalerna
Ändra teckensnittet på sidan
Att göra dina länkar mer intressanta
Styling av navigationssektionen
Placering av huvudsektionen
Styling Your Paragraphs
Styling av bilderna
Se nu på din färdiga sida
