Всичко, което трябва да знаете за CSS селектори



Тази статия извежда интересна и важна тема, известна като CSS Selectors, и я проследява с подкрепяща практическа демонстрация.

Тази статия разкрива интересна и важна тема, известна като Селектори и го проследява с подкрепяща практическа демонстрация. Следните указания ще бъдат обхванати в тази статия,

Нека започнем тогава,





Оформяне на HTML елементи

Нека разберем какво е CSS, преди да стигнем до селектори на CSS. Ако HTML трябва да се разглежда като скелет, тогава CSS (Cascading Style Sheets) е като мускулите и кожата. Мозъкът е JavaScript. Така че, за уеб страница, CSS стиловете са по същество оформлението и дизайнът. Точно от позиционирането на изображенията и текста до размера на шрифта и цвета на фона, CSS контролира как изглеждат HTML елементите в браузъра.

Можете да разберете по-добре CSS, ако разбирате добре какво представляват селекторите на CSS. Тези селектори ви позволяват да насочвате към конкретни HTML елементи, така че да можете да приложите правилния стил към тях.



Пример - CSS селектори - EdurekaНека да разберем как можем да избираме HTML елементи,

Как да изберем елементи?

Да кажем, че искате дадено заглавие да бъде оформено различно от останалото съдържание в уеб страница. Сега, използвайки CSS селектори, можете да насочите този HTML елемент, за да го оформите по различен начин. CSS селекторите помагат при дефинирането на елементите, за които се прилага определен набор от CSS правила. Има различни видове CSS селектори, които ви позволяват точно да изберете елементите, които искате да оформите. Можете да дадете на цялостната уеб страница общ стил и след това да си направите начин да стилизирате други елементи на страницата.

c ++ как да сортира масив

Селекторите са част от CSS правило и тези селектори идват точно преди декларирането на CSS блокове. За по-добро разбиране можете да се обърнете към изображението по-долу.



Продължаване със статията за CSS Selectors

CSS селектори

Този селектор ви позволява да изберете HTML елемент по неговото име.

Помислете за кода по-долу:

p {подравняване на текст: централен цвят: пурпурен}

Този стил ще се прилага за всеки параграф.

Параграф 1

Параграф 2

Този код ще ви даде следния изход:

Този стил ще се прилага за всеки параграф

Параграф 1

Параграф 2

В горния код HTML елементите са подравнени по центъра и имат цвят 'пурпурен'.

Продължаване със статията за CSS Selectors

Избор на CSS Id

Избирайки атрибута id на HTML елемент, можете да изберете този специфичен елемент. Тъй като идентификаторът е уникален за дадена страница, можете да изберете правилния елемент, като използвате атрибута id.

Можете да изберете HTML елемента, като използвате „#“, последвано от идентификатора на този елемент. Например, „#firstname“ избира елемента, където идентификаторът е „firstname“.

Обмислете следния код:

# para1 {text-align: централен цвят: оранжев}

Здравей свят

Този параграф няма да бъде засегнат.

Резултатът за горния код е:

Здравей свят

обърнете число в java

Този параграф няма да бъде засегнат.

Както можете да видите в горния изход, като включихме id = ”para1 ″, успяхме да променим цвета на този елемент на оранжев. Другият елемент, който го няма, остава незасегнат.

Продължаване със статията за CSS Selectors

CSS Class Selector

Използвайки селектора на класа, можете да изберете HTML елементи, които имат специфичен атрибут на класа. Можете да дефинирате селектора, като използвате точка (символ на точка), последвана от името на класа. Например .intro избира елементите, в които класът е „intro“. Едно нещо, което трябва да имате предвид, е, че никога не можете да започнете име на клас с номер.

Обмислете следния код:

.center {text-align: center color: pink}

Това заглавие е розово и центрирано.

Този параграф е розов и е подравнен по центъра.



Резултатът от горния код е:

Това заглавие е розово и центрирано.



Този параграф е розов и е подравнен по центъра.

Можете да използвате селектори на CSS клас за определен елемент. Ако искате да бъде стилизиран само един конкретен елемент, тогава можете да използвате името на елемента заедно с селектора на класа.



Например, помислете за следния код:

p.center {text-align: center color: pink}

Това заглавие не е засегнато

Този параграф е розов и е подравнен по центъра.



Резултатът от горния код е:



Това заглавие не е засегнато



Този параграф е розов и е подравнен по центъра.

Както можете да видите в резултата, заглавието h2 не се влияе от стила. Тъй като сме посочили „p.center“, само абзацът се влияе от стила.



Продължавайки с тази статия за CSS селектори,

CSS Universal Selector

Този тип селектор може да се разглежда като заместващ знак, който избира всички елементи на страницата. Той избира всички елементи на страницата и се указва с „*“.

Например, помислете за кода по-долу:

* {цвят: тъмнозелен размер на шрифта: 30px}

Това е тест (по-малък шрифт)

Това е параграф.

Резултатът за горния код е:

Здравей свят

Това е тест (по-малък шрифт)

Това е параграф.

Както можете да видите в изхода, всички елементи, които са дефинирани с помощта на селектора на групи, имат една и съща дефиниция на стил - те са подравнени по центъра и цветът на шрифта е циан.

как да конвертирате double в int

Това ни води до края на тази статия.

Вижте нашите което се предлага с обучение под ръководството на инструктори на живо и опит в реалния живот на проекти. Това обучение ви кара да владеете умения за работа с back-end и front-end уеб технологии. Включва обучение по уеб разработка, jQuery, Angular, NodeJS, ExpressJS и MongoDB.

Имате въпрос към нас? Моля, споменете го в раздела за коментари на статията и ние ще се свържем с вас.