När du har börjat dabbla 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 tagg. Det här huvudavsnittet är där ditt inline CSS-stilark går. Så här ser det ut:
All of your CSS declarations.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 är kodad 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 { font-size: 120%; color: dimgray; } Det är allt som finns där. Nu, när webbläsaren gör en
stycke, kommer texten 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: uppercase; text-transform: lowercase; text-transform: capitalize; 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:link { color: gray; } a:visited { color: green; } a:hover { color: rebeccapurple; } a:active { color: teal; } Observera att varje "a" 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 attributet "text-dekoration". Så här tar vi bort underskrifter på länkar:
a { text-decoration: none; } Något med länken ("a") -taggen kommer att förbli osträckt. Vill du understryka det när användaren svänger över den? Lägg bara till det här nedan:
a:hover { 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:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; 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; border-width: 5px; border-color: purple; } 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; i stället för "solid", försök "prickad" eller "dubbel". Bredden kan vara "tunn", "medium" eller "tjock". Du kan även definiera tjockleken på varje kant individuellt, så här:
border-width: 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:
.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 (vilket gör dem lika). Om du vill centrera alla bilder på en given 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å 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 klassen "centertext" för att centrera texten i ett visst stycke är allt vi behöver göra att lägga till den här 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; padding-bottom: 40px; padding-left: 25px; } Det finns en kort hand som vi kan använda för att presentera all denna information:
img { padding: 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 { padding: 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:hover { background-color: #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 lite "whited out") och föra dem till full opacitet när du mus över dem. Så här gör vi det:
img { opacity: 0.5; filter: alpha(opacity=50); } Attributet "filter" gör detsamma 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:hover { opacity: 1.0; filter: alpha(opacity=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 du 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!