CSS Tagasi põhitõedesse Terminoloogia selgitatud
CSS või Cascading Stylesheets viivad meie veebi disainireeglite määratluse keele. Kunstnikud kasutavad igal pool CSS-i igapäevaselt, et luua, korraldada ja kodeerida veebisaitide põhisüsteemide reegleid. See on muutunud kõige populaarsemaks keeleks esiplaanile ja pakub hämmastavaid võimeid CSS3 hiljutise vabastamisega. Aga mida see kogu kood tegelikult tähendab?
Keel ise on juba mõneks aastaks täielikult välja kujunenud. Segadus võib tekkida peamiselt väärkasutamise ja sarnaste terminite väärkasutamise tõttu. CSS toob tabelisse palju uusi kontseptsioone. Me katame mõningaid populaarsemaid terminoloogiaid CSS guruks.
Miks spetsialiseeruda CSS-ile?
See küsimus on esitatud enne, ja isegi 2011. aasta saabudes näeme samu tulemusi. CSS on tugev keel, mida ei meeldi skriptimine või programmeerimine. See on stiilikeel, täpsemalt kood, mida kasutatakse veebilehe käitumise kirjeldamiseks.
CSS-i abil saame otseselt manipuleerida üksikute HTML-elementide atribuutidega. Kõiki plokke, lõike, linke ja pilte saab mõjutada CSS-reeglite kaudu. Veebi esitlussemantika täiustamine on alati olnud suur samm. See on peamine põhjus, miks CSS on endiselt disainerite juhtiv mängija - keegi pole midagi paremat!
Omadused ja väärtused
See on lihtsaim viis CSS-i murda. Kõik koodid jagunevad kaheks tegevuseks: elemendi valimine disainilahenduste rakendamiseks ja rakendamiseks. Viimane luuakse vara / väärtuse paaride kaudu.
Näiteks värvus: punane; on väga lihtne omaduste / väärtuste paar. Meie kasutatav vara on värv mis lubab meil mistahes vastuvõetava väärtus teksti värvi muutmiseks. See võib olla ka kuuekood või RGB (punane-roheline-sinine) värviandmed. Mitu korda ei maini disainerid väärtuste ideed, sest see võib olla eksitav.
Omadused ja väärtused on tõesti üks idee. Iga vara deklaratsioon nõuab väärtust ja väärtused iseenesest on mõttetud. Internetis on palju dokumente, mis ületavad paljusid erinevaid omadusi ja kuidas need mõjutavad HTML-elemente. Soovitaksin osta CSS-i viite raamatu igast lähedalasuvast raamatupoodist. Nad on üsna odavad ja hoiavad kõige rohkem vajalikku teavet.
Valija väärtused
CSS-koodi täieliku rea täitmiseks on vaja valida. Need on need, millega me kinnitame, millist tüüpi elementi me sihtime. On palju valikuid ja paljud on nii keerulised, et keskmine disainer ei vaja neid oskusi. Kui soovite rohkem teada saada, kontrollige W3 valijat docs.
Lihtsaim viis stiilimääramiste alustamiseks on kasutada paljaid elemente kui kinnisvara valikuid. See tähendab root koodi manipuleerimist, näiteks lk lõigete puhul, div jagada keha ja html saab kasutada kogu veebilehe dokumendi manipuleerimiseks. Allpool on kiire näide kõigi lõikeelementide kujundamisest.
p font-family: Arial, sans-serif; värv: # 222; fondi kaal: rasvane;
Mis annab CSS-i tegelikule kaalule on see, kui täpne valija võib olla. Parim viis sihitud stiilide teostamiseks on 2 meetodit, mida tuntakse nimega klassid ja ID-d. Need on tavalised ideed HTML-is, kus saab määrata mis tahes elemendi ID ja klassi väärtuse atribuutide kaudu. Siis on CSS-i abil lihtne kasutada stiili selle konkreetse ploki jaoks.
p # firstpar font-size: 14px; / * stiilide lõik, mille ID on "firstpar" * / p.comment font-size: 1.0em; rea kõrgus: 1.3em; / * stiilis lõik (id), mille klass on "kommentaar" * /
Pikkusühikud ja väärtused
Sageli segunevad need terminid, mitte suur üllatus. Väärtusi selgitati varem kui kinnisvara kirjeldamiseks kasutatavat paigutust. Pikkusühikud on ka väärtused, kuna neid kasutatakse vara kirjeldamiseks.
Erinevus on see, et need väärtused nõuavad arvandmeid ja seetõttu peavad nad tagastama teatud vormi. Pikslid (pikslit) on kõige levinumad ja neid saab enamiku jaoks kasutada: laius / kõrgus, fondi suurus, polsterdus / marginaalid, et nimetada mõnda.
Muud kui need, mida võib näha protsentides (%), mida kasutatakse sageli vedeliku paigutuse kaudu. Laiuse väärtuste seadmisel protsendini eeldab kompilaator 100% kogu veebibrauseri laiust. See annab disaineritele palju täpsust, kui stiilide rakendamisel paigutusstruktuure ja isegi lehekülje tüpograafiat.
Deklaratsiooni blokk
Nüüd, pärast kõigi nende terminite ühitamist, oleme lõpuks võimelised arutama stiililehtede põhiideed. Koodide plokke kasutatakse teemavaldkondade kirjeldamiseks ja elemendi üksikasjade täpsustamiseks. Näiteks allpool on lihtsa navigeerimiskonteiner koodi kood:
div # nav display: block; laius: 100%; polsterdus: 3px 6px; margin-bottom: 20px;
Lihtsaim viis selle koodi kuvamiseks on üksteise järel reavahetused. CSS-i arendajad on kasutanud koodide plokke, et katkestada iga vara oma rida. See tegevuskava ei võta mitte ainult palju rohkem ruumi, vaid vähendab võimet “koorima” lehte täpselt, mida vajate.
Parem viis koodide plokkide lõhkumiseks on keerdunud elementide eraldamine enda peale, kui nad on jõudnud künnise. See number on isiklik ja arendajate vahel erinev. See on kallutuspunkt, kus loogika dikteerib selle rumalana, et hoida kõike ühel real, enamasti loetavuse tõttu.
Allpool olen kirjutanud näite navigeerimisomaduste plokist koos. See praktika hoiab sügavamad elemendid samas kohas, nii et kõigi navigatsioonielementide redigeerimine on palju lihtsam.
div # nav display: block; laius: 100%; polsterdus: 3px 6px; margin-bottom: 20px; div # nav ul list-style: mitte; kuva: plokk; div # nav ul li float: vasakule; marginaali paremale: 10px; fondi suurus: 12px; div # nav ul li a color: # 0f0f0f; teksti kaunistus: mitte; kuva: inline-block; polsterdus: 2px 5px;
CSS2 / CSS3 võimalikud edusammud
Hiljuti on pealkirjades kõnelemata CSS3 hämmastavatest hüvedest. Aga mis tegelikult on muutunud keeles? On selge, et vana kood töötab ikka hästi. See näitab vähemalt kompilaatorite täielikku tagasipöördumist (alati hea asi).
Peamised erinevused on enamasti seotud uute omadustega. Need võimaldavad ümardatud nurkade ja langeva vari efekti muutmist brauseris. CSS3 pakub ka uusi dokumente värvide kirjeldamiseks. HSL (Hue-Saturation-Lightness) on uusim lisaks HSLA-le, mis sisaldab läbipaistmatuse vähendamiseks Alpha kanalit.
Atribuutide valijad on suur samm edasi sirge märgistusstiiliga. Selle koodi abil saate sihtida konkreetse elemendi nime, mis sisaldab teatud väärtustega atribuute. Need on enamasti kasulikud, kui töötate markupiga nagu XML, kus sõlmede manipuleerimiseks ei ole standardseid printsiipe. Allpool olev näide on suhteliselt lihtne idee:
div [attrib ^ = "1"] / * stiilid siin * /
Ülaltoodud kood on osa CSS-i selektorite raamatukogust. See mõjutaks kõiki atribuudiga div-elemente “attrib” mis omab ka väärtust “1”. Kui see on ikka veel segane, viite allpool toodud näite selgitamiseks. Teoreetiliselt peaksid need kaks valijat tegema samu meetmeid.
p [id ^ = "esmane"] / * stiilid * / p # esmane / * stiilid * /
Järeldus
Pärast mõningate kõige enam segaduses olevate terminite lagunemist tundub CSS pargis käimist. Keel on väga intuitiivne ja algajatele on võimalik hakata kujundama paari esimese tunni jooksul. See muudab CSS veebiarendajate seas nii populaarseks.
CSS3 eelised on alles hakanud jõustuma. Uute paarite aastate jooksul ilmuvad veebi suundumused näitavad meile, kui palju kontrollime me tõesti üle veebilehe kujunduse. CSS on praegu uhke kui esikülje veebilehe kujunduse domineeriv keel. Harjutamine isegi algtasemel kesktaseme oskustena võib anda rikkaliku disainikogemuse ja täiendavad teadmised.
