Овај чланак доноси занимљиву и важну тему познату као Селектори и прате га пратећим практичним демонстрацијама. Следећи смерници ће бити обрађени у овом чланку,
- Стилизовање ХТМЛ елемената
- ЦСС Селецторс
- ЦСС Ид Селецтор
- ЦСС Цласс Селецтор
- ЦСС Универзални селектор
- ЦСС Гроуп Селецторс
Па кренимо онда,
Стилизовање ХТМЛ елемената
Хајде да схватимо шта је ЦСС пре него што дођемо до ЦСС селектора. Ако се ХТМЛ сматра скелетом, онда је ЦСС (Цасцадинг Стиле Схеетс) сличан мишићима и кожи. Мозак је ЈаваСцрипт. Дакле, за веб страницу, ЦСС стилови су у основи изглед и дизајн. Од позиционирања слика и текста до величине фонта и боје позадине, ЦСС контролише како ХТМЛ елементи изгледају у прегледачу.
Можете боље разумети ЦСС ако добро разумете шта су ЦСС селектори. Ови бирачи вам омогућавају да циљате одређене ХТМЛ елементе тако да на њих можете применити прави стил.
Хајде да разумемо како можемо да изаберемо ХТМЛ елементе,
Како одабрати елементе?
Рецимо, желите да неки наслов буде другачији од остатка садржаја на веб страници. Сада помоћу ЦСС селектора можете циљати тај ХТМЛ елемент да бисте га другачије обликовали. ЦСС селектори помажу у дефинисању елемената за које се примењује одређени скуп ЦСС правила. Постоје разне врсте ЦСС селектора који вам омогућавају прецизно бирање елемената које желите да стилизујете. Можете дати целокупној веб страници општи стил, а затим се потрудити да стилизирате друге елементе странице.
разлика између преоптерећења методе и замене методе
Селектори су део ЦСС правила, а ти селектори долазе непосредно пре декларације ЦСС блокова. За боље разумевање можете се обратити на доњу слику.
Настављамо са чланком ЦСС Селецторс
ЦСС Селецторс
Овај селектор вам омогућава да изаберете ХТМЛ елемент према његовом имену.
Размотрите доњи код:
п {поравнање текста: средња боја: магента}Овај стил примењиваће се на сваки пасус.
Члан 1
Став 2
Овај код ће вам дати следеће резултате:
Овај стил примењиваће се на сваки пасус
Члан 1
Став 2
У горњем коду, ХТМЛ елементи су центрирани и имају боју „магента“.
Настављамо са чланком ЦСС Селецторс
ЦСС Ид Селецтор
Одабиром атрибута ид ХТМЛ елемента можете одабрати тај одређени елемент. Будући да је ид јединствен за страницу, можете одабрати прави елемент помоћу атрибута ид.
Можете да изаберете ХТМЛ елемент помоћу „#“, а затим ИД тог елемента. На пример, „#фирстнаме“ бира елемент где је ид „фирстнаме“.
Узмите у обзир следећи код:
# пара1 {поравнање текста: централна боја: наранџаста}Здраво Свете
Ово неће утицати на овај став.
Излаз за горњи код је:
Здраво Свете
Ово неће утицати на овај став.
Као што видите у горњем излазу, укључивањем ид = ”пара1 ″, успели смо да променимо боју тог елемента у наранџасту. Други елемент који то нема остаје непромењен.
Настављамо са чланком ЦСС Селецторс
ЦСС Цласс Селецтор
Помоћу селектора класе можете да изаберете ХТМЛ елементе који имају одређени атрибут класе. Селектор можете дефинисати помоћу тачке (симбол тачке) иза које следи назив класе. На пример, .интро бира елементе у којима је класа „увод“. Имајте на уму да име класе никада не можете започети бројем.
Узмите у обзир следећи код:
.центер {тект-алигн: центер цолор: пинк}Овај наслов је ружичаст и центриран.
Овај пасус је ружичаст и центриран је.
Резултат горњег кода је:
Овај наслов је ружичаст и центриран.
Овај пасус је ружичаст и центриран је.
апстракција у ц ++
Можете да користите ЦСС бираче класа за одређени елемент. Ако желите да само један одређени елемент буде стилизован, тада можете да користите име елемента заједно са бирачем класе.
На пример, узмите у обзир следећи код:
п.центер {поравнање текста: средња боја: ружичаста}Ово не утиче на овај наслов
Овај пасус је ружичаст и центриран је.
Резултат горњег кода је:
Ово не утиче на овај наслов
Овај пасус је ружичаст и центриран је.
Као што видите у излазу, на наслов х2 не утиче стил. Пошто смо навели „п.центер“, стил утиче само на пасус.
Настављајући са овим чланком о ЦСС Селецторс,
ЦСС Универзални селектор
Ова врста селектора може се сматрати заменљивим знаком који бира све елементе на страници. Одабире све елементе на страници и одређује се са „*“.
На пример, узмите у обзир доњи код:
* {боја: тамнозелена величина фонта: 30пк}Ово је тест (мањи фонт)
Ово је параграф.
Излаз за горњи код је:
Здраво Свете
Ово је тест (мањи фонт)
Ово је параграф.
Као што видите у излазу, сви елементи који су дефинисани помоћу бирача група имају исту дефиницију стила - центрирани су по средини и боја фонта је цијан.
како се користи дб прегледач за склите
Ово нас доводи до краја овог чланка.
Погледајте наш која долази са обуком уживо коју воде инструктори и искуством у стварном животу. Овај тренинг чини вас вештима за рад са позадинским и предњим веб технологијама. Укључује обуку о веб-развоју, јКуери-ју, Ангулар-у, НодеЈС-у, ЕкпрессЈС-у и МонгоДБ-у.
Имате питање за нас? Молимо вас да га помињете у одељку за коментаре чланка и јавићемо вам се.