Cascading Style Sheets, eller CSS, är ett språk som talar om för en webbsida hur den ska se ut. CSS lägger till färg, stil och layout till den vanliga strukturen på en webbplats. Precis som du väljer ut dina kläder för att må bra och se snygga ut, hjälper CSS en webbsida att klä upp sig och se attraktiv ut. I webbutveckling använder vi CSS för att ändra färg, storlek och placering av text och rutor på sidan. Den här lektionen kommer att introducera dig till grunderna i CSS på ett enkelt språk. Vi kommer att lära oss vad CSS är, varför det är viktigt och hur det fungerar med HTML.
CSS står för Cascading Style Sheets. Det är ett speciellt språk som används för att utforma webbsidor. Tänk på CSS som färgen och dekorationerna för en byggnad. Byggnaden är gjord av HTML och CSS gör den snygg. Med CSS kan du ändra bakgrundsfärgen, teckensnittsstilen och utrymmet runt element på din webbsida. CSS är ett verktyg som hjälper webbdesigners att få webbplatser att se bättre och roligare ut.
Föreställ dig att du färglägger en teckning. Linjerna i ritningen är som grundstrukturen på en webbplats. CSS är som kritorna och markörerna som ger liv åt ritningen. Med några enkla regler kan du ändra hela din teckning från vanlig till färgglad!
CSS används för att göra webbplatser attraktiva och lätta att använda. Det håller stilen åtskild från innehållet. Det betyder att orden och bilderna på sidan (som tillhandahålls av HTML) förblir desamma, medan CSS styr hur de ser ut. När du uppdaterar stilen behöver du inte ändra innehållet. Denna separation hjälper webbutvecklare att arbeta snabbare och gör webbplatser trevligare att besöka.
Tänk på CSS som den outfit du väljer. Om du bär olika kläder ser du olika ut, men du är fortfarande samma person. CSS ändrar utseendet på en webbplats utan att ändra informationen på den. Detta gör det enkelt att uppdatera designen på en hel webbplats genom att bara redigera en CSS-fil.
CSS fungerar hand i hand med HTML. HTML är grunden som anger var saker går på en webbsida. CSS kommer sedan in för att lägga till färger, typsnitt och stil. När en webbläsare läser in en webbsida bygger den först strukturen med HTML och tillämpar sedan de stilar som definieras i CSS.
CSS är skriven som en uppsättning regler. Varje regel har två delar: en väljare och ett deklarationsblock. Väljaren talar om för webbläsaren vilket HTML-element som ska formateras. Deklarationsblocket innehåller en eller flera deklarationer. Varje deklaration har en egenskap och ett värde. Egenskapen är vad du vill ändra, och värdet talar om hur den ska ändras.
Till exempel, för att ställa in bakgrundsfärgen på sidan till ljusblå, kan du skriva en regel som ser ut så här:
<code>body {
bakgrundsfärg: ljusblå;
}</code>Denna enkla regel ändrar bakgrunden på hela sidan.
En grundläggande CSS-regel följer ett enkelt mönster. Den visar väljaren och ett block med egenskaper och värden. Mönstret ser ut så här:
<code>väljare {
egenskap: värde;
}</code>Här väljer väljaren vilket HTML-element som ska riktas mot. Egenskapen är vad du vill ändra, och värdet är hur du vill ändra den.
Om du till exempel vill att all stycketext ska vara blå skriver du:
<code>p {
färg: blå;
}</code>Den här regeln talar om för webbläsaren att varje <p>-element (stycke) ska ha blå text.
CSS-väljare låter dig välja vilka element på din webbsida som kommer att påverkas av stilreglerna. Det finns flera typer av väljare, och var och en fungerar lite olika.
Dessa olika väljare ger dig mycket kraft att utforma specifika delar av din webbsida. De låter dig rikta in element exakt och bestämma hur de ska se ut.
CSS tillhandahåller många olika egenskaper som du kan använda för att utforma din webbsida. Varje egenskap låter dig ändra en specifik aspekt av ett elements utseende. Några vanliga egenskaper är:
Varje CSS-egenskap följs av ett värde. Till exempel, för att ge text en röd färg kan du skriva:
<code>p {
färg: röd;
}</code>Denna enkla regel gör att alla stycken har röd text. Egenskapsfärgen styr hur texten visas och värdet rött talar om vilken färg som ska vara.
Ordet "cascading" i CSS betyder att stilar kan flöda från en regel till en annan. Om två regler skulle kunna gälla för samma element, kan ordern avgöra vilken som vinner. Detta liknar att stapla block där ett block ibland täcker en del av ett annat.
En vanlig regel är att stilar skrivna direkt inuti ett HTML-element (kallade inline-stilar) kommer att åsidosätta stilar i din CSS-fil. En annan regel är att om ett överordnat element är formaterat kan dess underordnade element ärva den stilen såvida de inte får veta något annat.
Till exempel, om du ställer in textfärgen för en <div> till grön, kommer texten inuti <div> ofta också att se grön på grund av arv. Detta hjälper till att upprätthålla en konsekvent design på en webbsida.
Med CSS kan du ändra färger på många sätt. Du kan använda vanliga färgnamn som rött , blått och grönt . Du kan också använda hexadecimala koder som <code>#FF0000</code> för röda, eller RGB-värden som <code>rgb(255, 0, 0)</code>.
Teckensnitt är en annan viktig del av CSS. Ett teckensnitt är som den handstil du väljer i en anteckningsbok. I CSS kan du ändra teckensnittsfamilj, storlek, vikt och stil. Om du till exempel vill att dina stycken ska visas i Arial kan du använda:
<code>p {
font-family: Arial, sans-serif;
}</code>Denna regel säger åt webbläsaren att visa texten i Arial-teckensnittet om det är tillgängligt och att använda ett annat liknande typsnitt om det inte är det.
Att ändra färger och teckensnitt med CSS gör texten lättare att läsa och din webbsida mer intressant att titta på.
CSS Box Model är ett sätt att förstå hur de olika delarna av ett element är ordnade på en sida. Varje element är som en låda. Boxmodellen har fyra delar:
Föreställ dig ett fotografi. Själva fotografiet är innehållet. Mattan som omger fotografiet är som stoppningen. Ramen som håller ihop det hela är bården. Och utrymmet runt ramen är marginalen. Med den här modellen kan du se till att alla delar av din design har rätt utrymme och balans.
CSS handlar inte bara om färger och typsnitt; det hjälper dig också att ordna element på en webbsida. Detta kallas layout och positionering. Med CSS kan du bestämma var varje element ska visas på sidan.
Det finns flera sätt att styra layouten på en webbsida, inklusive:
Att använda dessa layouttekniker är som att ordna leksaker på en hylla. Du bestämmer var varje leksak ska ta vägen så att de alla har tillräckligt med utrymme och ser snygga ut. Detta gör din webbsida mer organiserad och inbjudande.
Här är ett exempel på hur HTML och CSS fungerar tillsammans. Den här exempelkoden visar en enkel webbsida med lite stil:
<kod><!DOCTYPE html>
<html>
<huvud>
<stil>
kropp {
bakgrundsfärg: ljusblå;
}
h1 {
färg: marin;
teckenstorlek: 24px;
}
p {
färg: grön;
teckenstorlek: 18px;
}
</style>
</head>
<kropp>
<h1>Min första webbsida</h1>
<p>Detta är en enkel webbsida med CSS.</p>
</body>
</html></code>Denna kod skapar en webbsida med en ljusblå bakgrundsfärg. Rubriktexten är marinblå och stycketexten är grön. CSS inuti taggen <code><style></code> visar hur regler skrivs och tillämpas.
Du kan lägga till CSS till din HTML på tre huvudsakliga sätt. Varje metod har sin egen användning beroende på situationen:
Den externa metoden är den vanligaste inom professionell webbutveckling eftersom den håller HTML snygg och låter dig uppdatera stilar över många sidor samtidigt.
CSS är till stor hjälp på många sätt. Här är några fördelar med att använda CSS i webbutveckling:
Att använda CSS är som att ha en speciell verktygslåda. Varje verktyg i verktygslådan hjälper dig att enkelt förbättra utseendet på din webbsida. När du övar kommer du att se hur kraftfull CSS kan vara för att göra webbplatser vackra och användarvänliga.
Varje webbplats du besöker använder CSS på något sätt. CSS hjälper till att skapa en rolig och lättläst layout, från dina tecknade favoritsajter till skolprojektsidor. När du ser en färgstark webbsida med snyggt mellanrum och tydlig text är det CSS som fungerar.
Tänk på utformningen av populära webbplatser som de för spel, tecknade serier eller onlineberättelser. Den genomtänkta användningen av färger, typsnitt och layouter hjälper till att göra dessa webbplatser spännande och engagerande. CSS används också i appar och mobilsajter, vilket säkerställer att innehållet ser bra ut på både stora skärmar och små telefoner.
I vardagen liknar CSS att dekorera ett rum. Du kan välja ett tema för ditt rum, hänga upp färgglada bilder och ordna dina möbler snyggt. CSS gör samma sak för webbplatser. Det ger ordning och skönhet till det digitala rummet, vilket gör det trevligt för besökare.
Här är de viktigaste punkterna vi lärde oss om CSS:
CSS är en viktig del av webbutveckling, vilket gör webbplatser vackra och lättnavigerade. När du utforskar mer och försöker bygga dina egna webbsidor, kom ihåg att CSS är ditt verktyg för att uttrycka kreativitet. Ha kul med att experimentera med färger, typsnitt och layouter, eftersom varje liten förändring bidrar till magin med en väldesignad webbplats.
Fortsätt att öva och observera dina favoritwebbplatser. Lägg märke till hur olika stilar används för att fånga din uppmärksamhet och skapa en trevlig upplevelse. Med tiden kommer du att se hur kraftfull CSS kan vara för att omvandla enkla HTML-strukturer till visuellt engagerande webbsidor.