CSS қалай көрінеді?

CSS ережелер жинағында жазылған , олардың әрқайсысы сыртқы түрін өзгерту үшін HTML-дің кейбір бөлігіне бағытталған. Мысалы, <p> веб-бетіңіздегі әрбір элементте қызыл мәтін болғанын қалайсыз деп елестетіп көріңіз. Орындауға арналған қарапайым CSS ережелер жинағы келесідей болуы мүмкін:

p {
color: #fffff;
}

Әрбір ережелер жинағы ережелер жиынының өзгерістерін қабылдауы тиіс веб-беттегі HTML-ді анықтайтын селектордан басталады . Бұл жағдайда селектор p, өйткені біз <p> элементтерді бағыттаймыз. Әрбір ережелер жинағы сонымен қатар келесілерден тұратын кем дегенде бір мәлімдемені айналдыратын жұп бұйра жақшаларды ( {және} ) қамтиды:

• мән (:)

CSS мәлімдемесінің мәні. Мұнда қандай мәндерді енгізуге болады, сіз таңдаған сипатқа байланысты. Бұл жағдайда, «түс» таңдайтын болсақ, мән браузер танитын түстің атауы болады.

• нүктелі үтір (;)

Таңба сіздің мәлімдемеңіздің аяқталуын білдіреді. Жалғыз ережелер жинағы бірнеше мәлімдемелерді қамтуы мүмкін және .сіз ;браузер біреуінің аяқталып, келесісі қашан басталатынын білмейді.

Қандай мәлімдемелерді пайдалану керектігін қайдан білемін?

Егер сіз тиімді CSS-ті жазғыңыз келсе, алдымен HTML-дің қандай нақты бөліктерін стильдегіңіз келетінін таңдай алуыңыз керек. Мысалы, тізімдерді емес, абзацтарды мәнерлеуді қалауыңыз мүмкін немесе басқаларды емес, тек бір нақты абзацты стильдеуді қалауыңыз мүмкін. CSS селекторлардың көмегімен осы айырмашылықтарды жасауға мүмкіндік береді .

Мысалы, HTML тілінде бірнеше абзац жазғаныңызды есіңізге түсіріңіз:
<p> Бұл сайттағы кезекті мысал</p>
<p>Бұл мысалда дәл осылай</p>
<p>Абзацқа қатысты бұл кезекті жазба аясы</p>

Сіз қандай нақты мәнді таңдағаныңыз маңызды емес, өйткені id атрибутының өзі ештеңе жасамайды. Мұны HTML элементіне салатын мақсат ретінде қарастырыңыз. Веб-бетке CSS немесе JavaScript жазу кезінде сіз қосқан кез келген мақсат сізге ұмтылатын нәрсені береді.

Ортаңғы абзацта қызыл мәтінді жасағыңыз келеді делік. Енді сіз CSS-де жұмыс істеп жатқаныңыздан кейін, сіз тек осы абзацқа мақсат қоюдың қажеті жоқ екенін түсінесіз . Сіз келесідей ережелер жинағын пайдалана аласыз:

p {
color: pink;
}

Бірақ бұл барлық үш абзацқа әсер етеді және тек ортасы қызғылт болуы керек. Мән сіз қалаған нәрсе болуы мүмкін, сондықтан сіз мынаны қосасыз:

id="meninBirinshiId"

Нәтижесінде біз осы HTML аламыз:

<p>Міне, менің бірінші абзацым</p>
<p id="meninBirinshiId">Бұл ерекше</p>
<p>Міне, менің үшінші абзацым</p>

Егер сіз осы HTML кодын браузеріңізге жүктесеңіз, ол әлі де басқаша көрінетін еді, өйткені идентификатордың өзі ештеңе жасамайды. Осы ортаңғы абзацтың мәтінін қызыл ету үшін оны осы идентификаторды пайдаланып бөлектеу керек.

Идентификаторды қалай таңдайсыз?

CSS ережелер жиынтығының селекторында идентификаторға тағайындалған мәнді пайдаланып, оның идентификаторы бойынша HTML элементін таңдауға болады. Браузерге идентификаторды іздеп жатқаныңызды айту үшін селекторды ( # ) таңбасының таңбасын, содан кейін идентификатор мәнін пайдаланып пішімдеу керек:

#meninBirinshiId

Егер сіз осы ортаңғы абзацтың мәтінін қызғылт түске бояғыңыз келсе, енді сіз тек біреуін бағыттау үшін ұқсас ережелер жиынтығын пайдалана аласыз:

#meninBirinshiId {
color: pink;
}

Есіңізде болсын, идентификатор-бұл екі нәрсені білдіретін бірегей идентификатор:

Бір идентификатор бірнеше HTML элементіне бекітілмеуі керек.

Бір HTML элементінде бірнеше идентификатор болмауы керек.

CSS-тегі каскадтық, ерекшелік және мұрагерлік

Каскадты

Каскадтау браузеріңіздің қай CSS ережелер жиыны ең маңызды екенін анықтау үшін қолданатын логикаға, әсіресе олар бір-бірімен қайшы келгенде. Браузеріңіз мұны істеудің ең қарапайым тәсілдерінің бірі - ережелер жинағыңыздың пайда болу ретіне назар аудару. Қысқаша айтқанда, бірдей селекторлары мен мәлімдемелері бар бірнеше ережелер жиынын жасасаңыз, стильдер кестесіндегі соңғысы браузеріңіз үшін ең маңыздысы болады .

Мысалы, сіздің стиль кестеңіз келесідей:
a {
color: orange;
}
a {
color: blue;
}

Ережелер жинағы бірдей HTML-ге бағытталған - беттегі барлық <a> элементтер - бірақ шолғышқа екі түрлі әрекетті орындауды айтады және ол екеуін де бірден жасай алмайды. Каскадтау арқылы браузер ережелер жиынының қайсысын орындау керектігін таңдай алады.

Бұл мысалда бұл color: blue; мәлімдемесі бар ережелер жинағы, ол стиль кестесінде соңғы болып келеді . Браузер color: orange; ережелер жинағын оның үстінен өтіп жатқанда қарастырады, бірақ соңында кейінірек келетінін шешеді.

Есіңізде болсын, сіз және сіздің стиль кестеңіздегі басқа элементтер әр түрлі қақтығыстарды шешуге келгенде ғана маңызды болады. Егер сіздің ережелер жиынтығыңыз мүлдем қайшы келмесе, сіз оларды кез-келген ретпен орналастыра аласыз.

Ерекшелік

CSS ережелер жинағының тағы бір жалпы қайшылықтары - бірдей элементтерге бағытталған әртүрлі селекторлары бар бірнеше ережелер жиыны болған кезде . Мысалы, веб-бетіңізге бірнеше абзац қосқаныңызды мысал етіп көріңіз, бірақ олардың тек біреуіне id төлсипатын бердіңіз:

<p>Жай ғана абзац</p>
<p id="erekshe">Идентификаторы бар біреу</p>
<p>Жай ғана басқа абзац</p>

Содан кейін бірнеше CSS ережелер жиынын қосқаныңызды елестетіңіз. Олардың бірі жалпы абзацтарға бағытталған, ал екіншісі сіз қосқан id-ға бағытталған:

#erekshe {
color: yellow;
}
p {
color: purple;
}


P селекторы беттегі барлық <p > элементтеріне бағытталғандықтан және сіз "арнайы" идентификатор қосқан элемент <p> элементі болғандықтан, сіз браузерге екі қарама-қайшы нәрсе жасауды айттыңыз. Бұрынғыдай, ол екі нәрсені бір уақытта жасай алмайды. Алайда, сіздің браузеріңіз қандай ережелер жиынтығын ұстану керектігін анықтау үшін ерекшелік тұжырымдамасын қолданады және ол тәртіптен гөрі ерекшелікке көбірек көңіл бөледі.

Бұл дегеніміз, браузер ережелер жиынтығы қалай реттелгеніне қарамастан, ең нақты селекторы бар ережелер жиынтығын таңдайды. Жоғарыдағы мысалда мәтін сары болар еді, өйткені #арнайы селектор p селекторына қарағанда ерекше.

Идентификаторлар: егер сіздің селекторыңыз #ereksheAbzac сияқты идентификатор болса, ол өте нақты. Веб-бетте кез-келген идентификатор тек бір рет болуы керек, сондықтан ол әрқашан тек бір HTML элементін көрсетуі керек.

Класстар: егер сіздің селекторыңыз класс болса, мысалы .ereksheAbzac, бұл нақтырақ. Бұл бірнеше элементтерге қатысты болуы мүмкін, бірақ сіз тек осы сыныпты қосқан элементтерге ғана қатысты.

Элементтер: егер сіздің селекторыңыз p сияқты HTML элементі болса, ол өте нақты емес. Бұл беттегі әрбір <p> элементіне кеңінен қолданылады.

CSS селекторлары нақтылыққа келгенде дәйекті иерархияны бақылайды, сондықтан қай селектордың ең нақты екенін әрқашан айта аласыз. Мысалға:

Мұрагерлік

Каскадтық және ерекшелік қақтығыстарды шешуге қатысты болса да, мұрагерлік CSS-ті ретке келтіру және қажетсіз қайталауды болдырмау туралы көбірек . Басқаша айтқанда, мұрагерлікті түсіну бірінші кезекте қақтығыстарды болдырмауға көмектеседі.

Оның ішінде <P> элементі бар <div > элементі бар деп елестетіп көріңіз:

<div>
<p>Міне абзац</p>
</div>

HTML элементінде басқа элемент болған сайын, олар әдетте ата-ана және бала ретінде сипатталады. Бұл сценарийде, мысалы, <div> элементі ата-ана деп аталады, ал <p> элементі бала болады. Адамның қарым-қатынасындағы сияқты, ата-ана да өз баласына мінез-құлық қасиеттерін жиі жеткізеді.

Мысалы, сіз <div > элементінің қаріпін өзгерттіңіз делік:

div {
font-family: 'Arial';
}

Сіз тек <div> элементін нысанаға алсаңыз да, <p> элементіндегі мәтін жаңа қаріппен көрсетіледі. Себебі <p > элементі қаріптер тобының декларациясын ата-анасынан, <div>элементінен алады.