Увод у врсте ЦСС селектора
Врсте ЦСС Селектора користе се за избор садржаја који желимо да стилизујемо. Помаже у одабиру елемената на основу њихове класе, ид-а, типа итд. ЦСС Селектор је компонента ЦСС Рулесет-а.
Врсте ЦСС селектора
На располагању су нам 5 варијанти ЦСС селектора. Ми ћемо гледати следеће важне ЦСС селекторе:
- ЦСС универзални селектор.
- Селектор ЦСС елемената.
- ЦСС изборник.
- Селектор класе ЦСС.
- ЦСС Селектор атрибута.
1. ЦСС универзални селектор
На ХТМЛ страници, садржај зависи од ХТМЛ тагова. Пар ознака дефинише одређени елемент веб странице. Универзални селектор ЦСС бира све елементе на веб страници.
Пример:
* (
color: blue;
font-size: 21px;
)
Ове две линије кода окружене коврчавим заградама утицати ће на све елементе присутне на ХТМЛ страници. Универзални селектор проглашавамо звездицом на почетку коврчаве ограде. Универзални селектор се може користити заједно са осталим селекторима у комбинацији.
2. Селектор ЦСС елемената
Селектор ЦСС елемената је такође познат и као изборник типа. Елемент Селецтор у ЦСС-у покушава да усклади ХТМЛ елементе са истим називом. Дакле, селектор од
- одговара свим
A
B
C
A
B
C
A
B
C- 1
- 2
- 3
- Цхеатсхеет ЦСС3
- ЦСС питања за интервју
- САСС вс СЦСС
- САСС Интервјуи
- Примери листе наручених ХТМЛ-ова
- елементе, тј. све неуређене листе на тој ХТМЛ страници.
Погледајмо пример селектора елемената.
ul (
border: solid 1px #ccc;
)
Да бисмо ово боље разумели, погледајмо пример ХТМЛ кода за примену ЦСС кода о којем смо горе писали.
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
Демо текст
У овом примјеру наћи ћемо углавном три елемента, наиме
- елемент, ознака и друго
- елемент. Будући да се наш ЦСС код односи на
- тачно, промене границе ће се извршити само за наше
- ознаке, а не за тагове. Обично се те промене не односе на садржај
- Ознаке такође, али у неким сценаријима стилови се могу односити и на унутрашње елементе.
3. Селектор ЦСС ИД-а
Селектор ЦСС ИД-а помаже програмеру да усклади ИД који је створио програмер са његовим стилским садржајем. Селектор ИД користи се уз помоћ хасх (#) знака пре ИД-а које је деклар објавио. Селектор ИД одговара сваком ХТМЛ елементу који има атрибут ИД чија је вредност иста као и код селектора, без хасх знака.
Ево примера:
#box (
width: 90px;
margin: 10px;
)
Овај ЦСС код може да се користи за подударање са елементом који има ид „бок“, као у следећој реченици.
Овде је ознака само пример. Можемо написати ИД атрибут за било коју ХТМЛ ознаку. Селектор ИД одговара атрибуту ИД унутар елемента и тражи његов стил. У нашем примјеру, стил се примјењује све док било који елемент садржи атрибут ИД 'бок'.
Вредност ИД-а који се користи требало би да буде јединствена. Ако се исти ИД користи за два или више елемената, код је технички неважећи, али обликовање елемента ће и даље бити примењиво, па се обично избегава исти ИД.
Коришћење различитог ИД-а сваки пут за сваку ХТМЛ страницу прилично је ригидно. Поред суочавања са проблемима крутости, селектори ИД-а у ЦСС-у се такође суочавају са проблемом специфичности.
4. Селектор класе ЦСС
Селектор ЦСС класе један је од најкориснијих селектора свих селектора. Декларише се употребом тачке која следи име класе. Назив ове класе дефинише кодер, као што је случај са селектором ИД-а. Селектор класе тражи сваки елемент који има вриједност атрибута с истим именом као и име класе, без тачке.
Пример:
.square (
margin: 20px;
width: 20px;
)
Овај ЦСС код може се користити за подударање елемента који има класу 'квадрат', као у следећој реченици.
Овај стил се такође примењује на све остале ХТМЛ елементе који имају вредност атрибута за класу као „квадрат“. Елемент који има исту вредност атрибута класе помаже нам у поновној употреби стилова и избегава непотребно понављање. Поред тога, Селектор класе је користан јер нам дозвољава да додамо неколико класа одређеном елементу. Атрибуту можемо додати више класа тако што ћемо сваку класу одвојити размаком.
Пример:
Овдје су квадрат, подебљани и облик три различите врсте класе.
5. ЦСС Селектор атрибута
Селектор ЦСС атрибута стилира садржај у складу са атрибутом и вриједношћу атрибута наведеном у квадратним заградама. Испред четвртастог носача отварања не могу бити размаци.
input(type="text") (
background-color: #fff;
width: 100px;
)
Овај ЦСС код би одговарао следећем ХТМЛ елементу.
Слично томе, ако се вриједност атрибута 'типе' промијени, селектор Атрибута не би одговарао њој. На пример, селектор се не би подударао са атрибутом ако се вредност „врсте“ променила из „текста“ у „пошаљи“. Ако је селектор атрибута деклариран само са атрибутом и без вриједности атрибута, тада ће се подударати са свим ХТМЛ елементима с атрибутом 'типе', без обзира да ли је вриједност 'тект' или 'субмит'.
Пример:
input(type) (
background-color: #fff;
width: 100px;
)
Такође можемо да користимо селекторе атрибута без спецификације вредности изван квадратних заграда. Ово ће нам помоћи да циљамо само атрибут, без обзира на елемент. У нашем примеру ће циљати на основу атрибута 'типе', без обзира на елемент 'инпут'. ЦСС Селектори нам помажу да поједноставимо свој код и омогућују нам да користимо и поново користимо исти ЦСС код за различите ХТМЛ елементе. Помажу нам у обликовању одређених сегмената и дијелова наше веб странице. Пружају нам могућност равномјерног обликовања сличних елемената на нашој веб страници. ЦСС селектори су, дакле, важан део кривуље учења ЦСС-а.
Препоручени чланци
Ово је водич за Типове ЦСС селектора. Овде смо са примерима разговарали о различитим типовима ЦСС селектора. Можете и да прођете кроз друге наше предложене чланке да бисте сазнали више -