Ett Cascading Style Sheet (CSS) är ett system för webbplatskodning som gör det möjligt för designers att manipulera flera funktioner samtidigt genom att tilldela vissa element till grupper. Till exempel, genom att använda en kod för webbplatsens bakgrund, kan designers ändra bakgrundsfärgen eller bilden på alla sidor på webbplatsen med en ändring av CSS -filen. Så här skapar du CSS för en grundläggande webbplats.
Steg
Del 1 av 4: Skriva inline CSS
Steg 1. Se till att du har en grundläggande förståelse för HTML -taggar
Du bör veta hur taggar fungerar och om
src
och
href
attribut.
Steg 2. Lär dig några av de grundläggande CSS -egenskaperna
Du kommer att upptäcka att det finns väldigt många fastigheter. Det är dock inte nödvändigt att lära sig dem alla.
-
Några bra grundläggande CSS -egenskaper att känna till är
Färg
och
typsnittsfamilj
- .
Steg 3. Lär dig mer om värden för respektive egendom
Alla fastigheter behöver ett värde. För
Färg
egendom, till exempel, kan du sätta
röd
värde.
Steg 4. Lär dig mer om
stil
HTML -attribut.
Det används inom ett element som
href
eller
src
. För att använda det, inom citattecken efter likhetstecknet, sätter du CSS -attributet, ett kolon och sedan värdet på egenskapen. Detta kallas en CSS -regel.
Steg 5. Förstå att inline CSS vanligtvis inte används för webbplatser av professionella webbutvecklare
Inline CSS kan lägga till onödigt röran i ett HTML -dokument. Det är dock ett bra sätt att lära känna hur CSS fungerar.
Del 2 av 4: Skriva grundläggande CSS
Steg 1. Starta programmet du vill använda
Det bör låta dig skapa HTML- och CSS -filer.
Om du inte har ett speciellt program installerat kan du använda Anteckningar eller en annan textredigerare. Spara bara din fil både som en textfil och en CSS -fil
Steg 2. Öppna HTML -filen för din webbplats
Du bör också öppna detta med en HTML -editor om du har en installerad.
HTML -redaktörer låter dig redigera HTML och CSS samtidigt
Steg 3. Skapa en tagg i ditt HTML -huvud
Detta låter dig skriva CSS utan att behöva en separat fil.
Steg 4. Välj ett element som du vill lägga till styling till och skriv elementets namn följt av en uppsättning lockiga hängslen ({})
För att göra din kod mer läsbar, lägg alltid den andra lockiga hängslen på sin egen linje.
Steg 5. Mellan hängslen skriver du dina CSS -regler som du skulle använda
stil
attribut.
Varje rad måste sluta med ett semikolon (;). För att göra din kod läsbar bör varje regel börja på sin egen rad och varje rad ska vara indragen.
Det är mycket viktigt att notera att denna styling kommer att påverka alla element av den valda typen på sidan. Mer specifik styling kommer att behandlas i nästa avsnitt
Del 3 av 4: Mer avancerad CSS
Steg 1. Skapa en CSS -fil, inte en HTML -fil och spara den med
.css
förlängning.
Öppna din HTML -fil också.
Steg 2. Skapa en tagg i ditt HTML -huvud
Detta gör att du kan länka en separat CSS -fil till ditt HTML -dokument. Din länktagg behöver tre attribut:
rel
typ
och
href
-
rel
betyder "relation" och berättar för webbläsaren vad förhållandet är till HTML -dokumentet. Här ska det ha ett värde av
"formatmall"
- .
-
typ
berättar vilken typ av media som länkas till. Här ska det ha ett värde av
"text/css"
-
href
- här används på samma sätt som det används i ett element, men här måste det länka till en CSS -fil. Om CSS -filen finns i samma mapp som HTML -filen behöver bara filnamnet skrivas inom citattecken.
Steg 3. Välj element av olika typer som du vill lägga till samma styling till
Lägg till en
klass
attribut till dessa element och ställ dem lika med ett klassnamn du väljer. Detta kommer att ge dina element samma styling.
Steg 4. Tilldela vilken styling en klass kommer att få
Skriv klassnamnet i din CSS -fil med en punkt (.) Före den (dvs.
.klass
).
Steg 5. Välj enskilda element som du vill lägga till speciell styling till och lägg till en
id
attribut.
Id skapas i CSS med hjälp av en pund symbol (#) snarare än en punkt.
Id: er är mer specifika än klasser, så ett id kommer att åsidosätta vilken klassstil som helst om den har ett attribut med ett annat värde än klassen
Del 4 av 4: Lär dig mer
Steg 1. Besök w3 -skolorna
Det är en officiell webbplats för att lära ut webbutvecklingskunskaper. W3 har massor av referenser listade för HTML och CSS, liksom andra webbspråk.
Steg 2. Hitta andra webbplatser som är specifikt inriktade på att lära och lära ut HTML och CSS
Sajter som CSS tricks.com är specifikt inriktade på att lära ut CSS och webbdesign. Att hitta ansedda källor hjälper dig på din inlärningsresa.
Steg 3. Kom i kontakt med webbdesigners och utvecklare
Deras erfarenhet och know-how kan lära dig värdefulla kunskaper och färdigheter.
Steg 4. Visa källkoden för webbplatser du stöter på
Att se CSS för välutvecklade webbplatser kan visa dig sätt att designa delar av webbplatser. Att kopiera ner det som övning och kissa med koden kan hjälpa dig att lära dig hur du använder olika CSS -attribut.
Video - Genom att använda denna tjänst kan viss information delas med YouTube
