Следующий вид селекторов это селекторы по идентификатору или сокращенно по ID. Селекторы по ID задаются аналогично классам, однако каждый ID может быть применен только к одному элементу. Т. е. в коде страницы может быть только один тег с данным ID.

Это правило очень часто игнорируется потому, как все браузеры позволяют применять один и тот же ID к нескольким элементам. Главное отличие ID от класса в том, что в ID для адресации используется знак # а не точка. Например:

В HTML коде необходимо написать следующее:

Текст в абзаце будет синего цвета:

Какие действия можно предпринять исходя из того что мы уже знаем о селекторах. Можно задать элементу красный цвет при помощи следующего стиля:

В html коде прописать следующее:

Code

Текст<strong>выделенный жирным шрифтом</strong>, а дальше простой текст абзаца</p>

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

Следующий способ это задать элементу свой класс. Например:

Code

redstr {color:#C00000;}

В этом случае html код будет следующий:

Code

Текст<strong class=" redstr ">выделенный жирным шрифтом</strong>, а дальше простой текст абзаца</p>

Недостаток этого способа в том, что нам каждый раз придется прописывать класс. Здесь нам на помощь приходят контекстные селекторы. Стиль можно написать следующим образом:

Code

p strong {color:#C00000;}

Это обозначает, что тег находящийся внутри элемента

будет иметь красный цвет. HTML код в этом случае будет таким:

Code

Текст<strong>выделенный жирным шрифтом</strong>, а дальше простой текст абзаца</p>

http://webmastermix.ru/images/creation-site/lessons-css/selectors/5.png

Таким способом можно применять стили, к любому уровню вложенности тегов. Например можно сделать так:

Code

td p strong {color:#C00000;}

Код будет следующий:

Code

<table border="1"> <tr> <td>

Текст<strong>выделенный жирным шрифтом</strong>, а дальше простой текст абзаца</p> </td> </tr> </table>

В этом случае текст, заключенный в тег будет выделен красным цветом, если он находится внутри тега

, который в свою очередь находится внутри тега

Псевдоэлементы.

Псевдоэлементы применяются для выделения первой буквы параграфа, т. е. для создания так называемой буквицы, а так же для выделения первой строки параграфа. Данные элементы не присутствуют в самом html коде, а только стилях. Не прибегая к помощи псевдоэлементов, первую букву параграфа мы можем выделить, создав для этого отдельный класс:

В этом случае код будет таким:

В данном случае каждый раз нам придется прописывать к первой букве данный класс. Для того чтобы заглавная буква в каждом параграфе выделялась автоматически существует псевдоэлемент first-letter стили в этом случае будут такими:

Код будет таким:

Сама буквица будет такой:

Селектор p:first-letter будет задавать стили всем первым буквам текста заключенного в теги

Для выделения первых строк абзацев используется селектор first-line Применяется он аналогично селектору, который мы рассмотрели выше:

Код будет таким:

Теги
я добавил специально, чтобы перескочили строки, потому что в данном примере текста не много и если он раскинется на всю ширину экрана, то другие строчки вы не увидите. В результате у вас должно получиться следующее:

Псевдоклассы подобны псевдоэлементам они так же не отображаются в теле html документа, а указываются только в стилях. Существую 4 псевдокласса которые предназначены для оформления ссылок это псевдоклассы обозначающие не посещенную ссылку, посещенную ссылку, ссылку при наведении курсоры мыши, а также активную ссылку которая отобразится в момент нажатия на нее:

В html коде записывается просто:

В результате не посещенная ссылка будет синей, посещенная серой, при наведении курсора мыши красной и активная, т. е. в момент нажатия зеленая.

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

И последнее что нам необходимо разобрать в рамках данного урока это понятие группировка селекторов. Очень часто необходимо задать одно и то же оформление для разных элементов. В таком случае для того чтобы постоянно не переписывать одни и те же стили можно их назначить сразу нескольким элементам. Например:

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

будет отображен красным цветом размером 16 пикселей.

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

 Сообщение отредактировал sMokeGG - Воскресенье, 16.05.2010, 19:59:48