¿Mis on CSS? Tule ja saa sellest huvitavast artiklist teada. CSS sündis selleks, et igaveseks muuta veebilehtede kujunduse ja funktsionaalsuse kontseptsiooni.
¿Mis on CSS?
See on stiilikeel, mille eesmärk on määratleda HTML -i ja XHTML -i abil loodud elektrooniliste elementide visuaalsed aspektid, näiteks: värv, suurus, välimus jne. Põhimõtteliselt püüab see kompenseerida HTML -i disainipiiranguid ja keerukust.
Mitte alati stiilid, mis on igasse kaasatud veebilehe osad need vastavad disaineri nõuetele. CSS on aga parim viis elementide ekraanil vaatamise viisi muutmiseks, kuna see eraldab sisu ja esitluse.
Teisest küljest võimaldab CSS luua täpselt määratletud dokumente, millel on täielik tähendus, kuid mis on vähem keerulised, kergesti ligipääsetavad ja hõlpsasti hooldatavad. Lisaks võimaldab see neid dokumente vaadata mis tahes kandjalt või seadmelt.
Evolutsioon
Selle sünd on tingitud Interneti levikust ja elektrooniliste dokumentide arendamiseks mõeldud HTML -keele laienemisest. Põhimõtteliselt puudusid standardid seda tüüpi dokumentide redigeerimiseks, mistõttu tuli luua lehekeel, mis võimaldaks järjepidevalt erinevaid stiile rakendada.
CSS ilmus ametlikult 1995. aastal, see oli CHSSi ja SSP liidu toode, ettepanekud, mis esitati World Wide Web Consortiumile (W3C), püüdes saavutada HTML -keelte stiililehtede keele standardimist.
Aasta hiljem avaldas W3C oma esimese ametliku soovituse CSS level 1. 1997. aastal otsustas ta siiski eraldada CSS -i töö DOM- ja HTML -tööst. Nii avaldas CSS töörühm 1998. aastal oma esimese eraldi ettepaneku, mida ta nimetas CSS level 2 -ks.
Peaaegu kümme aastat hiljem, 2007. aastal, tehti viimane teadaolev CSS 2. taseme värskendus nimega CSS 2.1. Tegelikult kasutatakse seda versiooni brauserites ka tänapäeval.
On teada, et paralleelselt on W3C välja töötanud CSS -i taseme soovitust 3. Kuigi mõned elemendid on brauseritesse lisatud, pole selles siiski midagi ametlikku.
Samuti on teada, et HTML- ja CSS -koodi tõlgendamise eest vastutavate brauserite kohandamine piltide kuvamiseks nende mootori kaudu pole olnud lihtne. Nii palju, et esimene CSS -i täieliku toe versioon avaldati 2000. aastal. See viitas CSS -i tasemele 1 ja kuulus Macis brauserile Internet Explorer 5. Siiani ei paku ükski brauser CSS 2.1 -le täpsemat tuge.
Sellega seoses tundub, et praegu on Safari ja Opera brauserid need, mis on CSS -i soovitud toele kõige lähemal, kuna need hõlmavad mõningaid lõpetamata CSS 3 versiooni aspekte ja pakuvad versiooni 2.1 peaaegu täiuslikku tuge. Neile järgnevad Firefox ja Google Chrome, kuid nende toetus versioonile 3 on endiselt vähem arenenud.
Internet Explorer kuni versioonini 6 esitas omalt poolt märgatavaid puudusi seoses CSS 2.1 nõutava toega.
Kuidas CSS töötab?
Põhimõtteliselt määratletakse veebilehe arendamisel HTML- ja HTML -keeli kasutades lehe iga elemendi sisu ja funktsioonid. Seejärel määratakse CSS -i keele kaudu iga elemendi visuaalne välimus, näiteks: teksti tüüp ja fondi suurus, lõikude eraldamine, elementide asukoht jne.
omadused
CSS on keel, mille kasutamine on veebidisainerite seas plahvatuslikult kasvanud. Tänu oma uskumatutele eelistele on nende hulgas:
- See on paindlik, pakkudes sama ülesande täitmiseks erinevaid alternatiive. See loob kolm võimalust CSS -i lisamiseks elektroonilisse HTML -dokumenti: dokumendis endas, välisfailis ja HTML -elementides.
- Erinevate stiilide jaoks saab määratleda erinevaid stiile, sealhulgas: projektorid, ekraanid, monitorid ja mobiilseadmed jne.
- Määrab teatud kandjate jaoks spetsiifilised omadused, võimaldades teil muuta lehe stiili sõltuvalt seadme funktsionaalsusest. See põhjustab nelja reegli olemasolu meedia loomiseks, millele CSS -stiile rakendatakse: @media, @import, tag ja see, mis viitas erinevate meediumite segamisele.
- Kui elemendile on seatud vara väärtus, pärivad kõik selle elemendi järeltulijad sama väärtuse.
elemendid
CSS -lehtede stiilid koosnevad järgmistest põhielementidest:
- Reegel: see moodustab kõik stiilid, mis kuuluvad CSS -i stiililehele. See koosneb omakorda valijatest ja deklaratsioonidest.
- Valija: viitab HTML -elemendile, millele stiili rakendatakse.
- Deklaratsioon: see on elementidele rakendatavate stiilide spetsifikatsioon. See võib sisaldada ühte või mitut omadust. Avalduste kaudu tehakse selgeks, mida on vaja teha.
- Omadus: See võimaldab muuta ühe või mitme elemendi välimust.
- Väärtus: see on elementide omaduste muutmise tulemus.
Üldiselt sisaldab CSS -fail mitmeid stiile, millest igaüks võib sisaldada suurt hulka elemente. Sarnaselt võib stiilide spetsifikatsioon sisaldada erinevaid omaduste / väärtuste kombinatsioone.
Valijad
Valijad on vajalikud veebilehtede loomiseks, kuna nemad näitavad, millisele elemendile CSS -stiili rakendada. Need garanteerivad õige viisi, kuidas seda teha, võimaldades veebilehe elementide täpset valikut.
Hoolimata mitut tüüpi valijate olemasolust nimetatakse allpool viis peamist:
- Universaalne: see tuvastatakse tärniga. See valib lehe kõik elemendid, mis muudab selle vähekasutatavaks valijaks, kuna pole sageli vaja sama stiili rakendada lehe kõigi elementide jaoks.
- Tüübist või märgendist: seda kasutatakse siis, kui lehe elementide HTML -märgend vastab valija väärtusele. Selle kasutamiseks on vaja märkida ainult valitud elemendiga seotud sildi nimi. Üldiselt rakendatakse seda lõigu tüüpi elementides.
- Kahanev: viitab elementide valikule, mis asuvad teiste elementide ava- ja lõppsiltide vahel. See tähendab, et see valib teiste elementide sees olevad elemendid, millele saab rakendada erinevaid CSS -stiile, kui need on sama tüüpi. Tagab tüübi- või siltide valijate täpsuse.
- Klass: lahendage kolme eelmise valijatüübi valikupiirangud, kuna see võimaldab reegleid otseselt tuvastades rakendada stiile lehe ühele elemendile. Need on väga kasulikud keerulises lehekujunduses, kuna sama klassi atribuudi sama väärtuse saab lisada sama lehe mitmesse elementi.
- Alates ID: parandab klassivalija tõhusust stiilide rakendamisel lehe üksikule elemendile. See toimib siis, kui soovite elementi valida selle atribuudi id kaudu. Selle atribuudi väärtust ei saa korrata samal lehel rohkem kui ühes elemendis.
Oluline on märkida, et CSS võimaldab kasutada erinevaid kombinatsioone, alustades nendest põhivalijatest.
omadused
Nagu juba mainitud, võimaldavad atribuudid kujundada HTML -lehtede välimust. Peamised tehnikad on järgmised:
- Shortland: Seda kasutavad kõik veebidisainerid. See võimaldab teil luua lakoonilisemaid ja hõlpsamini loetavaid stiililehti, sest selle kaudu saate korraga määrata erinevate omaduste väärtuse.
- Internet Exploreri HasLayout: See on põhimõtteliselt CSS-iga seotud veaparandaja, mis tugineb nii brauseri funktsioonidele kui ka muudele vigadele.
- Puhas ujuk: see võimaldab parandada ujuvate elementide tekitatud probleeme, sundides konteineri elementide kõrgust.
- Sama kõrgusega elemendid: proovib, et lehe kõik veerud oleksid sama kõrgusega. See põhineb CSS -i kuva omaduse kasutamisel.
- Tüpograafia: need on tehnikad, mis tagavad, et kasutajad näevad lehe kujundamisel kasutatud kirjatüüpi õigesti, olenemata kasutatavast fondist.
CSS -i lisamise viisid HTML -i
Tänu CSS -i paindlikkusele saab disainer valida, kuidas nad soovivad lisada stiililehti HTML -dokumentidesse. Need on:
- Samas HTML -dokumendis: see on ideaalne, kui teil on määratletud vähe stiile või kui soovite lisada täiendavaid stiile konkreetsele HTML -lehele. See saavutatakse märgendi abil y sólo pueden ubicarse en la cabecera del documento.
- Välisfailis: sildi järgi Stiilid on lingitud HTML -lehtedega lihtsa CSS -faili kaudu. CSS -fail sisaldab kõiki kaasatavaid stiile ja leht võimaldab linkida kõik vajalikud failid. Sama faili saab korraga lisada mitmele lehele, mis tagab sisu ühtluse kõigil. See on tänapäeval kõige laialdasemalt kasutatav vorm.
- HTML -elementides: see nõuab iga elemendi stiili eraldi määratlemist, mis muudab selle HTML -disainerite kõige vähem kasutatavaks meetodiks. Seda kasutatakse ainult väga spetsiifilise stiili lisamiseks dokumendi ühele elemendile.
Vahendite määratlus
Peamised CSS -stiililehtede rakendamiseks kasutatavad seadmed on: printerid, ekraanid, projektorid, televiisorid, mobiilseadmed. Igaühe jaoks on olemas konkreetne kirjeldus, mis võimaldab stiili määratleda. Enim kasutatakse ekraani, et määrata dokumendi välimus ekraanil; printida, viidates dokumendi välimusele trükkimise osas; ja pihuarvuti, mis on suunatud dokumentide vaatamisele mobiilseadmetes.
Nüüd, nagu me varem mainisime, võimaldab CSS muuta dokumendi stiili sõltuvalt selle kuvamiseks kasutatud kandja või seadme funktsionaalsusest. Sel viisil kehtivad järgmised meedia määratlemise reeglid:
- @Media stiil: võimaldab kiiresti ja otseselt tuvastada meediumi, millele reegli moodustavat stiili rakendatakse. Selle nimi kirjutatakse kohe @media järele. Kui sama stiili jaoks on mitu meediat, kirjutatakse kõigi nimed komadega eraldatuna. Seda tüüpi määratluse näide on: @meedia ekraan {body {font - size: 13px}}, mis tähendab, et fondi kuvamissuurus ekraanil peab olema 13 pikslit.
- @import: kasutatakse väliste failide linkimisel HTML -dokumentidega. Selleks määratletakse pärast @import tippimist CSS -faili URL, millele järgneb kandja nimi, millele stiili rakendatakse. Näiteks: @import url ("printer_styles.css") print. See tähendab, et dokumendi printimisel tuleb välise CSS -faili stiilid laadida. Mitme meedia puhul tuleb nende nimed komaga eraldada. Kui meediat pole reeglis täpsustatud, saab brauser aru, et seda stiili tuleb rakendada kõikidele meediumitele võrdselt.
- <link>: Seda kasutatakse ka siis, kui soovite lisada stiilid, mis on lingitud erinevate väliste CSS -failide kaudu. Selle ülesehitus on natuke keerulisem, kuna see nõuab meediatribuudi lisamist iga faili iga stiili jaoks. Selle põhivorm on järgmine: <link rel = "styleheet" type = "text / css" media = "screen" href = "basic.css" />. Mis näitab, et kui dokumenti vaadatakse läbi ekraani, tuleks arvesse võtta CSS -failis sisalduvaid stiile.
- Meetodite segamine: põhimõtteliselt võimaldab see vahendite määratlemist kolme eelneva viisi kombinatsiooni abil. @import url (“section_styles.css”) ekraan; @media print { / * Printeripõhised stiilid * /}. See tähendab, et ekraanil kuvatavad stiilid pärinevad failist, mis on lingitud märgendiga <link> ja mis on lisatud reeglisse @import. Lisaks on printimisstiil määratletud reegliga @media.