20 viktiga CSS-tricks varje designer borde veta

Den här är för de absoluta nybörjare. När du har lärt dig hur boxmodellen fungerar, och hur man flyter dessa lådor, är det dags att bli allvarlig om din CSS. För det ändamålet har vi sammanställt en massiv lista med tips, tricks, tekniker och det enstaka smutsiga hacket som hjälper dig att bygga den design du vill ha.

CSS kan bli svårt, och du borde också. Och nu, i absolut ordning, (nästan) allt du behöver veta:

1. Absolut positionering

Om du vill ha kontroll över var ett element bor hela tiden på vår hemsida är absolut positionering nyckeln till att detta ska ske. Om du tänker på din webbläsare som en stor gränslåda kan du med absolut positionering styra exakt var i den rutan ett element kommer att stanna. Använd topp, höger, botten och vänster, åtföljd av ett pixelvärde för att styra var ett element stannar.

position:absolute;top:20px;right:20px

CSS ovan anger placeringen av ett element för att stanna 20px från webbläsarens övre och högra kanter. Du kan också använda absolut positionering inuti en div.

2. * + väljare

Med * kan du välja alla element i en viss väljare. Om du till exempel använde * p och sedan tillade CSS-format till det skulle det göra det för alla element i ditt dokument med en

märka. Detta gör det enkelt att rikta delar av din webbplats globalt.

3. Övergripande alla stilar

Detta borde användas sparsamt, för om du gör det för allt, kommer du att hitta dig själv i trubbel i längden. Om du vill åsidosätta en annan CSS-stil för ett visst element, använd ! Viktigt efter stilen i din css. Om jag till exempel vill att H2-rubrikerna i en viss del av min webbplats ska vara röda istället för blåa, skulle jag använda följande CSS:

.section h2 { color:red !important; }

4. Centrering

Centrering är knepigt, för det beror på vad du försöker centrera. Låt oss ta en titt på CSS av objekt som ska centreras, baserat på innehåll.

Text

Texten är centrerad med hjälp av text-align: center; . Om du vill ha den till vardera sidan, använd vänster eller höger istället för att centrera.

Innehåll

En div (eller något annat element) kan centreras genom att lägga till blockegenskapen och sedan använda auto marginaler. CSS skulle se ut så här:

#div1 {display: block;margin: auto;width: anything under 100%}

Anledningen till att jag lägger "vad som helst under 100%" för bredd är att om det var 100% bredt, då skulle det vara full bredd och det skulle inte behöva centrera. Det är bäst att ha en fast bredd, som 60% eller 550px, etc.

5. Vertikal inriktning (för en rad text)

Du kommer att använda detta i en CSS navigeringsmeny, jag kan nästan garantera det. Nyckeln är att göra menyns höjd och linjehöjden på texten densamma. Jag ser denna teknik mycket när jag går tillbaka och redigerar befintliga webbplatser för kunder. Här är ett exempel:

.nav li{line-height:50px;height:50px;}

6. Höger effekter

Detta används för knappar, textlänkar, bock-sektioner på din webbplats, ikoner och mer. Om du vill ha något att byta färger när någon höjer musen över den, använd samma CSS, men lägg till : sväva på den och ändra stilen. Här är ett exempel:

.entry h2{font-size:36px;color:#000;font-weight:800;}.entry h2:hover{color:#f00;}

Vad det här gör är att det ändrar färgen på din h2-tagg från svart till rött när någon svänger över den. Det stora med att använda: svävar är att du inte behöver deklarera typstorlek eller vikt igen om den inte ändras. Det ändrar bara vad du anger.

Övergång

För svängningseffekter, som med menyer eller bilder på din webbplats, vill du inte att färger snäpps för snabbt till slutresultatet. Du vill helst lätta förändringen i gradvis, vilket är där övergångsegenskapen kommer till spel.

.entry h2:hover{color:#f00;transition: all 0.3s ease;}

Detta gör att förändringen händer över .3 sekunder, istället för att bara direkt knäppa till rött. Detta gör svängningseffekten mer tilltalande för ögat och mindre krossning.

7. Länstillstånd

Dessa stilar saknas av många designers, och det orsakar verkligen användbarhetsproblem med dina besökare. Länken pseudoklass kontrollerar alla länkar som ännu inte har klickats på. Den : besökta pseudoklassen hanterar styling av alla länkar du redan har besökt. Detta berättar besökare på webbplatsen där de redan har varit på din webbplats, och där de ännu inte har undersökt.

a:link { color: blue; }a:visited { color: purple; }

8. Ändra storleken på bilderna så att de passar dig

Ibland kommer du i en nypa, där bilderna måste passa en viss bredd, medan skalan proportionellt. Ett enkelt sätt att göra detta är att använda max bredd för att hantera detta. Här är ett exempel:

img {max-width:100%;height:auto;}

Det innebär att den största bilden någonsin kan vara 100%, och höjden beräknas automatiskt baserat på bildbredden. I vissa fall måste du kanske också ange bredden på 100%.

9. Styr elementen i en sektion

Använd bildenexempelet ovan om du bara vill rikta in bilderna i en viss sektion, till exempel din blogg, använd en klass för bloggdelen och kombinera den med den faktiska väljaren. Detta gör det möjligt för dig att bara välja bilderna i bloggdelen och inte andra bilder, till exempel din logotyp eller sociala meia-ikoner eller bilder i andra delar av din webbplats, som sidofältet. Så här ser CSS ut:

.blog img{max-width:100%;height:auto;}

10. Direkt barn

Jag önskar att jag visste det här när jag först började använda CSS. Detta skulle ha sparat mig så mycket tid! Använd > för att välja de direkta barnen till ett element. Till exempel:

#footer > a

Detta kommer att välja och ställa in alla aktiva länkelement som är omedelbart under Footer ID. Det kommer inte att välja något förbi det aktiva elementet, eller något annat som finns i sidfoten, som vanlig text. Det här fungerar bra med navigationselement på toppnivå.

Specifika barnelement

Tro mig, det här är praktiskt när du är styling listor. Du behöver bara räkna hur många objekt som ligger längs elementet som du vill stila och sedan tillämpa den stilen.

li:nth-child(2) {font-weight:800;color: blue;text-style:underline;}

CSS ovan riktar sig till det andra objektet i listan och gör det modigt, understruket och blått. Lägg till en "n" efter siffran inom parentes och du kan rikta dig mot varje andra listobjekt. Tänk dig att kunna ställa in alla andra linjer i en tabellformatlayout för enkel läsning. CSS skulle vara:

li:nth-child(2)

11. Applicera CSS på flera klasser eller väljare

Låt oss säga att du ville lägga till en identisk gräns runt alla bilder, bloggen och sidofältet. Du behöver inte skriva ut samma exakta CSS 3 gånger. Bara lista dessa objekt ut, åtskilda av kommatecken. Här är ett exempel:

.blog, img, .sidebar {border: 1px solid #000;}

Oavsett om du har varit webbdesigner i flera år, eller om du bara har börjat, lär du dig att bygga webbplatser på rätt sätt kan verka som en stenig, oändlig resa. När du har minskat vilka språk du vill lära dig, måste du lära dig och förfina dina färdigheter.

Oavsett vad du lär dig är CSS en av de viktiga, men skrämmande färdigheter du måste behärska. Det behöver dock inte vara så svårt, särskilt om du vet några praktiska och mindre kända CSS-tekniker för att få jobbet gjort.

12. lådformat: gränslåda;

Detta är en favorit bland många webbdesigners, eftersom det löser problemet med vaddering och layoutproblem. I grund och botten, när du ställer in en ruta till en viss bredd och lägger till vaddering på den, läggs polstret till storleken på rutan. Men med lådans storlek: gränsvärde; , detta är negerat, och lådor håller den storlek de är avsedda att vara.

13.: förut

Denna CSS är en väljare som låter dig välja ett CSS-element och infoga innehåll före varje element med en specifik klass som tillämpas på den. Låt oss säga att du hade en webbplats där du ville ha specifik text före varje H2-tagg. Du skulle göra den här inställningen:

h2:before {content: "Read: ";    color: #F00;}

Det här är extremt användbart, speciellt om du använder en ikonstyp. Du kan placera ikoner före vissa delar och tillämpa det globalt.

14: efter

Liksom: före väljaren kan du använda: efter att lägga in innehåll globalt på specifika delar. En praktisk användning skulle vara att lägga till "läs mer" efter varje utdrag på en blogg. Så här skulle du göra det.

p:after{content: " -Read more… ";color:#f00;}

15. innehåll

Innehållet är en CSS-egenskap som är till nytta när du behöver infoga ett element som du vill kunna styra. Den vanligaste användningen jag har sett för detta är att infoga en ikon från en ikonstyp på en viss plats. I exemplen ovan kan du se att du måste pakka in den text du vill infoga i citattecken.

16. CSS återställ

Olika webbläsare har standardinställningar för CSS, så det är ett måste att återställa dem, så att du har ett jämnt och konsekvent spelfält. Tänk på det som att bygga ett hus, och om du bygger på sidan av ett berg, på en sandstrand eller i mitten av ett skogsområde, vill du ha den grunden att vara jämn.

Denna CSS-återställningsmetod anger en standardbas för alla dina webbplatser, vilket ger dem konsekvens i sin CSS-utgångspunkt. Det tar bort oönskade gränser, förinställda marginaler, vaddering, linjer höjder, stilar på listor, etc. Eric Meyer skapade en som fungerar bra .

17. Drop caps

Alla älskar drop caps. Det påminner oss om den traditionella tryckta boken, och är ett utmärkt sätt att starta en innehållssida. Det 1 ^st stora märket griper verkligen din uppmärksamhet. Det finns ett enkelt sätt att skapa en drop cap i css, och det är med hjälp av pseudoelementet:: första bokstaven. Här är ett exempel:

p:first-letter{display:block;float:left;margin:3px;color:#f00;font-size:300%;}

Vad det här gör är att brevet sätts till 3x storleken på de andra bokstäverna. Den ställer 3px utrymme runt brevet för att förhindra överlappning och sätter färgen på brevet till rött.

18. Tvinga text till att vara alla kepsar, alla små bokstäver eller aktiverade

Det skulle vara absurt att skriva ett helt avsnitt i alla kepsar. Tänk dig att gå tillbaka och fixa det senare när formatet på webbplatsen ändras, eller det blir uppdaterat. Använd istället följande css-format för att tvinga text till en viss formatering. Denna css riktar sig till h2-titeltaggen.

h2 {text-transform: stor bokstav; } - alla kepsar
h2 {text-transform: små bokstäver; } - alla små bokstäver
h2 {text-transform: capitalize; } - aktiverar den första bokstaven i varje ord.

19. Vertikal skärmhöjd

Ibland vill du ha en sektion för att fylla hela skärmen, oavsett vad skärmstorleken är. Du kan styra detta med vh, eller se höjd. Numret innan det är en procentandel, så om du vill fylla 100% av webbläsaren ställer du in den till 100. Du kan ställa in det till ett värde som 85% för att rymma en fast navigeringsmeny.

Skapa en klass för behållaren och använd den mängd vh du vill ha den. En sak som du kanske behöver tweak är mediasökningsvärdet för specifika skärmar eller orienteringar som telefoner i stående läge. Tänk dig att sträcka en landskapsbild som passar in i stående läge. Det skulle bara inte se bra ut.

.fullheight { height: 85vh; }

20. Stil telefonlänkar

Om du har en länk som ringer ett telefonnummer när en användare knackar den på sin telefon kan det hända att du har problem med att ställa in den med den traditionella aktiva länkväljaren. Använd istället följande CSS:

a[href^=tel] {    color: #FFF;    text-decoration: none;}

css webbdesign webbutveckling css för nybörjare css tips css-tricks css3