Įvadas į html ir css klases

Savaime suprantama, interneto plėtra yra didžiulė. Didelė to dalis yra todėl, kad beveik visi naudojasi žiniatinkliu. Tačiau šioje srityje trūksta kūrėjų, todėl internetinių svetainių kūrimo programa taip lengvai prieinama ir nemokama. Turėdami tai omenyje, šiek tiek parodysime, kas yra HTML ir CSS. Tiksliau, mes parodysime, kaip veikia „klasės“.

Mes nepradime jūsų nuo pradžių, nes jau yra daugybė nemokamų mokymo programų. Vietoj to, mes konkrečiai parodysime, kaip veikia užsiėmimai, nes tai yra būtinas jūsų svetainės stiliaus kūrimo komponentas. Mes taip pat manėme, kad galbūt verta apie tai atsižvelgti prieš paskelbiant „Twitter“ „Bootstrap“ API, nes klasės taip pat yra būtinas komponentas.

Kalbant apie atsakomybės atsisakymą, jei esate visiškai naujas HTML ir CSS, tai tikriausiai nėra gera pradžia. Vis dėlto, jei esate su juo susipažinęs, pasiimti neturėtų būti per sunku. Tačiau, jei jūs ieškote išsamios instrukcijos pradedantiesiems, internete yra daugybė puikių variantų. Galima paminėti keletą „FreeCodeCamp“, „The Odin Project“, „CodeAcademy“, „Code School“, „Team Treehouse“, „Udacity“ ir dar daugybę kitų. Jei pasirinksite pradėti gilintis į vieną iš jų, labai rekomenduočiau prilipti prie vieno (pvz., „Free Code Camp“) ir baigti prieš pradedant kitą, nes „pagrindinis“ turinys gali būti daug pasikartojantis.

Nepaisydami to, įsigilinkime į kokias klases.

Kaip veikia klasės

Užsiėmimai yra nepaprastai naudingi. Jie pasikartoja iš HTML stiliaus. Be klasių, jūs žymėtumėte kiekvieną žymėjimo elementą atskirai. O kas, jei turėtumėte du tuos pačius elementus, bet norėtumėte stilių kiekvienam iš jų skirtingai? Tai būtų visiška netvarka. Štai kodėl mes turime klases. Klasės prideda tam tikrą jūsų HTML struktūros struktūrą, leidžiančią išlaikyti kodą gana švarų. Ne tik tai, bet ir klases galima naudoti ne kartą. Kitaip tariant, jums niekada nereikės du kartus kurti tų pačių stiliaus taisyklių.

Štai kaip atrodo mūsų klasės žyma:

Kaip matote, pagal savo kūno etiketę turime du

elementai su skirtingomis klasėmis. Pirmas

žymos klasė yra „head1“, o antrosios - „head2“. Taigi, mūsų CSS, užuot pritaikę stilių tik „

elementą, mes galime pritaikyti stilių toms atskiroms klasėms. Kodėl mes norėtume tai padaryti?

Pagrindinė priežastis yra ta, kad nenorite visų savo

elementai turėtų būti vienodi. Kuriant svetainę tai sukeltų daug galvos skausmų, be to, svetainės neatrodytų labai puiku. Klasės leidžia mums pritaikyti stilių tik tam vienam žymos egzemplioriui, o ne visiems

žymės visame dokumente. Taigi, kaip jūs rašote klasę HTML? Kaip šitas:

Šiek tiek turinio

„Klasės“ ypatybę galite pridėti prie beveik bet kurio HTML elemento.

Puiku! Taigi, mes turime klases, bet dabartinėje padėtyje jie faktiškai nieko nedaro. Taip yra todėl, kad kol kas prie klasės nepridėjome jokių stiliaus taisyklių. Norėdami tai padaryti, turėsime sukurti atskirą .css dokumentą. Aš tai tiesiog pavadinsiu main.css. Tame dokumente mes apibūdintume klasę taip:

Norėdami pasirinkti klasę, kurią norime stiliuoti, darome taip:

.head1 {spalva: raudona; tekstas lygiuoti: centras; }

Garbanotų petnešų viduje yra visos „taisyklės“ (arba stiliaus), kurias mes taikome tai klasei. Yra daugybė skirtingų taisyklių, kurias galite pritaikyti klasėje. Mano atveju, aš pakeičiau teksto spalvą į raudoną naudodama „spalvų“ taisyklę, o centrą aš panaudojau „teksto suderinimo“ taisykle. Visą CSS taisyklių sąrašą ir jų dokumentus galite rasti „Mozilla“ kūrėjų tinkle.

Dabar mūsų stilius vis dar netaikomas klasėms mūsų HTML dokumente, ir todėl, kad dar nesusiejome dviejų failų. Grįžkite į savo HTML failą ir žymą, norėsite susieti savo CSS failą atlikdami šiuos veiksmus:

HTML dokumentas turėtų atrodyti taip:

Ir jūsų bandomasis projektas internete turėtų atrodyti taip:

Norėdami gauti išsamesnį vaizdo įrašą, kuriame aprašomi šie veiksmai, skaitykite toliau.

Vaizdo įrašas

Išvada

Ir viskas, kas yra klasėse! Jie tikrai lengvai suprantami. Akivaizdu, kad didelėse ir populiariose svetainėse, kuriose lankotės, klasių taisyklės yra daug sudėtingesnės nei tai, ką mes aprašėme, tačiau jų pagrindinė forma, tai yra, kaip jie veikia.

Jei turite klausimų ar ilgai laukėte nesklandumų, būtinai praneškite mums žemiau ar daugiau pateiktuose komentaruose PCMech forumuose! Arba, jei jus domina išsamus HTML / CSS vadovas pradedančiajam „PCMech“, būtinai praneškite mums ir tai!