CSS-i sissejuhatus
Selles õpetuses õpime CSS-i kontseptsiooni, selle toimimist, kasutamist, kuidas see muudab asjad paremaks ja mitmeid muid CSS-i aspekte. Noh, kas teil on aimugi veebi kujundamise kohta? Kui teie vastus on jah, siis armastate seda õpetust ja kui ei, siis palju õnne! Te uurite veebidisaini kõige ilusamat osa.
Mis on CSS?
Saame aru, mis on CSS ja mis sellest tegelikult aitab. Peate olema näinud veebisaidid. Näiteks kui avate Facebooki, saate interaktiivse ekraani, kus saate pilte vaadata, videot mängida, kommentaare kirjutada ja mitmeid toiminguid teha. Noh, mu sõber, seda kutsume veebileheks. Seega vajame veebilehe loomiseks HTML-i, mis on märgistuskeel, mida kasutatakse veebilehe struktuuri loomiseks.
Piirang HTML-iga on see, et me saame veebilehele anda ainult kuju ja suuruse, kuid ei saa muuta seda atraktiivseks. Siin on koht, kus see sisse tuleb. See tähistab kaskaadlaadide lehte, mis võimaldab meil kasutada erinevaid atribuute Veebileht näeb välja ilus, atraktiivne või professionaalne. Tabelite või osade struktuuri muutmine, teksti värvimine, veerise määramine ja polsterdamine, teksti fondi valimine on mõned asjad, mida selle abil teha saame.
Definitsioon
Seda võib määratleda kui stiililehe keelt, mida kasutatakse veebilehe ilme või struktuuri muutmiseks. Väga lihtsustatult öeldes on see keel, mida kasutatakse veebilehe kaunistamiseks. Veebileht koosneb tavaliselt struktuurist, kujundusest ja kliendi saidi funktsionaalsusest. Struktuuri pakub HTML, kliendi saidi funktsionaalsust pakub skriptikeel nimega JavaScript ja kujunduse pakub CSS.
CSSi praegune versioon on CSS 4, mis ilmus tagasi 24. märtsil 2017. Viimane versioon on kiirem kui viimane versioon, mis oli CSS 3. Seda ei saanud üksi kasutada ja selle efekti rakendamiseks tuleb see integreerida HTML-iga. Selle HTML-iga integreerimise viisist lähtuvalt oli seda kolme tüüpi: tekstisisene, sisemine ja väline. Sisesisesed koodid peavad olema kirjutatud samal real, sisemised, koodid peavad olema määratletud peasildi sees oleva ja välise stiilimärgistuse vahel, fail peab olema ühendatud HTML-lehega.
Kuidas teeb CSS töötamise nii lihtsaks?
Kaskaadne stiilileht muudab veebilehega suhtlemise natuke lihtsamaks. See võimaldab meil kujundada veebilehe viisil, mis pakub head kasutuskogemust ja võimaldab kasutajal asja hõlpsalt navigeerida. See portree portreteerib midagi inimväärset, mida pole võimalik pelgalt HTML-iga teha. Lisaks eelisele muudab see lehe pisut raskemaks, kuid teisest küljest saaks seda vastavalt kasutada ka veebilehe suuruse haldamiseks.
Ühelt poolt, kus see pakub kasutajatele lihtsat tööd, pakub see teiselt poolt lihtsust ka veebidisaineritele. Selle põhjal, kui palju CSS-koode peate lisama, saate valida CSS-i sisemise ja välise stiili vahel. Iga stiilimisviisiga pakub see väga hõlpsat viisi stiili tutvustamiseks veebilehel.
Mida saate CSS-iga teha?
Selles jaotises näeme konkreetselt, mida saame CSS-i abil teha. Siiani saime aru, et CSS-i kasutatakse eriti veebilehe kaunistamiseks. Nüüd on aeg kontrollida, kuidas see meile abiks võiks olla. Allpool on mõned punktid, mis näitavad CSS-i võimalusi.
1. Veebilehe struktuuri muutmine
Saame muuta tabeli ja divs kuju, mis annab veebilehele struktuuri. See pakub atribuute, mida saaks kasutada ristküliku tippude kõverdamiseks ja palju selliste toimingute tegemiseks.
2. Fondiga töötamine
See võimaldab meil muuta fonti ja teksti värvi. Me võime valida kummagi värvi, kirjutades lihtsalt selle nime vastavasse atribuuti. Lihtsamalt öeldes võib see kaunistada ka tekste.
3. Parandab kasutajakogemust
Kaskaadlaadsete stiililehtede abil saab arendaja parandada veebilehtede kvaliteeti, millel on lõpuks hämmastav kasutajakogemus. See teeb kasutajatele navigeerimise lihtsaks.
4. Looge häid efekte
Kui kasutate CSS-i üks kord, saate selle efekti rakendada nagu variefekt, mis muudab asjad väga atraktiivseks. Varipõlvkond võiks osaleda struktuuris ja ka muudes elementides, näiteks tekstis.
Töö CSS-iga
Siit tuleb kõige kasulikum ja olulisem jaotis, mis annab meile idee, kuidas me saaksime CSS-iga töötada, seda rakendada või veebilehte sellega integreerida. Siin näeme, kuidas töötada erinevat tüüpi stiilidega. Alustame siis.
1. Inline CSS
Inline CSS panime CSS-koodid koos HTML-sildiga ühte ritta. Tavaliselt kasutame tekstisisest CSS-i siis, kui peame seda vormingut kasutama ainult üks kord või kui vormindamine vajab ainult mõne atribuudi lisamist. Ehkki seda ei kasutata veebiarenduses kuigi sageli, peaksid nad kõik õppima.
Sisend
Väljund
- Siin on sisendi pilt, millest näete, et koodid on kirjutatud lavendli värviga ja esinevad koos HTML-koodiga.
- Pealkirja veeriste lisamiseks vasakpoolsest servast vasakpoolne atribuut on kasutatud ja 50 PX on selle atribuudi väärtus, mis määratles, kui pikk peaks olema varu.
- Pealkirja värvi muutmiseks on kasutatud värvi atribuuti. Punane on selle atribuudi väärtus, mis tegi päise punaseks.
2. Sisemine CSS
Kaskaadlaadi lehte peetakse sisemiseks, kui funktsioonid on määratud suvalisele sildile, nii et kõikjal, kus silt on määratletud, pärib see vaikimisi kõik sellele sildile määratud omadused. Sisemise tutvustamiseks tuleb CSS-kood kirjutada peasektsiooni stiilsildi vahele.
Sisend
Väljund
- Siin rakendasime h1-sildis samu atribuute, mida olime teinud CSS-i näites. Ainus erinevus on selles, kuidas see on veebilehel määratletud
- Sisemise rakendamiseks kirjutatakse see kood vahemikku
- h1 (atribuudid ..) tähendab atribuute, olenemata atribuutidest, rakendatakse neid automaatselt kõigile tekstidele, mis kirjutati h1 sildi vahele.
3. Väline CSS
Seda nimetatakse väliseks, kuna seda tüüpi korral tuleb luua CSS-fail, mis seejärel lingitakse veebilehega, et tutvustada määratletud siltide funktsiooni. See muudab peamise veebilehe suuruse väga väikeseks, kuna sellele veebilehele pole vaja kirjutada CSS-koode. Kõik kood sisaldub eraldi CSS-failis, mis lingitakse selle veebilehega.
HTML-faili sisestus
CSS-faili sisend
Väljund
- Oleme siin loonud eraldi faili nimega test.css, mis on lingisildi abil lingitud peamisele HTML-i lehele ja see on päris ja stiili atribuut.
- CSS-failis on atribuudid määratletud h1-sildi jaoks.
- Pärast CSS-faili edukat linkimist HTML-failiga pärines see faili test.css abil h1-sildi funktsioonid.
Eelised
See lisab veebilehele korralikkuse. See muudab veebilehe paremaks suhtlusplatvormiks, kus kasutajad saavad veebirakendusega töötada mugavalt. CSS-i abil on võimalik saavutada palju asju. Jälgime CSS-i ühiseid eeliseid, mis muudavad selle väga oluliseks osaks veebi kujundamisel või konkreetselt kasutajaliidese arendamisel.
1. Lihtsustab kasutajaliidest
Mõnikord tundub pelgalt HTML-i abil loodud veebileht töötamiseks väga jube. Lisab veebilehele hämmastuse ja muudab selle lahedaks ja lihtsaks, et kasutaja saaks oma tööle keskenduda.
2. Kaunista veebileht
Kaskaadlaadistiku keelt kasutatakse veebilehe kaunistamiseks nii, et see võiks välja näha korralik. CSS-is on mitu atribuuti, mida saab kasutada ühiselt veebilehe kujundamiseks.
3. Kohandage veebilehe paigutust
Sellel on erinevad atribuudid, mis töötavad koos veebilehe struktuuriga ja muudavad selle arendaja soovitud viisil. See võimaldab veebidisaineritel kohandada rakenduse liidest nii, et see sobiks soovitud domeeniga.
4. Lihtne integreerida
Selle kaudu pakub meile palju eeliseid, CSS-i integreerimine HTML-iga pole isegi pisut keeruline. CSS-i tutvustamiseks veebilehel on mitmeid viise ja mõlemat saab kasutada väga hõlpsalt.
5. Lihtne kodeerimine
Saime juba aru, et CSS ei ole programmeerimiskeel, vaid stiilikeel. Seal on fikseeritud ja piiratud arv atribuute, mida tuleb meeles pidada, mis muudab CSS-i kodeerimise tõesti väga lihtsaks.
Vajalikud oskused
- On väga oluline mõista, millist oskuste kogumit peame selle nimel töötama. Noh, selle jaotise kaudu on meil idee, mida me CSS-is kodeerimiseks vajame. Kuid jällegi viime läbi oskused, mis aitavad meid CSS-i kodeerimisel.
- Nagu juba arutatud, pole CSS programmeerimiskeel, seega on selge, et siin ei nõuta loogikat, kuid jah, sellel on mõned atribuutide komplektid, mis väidetavalt tuleks meelde jätta. Nõude põhjal saate kohandada vastava atribuudi väärtusi, kuid enne väärtuste lisamist atribuudile peame teadma, milliseid väärtusi see aktsepteerib.
- Selle kodeerimiseks peaks meil olema HTML-i mõistmine, kuna CSS-i eesmärk on selle kenasti HTML-i paigutusega integreerimine, et saaks tekkida korralik veebileht. Nii et peamised oskused, mida peame CSS-is kodeerima.
Reguleerimisala
See on igihaljas stiilikeel, mis laseb meil veebilehte kujundada. Me kõik teame, et Internet on tänapäeval suur asi ja kasvab pidevalt. Kuna Internet on mõeldud peamiselt veebisaitide pakutavale teabele juurdepääsu saamiseks, jätkab veebidisainer mitmete võimaluste kasutamist. Lisaks sellele, et olla veebidisainer, saab kasvatada ka oma karjääri kasutajaliidese arendamisel.
Kes on CSS-tehnoloogia õppimiseks õige publik?
On väga ilmne, et kõik, kes soovivad midagi õppida, võiksid olla parimad vaatajaskonnad, kuid kui olla täpsemad, siis võiksid CSS-i õppida õpilased, kellel on oma ainetes veebidisain. Professionaalsel tasemel on see veebidisaineritele kohustuslik tehnoloogia. Olen näinud paljusid inimesi, kes on alati soovinud luua oma veebisaidi, et nad saaksid olla ka selle õpetuse või CSS-tehnoloogia parim publik.
Kuidas see tehnoloogia aitab teid karjääri kasvamisel?
See mängib veebi kujundamisel olulist rolli. Interneti-kasutajate hüppeliselt suurenedes peaks suurenema ka veebisaitide arv. Ja kui nõudlus suureneb, on kasv jõuline. Järgmise paari aasta jooksul peaks veebidisainerite arv kiiresti kasvama.
Inimesed, kes töötavad veebidisainerina mis tahes organisatsioonis, saavad seda tehnoloogiat väga hästi ja teevad tavaliselt ka vabakutselist tööd. Veebiplatvormid nagu Freelancer.com, upwork.com jms ühendavad vabakutselisi inimestega, kes soovivad vabakutselisi palgata. Veebikujundus on midagi, mida saaks teha ka eemalt, nii et välismaalt projektide hankimise võimalus on tohutu.
Järeldus
See on parim ja ülioluline osa veebidisainist. See võimaldab arendajal muuta veebilehe palju paremaks, kui seda saaks teha pelgalt HTML-i kasutades. Just stiilikeel on võimeline töötama veebilehe struktuuriga ja võib siltidele lisada mitmesuguseid funktsioone, et asjad hästi välja näeksid. See on alati olnud parim mitme tehnoloogia hulgas ja säilitab oma positsiooni kauem.
Soovitatavad artiklid
See on olnud teemaks Mis on CSS. Siin arutasime CSS-i ja ka seda tehnoloogiat rakendavate tippettevõtete toimimist ja eeliseid. Lisateavet leiate ka meie muudest soovitatud artiklitest -
- Erinevused CSS ja CSS3 vahel
- Kuidas CSS-käske kasutada?
- Mis on PowerShell?
- Mis on Python?