CSS Grįžti į pagrindinius terminus
CSS arba Cascading Stylesheets užpildo mūsų interneto dizaino taisyklių apibrėžimo kalbą. Visur menininkai naudoja CSS kasdien, kad sukurtų, tvarkytų ir koduotų pagrindinių svetainių išdėstymo taisyklių rinkinius. Tai tapo populiariausia kalba, skirta „front-end“ dizainui, ir suteikia nuostabių gebėjimų neseniai išleidus CSS3. Bet ką iš tikrųjų reiškia šis kodas?
Pati kalba jau pilnai sukurta jau keletą metų. Painiavos gali kilti daugiausia dėl netinkamo ryšio ir netinkamo panašių terminų naudojimo. CSS prie stalo prideda daug naujų koncepcijų. Mes apimsime daugelį populiariausių terminų, kad galėtume išmokti CSS guru.
Kodėl specializuojasi su CSS?
Šis klausimas buvo pateiktas anksčiau, ir net įžengus į 2011 m., Matome tuos pačius rezultatus. CSS yra tvirta kalba, kuri nepatinka skriptui ar programavimui. Tai stiliaus kalba, konkrečiau kodas, naudojamas apibūdinti, kaip elgtis tinklalapyje.
Naudojant CSS galime tiesiogiai manipuliuoti atributais iš atskirų HTML elementų. Visus blokus, pastraipas, nuorodas ir vaizdus gali paveikti CSS taisyklės. Žiniasklaidos pristatymo semantikos tobulinimas visada buvo didžiulis žingsnis. Tai yra pagrindinė priežastis, kodėl CSS vis dar yra pirmaujanti žaidėjų žaidėja - niekas nieko nesukūrė!
Savybės ir vertės
Tai paprasčiausias būdas įsilaužti į CSS. Visi kodai suskirstomi į du veiksmus: pasirenkant elementą, skirtą taikyti dizainą ir ką taikyti. Pastarasis sukuriamas per turto / vertės poras.
Pavyzdžiui spalva: raudona; yra labai paprasta nuosavybės / vertės pora. Turtas, kurį naudojome, yra spalva tai leidžia mums perduoti bet kokį priimtiną vertė pakeisti teksto spalvą. Tai taip pat gali būti šešioliktainis arba RGB (raudona-žalia-mėlyna) spalvų duomenys. Daug kartų dizaineriai nemini vertybių idėjos, nes tai gali būti klaidinanti.
Savybės ir vertybės iš tikrųjų yra viena idėja. Kiekvienai nuosavybės deklaracijai reikia vertės, o vertės savaime yra beprasmės. Internete yra daug dokumentų, kuriuose pateikiama daugybė skirtingų savybių ir kaip jie veikia HTML elementus. Rekomenduoju įsigyti CSS nuorodų knygą iš bet kurios netoliese esančios knygų parduotuvės. Jie yra gana pigūs ir turi daugiausiai informacijos, kurios jums reikia.
Selektoriaus reikšmės
Norint užbaigti visą CSS kodo eilutę, reikalingi pasirinkėjai. Štai ką mes nurodome nustatyti, kokio tipo elementą mes nukreipiame. Yra daug selektorių, o daugelis yra taip susukti, kad vidutinis dizaineris neturėtų įgūdžių. Jei norite sužinoti daugiau, patikrinkite W3 selektorių.
Paprasčiausias būdas pradėti stiliaus apibrėžimus yra naudoti nežymius elementus kaip nuosavybės atranką. Tai reiškia manipuliavimą šakniniu kodu, pvz p pastraipoms, div ir netgi kūnas ir html galima naudoti norint manipuliuoti visu tinklalapio dokumentu. Žemiau yra greitas visų paragrafo elementų stiliaus pavyzdys.
p font-family: Arial, sans-serif; spalva: # 222; šrifto svoris: paryškintas;
Kas suteikia CSS tikrąjį svorį, gali būti, kaip tiksliai pasirenkamas selektorius. Geriausias būdas pasiekti tikslinius stilius yra 2 būdai, žinomi kaip klasės ir ID. Tai yra įprastos HTML idėjos, kuriose galite nustatyti bet kurį elementą, turintį atributų ID ir klasės vertę. Tada naudojant CSS paprasta pritaikyti stilius tam tikram blokui.
p # firstpar šrifto dydis: 14px; / * stiliaus paragrafas su ID "firstpar" * / p.comment font-size: 1.0em; linijos aukštis: 1.3em; / * stiliaus dalis (-os) su „komentaro“ klase * /
Ilgio vienetai ir vertės
Dažnai šie terminai susimaišo, o ne didelis siurprizas. Vertės buvo paaiškintos anksčiau, kaip vietą, kurią mes naudojame turto apibūdinimui. Ilgio vienetai taip pat yra vertės, kuriomis jie naudojami aprašant turtą.
Skirtumas yra tas, kad šios vertės reikalauja skaitmeninių duomenų ir todėl turi grąžinti tam tikrą vienetų formą. Pikseliai (px) yra labiausiai paplitę ir gali būti naudojami daugeliui dalykų: plotis / aukštis, šrifto dydis, užpildymas / paraštės, kad būtų galima paminėti keletą.
Išskyrus tuos atvejus, galite matyti procentus (%), kurie dažnai naudojami naudojant skysčių išdėstymą. Nustatydami pločio vertes procentais, kompiliatorius prisiims 100% viso interneto naršyklės pločio. Tai suteikia daug tikslumo dizaineriams, kai stiliumi naudojami maketavimo struktūros ir net puslapio tipografija.
Deklaracijos blokas
Dabar po visų šių terminų kartu galiausiai galime aptarti pagrindinę stilių lentelių idėją. Kodo sritims apibūdinti naudojami kodo blokai ir detalių detalizavimas. Pavyzdžiui, žemiau yra paprastos navigacijos talpyklos kodo eilutė:
div # nav ekranas: blokas; plotis: 100%; įdėklas: 3px 6px; paraštės apačia: 20px;
Paprasčiausias būdas rodyti šį kodą yra vienas po kito einančių savybių. CSS kūrėjai naudojo kodo blokus, kad padengtų kiekvieną turtą į savo liniją. Ši darbotvarkė ne tik užima daug daugiau vietos, bet sumažina gebėjimą “nugriebti” lapą, kad surastumėte būtent tai, ko jums reikia.
Geresnis būdas suskirstyti kodo blokus yra atskirti konvuliuotus elementus į jų pačius, kai jie pasiekia ribą. Šis skaičius yra asmeninis ir skirtingas tarp kūrėjų. Tai taškas, kuriame logika diktuoja, kad viskas yra vienoje eilutėje, daugiausia dėl skaitymo.
Žemiau parašiau navigacijos savybių bloko pavyzdį. Ši praktika leidžia gilesniems elementams toje pačioje vietoje, todėl visų navigacijos elementų redagavimas yra daug paprastesnis.
div # nav ekranas: blokas; plotis: 100%; įdėklas: 3px 6px; paraštės apačia: 20px; div # nav ul list-style: nėra; ekranas: blokas; div # nav ul li float: kairėje; paraštė dešinėje: 10px; šrifto dydis: 12px; div # nav ul li a color: # 0f0f0f; teksto apdaila: nėra; ekranas: inline-block; įdėklas: 2px 5px;
Galimi CSS2 / CSS3 pasiekimai
Pastaruoju metu antraštėse kalbama apie neįtikėtiną CSS3 naudą. Bet kas iš tikrųjų pasikeitė kalba? Aišku, kad senas kodas vis dar veiks. Tai bent jau rodo, kad kompiliatoriai yra visiškai suderinami (visada geras dalykas).
Pagrindiniai skirtumai daugiausia susiję su naujomis savybėmis. Tai leidžia suapvalinti kampus ir „drop-shadow“ efektus padaryti naršyklėje. CSS3 taip pat siūlo naujus įrankių aprašymus spalvų dokumente. HSL (Hue-Saturation-Lightness) yra naujausias, be HSLA, kuriame yra Alpha kanalas, siekiant sumažinti neskaidrumą.
Atributų parinktuvai yra didžiulis žingsnis į priekį tiesiai žymėjimo stiliaus atžvilgiu. Naudodami šį kodo stilių galite nukreipti konkretų elemento pavadinimą, kuriame yra tam tikrų reikšmių atributai. Tai dažniausiai naudinga dirbant su žymėjimu, pvz., XML, kur nėra standartinių dizaino principų manipuliuoti mazgais. Toliau pateiktas pavyzdys yra gana paprasta idėja:
div [attrib ^ = "1"] / * stiliai čia * /
Šis kodas yra CSS selektorių bibliotekos dalis. Tai paveiktų visus div elementus su atributu “attrib” kuri taip pat turi vertę “1”. Jei tai vis dar painioja, toliau pateiktą pavyzdį paaiškinkite. Teoriškai šie du selektoriai turėtų atlikti tuos pačius veiksmus.
p [id ^ = "pirminis"] / * stiliai * / p # pirminis / * stiliai * /
Išvada
Po to, kai suskirstėte kelias iš labiausiai sumaišytų terminų, CSS atrodo kaip pėsčiomis parke. Kalba yra labai intuityvi ir pradedantiesiems galima pradėti kurti per pirmąsias kelias valandas. Tai daro CSS taip populiarus tarp interneto kūrėjų.
CSS3 privalumai tik pradeda veikti. Per kelerius kelerius metus besivystančios žiniatinklio tendencijos parodys mums, kiek kontroliuojame tikrai daugiau nei tinklalapio dizainas. CSS šiuo metu didžiuojasi kaip dominuojančia kalba, skirta „front-end“ svetainės stiliui. Praktika į netgi pradinius vidutinio lygio įgūdžius gali duoti daugybę patirties ir žinių.
