Rambler's Top100

ТИПЫ СЕЛЕКТОРОВ В CSS

Селектор - это обозначение элемента из html документа, для которого указываются те или иные стили. Cелекторы бывают следующих типов:

Селектор по элементу

По правилам существующим в CSS, сначала пишется селектор для которого прописываются стили, затем открываются фигурные скобки, в которых пишутся свойства, после каждого свойства ставится двоеточие,затем пишутся значения этих свойств, после каждого значения ставится точка с запятой и закрывается фигурная скобка.

Например нам надо, чтобы все заголовки первого уровня, заключенные в теги <H1></H1> были красного цвета, распологались посредине страницы, шрифт был размером 20 пикселей, в файле CSS пишем:

H1{ color: #800000; text-align: center; font-size: 20px;}

H1 - это и есть селектор по элементу, а   color:  text-align:  font-size:  - это свойства и после каждого свойства пишется его значение

Селектором по элементу может быть любой html-тег и <p> и <img> и <td>, в общем любой тег, который есть в html-документе. Допустим для тега <p> мы прописали, следующия правила:
p {
font-family: arial,verdana, sans-serif;
text-align:justify;
font-size: 14px;
color: #000000;
}

В результате на странице все абзацы заключённые в теги <p></p> будут определённого шрифта, черного цвета, размером 14 пикселей, текст выравнен с обеих сторон одинаково, но нам нужно несколько абзацев текста написать шрифтом другого цвета, большего или меньшего размера, в этом случае селектору присваевается класс и это тип называется селектор по классу

Селектор по классу

Класс- это любое произвольное название или сочетание букв, перед названием класса ставится точка, затем имя класса, а далее в фигурных скобках свойства и значения. Если в абзаце нужно изменить только цвет, то можно классу присвоить имя цвета, например так

В файле CSS пишем:   .darkred {color: darkred; }

В файле HTML пишем: <p class="darkred">Здесь будет текст </p>

Теперь все абзацы в обозначенных классом "darkred" будут такого цвета, этот же класс можно присвоить и тегам <H1> <H2> <H3> и так далее

В файле HTML пишем: <H1 class="darkred">Здесь будет заголовок </H1>

Ещё может быть, когда в одном предложении нужно слово или несколько слов выделить другим цветом и шрифтом другого размера, допусти такое предложение:

Добиться публикации статьи можно двумя путями: "Индивидуальной адресной рассылкой" и "Распространением на общих основаниях"

Даём какое нибудь название классу, конечно лучше, если название будет более менее осмысленным, но можно любой набор букв например str и в файле css пишем:
.str1 {font-size:14px; font-weight: bold; color: #006600;}
.str2 {font-size:14px; font-weight: bold; color:#800000;}


В HTML-файле пишем следующий код:
<p>Добиться публикации статьи можно двумя путями:
<span class="str1">"Индивидуальной адресной рассылкой" </span> и
<span class="str2"> "Распространением на общих основаниях" </span> </p>

Далее, на следующей странице рассмотрим тип селектора по id, для перехода нажмите кнопку 8

 

 

Rambler's Top100 Яндекс цитирования