учун HTML документтин түзүмү бир үй-бүлө даракка окшош. Сиздин үй-бүлөсү менен, Сен ата-энесин жана сага келген, башкалар бар. Алар ата-бабалары болуп саналат. Ал дарактын сизге кийин балдар жана сенин укум-саналат. HTML эле таризде иштейт. башка элементтердин ички Elements алардын урпактары болуп саналат. Мисалы, ар бир HTML элемент <орган> тегдеринин ичинде болгондуктан, алар <орган> элементтердин тукумунан чыкмак. Бул мамиле сиз CSS менен иштей баштайт жана көргөзмө стилин колдонуу үчүн белгилүү бир элементтерин максаттуу керек болгондо түшүнүү үчүн абдан маанилүү болуп саналат.
CSS тукумунан Selectors
CSS-тукуму селектор башка элементтин (же тагыраак айтканда, башка бир элементтин тукумунан элементтин) ички элементтери колдонулат. Мисалы, бул иретсиз тизме урпактарына Tags менен теги бар. Анын бир мисалы катары төмөнкү HTML колдонуп көрөлү:
<Ул> <ли> Бул шилтемеLI теги ул тег урпактары болуп саналат. Бир күнү эки LI (баланын тукуму) жана ул (неберелерим урпагы) Tags тукумунан болуп саналат. Эгер үй-дарак мисалды пайдаланып, бул жөнүндө ойлонуп ойлонуп болсо, анда <ул> ата болот, <Ли> бул элементтин бала болот, жана <Өмүр> баласы жана неберелерим болмок <ул>.
Анан кантип бул тукумунан селекторлорун колдонуп желе барагына белгилүү бир элементтерин максаттуу болмок? Биринчиден, тукуму селекторлор эки колдонуу менен (же андан көп) аныктоо керек боштук менен ажыратып селекторлор түрү.
Ли {текст кооздугу: эч бири; }Бул мисалда, стилдер гана шилтеме элементтин () колдонулат тизмеси-пункт элементтин тукумунан болмок (<ли>). тизме бөлүгүнүн тукумунан эмес, беттеги бардык шилтемелер ушул стилди ала алмак эмес.
эстеп бир маанилүү нерсе, алар тегдеринин арасына сенин тукумунан селектор колдонуу болушу мүмкүн канча теги маанилүү эмес болуп саналат. экинчи элемент биринчи элементтин ичинде каалаган тиркелген болсо, анда ал бир урпагы деп тандалып алынат.
сен ул элементтердин тараган бардык кайырмак тандоо үчүн келсе, сиз жазган:
ул бир {текст кооздугу: эч бири; }Эми, бул стилдер тизме бөлүгүнүн тукумунан эч кандай байланышта колдонулат. Ошондой эле бул селектор жазып алган
ул Ли {текст кооздугу: эч бири; }Бул эки түрү селекторлорун колдонуп тукумунан алуу болуп саналат. Бул учурда, ушул тизме-пунктунда ошондой эле ичиндеги жана ошондой эле бул иретсиз тизмесин ички байланышы болмок.
Колдонуу Class Selectors жана ID селекторлор
Сиз түшүп жаткан селекторлор дайыма түрү урпактары болууга тийиш эмес. Мисалы, "тактасына" бир ID атрибут менен сайтында (а бөлүнүү сыяктуу) аянтты эле ойлошот. Сиз ID кырылып тукумунан селектор коюуга мүмкүн:
#billboard ул {өбөлгөлөрү-түсү: #ccc; }Бул "тактасына" бир ID менен элементтин тукумунан иретсиз тизмесин стилдештирүүнү болмок. Сиз класс баалуулуктарды да жардам бере алат.
div.billboard ул {өбөлгөлөрү-түсү: #ccc; }Бул бөлүү "тактасына" бир тобу бар экенин божомолдойт. CSS Жогорудагы класс мааниси бар кайсы бир бөлүмдүн ичиндеги <ул> элементти кандайча стилдештирүүнү болмок.
Сиз тукумунан селекторлор менен чын эле катаал жана дайын-ала аласыз. Мисалы, сиз жазып Dreamweaver пайдалануу HTML кодун , ошол беттеги курсордун жайгаштыруу боюнча селектор унаам-түзөт жаңы CSS эрежелерин кошуп жатканда жөндөө бар. Эмне Dreamweaver бул учурларда кайсы чуулгандуу дайын жана узак тукумунан селектор түзүү болуп саналат. Бул көп өзгөчөлүгү сиздин үчүн зарыл болгон эмес, CSS иштөө. Эмне үчүн ашыкча болуп селекторлор бар CSS эрежелерин туруп, сен муктаж так элементтердин (адамдардын силерге кандай таасир этет болгум келбейт стайлинг жок) чейин каза алышат үчүн жетиштүү аныкталган тукумунан селектор ортосундагы балансты табуу болуп саналат чоң.