HTML ja CSS on veebilehe struktuuri peamised osad. Uue veebiarendajana on väga oluline omandada HTML-i CSS-i põhitõed. HTML-i õppimine tähendab, et saate teada, kuidas luua oma veebilehe struktuuri ja raami. CSS-i ehk Cascading Stylesheets lisamine võimaldab teil muuta oma HTML-i struktuuri stiilide abil elavamaks.
1
Mõelge HTML-i struktuurile kolmeks osaks. Silt Head on esimene jaotis. See sisaldab kõiki veebilehe eesmärgi ja teabega seotud andmeid. See hõlmab metaandmeid, pealkirja, väliseid failiallikaid jne. Mitmed veebisaidid sisaldavad ka olulist teavet veebisaidi liikluse analüüsi, lehe asetuse jms kohta. Kõik need sisalduvad selles segmendis.Järgmine on kehasilt. See on veebilehe struktuuri peamine keskus. Siin on mainitud veebisaidi traatraami või ehitusplokke. Tegelikult mainite siin selles ruumis elemente ja silte. Vastavalt sellele, millises järjekorras mainite, paigutatakse elemendid lõplikule veebilehele. Näiteks kui kirjutame vormisildi ja seejärel pildisildi; leiame, et meie veebilehel kuvatakse vorm ja selle all pilt (kuid loomulikult saab neid järjestusi ja positsioone muuta kõrgekvaliteedilise CSS-iga). Seega, kui teil on kujundus käes, jätkake elementide lisamist vastavalt oma disainivoolule . Veebilehe erinevaid segmente (vasak, parem , keskel) tuleb käsitleda vastavalt. Selleks on meil tabeli- või loendisildid. Õppige kõiki HTML-is saadaolevate siltide tüüpe ja mõistke nende rakendamist. Lõpuks tuleb jaotis Jalg. See jaotis sisaldab tavaliselt kõike, mis on nähtav veebilehe jaluse piirkonnas. Tavaliselt me seda siiski eraldi ei lisa. Selle asemel lisatakse jaluse sisu kehale endale
2
Saate aru, kuidas CSS mõjutab. W3C võttis kasutusele CSS-i ehk Cascading Style Sheets, et vähendada HTML-faili suurust, saada puhtam kood ja sünkroonida stiile HTML-iga eraldi. Need pole muud kui eraldi failid, mis sisalduvad HTML-i peasektsioonis ja sisaldavad HTML-dokumendi erinevate elementide stiilimääratlust. CSS-i määratletud stiilikoodid hõlmavad fondi käitumist, värvi, kõrgust, laiust, kuvamisstiili jne. sisaldama ka käitumismääratlusi hiirekursori ja hiire väljaviimise sündmuste jaoks. Tegelikult on CSS3 viimase lisamisega stiil täiustatud väga erinevale tasemele. Nüüd saate luua animatsioone, teisendusi ja üleminekuid – kõike seda CSS-koodide põhjal. Enamasti kasutame CSS-i laiuse, kõrguse, värvi, fondi jne deklareerimiseks. Need on kõige levinumad stiilivalikud, mis aitavad meil määrata välimust ja asukohta. mitmest HTML-i elemendist.
3
Soovi korral tehke seda klasside ja ID-de abil. See on kõige levinum protseduur ja seda järgitakse kogu Interneti-maailmas meisterliku löögina. Lisage oma HTML-dokumendis elemendi deklareerimise ajal atribuut “klass” ja määrake sellele kindel nimi. Sama “id” puhul. Nüüd kirjutage oma CSS-faili lihtsalt klassi nimi või ID nimi ja määrake oma stiil. See konkreetne element tuletab automaatselt stiilimääratlused. Klassi nimega deklareerimisel lisage CSS-faili ette punkt. ID-de puhul lisage nime ette räsi. See on süntaks. Nüüd kõige olulisem osa. Mis vahe on klassidel ja ID-del? Nad ei saa olla samad, kui nad eksisteerivad koos. Jah, erinevus on tohutu. HTML-dokumendis saate sama klassinimega nimetada nii palju elemente, kui soovite. Kuid ID-d peavad olema pühendatud ühele elemendile. Seetõttu kasutatakse klasse, kui vajame sama stiili HTML-lehel mitme üksuse jaoks ja ID-sid ainult ühe üksuse kujundamiseks.
4
Juurdepääs DOM-i (andmeobjektimudeli) elementidele või HTML-elementidele nende sildinimede järgi. Seega, kui tahame eemaldada äärised kõigilt lehe pildisiltidelt; kirjutame lihtsalt “img” ja deklareerime “piir: puudub”. See kehtib aga kõigi dokumendil olevate pildimärgendite kohta. Võib-olla mõtlete, kas saame kuidagi osutada konkreetsele elemendile (näiteks pildisildile), kuid selle elemendi nimega? Jah, on olemas viis. Sukeldu järgmisse punkti.
5
Juurdepääs konkreetsetele elementidele ka nende sildi nime järgi. Peate siiski läbima kõik nende emaelemendid kuni nendeni. See oli natuke raske või mis? Okei. Võtame näite. Oletame, et meil on vormielement ja seejärel sisendelement selle sees. Meil on ka vormiväliseid sisendelemente, näiteks lihtsalt hulkuvaid. Niisiis, kui me nüüd järgime ülaltoodud punkti ja deklareerime sisendelementide stiili; neid stiile rakendatakse nii vormi sees kui ka väljaspool sisendelemente. Kui tahame, et stiil realiseeritaks ainult vormi sees olevale elemendile, saame seda teha – vormi sisend { /* Deklareeri stiil siin */ }. Niisiis, pange tähele, kuidas pääsesime juurde sisendelemendile, mida tahame konkreetselt stiilida. Kõigepealt vanem ja seejärel põhielement. Sel viisil visatakse välised sisendelemendid kõrvale.
6
Andke endale aega õppimiseks. Kodeerimise veteraniks saamine võib võtta üsna palju aega. Kuid siin on mõned teemad, mis aitavad teil põhimetoodikaid mõista ja standardseid HTML-lehti kiiresti kujundada.
7
Õppige oma veebilehe kujundusstruktuuri õigesti rikkuma. Mõistke saadaolevaid silte ja uurige, kuidas saate neid kasutada oma lehe lihtsaimaks struktuuriks jaotamiseks.
8
Tea, et CSS Box Model on väga oluline. Elemendi laiuse ja kõrguse mõistmine on esimene samm. Kuid pärast seda peate õppima, kuidas polsterduse ja veerise abil vahekaugust reguleerida. Teatud juhtudel marginaalid ei ole kohaldatavad. Seetõttu peate kasutama polsterdust ja vastupidi. Proovige välja selgitada, mis need täpselt on ja kuidas neid kasutatakse.
9
Õppige ujukite ja nende kasutusvõimalusi. CSS-i ujuk on veel üks väga oluline stiili aspekt. Ujuv sisu vasakule ja paremale mängib veebisaidi struktuuris olulist rolli.