css селекторы

CSS

скачать бесплатно – ” HTML на примерах, всё доступно и просто (для начинающих)”
– – –чайник, HTML ДЛЯ ЧАЙНИКОВ– – –
>> с к а ч а т ь <<

скачать бесплатно – “Как создать классный сайт!
От начала и до конца”
чайник, HTML ДЛЯ ЧАЙНИКОВ—>> с к а ч а т ь <<

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>


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

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

>> Так выглядит код в 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 это будет так :

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; }

В втором примере получится вот что : 


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

Читайте также:  Высота и ширина блоков в CSS

дальше. – Блоки в CSS.чайник, CSS ДЛЯ ЧАЙНИКОВ

 

 

 

 

 

 

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