Hur man skapar css

Ett kaskad stilark (CSS) är ett system för webbsidor som gör det möjligt för konstruktörer att manipulera flera funktioner samtidigt genom att tilldela vissa element till grupper. Till exempel, med hjälp av en kod för webbplatsens bakgrund, kan designers ändra bakgrundsfärgen eller bilden på alla sidor på webbplatsen med en ändring till CSS-filen. Så här skapar du CSS för en grundläggande webbplats.

Steg

Del 1 av 4:

Skriva inline CSS

1. Var noga med att du har en grundläggande förståelse för HTML-taggar. Du borde veta hur etiketter fungerar och av src och href attribut.

2. Lär dig några av de Grundläggande CSS-egenskaper. Du kommer att upptäcka att det finns många egenskaper. Det är dock inte nödvändigt att lära dem alla.

Några bra grundläggande CSS-egenskaper att veta är Färg och typsnittsfamilj.

3. Lär dig om värden för respektive egendom. Alla fastigheter behöver ett värde. För Färg egendom, till exempel, du kan lägga röd värde.

4. Lär dig om stil HTML-attribut. Den används inom ett element som href eller src. För att använda den, i citattecken efter lika tecken, sätt CSS-attributet, ett kolon och sedan värdet av fastigheten. Detta är känt som en CSS-regel.

5. Förstå att inline CSS vanligtvis används för webbplatser av professionella webbutvecklare. Inline CSS kan lägga onödig rodnad till ett HTML-dokument. Det är dock ett bra sätt att bli introducerad för hur CSS fungerar.

Del 2 av 4:

Skriva grundläggande CSS

1. Starta det program du vill använda. Det ska låta dig skapa HTML- och CSS-filer.

Om du inte har ett speciellt program installerat kan du använda anteckningsblock eller en annan textredigerare. Spara bara din fil både som en textfil och en CSS-fil.

2. Öppna HTML-filen för din webbplats. Du bör också öppna det med en HTML-editor, om du har en installerad.

HTML-redaktörer tillåter dig att redigera HTML och CSS samtidigt.

3. Skapa en tagg i ditt HTML-huvud. Detta kommer att låta dig skriva CSS utan att behöva en separat fil.

4. Välj ett element som du vill lägga till styling till och skriv namnet på elementet 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 spärren på egen linje.

5. Mellan axlarna, skriv dina CSS-regler som du skulle använda stil attribut. Varje linje måste sluta med en semikolon (-). För att göra din kod läsbar, bör varje regel börja på egen rad och varje rad ska vara indragna.

Det är mycket viktigt att notera att denna styling kommer att påverka Allt Element av den valda typen på sidan. Mer specifik styling kommer att täckas i nästa avsnitt.

Del 3 av 4:

Mer avancerad CSS

1. Skapa en CSS-fil, inte en HTML-fil och spara den med hjälp av .css förlängning. Öppna din HTML-fil också.

2. Skapa en Tag i ditt HTML-huvud. Det här låter dig länka en separat CSS-fil till ditt HTML-dokument. Din länk tagg behöver tre attribut: rel, typ, och href.

rel innebär att "relation" och berättar webbläsaren vad förhållandet är till HTML-dokumentet. Här borde det ha ett värde av "stylesheet".

typ berättar vilken typ av media som är kopplad till. Här borde 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 är placerad i samma mapp som HTML-filen behöver bara filnamnet skrivas inom citattecken.

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 efter eget val. Detta kommer att ge dina element samma styling.

4. Tilldela vad styling en klass kommer att få. Skriv klassnamnet i din CSS-fil med en period (.) föregår det (i.e. .klass).

5. Välj enkla element du vill lägga till speciell styling till och lägga till en id attribut. ID är skapade i CSS med en pund symbol (#) snarare än en period.

ID är mer specifika än klasser, så ett ID kommer att åsidosätta någon klassstyling om den har ett attribut med ett annat värde än klassen.

Del 4 av 4:

Lära sig mer

Besök W3-skolorna. Det är en officiell webbplats som syftar till att undervisa webbutvecklingsförmåga. W3 har gott om referenser listade för HTML och CSS, liksom andra webbspråken.

2. Hitta andra webbplatser som särskilt syftar till att lära och undervisa HTML och CSS. Platser som CSS-tricks.com specifikt syftar till att undervisa CSS och webbdesignkunskaper. Att hitta välrenommerade källor hjälper dig på din lärande.

3. Kom i kontakt med webbdesigners och utvecklare. Deras erfarenhet och know-how kan lära dig värdefull kunskap och färdigheter.

4. Visa källkoden för webbplatser du stöter på. Visa CSS av välutvecklade webbplatser kan visa sätt att designa delar av webbplatser. Kopiera det som övning och fiddling med koden kan hjälpa dig att lära dig att använda olika CSS-attribut.

Video.

Genom att använda den här tjänsten kan viss information delas med YouTube.

Tips

Det finns många olika egenskaper som du kan manipulera med CSS. Hitta en webbplats med en stil du gillar och visa källfilen. Om det finns ett CSS-filnamn som är kopplat på toppen i huvudetiketterna, kan du klicka på den för att se de olika egenskaperna och värdena som tilldelats elementen.

Varningar

Direkt kopiering av HTML och CSS-kodning kan hjälpa dig att lära dig, men du måste använda egna designidéer. Att ta någon annans design är stöld och plagiering.

Dela på det sociala nätverket: