Styling med CSS |

Authour's Note

Även om denna handledning täcker grunderna för styling med HTML och CSS, rekommenderas det fortfarande att du har åtminstone en liten förståelse för vad HTML är innan du läser denna handledning. Om du vill läsa den här handledning men fortfarande är lite osäker på vad HTML är, så skulle jag rekommendera att du läser min andra artikel "En introduktion till att skriva HTML" innan du börjar den här.

  • En introduktion till att skriva HTML
    En introduktion till HTML och textredigerare. Lär dig att skapa en grundläggande HTML-fil och visa den i din webbläsare och en rad för rad förklaring av koden som används i detta projekt.

Vad är CSS?

CSS står för Cascading Style Sheets. I likhet med HTML är CSS ett verktyg som används för webbdesign. Faktum är att HTML och CSS går hand i hand när det gäller att utforma en snygg webbplats. Den huvudsakliga skillnaden mellan de två är att HTML främst används för att skapa innehållet på webbplatsen, medan CSS används för att utforma det innehållet. HTML är ett användbart verktyg för att skapa en webbplats, men utan CSS skulle din webbplats verkligen vara väldigt intetsägande. Som sagt, det finns andra verktyg som en person kan använda för att utforma en webbplats, men för någon som bara kommer in i webbdesign CSS det där allt börjar.

Komma igång med HTML

För att kunna använda CSS måste vi ha lite innehåll på vår webbplats först, så låt oss komma igång med att skapa en enkel HTML-fil och några av de vanligare elementen som finns på en webbsida. Gå vidare och öppna din textredigerare och skapa en ny med namnet "index.html". För alla som inte redan har hittat en textredigerare som de vill, skulle jag starkt rekommendera att du använder parenteser för att skriva HTML och CSS. Kopiera och klistra in koden nedan i din index.html-fil.

Denna text är vanligt för nästan alla HTML-filer. Taggen på den första raden berättar för webbläsare att det här är en html-fil, och taggarna på andra och nionde raden berättar för webbläsarna att allt mellan dessa två taggar är HTML-typ på engelska. Mellan taggarna på raderna 3 och 5 är det där du sätter kod för att visa ditt webbplatsnamn och logotyp på din webbläsares flik. Mellan taggarna på rad 6 och 8 är det där du kommer att placera innehållet på din webbplats. det är bokstavligen din webbplats webbplats.

Lägg till lite innehåll med HTML

Nu när vi har den grundläggande beskrivningen av vår webbplats är det dags att lägga till lite innehåll för att göra det lite mer intressant. Låt oss börja med att lägga till ett banner på vår webbplats.

DETTA ÄR MIN BANNETEKST

taggar används för att separera ett avsnitt på din webbplats från resten av webbplatsen. I det här fallet använder vi div-taggar för att skilja banners från resten av webbplatsen. De

taggar används för att skapa rubriker på din webbplats. Det finns sex olika rubriker (h1, h2, h3, h4, h5 och h6) som kan användas. De största skillnaderna mellan rubrikerna är textstorleken. Rubriker används oftast för att betona banners text och stycketitlar. Låt oss nu lägga till en navigeringsfält eller navbar för kort.

DETTA ÄR MIN BANNETEKST

  • HEM
  • INFO
  • KONTAKTA
  • Hubpages

Återigen kommer vi att använda taggar för att separera naven i ett eget avsnitt. De

    taggar står för en oordnad lista med
  • märker var och en som ett listobjekt på den oordnade listan. Insidan av
  • taggar är taggar som används för att skapa länkar till andra webbsidor eller andra sidor på din webbplats. Texten mellan taggarna är det som visas som länktexten, medan texten i citattecknen efter href är länkdestinationen. I det här exemplet leder de tre första länkarna dig till olika delar av din framtida webbplats, och den fjärde länken tar dig till Hubpages webbplats. Låt oss nu lägga till lite text på vår webbplats.

    DETTA ÄR MIN BANNETEKST

    • HEM
    • INFO
    • KONTAKTA
    • Hubpages

    Det här är min avsnittsrubrik

    Det är här jag ska lägga användbar och informativ text om min webbplats.

    Det är här jag är, kan placera ännu mer information om min webbplats.

    Det är här jag kan placera en copyright-logotyp som denna ©

    Här kan vi se ett annat exempel på en rubriktagg. Vi använde en

    i det här fallet för att betona avsnittsrubriken medan du fortfarande håller den mindre än bannerteksten. De

    taggar används för att markera ett stycke med text, och det nya längst ner i koden är att separera vår ansvarsfriskrivning från resten av texten på sidan. Även om det är möjligt att lägga till text på din webbplats helt enkelt genom att skriva in mellan taggarna, är det mycket renare och lättare att utforma och organisera din webbplats om du placerar din text i styck- eller rubriktaggar eller gillar i fallet med vår copyright-friskrivningsplats det i sig. Låt oss nu öppna vår webbplats och se vad vi har hittills.

    En enkel webbplats utan CSS

    När du har öppnat din webbplats bör du se något liknande bilden ovan. Även om vi tydligt kan se de olika avsnitten på vår webbplats ser det fortfarande ganska intetsägande ut. det är här CSS kommer in.

    Lägg till lite stil med CSS

    Nu när vi har vår webbplats, låt oss lägga till lite styling med CSS. Använd din textredigerare för att skapa en annan fil och namnge den "style.css". Innan vi kan börja skriva i vår nya CSS-fil måste vi lägga till en sak till vår index.html-fil. För var och en av våra huvudtaggar vill vi tilldela antingen en id eller en klass i dess öppningstagg. Om taggen är ett unikt avsnitt på din webbplats, kommer vi att tilldela den en id, men för taggar som representerar ett upprepande element på webbplatsen som kommer att ha liknande styling, som karaktärstexten, tilldelar vi en klass istället. Till sist måste vi länka vår HTML-fil till vår CSS-fil i taggarna.

    DETTA ÄR MIN BANNETEKST

    • HEM
    • INFO
    • KONTAKTA
    • Hubpages

    Det här är min avsnittsrubrik

    Det är här jag ska lägga användbar och informativ text om min webbplats.

    Det är här jag är, kan placera ännu mer information om min webbplats.

    Det är här jag kan placera en copyright-logotyp som denna ©

    Nu när huvudsektionerna på vår sida har id: er eller klasser kan vi öppna vår stil.css-fil på nytt och börja lägga till lite färg på vår webbplats.

     #banner {bakgrundsfärg: sadelbrun; } kropp {bakgrundsfärg: rgb (209, 162, 98); } .bodyText {color: # 5b120c; } 

    Som du troligtvis har märkt från koden ovan är CSS utformat något annorlunda än HTML. I CSS kan du ange den del av din webbplats som du vill utforma på tre sätt. Först kan du ange ett avsnitt genom att hänvisa till dess id med ett # följt av elementets id. För det andra kan du ange ett avsnitt genom att hänvisa till dess taggnamn som kropp i koden ovan. Och för det tredje kan du ange en grupp av avsnitt genom att hänvisa till deras matchande klassnamn med en period följt av klassnamnet. Oavsett vilket sätt du väljer att använda, placerar du en öppnings- och stängningsfäste efter referensen. Eventuell styling mellan dessa parenteser kommer att tillämpas det referensavsnittet och alla underavsnitt inuti det avsnittet. Om du till exempel skulle sätta koden från rad 10 inuti kroppsreferensen istället skulle all text i din webbplatskropp vända den färgen istället för bara de avsnitt som är markerade med klassen bodyText.

    Det andra du troligtvis märkte är att det finns flera sätt att hänvisa till en färg i CSS. Vissa färger har fått tilldelade namn som blått, rött, gult och sadelbrunt, men för mer specifik färg kan du använda alternativa metoder som RGB eller hex. Jag kommer inte gräva djupt i dessa alternativa metoder nu, bara vet att de finns och att det finns webbplatser som du kan använda för att hitta nästan vilken färg som helst i RGB eller hex. Låt oss nu titta på vår webbplats och se skillnaden.

    En webbplats med lite färg

    Som du ser kan till och med lägga till en liten mängd CSS göra en stor skillnad i hur din webbplats ser ut. Medan jag medger att de valda färgerna inte är bäst är de tillräckligt bra för detta exempel. Nu när vår webbplats har lite färg är ett problem som du kanske märker att bannern förmodligen inte är den storlek som vi skulle vilja att den ska vara, så låt oss fixa det nästa.

     #banner {bakgrundsfärg: sadelbrun; höjd: 200px; text-align: center; } h1 {margin: 0px; linjehöjd: 200px; } body {margin: 0px; bakgrundsfärg: rgb (209, 162, 98); } .bodyText {color: # 5b120c; } 

    Ovanför i avsnittet #banner kan du se att vi angav banhöjden till 200 pixlar och att vi också justerade texten horisontellt. Men det var inte bara tillräckligt för att fixa vårt banner, så vi tog bort marginalerna från både kroppen och h1-taggarna. Öppna nu din webbplats och se skillnaden.

    Fixa webbplatsens banner

    Där ser det mycket bättre ut. Nu när vår rubrik ser bättre ut är nästa sak som vi vill fokusera på att göra vårt navbar utseende snyggare. Låt oss göra det nu.

     li {polstring: 10px; display: inline; } #navBar {text-align: center; } en {textdekoration: ingen; färg: mörkgrön; } 

    Lägg till koden ovan längst ner i din CSS-fil. Här hänvisar vi till olika delar av vår navbar. Först hänvisar vi till

  • taggar och specificerar att vi vill att de ska ha en stoppning på 10 pixlar, då byter vi till inline-visning så att länkarna kommer att listas horisontellt. Därefter berättade vi för naveln att vi ville ha någon text inuti den centrerad horisontellt. Till sist specificerade vi att vi ville att länkarna skulle vara mörkgröna, och vi tog bort understryket genom att ange ingen för textdekoration. Nu ska vi se skillnaden.

    Lägg till styling i din navigationsfält

    Återigen använder jag fula färger för det här exemplet, men du kan enkelt ändra färgerna på din webbplats genom att ange en annan. Även med den fula mörkgröna färgen ser navbaren mycket bättre ut än tidigare. Nu, det sista som vi kommer att fixa är brödtexten.

     h2 {polstring-vänster: 5px; } .bodyText {color: # 5b120c; stoppning vänster: 20px; stoppning till höger: 20px; } #copyright {bredd: 100%; text-align: center; } 

    I koden ovan kan du se att vi modifierade bodyText-referensen för att ha 20 pixlar stoppning på vänster och höger sida. Detta är för att göra texten lättare att läsa genom att distansera den bort från kanterna på webbläsaren. Vi har också lagt till en ny referens för

    taggade och specificerade att vi ville ha 5 pixlar vaddering på sin vänstra sida. Att hålla

    närmare kanten av webbläsaren kommer att ge intrycket att

    är en rubrik för huvudtexten. Till sist lagt vi till en referens för upphovsrättsavsnittet. Vi specificerade att vi ville att taggen skulle vara webbläsarens fulla bredd och att vi ville att texten inuti kärnan skulle vara horisontellt. Det är nödvändigt att göra upphovsrätten 100% bredd så att texten kommer att anpassas ordentligt. När du centrerar text är texten centrerad enligt bredden på överordnade, vilket innebär att om överordnade inte är full bredd, kommer centreringen att vara av. Låt oss se vår förbättrade webbplats.

    Style din webbplats text med CSS

    Där ser det mycket bättre ut än när vi började. Även om vår webbplats fortfarande är ganska grundläggande, är det tydligt hur stor skillnad CSS kan göra när man gör webbdesign.

    Tack för att du läste

    Tack för att du läste den här artikeln, och jag hoppas att du tyckte att den var till hjälp. Om du har några frågor, vänligen lämna en kommentar nedan. Jag hjälper mer än gärna med eventuella problem du har med detta projekt eller med HTML och CSS i allmänhet. Här är dessutom några länkar till några av de mer användbara webbplatserna för att lära dig HTML och CSS.

    • CSS Tutorial
      Välorganiserade och lätta att förstå tutorials för webbbyggnad med många exempel på hur man använder HTML, CSS, JavaScript, SQL, PHP och XML.
    • Lär dig HTML - gratis interaktiv HTML-handledning
      LearnHTML.org är en gratis interaktiv HTML-tutorial för personer som snabbt vill lära sig HTML.
    • Gratis handledning om HTML, CSS och PHP - Bygg din egen hemsida - HTML.net
      Gratis handledning om HTML, CSS och PHP - Bygg din egen webbplats - Gratis handledning om HTML, CSS och PHP - Bygg din egen webbplats

    Bonuslänk

    • HTML-färgväljare
      Välorganiserade och lätta att förstå tutorials för webbbyggnad med många exempel på hur man använder HTML, CSS, JavaScript, SQL, PHP och XML.

    Hjälp mig att få en bättre bild av var mina läsare står med CSS

    Hur mycket erfarenhet har du med CSS?

    • Jag har ingen erfarenhet av CSS.
    • Jag har hört talas om CSS, men har aldrig använt det förut.
    • Jag har använt CSS för några små projekt.
    • Jag har en bra erfarenhet av CSS.
    • Jag är en mästare i alla saker CSS.
    Se resultat