\n Veebisaidi kujundamine on \u00fcks keeruline \u00fclesanne, mille edukaks t\u00e4itmiseks on vaja mitmeid t\u00f6\u00f6riistu ja funktsioone, kuid veebilehe kujundamisel pakutava tehnoloogia ja t\u00f6\u00f6riistade edenedes on see \u00fclesanne varasemate aegadega v\u00f5rreldes muutunud t\u00f5husamaks ja tulemuslikuks.\n<\/p>\n
\n \u00dcks olulisemaid funktsioone, mida veebisaidi kujundaja peab arvestama, on CSS (Cascading Style Sheet) kasutamine.\n<\/p>\n
\n CSS ehk Cascading Style Sheet on keel, mida kasutatakse veebilehtede esitlemiseks veebisaidil, mis h\u00f5lmab v\u00e4rvide, veebilehe paigutuse ja fontide kasutamist. See v\u00f5imaldab esitleda veebilehe \u00fchilduvust erinevatel v\u00e4ikeste ja suurte ekraanide vidinatel v\u00f5i isegi kui tegemist on printimisprotsessiga. CSS ei p\u00f5hine HTML-il, kuid seda saab kasutada mis tahes XML-p\u00f5hise m\u00e4rgistatud keelega. See s\u00f5ltumatus HTML-ist aitab CSS-il t\u00e4ita veebisaitide haldamise, stiililehtede jagamise lehtede vahel ja lehtede redigeerimise erinevate teemade ja keskkondade j\u00e4rgi. Seda peetakse \u00fcldiselt struktuuri v\u00f5i sisu eraldamiseks esitlusest. Aja jooksul on CSS-ist saanud eelistatuim veebikujunduse meetod, millest disainerid saavad mitmel viisil kasu.\n<\/p>\n
\n Oletame, et kui soovite oma veebikujundust muuta, peate muutma oma veebisaidi iga lehte, mis v\u00f5tab palju aega ja vaeva. CSS v\u00f5imaldab teil muuta kogu veebisaidi kujundust, tehes muudatusi veebisaidi \u00fchel lehel. See muudab otsingumootori protsessi lihtsamaks, kuna see ei n\u00e4e vaeva teie \u00fcleslaaditava sisu “lugemisega”, kuna seda peetakse puhtaks kodeerimismeetodiks, ja see j\u00e4tab teile ka rohkem sisu kui koodi, mis on teie veebisaidi jaoks h\u00e4davajalik. otsingumootoreid on uuendatud, mis t\u00e4hendab, et brauseri valikuid on rohkem kui kunagi varem. CSS-i stiililehed aitavad veebisaidi kohandatavust ja tagavad, et rohkem k\u00fclastajaid saavad teie veebisaiti vaadata just nii, nagu soovite. Seal on palju muud muud veebidisaini CSS-i kasutamise eelised,\n<\/p>\n
\n Me k\u00f5ik teame, kui kurnav on arvukate veebilehtedega veebisaidi iga pealkirja ja alamrubriigi nummerdamine; teeksite seda k\u00e4sitsi v\u00f5i skripti abil. Kuid CSS v\u00e4listab iga pealkirja ja alamrubriigi nummerdamise CSS-loendurite abil. CSS-loendurid sisaldavad kahte elementi, milleks on “loenduri l\u00e4htestamine” ja “loenduri suurendamine”. Loenduri l\u00e4htestamist kasutatakse tavaliselt loenduse l\u00e4htestamiseks ja loenduri juurdekasvu kasutatakse numbrite lisamiseks. Samuti on tingimusliku arvu valik, kui soovite, et number algaks konkreetsest punktist, saate nii m\u00e4\u00e4rata l\u00e4htestusnumbri.\n<\/p>\n
\n Fontide v\u00fcrtsitamine ei ole kunagi halb m\u00f5te, kuna see t\u00f5mbab lugejaid ligi, kuid allajoonitud fontidega loovuseks on antud v\u00e4ga piiratud v\u00f5imalused. M\u00f5nikord tahame allajoonida erineval viisil, lisades sellele veidi loovust, n\u00e4iteks punktiir- v\u00f5i katkendjoont, selle asemel, et fontide all oleks tavaline lihtne joon. Me valime “\u00e4\u00e4rise p\u00f5hja”, kuna valikuid pole, kuid “\u00e4\u00e4rise alumine” ei ole efektiivne, kui tekst, mida allajoonite, murrab. CSS3 \u00fcletab barj\u00e4\u00e4ri, kuna pakub teksti kaunistamiseks kolme uut omadust. “Tekstikaunistuse v\u00e4rv”, “teksti kaunistusjoon” ja “teksti kaunistusstiil” pakuvad veebilehel leiduvate tekstidega loomingulisust. Nende atribuutide abil saate kujundada oma alla- ja \u00fclekriipsutamist ning isegi panna tekstid veebilehel vilkuma.\n<\/p>\n
\n HTML on vabastanud meid \u00f5igete k\u00f5verate jutum\u00e4rkide sisestamisest, kuna m\u00e4rgend “” n\u00e4itab tekstisiseseid tsitaate. Kuid oletame, et soovite, et teie tsitaadil oleks rohkem kui topeltjutum\u00e4rke v\u00f5i rohkem pesastatud jutum\u00e4rke, siis seisate selles olukorras silmitsi takistusega. Kuid CSS2 hinnapakkumiste kaudu ei ole takistused teie jaoks enam probleemiks, kuna saate sellega oma hinnapakkumise eelistuse m\u00e4\u00e4ratleda, muutes pakkumise just selliseks, nagu soovite.\n<\/p>\n
\n Oleme k\u00f5ik silmitsi olukorraga, kus me puutume kokku suure tabeliga, mille sisu suurus on lahtri kohta erinev ja seda on v\u00f5imatu teha soovitud laiusele v\u00f5i m\u00e4\u00e4ratud laiusele, hoolimata sellest, kui k\u00f5vasti proovite, l\u00f5puks me k\u00f5ik eba\u00f5nnestuda. CSS pakub teile ainulaadset omadust taltsutada laud “tabelipaigutusega”. Atribuut kasutab fikseeritud v\u00e4\u00e4rtuse juhiseid, kui tabelile fikseeritud paigutuse k\u00e4stakse, kujundatakse tabel ja lahtrid antud v\u00e4\u00e4rtuste j\u00e4rgi. Selle m\u00e4\u00e4rab kasutaja, kuid mitte sisu, ja seda atribuuti toetavad k\u00f5ik brauserid.\n<\/p>\n
\n Veebilehel on alati teavet v\u00f5i sisu, millele soovite, et teie vaataja t\u00e4helepanu p\u00f6\u00f6raks, kuid mitmete muude veebisaidil pakutavate v\u00f5imaluste korral keritakse seda teavet v\u00f5i sisu \u00fcles v\u00f5i alla. Teie soov saada see tekst kasutajatele lugemiseks j\u00e4\u00e4b puudulikuks. CSS pakub funktsiooni, mida kujundaja saab kasutada, et muuta see sisu v\u00f5i teave n\u00e4htavaks isegi siis, kui lehte keritakse alla v\u00f5i \u00fcles. Saate seda funktsiooni kasutada CSS-iga, kasutades asendit “kleepuv”, kus saate teabe v\u00f5i sisu jaoks fikseerida veebilehel teatud ala ja sisu j\u00e4\u00e4b n\u00e4htavaks seni, kuni konkreetset veebilehe ala \u00fcles v\u00f5i alla keritakse. Need toimivad nagu paigutatud elemendid enne kerimist ja seej\u00e4rel nagu fikseeritud elemendid, kui kerimine \u00fcletab selle l\u00e4ve.\n<\/p>\n
\n M\u00f5nikord, kui lisate pildi veebilehe keskele v\u00f5i k\u00fcljele, soovite, et teie sisu \u00fcmbritseks pilti kenasti pildi piirjoontega, kuid piiratud valikuv\u00f5imaluste t\u00f5ttu l\u00e4heb teie tekst alati tavap\u00e4raselt, pildi ristk\u00fclikukujulise kuju j\u00e4rgi. \u201eCSS-i kujundid” annab teile v\u00f5imaluse muuta p\u00f5hiviisi ja anda m\u00f5ista, nagu soovite. Sisu reguleerimiseks on antud kolm atribuuti, milleks on \u201ev\u00e4liskuju”, \u201ekuju veeris” ja \u201ekujundi l\u00e4vi”. Selle valiku abil saate kohandada oma sisu pildi \u00fcmbritsevaga nii, nagu soovite.\n<\/p>\n
\n Mitu korda, kui vajate veebisaidil kasutajalt teavet, teete v\u00e4ljad ja ruumi, et nad saaksid v\u00e4ljadele v\u00f5i t\u00fchikutele kirjutada. M\u00f5nikord on teatud teave, mida vajate, h\u00e4davajalik ja m\u00f5nikord on see teave valikuline. Oletame, et soovite edastada oma kasutajatele s\u00f5numi, et teave on oluline v\u00f5i valikuline ilma tekste kasutamata, see tundub v\u00f5imatu. Kuid saate kasutada CSS-i, et klassifitseerida need v\u00e4ljad valikulisteks v\u00f5i olulisteks, nende piiride v\u00e4rviga, n\u00e4iteks punase piiriga v\u00e4ljad on olulised ja sinise piiriga v\u00e4ljad valikulised.\n<\/p>\n
\n Kui teile ei meeldi teatud v\u00e4rvid, ei soovi te neid mingil viisil oma veebisaidil n\u00e4ha, kuid teatud hetkel on teie soov piiratud, kuna puudub v\u00f5imalus kohandada, n\u00e4iteks veebisaidi teksti esilet\u00f5stmisel pole palju v\u00f5imalusi esilet\u00f5stetud teksti v\u00e4rvi muutmiseks. Kuid CSS-i valikuelemendiga saate muuta isegi oma veebisaidil esilet\u00f5stetud teksti v\u00e4rvi ja teha esilet\u00f5stmise soovitud v\u00e4rviga.\n<\/p>\n
\n M\u00f5nikord on keeruline kontrollida, kas olete m\u00e4rkeruudu m\u00e4rkinud v\u00f5i mitte, lihtsalt v\u00e4ikese linnukese j\u00e4rgi kastis, kus veebilehel on mitu valikut. Lisaks veebilehe v\u00e4ikesele kontrollile v\u00f5ib kasutajatel olla palju abi, kui neil on veel \u00fcks m\u00e4rge, mis muudab veebisaidi kasutajas\u00f5bralikumaks. CSS katab seda aspekti ka oma valikuga “kontrolli klass”. See ei n\u00e4ita mitte ainult parempoolse linnukesega, vaid saate ka valikulise sisu m\u00e4rkekasti k\u00f5rval muuta kasutaja valitud v\u00e4rviga esilet\u00f5stmiseks, nii et suvandi mitten\u00e4htavuse t\u00f5ttu ei tekiks vigu.\n<\/p>\n
\n See on v\u00e4ga atraktiivne, kui veebisait p\u00f5hineb teemal nagu juturaamat, millel on samad fondid ja funktsioonid nagu siis, kui avate loo, mis algab s\u00f5nadega “onkord ammu” ja mille O on suurem kui teistel t\u00e4htedel. Saate muuta oma veebisaidi ilusamaks CSS-i abil, kasutades atribuuti “esimene t\u00e4ht”, mis sihib rea esimest t\u00e4hte ja muudab selle suure t\u00e4hega suuremaks, nagu lugude raamatuid, mida me varem lugesime.\n<\/p>\n
\n V\u00f5imalik, et olete n\u00e4inud allalaadimiseks v\u00f5i kasutaja teisele veebisaidile suunamiseks dokumenti, mis on lingitud pildi v\u00f5i veebisaidiga. Selle sammu \u00f5igeks muutmiseks v\u00f5ib kuluda palju t\u00f6\u00f6riistu. Kuid CSS on muutnud ka selle sammu lihtsamaks. Saate linkida oma veebi CSS-i atribuudiga “content:url()” ja lisada soovitud dokumendi lingi.\n<\/p>\n
\n Kui me r\u00e4\u00e4gime veebikujunduse loovusest, siis me ei piirdu ainult fontide ja siltide kasutamisega, vaid saame lisada ka veebisaidi loomingulise kujunduse tausta. Atraktiivse taustaga veebisait v\u00f5ib omada suurt rolli ainu\u00fcksi veebisaidi liikluse suurendamisel. Kuid kui me mitte ainult ei lisa atraktiivset tausta, vaid ka muudame tausta, et see veelgi p\u00f5nevam v\u00e4lja n\u00e4eks, annab see veebisaidi kujundusele olulise t\u00f5uke. CSS pakub parallaksiefekti, mis on efekt, mida kasutatakse tausta liikumiseks aegluubis. Kui kasutaja veebilehte alla kerib, liigub taustapilt edasi, kuid aegluubis, luues mulje heast veebidisainist.\n<\/p>\n
\n CSS v\u00f5i Cascading Style Sheet on veebikujunduse meetodit oluliselt m\u00f5jutanud, muutes selle t\u00f5husamaks ja m\u00f5juvamaks. See on pakkunud meile nii palju funktsioone, mida inimesed kipuvad m\u00f5nikord ignoreerima, kuid kui hoiate neid funktsioone ja omadusi meeles ning kasutate neid h\u00e4sti, paistab teie veebisaidi kujundus teiste veebisaitide seas silma, olles samal ajal kasutajas\u00f5bralik ja atraktiivne.\n<\/p>\n<\/p>\n