Hur du formaterar webbsidor Använda CSS

October 20

Cascading Style Sheets, eller CSS, beskriver presentation och layout delar av webbsidor. Du kan definiera någon av hundratals olika regler i dina CSS-filer, inklusive teckensnittsformatering, utseende, färger och elementavstånd. Du kan också skapa och använda egna klasser och ID-väljare för extra frihet programmering. Du använder CSS-filer genom att referera till dem i dina HTML-sidor. Även om du kanske tycker att det är besvärligt att ändra hela din webbplats när du lägger CSS för att det i det långa loppet kommer att göra att ändra hela din webbplats snabbt och enkelt.

Instruktioner

1 Öppna en tom textfil och spara den i rotkatalogen för din webbplats filer. Använd ".css" förlängning, och ge den ett namn, till exempel "myStyleSheet.css."

2 Skapa typ väljare genom att använda befintliga HTML-element och ange deras formatering. Till exempel:

p {

margin: 4px 0px;

text-align: left;

}

Kalla detta element i dina HTML-filer genom att skriva "<p>" och ange din text, och sedan stänga taggen med "</ p>."

3 Skapa klassväljare med punktopera (den "." -symbolen). Till exempel:

.innehåll {

height: 50px;

font-size: 12px;

}

Kalla denna klass i dina HTML-filer genom att skriva "<p class =" content ">" och ange din text, och sedan stänga klassen genom att skriva "</ p>." När du ringer "innehåll" klass i dina HTML-filer, kommer något inom det elementet har dessa formateringsregler som tillämpas. Om du har en "p" -typ väljare liksom denna klass, klassreglerna åsidosätter reglerna om väljaren när den används med en "p" -element i HTML.

4 Skapa ID väljare med hjälp av hash (den "#" symbol). Till exempel:

navigeringsfält {

width: 900px;

höjd: 25px;

marginal: 15px 0px;

padding: 0px;

}

Kalla detta ID i dina HTML-filer genom att skriva "<div id =" navigationBar ">" och ange din text, och sedan stänga den genom att skriva "</ div>." Du ska inte använda ID väljare mer än en gång på dina HTML-sidor. Om du använder dem mer än en gång för olika delar av din sida, kan du skapa en ID-konflikt och se oväntade formatering som du kommer att behöva rätta till. I det här exemplet, du sannolikt inte kommer att ha mer än en navigeringsfältet per HTML-fil.

5 Spara och stäng din CSS-fil, och sedan ladda upp den till din server. Öppna alla dina HTML-sidor och omfattar följande rad i avsnittet "<head>" på varje dokument:

<Link type = "text / css" rel = "stylesheet" href = "path_to_file / myStyleSheet.css" media = "screen" />

Se till att du använder rätt väg till din CSS-fil i varje dokument. Spara dina HTML-dokument, stänga dem och överföra dem till din server.

Tips

  • Om du har flera regler med samma förklaringar, kan du använda en rad för att definiera dem alla. Till exempel, om du vill att "h1" och "h2" taggar att använda samma typsnitt familj, typ "h1, h2 {font-family: font_name;}"

        

Välkommen till dig för att skicka en kommentar:

            
            
            
            

© 2022 Astrixsoft.com | Contact us: webmaster# astrixsoft.com