CSS селекторы

CSS

 

css селекторыКакие бывают Селекторы в CSS

Если в CSS уже назначены стили, например для параграфов <р>   задан синий цвет текста и размер шрифта 14 пикселей. Вам нужно задать одному из параграфов <р> красный цвет и размер шрифта 20 пикселей. Что же делать?

Для этого селекторы разделяют на несколько типов:

1. Селекторы CSS для элементов .
2. Селекторы CSS для для классов
3. Селекторы id
4. Селекторы CSS для контекста

1. Селекторы CSS для элементов —  нужны  для тэгов HTML к которым применяли какой либо стиль. Например заголовки и параграфы:
h1
{text-align: center;}
p
{color: blue ;font-size: 28px; text-indent: 20px; }

2. Селекторы для CSS классов — когда необходимо для одного параграфа сделать другой стиль отличающийся от всех остальных стилей. Для этого нужно создать класс в CSS.

Пример:

>> В CSS пишем

.stepa
{font-size: 24px; color: red}

.stepa, это название нашего нового класса и в скобках стиль. «Класс», вы можете назвать как угодно, я его назвал «stepa», вы можете назвать «peta» или «sos» и не забудьте про точку перед классом «.sos»

Потом это «класс» применяем в HTML. Допустим для параграфа:

>> В HTML пишем

<p class =»stepa«> … текст в параграфе … </p>

Для закрепления темы ещё один пример:

>> Так выглядит код в HTML

<p>здесь работает «Селекторы CSS для элементов»</p>
<p class =»stepa»>
здесь новый «Селекторы CSS для для классов», текст красный</p>
<p>
здесь работает «Селекторы CSS для элементов» </p>

>> Так выглядит код в CSS:
p
{font-size 32px; color: blue; }
.stepa
{font-size: 24px; color: red}

Сначала создаём основной стиль для всех параграфов (селектор для элемента) а затем если нужно изменить какой либо атрибут создаем новый стиль (селектор для класса).
3. Селекторы id — нужны для того чтобы задать стиль для одного элемента, который будет отличаться от всех остальных.
К примеру, все стили заданы для всех элементов : для параграфов, для заголовков, для фона и т.д., но нам нужно чтобы один единственный параграф отличался цветом и размером шрифта.

Читайте также:  Всплывающие блоки - "Поплавки". css всплывающие блоки

>> В CSS это будет так :

p#toptext
{color: yellow; font-size: 32px; }

>> А в файле HTML укажем:

<p id=»toptext«> Текст верхнего параграфа </p>

Этот тип селектора похож на предыдущий селектор для класса, разница лишь в том, что вместо атрибута «class» используется атрибут «id», а вместо точки ставиться «#».

4. Селекторы для контекста — используются для определения стиля к атрибутам текста.
Например : я хочу чтобы текст в параграфе который выделен жирным шрифтом был зелёного цвета. Для этого я должен задать параметры стиля для атрибута strong.

Пример :

p strong 
{color: green; }

Что у нас получилось?

Весь текс будет цветом по умолчанию а выделенный будет зелёным.

Пример 2 :

table p em
{color: blue; }

В втором примере получится вот что :
Весь текст встречающийся в параграфах таблиц и написанный курсивом, должен быть синего  цвета

 

Оцените статью
ЗАРАБОТОК В СЕТИ
Добавить комментарий