20 Essential CSS brellur Allir hönnuðir ættu að vita
Þessi er fyrir alger byrjendur. Þegar þú hefur lært hvernig kassalíkanið virkar, og hvernig á að fljóta þessi reiti, er kominn tími til að verða alvarleg um CSS þinn. Í því skyni höfum við búið til gríðarlega lista yfir ábendingar, bragðarefur, tækni og einstaka óhreina hakk til að hjálpa þér að byggja upp hönnunina sem þú vilt.
CSS getur orðið erfiður og þú ættir líka. Og nú, í neitun sérstakri röð, (næstum) allt sem þú þarft að vita:
1. Alger staðsetning
Ef þú vilt hafa stjórn á því hvar þáttur býr á heimasíðu okkar á öllum tímum er alger staðsetning lykillinn að því að gera þetta gerst. Ef þú hugsar um vafrann þinn eins og einn stórmarkandi kassi, gerir alger staðsetning þér kleift að stjórna nákvæmlega hvar í þeim kassa verður þáttur áfram. Notaðu efst, hægri, neðst og vinstri, ásamt pixla gildi til að stjórna hvar þáttur helst.
position:absolute;top:20px;right:20pxCSS hér að ofan setur stöðu frumefni til að vera 20 punkta frá efstu og hægri brúnum vafrans. Þú getur líka notað algera staðsetningu innan div.
2. * + val
The * gerir þér kleift að velja alla þætti tiltekins vals. Til dæmis, ef þú notar * p og þá bætt við CSS-stíl við það, myndi það gera það fyrir alla þætti í skjalinu þínu með
tag. Þetta gerir það auðvelt að miða á hluta vefsvæðisins þíns á heimsvísu.
3. Tvíbura allar stíll
Þetta ætti að nota sparlega, því ef þú gerir þetta fyrir allt, þá ertu að fara að finna þig í vandræðum til lengri tíma litið. Hins vegar, ef þú vilt hunsa annan CSS stíl fyrir tiltekna hluti, notaðu ! Mikilvægt eftir stíl í css þínum. Til dæmis, ef ég vildi að H2 hausarnir í tilteknu hluta vefsvæðis míns yrðu rauðir í staðinn af bláu, myndi ég nota eftirfarandi CSS:
.section h2 { color:red !important; }4. Miðstöðvun
Miðað er erfiður, því það fer eftir því sem þú ert að reyna að miða. Skulum kíkja á CSS af atriðum sem miða á, byggt á efni.
Texti
Texti er miðstýrt með því að nota texta-takt: miðstöð; . Ef þú vilt það að hvorri hlið skaltu nota til vinstri eða hægri í stað miðju.
Innihald
Hægt er að miða við div (eða önnur atriði) með því að bæta blokkareigninni við það og síðan nota sjálfvirkan marmun. CSS myndi líta svona út:
#div1 {display: block;margin: auto;width: anything under 100%}Ástæðan fyrir því að ég setti "allt undir 100%" fyrir breidd er vegna þess að ef það væri 100% breitt, þá væri það að vera í fullri breidd og myndi ekki þurfa miðju. Það er best að hafa fasta breidd, eins og 60% eða 550 px osfrv.
5. Lóðrétt röðun (fyrir eina línu textans)
Þú verður að nota þetta í CSS leiðsagnarvalmynd, ég get næstum tryggt það. Lykillinn er að gera hæð valmyndarinnar og línuhæð textans sama. Ég sé þessa tækni mikið þegar ég fer aftur og breyttum núverandi vefsvæðum fyrir viðskiptavini. Hér er dæmi:
.nav li{line-height:50px;height:50px;}6. Högg áhrif
Þetta er notað fyrir hnappa, texta tengla, bock köflum á síðuna þína, tákn og fleira. Ef þú vilt eitthvað til að breyta litum þegar einhver högg með músinni yfir það, notaðu sömu CSS, en bætið : sveifla á það og breyttu stílinni. Hér er dæmi:
.entry h2{font-size:36px;color:#000;font-weight:800;}.entry h2:hover{color:#f00;}Hvað þetta gerir er að breyta litnum á h2 merkinu þínu frá svörtu til rauða þegar einhver er svolítið yfir því. The mikill hlutur óður í using: sveima er að þú þarft ekki að lýsa leturstærðinni eða þyngdinni aftur, ef það breytist ekki. Það breytir aðeins því sem þú tilgreinir.
Umskipti
Til að sveima áhrif, eins og með valmyndir eða á myndum á vefsvæðinu þínu, viltu ekki að litir gleymi of fljótt til niðurstaðna. Þú vilt helst létta breytinguna í smám saman, sem er þar sem umskipti eignin kemur inn í leik.
.entry h2:hover{color:#f00;transition: all 0.3s ease;}Þetta gerir breytinguna að gerast yfir .3 sekúndur, í stað þess að bara strax gleypa í rautt. Þetta gerir sveimaáhrifið meira ánægjulegt fyrir augað og minna jarring.
7. Tengslíki
Þessar stíll er saknað af miklum hönnuðum og það veldur í raun nothæfi með gestunum þínum. The : tengilinn gervi-bekknum stjórnar öllum tenglum sem hafa ekki verið smellt á ennþá. The : heimsækja gervi bekknum sér um stíl allra tengla sem þú hefur þegar heimsótt. Þetta segir website gestir þar sem þeir hafa þegar verið á síðuna þína, og þar sem þeir hafa enn ekki kannað.
a:link { color: blue; }a:visited { color: purple; }8. Breyttu stærð mynda á auðveldan hátt
Stundum kemst þú í klípa þar sem myndir þurfa að passa ákveðinn breidd, meðan stigstærð er hlutfallslega. Auðveld leið til að gera þetta er að nota hámarksbreidd til að takast á við þetta. Hér er dæmi:
img {max-width:100%;height:auto;}Þetta þýðir að stærsti myndin gæti alltaf verið 100% og hæðin er sjálfkrafa reiknuð út frá myndbreidd. Í sumum tilfellum gætir þú þurft að þurfa að tilgreina breiddina með 100%.
9. Stjórna þætti hluta
Notaðu mynddæmi hér að ofan, ef þú vilt aðeins að miða á myndirnar af tilteknu hlutanum, eins og bloggið þitt, notaðu bekk fyrir bloggið og sameina það með raunverulegu vali. Þetta gerir þér kleift að velja aðeins myndirnar af blogghlutanum og ekki aðrar myndir, svo sem lógóið þitt, eða tákn fyrir félagslega meia eða myndir í öðrum hlutum vefsvæðis þíns, eins og skenkur. Hér er hvernig CSS myndi líta út:
.blog img{max-width:100%;height:auto;}10. Bein börn
Ég vildi að ég hefði þekkt þetta þegar ég byrjaði fyrst með því að nota CSS. Þetta hefði bjargað mér svo miklum tíma! Notaðu > til að velja bein börn frumefni. Til dæmis:
#footer > aÞetta mun velja og stilla alla virka hlekkþætti sem eru strax undir skothylki. Það mun ekki velja neitt fyrirfram virka efnisþáttinn, eða eitthvað annað sem er að finna í fótinn, eins og venjulegur texti. Þetta virkar vel með leiðsögnum á toppstigi líka.
Sérstakar þættir barna
Trúðu mér, þetta er gagnlegt þegar þú ert stíllistar. Þú þarft bara að telja hversu mörg atriði niður í frumefni er að þú viljir stilla og þá beita þeim stíl.
li:nth-child(2) {font-weight:800;color: blue;text-style:underline;}The CSS hér að ofan miðar annað atriði í listanum og gerir það feitletrað, undirstrikað og blátt. Bæta við "n" eftir númerið í sviga og þú getur miðað á hvert 2. lista atriði. Ímyndaðu þér að vera fær um að stilla alla aðra línu í töfluformi til að auðvelda lestur. The CSS væri:
li:nth-child(2)11. Notaðu CSS í marga flokka, eða valið
Segjum að þú vildir bæta við sömu landamærum í kringum allar myndir, bloggið og hliðarstikuna. Þú þarft ekki að skrifa sama nákvæmlega CSS 3 sinnum. Bara lista þau atriði út, aðskilin með kommum. Hér er dæmi:
.blog, img, .sidebar {border: 1px solid #000;}Hvort sem þú hefur verið vefur hönnuður í mörg ár, eða þú ert bara að byrja út, læra hvernig á að byggja upp vefsíður á réttan hátt getur virst eins og klettur, endalaus ferð. Þegar þú hefur minnkað hvaða tungumál þú vilt læra þarftu að læra og betrumbæta færni þína.
Sama hvað þú lærir, CSS er ein af þessum nauðsynlegum, en skelfilegum færni sem þú þarft að læra. Það þarf þó ekki að vera svo erfitt, sérstaklega ef þú þekkir nokkrar handlagnar og minna þekktar CSS tækni til að fá starfið.
12. Box-límvatn: landamæri kassi;
Þetta er uppáhald meðal margra vefhönnuða, vegna þess að það leysir vandamálið um padding og skipulag málefni. Í grundvallaratriðum, þegar þú setur kassa í ákveðna breidd og bætir við því við það, bætir padding við stærð kassans. Hins vegar með kassa-límvatn: landamæri kassi; , þetta er neitað og kassar halda þeim stærð sem þeir eiga að vera.
13.: áður
Þessi CSS er valbúnaður sem leyfir þér að velja CSS frumefni og setja inn efni áður en hvert frumefni með tilteknum flokki sem er beitt á það. Segjum að þú hafir vefsíðu þar sem þú vildir ákveðinn texta fyrir hvert H2 merki. Þú myndir gera okkur þetta skipulag:
h2:before {content: "Read: "; color: #F00;}Þetta er mjög vel, sérstaklega ef þú notar táknmyndartákn. Þú getur sett tákn fyrir ákveðna þætti og beitt henni á heimsvísu.
14.: eftir
Eins og: fyrir val, getur þú notað: eftir að setja inn efni á heimsvísu um tiltekna þætti. Hagnýt notkun væri að bæta "lesa meira" eftir hvert útdrátt á blogginu. Hér er hvernig þú myndir gera það.
p:after{content: " -Read more… ";color:#f00;}
15. efni
Efnið er CSS eign sem kemur sér vel þegar þú þarft að setja inn þátt sem þú vilt geta stjórnað. Algengasta notkunin sem ég hef séð fyrir þessu er að setja inn tákn frá leturgerð á tilteknu staði. Í dæmunum hér fyrir ofan geturðu séð að þú verður að vefja textann sem þú vilt setja inn í tilvitnunarmerkjum.
16. CSS endurstilla
Mismunandi vöfrar hafa sjálfgefið CSS stillingar, þannig að það er nauðsynlegt til að endurstilla þá, svo að þú hafir jafnt og í samræmi við leikvöll. Hugsaðu um það sem að byggja hús, og hvort þú byggir á hlið fjalls, á sandströnd, eða á miðri skógi, vilt þú þá grundvöll að vera stig.
Þessi CSS endurstillingaraðferð setur staðlaða stöð fyrir allar vefsíður þínar og gefur þeim samkvæmni í upphafsstað CSS. Það eyðir óæskilegum landamærum, forstilltum margínum, púði, línum hæðum, stílum á listum osfrv. Eric Meyer búið til einn sem virkar vel .
17. Slepptu húfur
Allir elska dropapoka. Það minnir okkur á hefðbundna prentaða bókina og er frábær leið til að hefja innihaldsefni. Að 1 st , stór stafur grípur virkilega athygli þína. Það er auðveld leið til að búa til dropapoki í css, og það er með því að nota gerviþáttinn:: fyrsta stafinn. Hér er dæmi:
p:first-letter{display:block;float:left;margin:3px;color:#f00;font-size:300%;}Hvað þetta gerir er að setja stafinn í 3x stærð hinna bréfa. Það setur 3px af plássi í kringum bréfið til að koma í veg fyrir að skarast og setur lit bréfanna í rauða.
18. Þvingaðu texta til að vera öll húfur, allir lágstafir eða eignir
Það væri fáránlegt að slá inn heilan hluta í öllum húfur. Ímyndaðu þér að fara aftur og laga það seinna þegar sniði vefsvæðisins breytist, eða það verður uppfært. Í staðinn, notaðu eftirfarandi css stíl til að þvinga texta í ákveðna formatting. Þetta css miðar á h2 titilmerkið.
- h2 {texti-umbreyta: hástafi; } - allar húfur
- h2 {texti-umbreyta: lágstafir; } - allt lágstafir
- h2 {text-transform: capitalize; } - hástafar 1 stafi hvers orðs.
19. Lóðrétt skjár hæð
Stundum viltu hluta til að fylla alla skjáinn, sama hvað skjástærðin er. Þú getur stjórnað þessu með vh eða útsýni hæð. Númerið áður en það er hlutfall, þannig að ef þú vilt að það fylli 100% af vafranum, þá setur þú það 100. Þú gætir sett það á gildi eins og 85% til að mæta fasta flakkavalmynd.
Búðu til flokk fyrir ílátið og notaðu magn vh sem þú vilt hafa. Eitt sem þú gætir þurft að klipa er margmiðlunarfyrirspurn fyrir tiltekna skjái eða stefnumörkun eins og síma í myndatökuham. Ímyndaðu þér að teygja landslagsmynd til að passa myndatökuham. Það myndi bara ekki líta vel út.
.fullheight { height: 85vh; }20. Style sími tenglar
Ef þú ert með tengil sem hringir í símanúmer þegar notandi krökkar það á símanum sínum, geturðu átt í vandræðum með að stilla það með hefðbundnum virka hlekkvalkostinum. Notaðu í staðinn eftirfarandi CSS:
a[href^=tel] { color: #FFF; text-decoration: none;}