Mis vahe on ID-l ja klassil? CSS - mis see on

Sihtmärk CSS-i loomine

TOO MITU SAIT

Paigutus CSS-i abil.

Me kõik teame, mis on Internet, veebisaidid ja veebilehed. Pooled neist inimestest teavad, kust nad tulevad ja mis see on – veebileht. Ja veelgi vähem inimesi mõistab, kuidas tänapäeval veebilehte ehitatakse, milliseid tehnoloogiaid, reegleid ja standardeid kasutades. Ma ei räägi teile kogu serverist lehtede taotlemise ahelat. Minu ülesandeks on rääkida, kuidas lehed graafika ja teostuse poolest nii värvikaks ja huvitavaks osutuvad, et tahaks neid külastada ja külastada.

Tehnoloogiat, mis võimaldab teil brauserites saite nii värvikat kuvada, nimetatakse CSS-iks.

CSS on Cascading Style Sheets'i lühend – tõlgitud kui Cascading Style Sheets. Ametlik kirjelduskeel välimus dokument, mis on kirjutatud märgistuskeeles.

Kasutatakse peamiselt keeltes kirjutatud veebilehtede välimuse kirjeldamise ja kujundamise vahendina HTML märgistus ja XHTML.

Inimkonna ainulaadne leiutis, mis hõlbustab oluliselt veebisaitide loomist. CSS töötab fontide, veeriste, tabelite, polsterduste, piltide jms abil ning esindab palju muud rohkelt võimalusi kui lihtne html.

Stiil on parameetrite kogum, mis määrab objekti välise esituse konkreetses keskkonnas.

CSS-i kasutavad veebilehtede loojad värvide, fontide, plokkide paigutuse ja muude nende veebilehtede välimuse aspektide määramiseks. CSS-i arendamise põhieesmärk oli kirjelduse eraldamine loogiline struktuur veebileht (mis on toodetud HTML-i kasutades või muud märgistuskeeled) selle veebilehe välimuse kirjeldamisest (mis on nüüd loodud ametliku CSS-i keel). See eraldamine võib suurendada dokumentide juurdepääsetavust, pakkuda suuremat paindlikkust ja kontrolli selle esituse üle ning vähendada struktuurse sisu keerukust ja kordusi.

Fakt on see, et algselt kasutati html-i ainult dokumendi sisu märgistamiseks. Need. selle abiga näidati, et see on lõik ja see on tabel ja see on pilt.

Internetikasutajate arv kasvas iga kuuga. Esitati järjest tõsisemaid disaininõudeid, s.t. väline disain lehekülgi. Peagi leiutasid arendajad uued sildid, näiteks:

on konteiner fondi omaduste (nt suuruse, värvi ja kirjatüübi) muutmiseks. Kuigi seda silti toetavad endiselt kõik brauserid, peetakse seda aegunuks ja selle kasutamisest soovitatakse stiilide kasuks loobuda.

Et mõista, mis vahe on CSS-i ja HTML erinevus, peate mõistma, mis on CSS ja mis on HTML.
Inglise keelest tõlgituna tähendab CSS "kaskaadlaadilehti". CSS on veebilehe kujunduse haldamise tehnoloogia, mis pakub palju võimalusi lehe välimuse kirjeldamiseks ja võimaldab ka välimust oluliselt lihtsustada HTML-lehed lehe elementide kujunduse ülekandmisega CSS-faili. CSS võimaldab teil kasutada ühte kujundust piiramatu arvu jaoks HTML elemendid lehekülgi. See võimaldab teil muuta saidi kõigi lehtede kujundust kõigil lehtedel, mis kasutavad kujunduseks ühte klassi, muutes seda üks kord CSS-fail, see on väga mugav, kui saidil on rohkem kui 50 lehekülge, te ei pea igal neist elemendi kujundust muutma.
Mis see on HTML? Inglise keelest tõlgituna tähendab HTML "hüperteksti märgistuskeelt". HTML on standardkeel märgistused HTML dokumendid. Hüperteksti märgistuskeelt kasutatakse otse struktureerimiseks HTML sisu lehekülgi. Tema abiga saab koostada tabeleid, kujundada neid, luua kujundusi tekstidele jne.
HTML-lehti ilma kasutamata CSS muutuvad keeruliseks ja segaseks, kuna iga elemendi kujundus kirjutatakse uuesti, mis suurendab oluliselt teksti mahtu. Näiteks on HTML-leht, mis sisaldab 3 tekstiosa, mis tuleb vormindada identselt (suurus, värv), kuid HTML-i siltide abil pole võimalik kõiki kolme korraga vormindada, kuna need fragmendid on erinevad kohad HTML-lehed. Selliste tekstide vormindamiseks on vaja koodi kasutada iga kord, iga fragmendi jaoks eraldi.
CSS-i kasutamisel loome klassile ühe korra kujunduse ja siis HTML-lehe koodis määrame selle klassi lihtsalt igale kolmele fragmendile. Nüüd tundub HTML-kood vähem mahukas, kas pole? Muutes ainult ühte CSS-i element, saame muuta saidi kõigi lehtede kujundust korraga. Ja neid lehti võib olla tuhandeid.

Järelduste veebisait

  1. HTML on keel, milles veebileht luuakse. CSS on tehnoloogia, mis juhib selle veebilehe kujundust.
  2. Lehekujunduse seisukohalt on CSS mugavam kui kujunduse kirjutamine HTML-is, sest võimaldab oluliselt vähendada koodi suurust ja määrata kujunduse korraga paljudele lehtedele.

CSS-i ja HTML-i erinevuse mõistmiseks peate mõistma, mis on CSS ja mis on HTML.
Inglise keelest tõlgituna tähendab CSS "kaskaadlaadilehti". CSS on veebilehe kujunduse haldamise tehnoloogia, mis pakub palju võimalusi lehe välimuse kirjeldamiseks, samuti võimaldab see oluliselt lihtsustada HTML-lehe välimust, kandes lehe elementide kujunduse CSS-faili. . CSS võimaldab kasutada ühte kujundust piiramatu arvu HTML-lehe elementide jaoks. See võimaldab teil muuta saidi kõigi lehtede kujundust kõigil lehtedel, mis kasutavad kujunduseks ühte klassi, muutes seda üks kord CSS-failis, see on väga mugav, kui saidil on rohkem kui 50 lehekülge, te ei pea muutma elemendi kujundus igas neist.
Mis see on HTML? Inglise keelest tõlgituna tähendab HTML "hüperteksti märgistuskeelt". HTML on HTML-dokumentide standardne märgistuskeel. Hüperteksti märgistuskeelt kasutatakse otse HTML-lehe sisu struktureerimiseks. Tema abiga saate luua tabeleid, kujundada neid, luua kujundusi tekstidele ja hüpertekstdokumentidele.
HTML-lehti ilma kasutamata CSS muutuvad keeruliseks ja segaseks, kuna iga elemendi kujundus kirjutatakse uuesti, mis suurendab oluliselt teksti mahtu. Näiteks on HTML-leht, mis sisaldab 3 tekstiosa, mis tuleb vormindada ühtemoodi (suurus, värv), kuid HTML-i siltide abil ei saa kõiki kolme korraga vormindada, kuna need fragmendid asuvad HTML-lehe erinevates kohtades. Selliste tekstide vormindamiseks on vaja koodi kasutada iga kord, iga fragmendi jaoks eraldi.
CSS-i kasutamisel loome klassile ühe korra kujunduse ja siis HTML-lehe koodis määrame selle klassi lihtsalt igale kolmele fragmendile. Nüüd tundub HTML-kood vähem mahukas, kas pole? Vaid üht CSS-i elementi muutes saame muuta saidi kõigi lehtede kujundust korraga. Ja neid lehti võib olla tuhandeid.

Seega leidis TheDifference.ru HTML-i ja CSS-i vahel järgmised erinevused:

HTML on keel, milles veebileht luuakse. CSS on tehnoloogia, mis juhib selle veebilehe kujundust.
Lehekujunduse seisukohalt on CSS mugavam kui kujunduse kirjutamine HTML-is, sest võimaldab oluliselt vähendada koodi suurust ja määrata korraga mitme lehe kujunduse.

Üks kõige enam korduma kippuvad küsimused uute standarditega tutvumise käigus – mis vahe on HTML elementide atribuutidel "id" ja "class". Lõppude lõpuks tundub mõju olevat sama.

Neil on sama mõju ainult enamikul juhtudel lihtsad juhtumid kasutada CSS-is. Tegelikult on erinevusi palju.

Sisuliselt

id on lehel oleva elemendi ainulaadne pärisnimi, see tähendab, et lehel ei tohiks olla mitut sama ID-ga elementi. Näiteks saidi päisega plokile saab anda id="title" .

klass on vaba atribuut, mis antakse tavaliselt mitmele elemendile, et neid teistest eristada. Näiteks piltidele, mis lihtsalt tekstiga kaasnevad, saab anda class="decor" , teksti mõistmiseks olulistele piltidele aga class="content" .

Tagajärjed

Sellest olemusest lähtuge otseselt või kaudselt muud erinevused, mis on nähtavad HTML-is, CSS-is ja skriptides.

...

Ankurlingid Kui teil on vaja lehele lisada link mõnele elemendile, peate sellele lihtsalt andma id ( ) ja linkida sellele ankruga (http://site/path/#about). See, muide, on eelistatud meetod vana asemel

. Mitu märki

Elemendile võib anda mitu klassi, mis on eraldatud tühikutega:

. Lisaks saab neid kasutada eraldi:

/* kõik olulised elemendid */ .important (värv:punane;)

Ja kombinatsioonis:

/* elemendid, millel on korraga nii oluline kui ka keskel */ .important.centered (ääris: ühtlane must 1px;)

Pange tähele, et CSS-reeglis pole klasside vahel tühikut.

...

Erinevad kaalud CSS-is

Igal CSS-i reeglil on "kaal", mis määrab nende rakendamise järjekorra. id-l on suurem kaal. Seega, kui elemendil on nii ID kui ka klass:

Kumbki kahest reeglist

#about (värv:roheline;).tähtis (värv:punane;)

Esimene võidab, tiitlivärv on roheline. (Reeglite kaalud on omaette lugu, selle kohta tuleb õigel ajal artikkel.)

Skriptis otsimine Elementi, millel on "id", saab hõlpsasti skriptist leida, kasutades funktsiooni document.getElementById(). Klasside jaoks sellist funktsiooni pole. See artikkel on osa käimasolevast sarjast tööpealkirja "Õpik" all. Soovitan lugeda ka teisi artikleid, mis leiate kategooriast “Õpik” ja kus need on nüüd kogutud vastupidises kronoloogilises järjekorras., mis on CSS, milleks see on. Tutvume lühidalt selle süntaksi ja võimalustega. Alustame määratlusega

1. CSS-i definitsioon

CSS(inglise keelest "Cascading Style Sheets", kaskaadlaadilehed) - saidi stiilide loend html-is

Mis on stiil? Jämedalt öeldes on stiil see, kuidas element saidil välja näeb. Näiteks võib mis tahes teksti kirjutada suurusega 10 pikslit või 14 pikslit. Võite kirjutada musta või sinisega. Saate alla joonida/kallutada/läbikriipsutada jne. Kõik teksti vormindamisega seonduv tehakse läbi CSS-i.

Kuid see on vaid väike osa võimalustest. CSS vastutab kõigi HTML-märgendite visualiseerimise eest. Isegi selleks dünaamilised muutused: rippmenüüd, mis tõstavad kursoril esile linke.

Kõigi stiilide loendit nimetatakse veebihalduri kõnepruugis sageli "CSS-i stiilileheks".

2. CSS-i eesmärgid ja eesmärgid

  • Muutke sait ilusamaks (kujunduse poolest), muutke sõbralik liides ja just nii, et saidid oleksid üksteisest vähemalt kuidagi erinevad
  • Eraldi html kood stiili ja disaini kirjelduse koodist

3. CSS-i süntaks (selektorid)

Iga omadust ja stiili kirjeldatakse "Selectors" kaudu. Selle süntaks on järgmine

Valija (atribuut: väärtus;)

Valija- see võib olla stiili või sildi nimi. IN lokkis traksid kirjeldatakse konkreetseid reegleid. Kirjeldus järgib alati sama standardit: “atribuudi nimi: väärtus”. Iga reegel peab lõppema semikooloniga.

Näiteks

.stiili_nimi ( atribuut1 : väärtused1; atribuut2 : väärtused2; ... );

CSS-stiilide määramiseks on palju võimalusi. Vaatame näidetega kõige populaarsemaid.

/*Üldise stiili määramine*/ .global_style ( font-size : 12px ; color : red ; ) /**/ font.style1 ( font-size : 10px ; color : blue ; ) /* Ainult üldise stiili määramine fondi silt */ #global_style2 ( fondi suurus : 14 pikslit ; värv : punane ; ) h1 ( fondi suurus : 19 pikslit ; )

Stiili global_style saab kasutada klassina kõigi siltide jaoks. Näiteks

.

style1 saab kasutada ainult sildil kuna definitsioonis oli määratud font.style1.

Kolmas võimalus on läbi ruudustiku (#). Nagu esimesel juhul, on see defineeritud kõigi elementide jaoks, kuid see tuleb määrata mitte klassi, vaid atribuudi id kaudu:

Viimases valikus määrasime lihtsalt sildi nime

ja määras talle stiili. See tähendab, et nüüd kõik sildid

pärib selle stiili väärtuse.

4. Kuidas ja kuhu CSS-stiile seada

5. Millised on CSS-i kasutamise eelised

  • Lihtne muuta disaini. Piisab stiili muutmisest ühes kohas ja see muutub saidi igal lehel
  • See ainus viis muutke saidi kujundust
  • Lihtne keele süntaks

6. CSS-i probleemid brauseritega

Kõik vanemad brauserid ei toeta CSS-i funktsioonid. See põhjustab kuvamisprobleeme. Näiteks mõju, mille eesmärk oli parandada sisu tajumist, võib põhjustada vastupidise efekti. Kui mõnda omadust ei toetata, siis on oht, et plokid, tekstid kattuvad jne.

Prefiksid lahendavad selle probleemi osaliselt. Põhimõtteliselt on see lihtsalt sõna, mis asetatakse stiililehel argumendi ette. Igal brauseril on oma eesliide.

7. Vastused korduma kippuvatele küsimustele

7.1. Mis on CSS3

IN viimasel ajal Sageli võite kohata CSS3 kontseptsiooni. Sisuliselt on see sama CSS, kuid uute argumentidega, mis annavad lisafunktsioonid erinevate efektide osas. Näiteks helendav tekst. Paljud brauserid ei toeta selliseid omadusi, seetõttu on soovitatav selliseid efekte kasutada minimaalsetes kogustes.

7.2. Mis vahe on CSS-il ja HTML-il?

HTML on teie lehe raamistik (need on lingid, pildid, sisu). Ja CSS määrab, kuidas seda kõike kasutajale kuvatakse. Seega on HTML ja CSS põhimõtteliselt erinevad asjad, kuid need on omavahel seotud. Hea vormi reegel on koodide eraldamine üksteisest, et mitte segada neid ühel lehel.



SEOTUD ARTIKLID