10 enkla CSS -kodexempel du kan lära dig på 10 minuter

10 enkla CSS -kodexempel du kan lära dig på 10 minuter

När du väl har börjat plugga i HTML kommer du förmodligen att vara intresserad av att lägga till mer visuell stans på dina webbsidor. CSS är det bästa sättet att göra det. Med CSS kan du tillämpa ändringar på hela sidan utan att förlita dig på inline -styling.





Här är flera enkla CSS -exempel för att visa dig hur du gör några grundläggande stylingändringar på din webbsida.



1. Grundläggande CSS -kod för enkel styckeformatering

Styling 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 stylingen' och du är bra att gå.





Låt oss säga att du vill ha varje stycke (

, en av HTML -taggarna alla borde känna till) för att vara något större än vanligt. Och med mörkgrå text, istället för svart.

Relaterad: HTML -fuskbladet



CSS -koden för detta är:

p { font-size: 120%; color: dimgray; }

Enkel! Nu när webbläsaren återger ett stycke kommer texten att ärva storleken (120 procent av det normala) och färgen ('dimgray').



Om du är nyfiken på vilka klartextfärger du kan använda, kolla in detta CSS -färglista från Mozilla.

2. CSS -exempel för att ändra teckenfodral

Vill du skapa en beteckning för stycken som ska vara med små bokstäver? Ett CSS -prov för det skulle vara:



p.smallcaps { font-variant: small-caps; }

För att göra ett stycke som är helt i små bokstäver, använd en något annorlunda HTML -tagg. Så här ser det ut:

Your paragraph here.

Om du lägger till en punkt och ett klassnamn till ett element anger du en undertyp av det elementet som definieras av en klass. Du kan göra detta med text, bilder, länkar och nästan allt annat.

Om du vill ändra en uppsättning text till ett specifikt fall använder du dessa CSS -kodexempel:

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

Den sista versaler den första bokstaven i varje mening.

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 medan 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 punkt.

Var och en av dessa deklarationer ändrar färgen på en länk i ett specifikt sammanhang. Det finns ingen anledning att ändra klassen på en länk för att få den att ändra färg.

Medan understruken text tydligt indikerar en länk, ser det ibland trevligare ut att skrota den understruken. Detta uppnås med attributet 'text-dekoration'. Detta CSS -exempel visar hur du tar bort understruken på länkar:

a { text-decoration: none; }

Allt med länken ('a') kommer inte att understrykas. Vill du understryka det när användaren svävar ö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 du klickar på länken.

Vill du locka mer uppmärksamhet till din länk? En länkknapp är ett bra sätt att göra det. Den här kräver några fler rader:

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 -provkod.

Att inkludera alla fyra länklägen 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 svävar och aktiva länkar, t.ex. byta knapp eller textfärg.

Bakgrundsfärgen är inställd med bakgrundsfärg och textfärg med färg. Fyllningen 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 att gå åt sidan. Textdekoration, som i det sista exemplet, tar bort understruken.

hur man zoomar in på mac

CSS-koden 'display: inline-block' är lite mer komplicerad. Kort sagt, det låter dig ställa in höjd och bredd på objektet. Det 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 kant. 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 enkel. Det skapar en solid lila kant, fem pixlar bred, runt alla viktiga stycken. För att få ett stycke att ärva dessa egenskaper, deklarera det så här:

Your important paragraph here.

Detta fungerar oavsett hur stort stycket är.

Det finns många olika kantstilar du kan använda; istället för 'fast', försök 'prickad' eller 'dubbel'. Samtidigt 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ögra kant på åtta, en botten på tre och en vänster kantstorlek på nio pixlar.

7. Centrera-justera element med grundläggande CSS-kod

För en vanlig uppgift är centreringselement med CSS -kod överraskande 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 'margin: 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örklaring av CSS -boxmodell vid W3C .

Men vad händer om du vill centrera text med CSS? Använd detta exempel -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

märka:

This text will be centered.

8. CSS -exempel för justering av vaddering

Vadderingen av ett element anger hur mycket utrymme som ska vara på varje sida. Om du till exempel lägger till 25 pixlar vaddering till botten av en bild, trycks följande text 25 pixlar nedåt. Många element kan ha vaddering, inte bara bilder.

Låt oss säga att du vill att varje bild ska ha 20 pixlar vaddering på vänster och höger sida och 40 pixlar på toppen och botten. Den mest grundläggande CSS -kodkörningen 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 upp, höger, botten och vänster vaddering 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, är det första värdet inställt för topp och botten, medan det andra kommer att vara vänster och höger.

9. Markera tabellrader med CSS -kodning

CSS -kod gör att tabeller ser mycket snyggare ut än standardnät. Det är enkelt att lägga till färger, justera ramar och göra ditt bord lyhörd för mobila skärmar. Detta enkla CSS -exempel visar hur du markerar tabellrader när du håller muspekaren över dem.

tr:hover { background-color: #ddd; }

Nu när du håller musen över en tabellcell kommer den raden att ändra färg. För att se några av de andra häftiga sakerna du kan göra, kolla in W3C -sida på snygga CSS -tabeller .

10. Exempel CSS för att flytta bilder mellan transparent och ogenomskinligt

CSS -kod kan också hjälpa dig att göra coola saker med bilder. Här är ett CSS -exempel för att visa bilder med mindre än full ogenomskinlighet, så att de ser lite 'whited out' ut. När du håller muspekaren över bilderna får de full ogenomskinlighet:

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 den.

Nu när bilderna är lite genomskinliga kan du göra dem helt ogenomskinliga med en musöverföring:

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

10 CSS -exempel med källkod

Med dessa exempel på CSS -kod bör du ha en mycket bättre uppfattning om hur CSS fungerar. CSS -mallar kan hjälpa, men att förstå de råa elementen är avgörande.

De 10 enkla CSS -koden exemplen återkom:

  1. Enkel styckeformatering
  2. Byt bokstäver
  3. Ändra länkfärger
  4. Ta bort understrukna länkar
  5. Gör en länkknapp
  6. Skapa en textruta
  7. Centrera inriktningselement
  8. Justera vaddering
  9. Markera tabellrader
  10. Gör bilder ogenomskinliga

När du granskar dem igen kommer du att märka flera mönster som du kan använda för framtida kod. Och det är då du vet att du verkligen har börjat bli en CSS -mästare. Men att komma ihåg att det kan vara svårt. Du kanske vill bokmärka den här sidan för framtida referens.

Dela med sig Dela med sig Tweet E-post Essential CSS3 Properties Cheat Sheet

Lär dig viktig CSS -syntax med våra fuskblad för CSS3 -egenskaper.

Läs Nästa Relaterade ämnen
  • Programmering
  • Webbdesign
  • CSS
  • Scripting
Om författaren Christian Cawley(1510 artiklar publicerade)

Biträdande redaktör för säkerhet, Linux, DIY, programmering och teknik förklarad, och verkligen användbar podcastproducent, med stor erfarenhet av skrivbords- och programvarusupport. Christian är en bidragsgivare till tidningen Linux Format och är en Raspberry Pi -tinkerer, Lego -älskare och retrospelfläkt.

Mer från Christian Cawley

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera