CSS Takaisin perustekijöihin Selitykset
CSS- tai Cascading-tyylitaulukot täydentävät web-sivujen suunnittelusääntöjen määrittelevää kieltä. Taiteilijat käyttävät kaikkialla CSS: ää päivittäin luomaan, järjestämään ja koodittamaan verkkosivustojen perusasettelun sääntöjä. Tästä on tullut suosituin kieli etupääsuunnittelussa ja tarjoaa uskomattomia kykyjä CSS3: n tuoreen julkaisun myötä. Mutta mitä kaikki tämä koodi todella tarkoittaa?
Itse kieli on kehittynyt täysin muutaman vuoden ajan. Sekaannus voi johtua lähinnä väärinkäytöksistä ja vastaavien termien väärinkäytöstä. CSS tuo pöydälle paljon uusia käsitteitä. Me katamme joitakin suosituimmista terminologioista CSS-guruksi.
Miksi erikoistua CSS: ään?
Tämä kysymys on esitetty aikaisemmin, ja edes vuonna 2011 tulemme näkemään samat tulokset. CSS on vankka kieli, jota ei haluta skriptaukseen tai ohjelmointiin. Se on tyylikieli, erityisesti koodi, jota käytetään kuvaamaan, miten verkkosivun pitäisi toimia.
CSS: n avulla voimme manipuloida suoraan yksittäisten HTML-elementtien ominaisuuksia. CSS-säännöt voivat vaikuttaa kaikkiin lohkoihin, kappaleisiin, linkkeihin ja kuviin. Esityksen semantiikan parantaminen verkolle on aina ollut suuri askel. Tämä on tärkein syy siihen, miksi CSS on edelleen suunnittelijoiden johtava pelaaja - kukaan ei ole luonut mitään parempaa!
Ominaisuudet ja arvot
Tämä on yksinkertaisin tapa murtautua CSS: ään. Kaikki koodit jakautuvat kahteen toimintoon: elementtien valitseminen malleihin ja sovellettavaksi. Jälkimmäinen luodaan omaisuutta / arvopareja käyttäen.
Esimerkiksi väri punainen; on hyvin yksinkertainen ominaisuus / arvopari. Käytetty ominaisuus on väri- jonka avulla voimme siirtää kaikki hyväksyttävät arvo muuttaa tekstin väriä. Tämä voi olla myös hex-koodi tai RGB (punainen-vihreä-sininen) väritiedot. Usein suunnittelijat eivät mainitse arvoja, koska ne voivat olla harhaanjohtavia.
Ominaisuudet ja arvot ovat todella yksi idea. Jokainen omaisuusilmoitus edellyttää arvoa, ja arvot ovat itsessään merkityksettömiä. Online-dokumentaatiossa on paljon dokumentteja, jotka käyvät läpi monia eri ominaisuuksia ja miten ne vaikuttavat HTML-elementteihin. Suosittelen ostamaan CSS-viitekirjan mistä tahansa läheisestä kirjakaupasta. Ne ovat melko halpoja ja pitävät eniten kaikkia tarvitsemasi tiedot.
Valitsin arvot
Valitsimia tarvitaan koko CSS-koodin täyttämiseksi. Nämä ovat se, mitä me julistamme asettamaan, minkä tyyppistä elementtiä olemme kohdistamassa. Valittuja on monia, ja monet ovat niin kiihkeitä, että keskimääräinen suunnittelija ei tarvitsisi taitoja. Tarkista W3: n valitsin, jos haluat lisätietoja.
Yksinkertaisin tapa aloittaa tyyliasetukset on käyttää paljaita elementtejä kiinteistönvalitsimina. Tämä tarkoittaa juurikoodin, kuten p kohdissa, div ja jopa ruumis ja html voidaan käyttää koko web-sivun asiakirjan käsittelyyn. Alla on esimerkki kaikkien kappaleelementtien muotoilusta.
p font-family: Arial, sans-serif; väri: # 222; font-paino: lihavoitu;
CSS: n todellinen paino on, kuinka tarkka valitsin voi olla. Paras tapa saavuttaa kohdennettuja tyylejä on kaksi menetelmää, jotka tunnetaan nimellä luokat ja tunnukset. Nämä ovat yleisiä ideoita HTML: ssä, jossa voit asettaa minkä tahansa elementin tunnisteiden ja luokan arvoksi määritteiden kautta. Sitten CSS: n avulla on helppo soveltaa tyylejä tähän tiettyyn lohkoon.
p # firstpar font-size: 14px; / * tyylejä kohta, jossa on tunnus "firstpar" * / p.comment font-size: 1.0em; linjan korkeus: 1.3em; / * tyylejä-kappale (t), joissa on "kommentin" luokka * /
Pituusyksiköt ja arvot
Usein nämä ehdot sekoittuvat, eivät suuret yllätykset. Arvot selitettiin aiemmin sijoitteluna, jota käytämme ominaisuuden kuvaamiseksi. Pituusyksiköt ovat myös arvoja siinä, että niitä käytetään kuvaamaan omaisuutta.
Ero on, että nämä arvot vaativat numeerisia tietoja, ja siksi niiden on palautettava jonkinlaiset yksiköt. Pikselit (px) ovat yleisimpiä, ja niitä voidaan käyttää useimmissa tapauksissa: leveys / korkeus, kirjasinkoko, pehmuste / marginaalit, muutamia nimiä.
Muut kuin nämä, saatat nähdä prosenttiosuudet (%), joita käytetään usein nestemäisten asettelujen avulla. Kun asetat leveysarvot prosentteina, kääntäjän oletetaan olevan 100% koko selaimen leveydestä. Tämä antaa suunnittelijoille paljon tarkkuutta, kun tyylit soveltuvat asettelurakenteisiin ja jopa sivutyyppiin.
Ilmoituslohko
Nyt kun kaikki nämä ehdot on asetettu yhteen, pystymme lopulta keskustelemaan tyylitaulukoiden taustalla. Koodien lohkoja käytetään kuvaamaan aihepiiriä ja määrittelemään elementin yksityiskohtia. Alla on esimerkiksi yksinkertaisen navigointisäiliön koodirivi:
div # nav näyttö: lohko; leveys: 100%; pehmuste: 3px 6px; marginaalipohja: 20px;
Yksinkertaisin tapa näyttää tämä koodi on linjata ominaisuuksia yksi toisensa jälkeen. CSS-kehittäjät ovat käyttäneet koodilohkoja kunkin ominaisuuden rikkomiseksi omalle rivilleen. Tämä esityslista ei ainoastaan vie paljon enemmän tilaa, vaan vähentää kykyä “kuoria” löydät tietosi, mitä tarvitset.
Parempi tapa hajottaa koodilohkoja on erottaa kierteiset elementit omaksi sen jälkeen, kun ne ovat saavuttaneet kynnyksen. Tämä numero on henkilökohtainen ja on erilainen kehittäjien välillä. Se on kippauspiste, jossa logiikka sanelee sen typeräksi pitää kaikki yhdellä rivillä, lähinnä luettavuuden vuoksi.
Alla olen kirjoittanut esimerkin navigointiominaisuuksien lohkosta yhdessä. Tämä käytäntö pitää syvemmät elementit samassa paikassa, joten kaikkien navigointielementtien muokkaukset ovat paljon yksinkertaisempia.
div # nav näyttö: lohko; leveys: 100%; pehmuste: 3px 6px; marginaalipohja: 20px; div # nav ul list-style: ei; näyttö: lohko; div # nav ul li float: vasen; marginaali-oikea: 10px; kirjasinkoko: 12px; div # nav ul li a väri: # 0f0f0f; teksti-koristelu: ei; näyttö: inline-block; pehmuste: 2px 5px;
CSS2 / CSS3: n mahdolliset edistykset
Viime aikoina otsikoissa on ollut CSS3: n uskomattomia etuja. Mutta mitä todella on muutettu kielellä? Selvästi vanha koodi toimii edelleen hyvin. Tämä osoittaa ainakin täydellisen taaksepäin yhteensopivuuden kääntäjien välillä (aina hyvä asia).
Suurimmat erot liittyvät lähinnä uusiin ominaisuuksiin. Nämä mahdollistavat pyöristettyjen kulmien ja pudotusvarjojen vaikutukset selaimessa. CSS3 tarjoaa myös uusia työkaluja asiakirjojen värien kuvaamiseen. HSL (Hue-Saturation-Lightness) on uusin HSLA: n lisäksi, joka sisältää Alpha-kanavan opasiteetin vähentämiseksi.
Ominaisuuksien valitsimet ovat valtava askel kohti suoraa merkintätapaa. Tällä koodityypillä voit kohdistaa tietyn elementin nimen, joka sisältää määritteitä sisältäviä attribuutteja. Nämä ovat enimmäkseen hyödyllisiä, kun työskentelet merkinnällä kuten XML: llä, jossa ei ole standardeja suunnitteluperiaatteita solmujen käsittelemiseksi. Alla oleva esimerkki on suhteellisen yksinkertainen idea:
div [attrib ^ = "1"] / * tyylejä täällä * /
Yllä oleva koodi on osa CSS-valintakirjastoa. Tämä vaikuttaisi kaikkiin div-elementteihin, joilla on attribuutti “attrib” joka myös pitää arvon “1”. Jos tämä on edelleen sekava viittaus alla olevaan esimerkkiin selventääkseen. Teoreettisesti nämä kaksi valitsinta suorittavat samat toimet.
p [id ^ = "ensisijainen"] / * tyylejä * / p # ensisijainen / * tyylejä * /
johtopäätös
Kun muutama kaikkein hämmentyneimmistä termeistä on hajonnut, CSS tuntuu kävellen puistossa. Kieli on hyvin intuitiivinen ja aloittelijat voivat aloittaa suunnittelun muutaman tunnin sisällä. Tämän vuoksi CSS on niin suosittu web-kehittäjien keskuudessa.
CSS3: n edut ovat vasta alkaneet tulla voimaan. Uusien muutaman vuoden aikana kehittyvät web-trendit osoittavat meille, kuinka paljon hallitsemme todella web-sivujen suunnittelua. CSS on tällä hetkellä ylpeä pääkäyttäjän verkkosivujen muotoilun hallitsevana kielenä. Harjoitteleminen edes alkeellisiksi keskitason taidoiksi voi tuottaa runsaasti suunnittelukokemusta ja lisää tietoa.
