När du väl har börjat pyssla med HTML kommer du förmodligen att vara intresserad av att lägga till mer visuell kraft på dina webbsidor. CSS är det bästa sättet att göra det. CSS låter dig tillämpa ändringar på hela sidan utan att förlita dig på inline-stil.
Här är flera enkla CSS-exempel för att visa dig hur du gör några grundläggande stiländringar på din webbsida.
1. Grundläggande CSS-kod för enkel styckeformatering
Att styla med CSS betyder att du inte behöver ange en stil varje gång du skapar ett element. Du kan bara säga “alla stycken ska ha just den här stilen” och du är igång.
Låt oss säga att du vill att varje stycke (
, en av HTML-taggarna alla borde känna till) ska vara något större än vanligt. Och med mörkgrå text, istället för svart.
CSS-koden för detta är:
p { font-size: 120%; color: dimgray; }
Enkel! Nu, när webbläsaren renderar ett stycke, kommer texten att ärva storleken (120 procent av det normala) och färgen (“dimgray”).
Om du är nyfiken på vilka vanlig textfärger du kan använda, kolla in den här CSS-färglistan från Mozilla.
2. CSS-exempel för att ändra skiftläge
Vill du skapa en beteckning för stycken som ska skrivas med små bokstäver? Ett CSS-exempel för det skulle vara:
p.smallcaps { font-variant: small-caps; }
För att göra ett stycke som är helt med små bokstäver, använd en lite annan HTML-tagg. Så här ser det ut:
<p class="smallcaps">Your paragraph here.</p>
Att lägga till en punkt och ett klassnamn till ett element specificerar en undertyp av det elementet som definieras av en klass. Du kan göra detta med text, bilder, länkar och nästan vad som helst annat.
Om du vill ändra en uppsättning text till ett specifikt fall, använd dessa CSS-kodexempel:
text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;
Den sista versaler den första bokstaven i varje mening.
3. Lätt CSS för att ändra länkfärger
Stiländringar är inte begränsade till stycken. Det finns fyra olika färger som en länk kan tilldelas: dess standardfärg, dess besökta färg, dess svävarfärg och dess aktiva färg (som den visar när du klickar på den). Använd denna exempel CSS-kod:
a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }
Med länkar följs varje “a” av ett kolon, inte en prick.
Var och en av dessa deklarationer ändrar färgen på en länk i ett specifikt sammanhang. Det finns ingen anledning att ändra klassen för en länk för att få den att ändra färg.
4. Ta bort länkunderstrykning med detta exempel på CSS
Även om understruken text tydligt indikerar en länk, ser det ibland trevligare ut att ta bort den understrykningen. Detta görs med attributet “text-dekoration”. Det här CSS-exemplet visar hur man tar bort understrykningar på länkar:
a { text-decoration: none; }
Allt med länken (“a”) taggen förblir icke-understruket. Vill du understryka det när användaren håller muspekaren över det? Lägg bara till:
a:hover { text-decoration: underline; }
Du kan också lägga till denna textdekoration till aktiva länkar för att säkerställa att understrykningen inte försvinner när länken klickas.
5. Skapa en länkknapp med CSS-kod
Vill du locka mer uppmärksamhet till din länk? En länkknapp är ett bra sätt att gå tillväga. Den här kräver några rader till:
a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }
Låt oss förklara denna CSS-exempelkod.
Att inkludera alla fyra länktillstånd säkerställer att knappen inte försvinner när en användare svävar eller klickar på den. Du kan också ställa in olika parametrar för hovra och aktiva länkar, t.ex. ändra knapp eller textfärg.
Bakgrundsfärgen ställs in med bakgrundsfärg och textfärg med färg. Utfyllnad definierar storleken på rutan — texten är vadderad med 10px vertikalt och 25px horisontellt.
Textjustering säkerställer att texten visas i mitten av knappen, istället för åt sidan. Textdekoration, som i det förra exemplet, tar bort understrykningen.
CSS-koden “display: inline-block” är lite mer komplicerad. Kort sagt låter det dig ställa in höjden och bredden på objektet. Den säkerställer också att den startar en ny rad när den sätts in.
6. CSS-exempelkod för att skapa en textruta
Ett enkelt stycke är inte särskilt spännande. Om du vill markera ett element på din sida kanske du vill lägga till en ram. Så här gör du det med en sträng av enkel CSS-kod:
p.important { border-style: solid; border-width: 5px; border-color: purple; }
Den här är okomplicerad. Det skapar en solid lila kant, fem pixlar bred, runt alla viktiga stycken. För att få ett stycke att ärva dessa egenskaper, förklara det så här:
<p class="important">Your important paragraph here.</p>
Detta kommer att fungera oavsett hur stort stycket är.
Det finns många olika kantstilar du kan använda; istället för “solid”, försök med “prickad” eller “dubbel”. Under tiden kan bredden vara “tunn”, “medium” eller “tjock”. CSS-kod kan till och med definiera tjockleken på varje kant individuellt, så här:
border-width: 5px 8px 3px 9px;
Det resulterar i en övre kant på fem pixlar, en höger kant på åtta, en botten på tre och en vänstra kantstorlek på nio pixlar.
7. Centrera element med grundläggande CSS-kod
För en vanlig uppgift är centrering av element med CSS-kod förvånansvärt ointuitivt. Men när du har gjort det några gånger blir det mycket lättare. Du har ett par olika sätt att centrera saker.
För ett blockelement (vanligtvis en bild), använd marginalattributet:
.center { display: block; margin: auto; }
Detta säkerställer att elementet visas som ett block och att marginalen på varje sida ställs in automatiskt. Om du vill centrera alla bilder på en viss sida kan du till och med lägga till “marginal: auto” till img-taggen:
img { margin: auto; }
För att lära dig varför det fungerar på det här sättet, kolla in förklaringen av CSS-boxmodellen på W3C.
Men vad händer om du vill centrera text med CSS? Använd detta exempel på CSS:
.centertext { text-align: center; }
Vill du använda klassen “centertext” för att centrera texten i ett stycke? Lägg bara till den klassen i taggen
:
<p class="centertext">This text will be centered.</p>
8. CSS-exempel för justering av stoppning
Utfyllnaden av ett element anger hur mycket utrymme som ska finnas på varje sida. Om du till exempel lägger till 25 pixlar utfyllnad längst ner i en bild, kommer följande text att tryckas ned 25 pixlar. Många element kan ha utfyllnad, inte bara bilder.
Låt oss säga att du vill att varje bild ska ha 20 pixlar utfyllnad på vänster och höger sida och 40 pixlar på toppen och botten. Den mest grundläggande CSS-kodexekveringen för detta är:
img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }
Det finns dock en kortare CSS-instruktion som presenterar all denna information på en enda rad:
img { padding: 40px 25px 40px 25px; }
Detta ställer in topp-, höger-, botten- och vänsterutfyllnaderna till rätt nummer. Tack vare att endast två värden används (40 och 25) kan du göra det ännu kortare:
img { padding: 40px 25px }
När du bara använder två värden ställs det första värdet in för toppen och botten, medan det andra kommer att vara vänster och höger.
9. Markera tabellrader med CSS-kodning
CSS-kod får tabeller att se mycket snyggare ut än standardrutnäten. Det är enkelt att lägga till färger, justera kanter och göra ditt bord lyhört för mobila skärmar. Det här enkla CSS-exemplet visar hur du markerar tabellrader när du för musen över dem.
tr:hover { background-color: #ddd; }
Nu när du för musen över en tabellcell kommer den raden att ändra färg. För att se några av de andra coola sakerna du kan göra, kolla in W3C-sidan om snygga CSS-tabeller.
10. Exempel CSS för att växla bilder mellan transparent och opaque
CSS-kod kan hjälpa dig att göra coola saker med bilder också. Här är ett CSS-exempel för att visa bilder med mindre än full opacitet, så att de ser något “vita ut”. När du för muspekaren över bilderna får de full opacitet:
img { opacity: 0.5; filter: alpha(opacity=50); }
Attributet “filter” gör samma sak som “opacitet”, men Internet Explorer 8 och tidigare känner inte igen opacitetsmätningen. För äldre webbläsare är det en bra idé att inkludera det.
Nu när bilderna är något genomskinliga kan du göra dem helt ogenomskinliga med en mus över:
img:hover { opacity: 1.0; filter: alpha(opacity=100); }
10 CSS-exempel med källkod
Med dessa CSS-kodexempel borde du ha en mycket bättre uppfattning om hur CSS fungerar. CSS-mallar kan hjälpa, men det är viktigt att förstå de råa elementen.
Dessa 10 enkla CSS-kodexempel sammanfattade:
- Enkel styckeformatering Ändra skiftläge Ändra länkfärger Ta bort länkunderstrykning Gör en länkknapp Skapa en textruta Centrera element Justera utfyllnad Markera tabellrader Gör bilder ogenomskinliga
Om du granskar dem igen kommer du att märka flera mönster som du kan tillämpa på framtida kod. Och det är då du vet att du verkligen har börjat bli en CSS-mästare. Men att komma ihåg det kan vara svårt. Du kanske vill bokmärka den här sidan för framtida referens.
Om författaren
Christian Cawley (1555 publicerade artiklar)
Biträdande redaktör för säkerhet, Linux, gör-det-själv, programmering och teknisk förklarad, och riktigt användbar podcastproducent, med lång erfarenhet av skrivbords- och mjukvarustöd. Christian är en bidragsgivare till tidningen Linux Format och är en Raspberry Pi-pyssare, en Lego-älskare och en fan av retrospel.
Mer från Christian Cawley
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
