Пополнить WebMoney
Вывод WebMoney
Обмен WebMoney
Кредит WebMoney

Селекторы в CSS.



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




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


>> Так выглядит код в 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  ДЛЯ ЧАЙНИКОВ

 

 

 

 

 

 


Понравилась статья? - добавь ее себе!


 

 



сайт-визитка / шаблон сайта / обработка фотографий / дизайн афиши, обложки книг, журнал, флаеры и т.д.
 
 
Подробней





nocrisise.ru © 2009-2012