10 enkla CSS-kodsexempel som du kan lära dig om 10 minuter

När du har börjat dabbling i HTML 17 Enkla HTML-kod exempel kan du lära dig om 10 minuter 17 Enkla HTML-kod exempel du kan lära dig om 10 minuter Om du känner till följande 17 HTML-taggar (och de extra få som går med dem), du kommer att kunna skapa en grundläggande webbsida från början eller tweak koden som skapats av en app som ... Läs mer, du kommer noga att vara intresserad av att lägga till mer ström till dina webbsidor. CSS är det bästa sättet att göra det. CSS låter dig använda ändringar över hela din sida utan att behöva använda massor av inline-HTML-stilar 9 Misstag som du inte borde göra när du bygger en webbsida 9 Fel du borde inte göra när du bygger en webbsida Följande HTML-kodningsfel är lätta att gör, men om du leder dem bort tidigare än senare kommer din sida att se bättre ut, vara lättare att underhålla och fungera hur du vill ha den. Läs mer .

Vi går över hur du skapar ett inline stylesheet så att du kan öva dina CSS-färdigheter, och sedan flyttar vi till 10 enkla exempel som visar hur du gör några grundläggande saker. Därifrån är din fantasi gränsen!

Om du vill ha en något mer teknisk introduktion, var noga med att kolla in 5 Baby Steg till Learning CSS och bli en Kick-Ass CSS Sorcerer 5 Baby Steg för att lära CSS och bli en Kick-Ass CSS Sorcerer 5 Baby Steg för att lära CSS och Becoming en Kick-Ass CSS Sorcerer CSS är de viktigaste förändringswebbsidorna som har sett under det senaste decenniet, och det banade vägen för separation av stil och innehåll. På det moderna sättet definierar XHTML den semantiska strukturen ... Läs mer .

Inline Stylesheet

Varje HTML-dokument innehåller en märka. Det här huvudavsnittet är där ditt inline CSS-stilark går. Så här ser det ut:

 Alla dina CSS-deklarationer. 

Lägg det där längst upp i ditt dokument, fyll det med din CSS, och du är redo att gå.

1. Enkelt styckeformatering

Det snygga med styling med CSS är att du inte behöver ange en stil varje gång du skapar ett element. Du kan bara säga “alla stycken ska ha den här stilen” och du är bra att gå. Här är ett exempel på hur du kan göra det.

Låt oss säga att du vill ha varje stycke (det är allt med a

HTML-tagg Topp 11 HTML-etiketter Varje bloggare och webbplatsägare måste veta Top 11 HTML-etiketter Varje bloggare och webbplatsägare måste veta Världen har många språk och kodas i flera olika. Det enda språket kan dock hittas överallt och har funnits sedan webbsidans uppfinning, är ... Läs mer) på din sida för att vara något större än vanligt. Och mörkgrå, i stället för svart. Så här gör du det med CSS:

p typsnittstorlek: 120%; färg: dimgray; 

Det är allt som finns där. Nu, när webbläsaren gör en

stycket, texten kommer att ärva storleken (120 procent av normal) och färgen (“dimgray”).

Om du är nyfiken på vilka vanliga textfärger du kan använda, kolla in den här CSS-färglistan från Mozilla.

2. Ändra brevfallet

Okej, så nu vi har sett hur vi gör en förändring till varje stycke, låt oss se hur vi kan vara lite mer selektiva. Låt oss skapa en beteckning för stycken som ska vara i små kepsar. Så här gör vi det:

p.smallcaps font-variant: small-caps; 

För att skapa en paragraf som är helt i små kepsar använder vi en något annorlunda HTML-tagg. Så här ser det ut:

Din paragraf här.

Som du kan se, läggs en punkt och ett klassnamn till ett visst element i CSS, en subtyp av det element 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 kan du använda dessa CSS-rader:

text-transform: stor bokstav; text-transform: små bokstäver; text-transform: kapitalisera;

Den sista kapitaliserar första bokstaven i varje mening.

3. Ändra länkfärger

Låt oss försöka ändra stilen på något annat än en hel paragraf. Det finns fyra olika färger som en länk kan tilldelas: dess standardfärg, dess besökta färg, dess svängfärg och den aktiva färgen (som den visar när du klickar på den). Så här kan vi ändra dem:

a: länk färg: grå;  a: besökte färg: grön;  a: svävar färg: rebeccapurple;  a: aktiv färg: kricka; 

Observera att varje “en” följs av ett kolon, inte en punkt.

Var och en av deklarationerna ändrar färgen på en länk i ett visst sammanhang. Det finns ingen anledning att ändra klassen av en länk för att få den att ändra färg. Det kommer alla att bestämmas av användaren och länkens tillstånd.

4. Ta bort länkunderlänkar

Medan den understrukna texten tydligt indikerar en länk, ser det ibland bättre ut att skrapa den understruken. Detta uppnås med “text-decoration” attribut. Så här tar vi bort underskrifter på länkar:

en text-decoration: none; 

Något med länken (“en”) -koden kommer inte att vara understruken. Vill du understryka det när användaren svänger över den? Lägg bara till det här nedan:

a: svävar text-decoration: underline; 

Du kan också lägga till denna textdekoration i aktiva länkar för att se till att underlaget inte försvinner när länken klickas.

5. Gör en länksknapp

Om du vill locka mer uppmärksamhet åt din länk, använder du en länkknapp ett bra sätt att ta hand om det. Den här kräver några fler rader, men vi går över dem individuellt:

a: länk, a: besök, a: svävar, a: aktiv bakgrundsfärg: grön; färg vit; vaddering: 10px 25px; text-align: center; text-dekoration: ingen; display: inline-block; 

Genom att inkludera alla fyra länstillstånd ser vi till 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, som att ändra knapp eller textfärg för att lägga till lite pop.

Bakgrundsfärgen är inställd med bakgrundsfärg och textfärg med färg. Padding definierar boxens storlek - texten är vadderad med 10px vertikalt och 25px horisontellt. Textinriktning säkerställer att texten visas i mitten av knappen istället för till ena sidan. Text-dekoration, som vi såg i det sista exemplet, tar bort underlaget.

“display: inline-block” är lite mer komplicerat. Kort sagt, det låter dig ställa in objektets höjd och bredd och ser till att den startar en ny linje när den sätts in.

6. Skapa en textruta

En vanlig punkt är inte så spännande. Om du vill markera ditt anrop till handling eller ett annat element på din sida kanske du vill kasta en kant runt den. Så här gör du med en rad text:

p.important border-style: solid; kantbredd: 5px; kantfärg: lila; 

Det här är ganska enkelt. Den skapar en solid lila gräns, 5 pixlar bred, runt vilken viktig klass som helst. För att göra en paragraf ärva dessa egenskaper, bara förklara det så här:

Din viktiga punkt här.

Detta kommer att fungera oavsett storleken på din paragraf; en enda linje kommer att få en kant bredden på sidan, en linje hög, och en längre punkt kommer att vara omgiven av en större kant.

Det finns många olika gränsstilar du kan ansöka om; istället för “fast,” Prova “prickad” eller “dubbel.” Och bredden kan vara “tunn,” “medium,” eller “tjock.” Du kan även definiera tjockleken på varje kant individuellt, så här:

kantbredd: 5px 8px 3px 9px;

Det resulterar i en övre gräns på 5 pixlar, en högra kant på 8, en botten av 3 och en vänster gränsstorlek på 9 pixlar.

7. Centrera-justera element

För en mycket vanlig uppgift är detta en överraskande ointuitiv sak att göra med CSS. När du har gjort det några gånger, blir det mycket lättare. Det finns ett par olika sätt att centrera saker.

För ett blockelement (vanligtvis en bild) använder vi marginalattributet:

.centrum display: block; marginal: auto; 

Detta säkerställer att elementet visas som ett block, och att marginalen på varje sida ställs in automatiskt (vilket gör dem lika). Om du vill centrera alla bilder på en viss sida kan du till och med lägga till “marginal: auto” till img-taggen:

img marginal: auto; 

För att lära dig varför det fungerar på så sätt, kolla CSS-boxmodellförklaringen vid W3C. Här är en kort grafisk version:

Men vad händer om vi vill centrera text? CSS har en specifik metod att göra det:

.centertext text-align: center; 

Om vi ​​vill använda “centertext” klass för att centrera texten i ett visst stycke, allt vi behöver göra är att lägga till den klassen i

märka:

Denna text kommer att centreras.

Att komma ihåg de olika stegen är emellertid en annan sak. Du kanske vill bokmärke den här sidan.

8. Justering av vaddering

Padding av ett element anger hur mycket utrymme som ska vara på varje sida. Om du till exempel lägger till 25 pixlar med vaddering på botten av en bild, kommer följande text att tryckas upp 25 pixlar neråt. Många element kan ha padding, men vi använder en bild för ett exempel här.

Låt oss säga att du vill att varje bild ska ha 20 pixlar av vaddering på vänster och höger sida och 40 pixlar på toppen och botten. Det finns ett antal sätt att du kan göra detta. Den mest grundläggande:

img padding-top: 40px; padding-right: 25px; vadderande-botten: 40px; stoppning-vänster: 25px; 

Det finns en kort hand som vi kan använda för att presentera all denna information:

img vaddering: 40px 25px 40px 25px; 

Detta ställer upp de högsta, högra, nedre och vänstra paddningarna till rätt antal. Men vi kan göra det ännu kortare:

img vaddering: 40px 25px

När du bara använder två värden ställs det första värdet upp och ner, medan det andra kommer att vara kvar och höger.

9. Markera tabellrader

CSS kan göra mycket för att dina bord ska bli riktigt fina. Lägga till färger, justera gränser och göra ditt bord lyhörda för mobila skärmar är alla enkla. Vi tittar bara på en härlig effekt här: markerar tabellrader när du musen över dem.

Här är koden du behöver för det:

tr: svävar bakgrundsfärg: #ddd; 

Nu när du mus ö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 på fina CSS-tabeller.

10. Byta bilder mellan genomskinlig och opak

CSS kan hjälpa dig att göra coola saker med bilder också. Det kan till exempel visa bilder på mindre än fullständig opacitet (de visas något “whited ut”) och föra dem till full opacitet när du mus över dem. Så här gör vi det:

img opacitet: 0,5; filter: alfa (opacitet = 50); 

De “filtrera” Attribut gör samma sak som “opacitet,” men Internet Explorer 8 och tidigare känner inte igen opacitetsmätningen, så det är en bra idé att inkludera det.

Nu när bilderna är lite transparenta tar vi dem till helt ogenomskinliga på en mouseover:

img: svävar opacitet: 1,0; filter: alfa (opacitet = 100); 

Bli en CSS-mästare

Med dessa CSS-kod exempel borde du ha en mycket bättre uppfattning om hur CSS fungerar. När du har gått igenom dem alla märker du ett antal mönster som du kan ansöka om ytterligare CSS-kod. Lär dig HTML och CSS med dessa steg för steg-handledning. Lär HTML och CSS med dessa steg för steg-handledning. Nyfiken om HTML, CSS och JavaScript? Om du tycker att du har en förmåga att lära dig hur man skapar webbplatser från början - här är några bra steg-för-steg-tutorials värda att försöka. Läs mer . Och då vet du att du verkligen har börjat bli en CSS-mästare.

Och om allt detta låter för komplicerat, kom ihåg att du bara tar tag i några CSS-mallar 11 CSS Template Sites: Börja inte från början! 11 CSS Template Sites: Börja inte från början! Det finns tusentals gratis CSS-mallar tillgängliga online, alla omfatta moderna designtrender och -teknik. Du kan använda dem i sin ursprungliga form, eller anpassa dem för att göra dem egna. Läs mer och ändra dem.

Vad gör du med CSS? Vilka exempel skulle du vilja se i framtiden? Dela dina tankar i kommentarerna nedan!

Utforska mer om: CSS, webbdesign.