Главная | Регистрация | Вход | RSS | Вторник, 19.03.2024, 04:02 | |||||||||||||||||
КАК СОЗДАТЬ СВОЙ САЙТ | ||||||||||||||||||
Урок "8"Типы селекторов в CSSНу для начала, скажу что селектор служит для того, чтобы однозначно определить элемент в html документе, к которому мы хотим применить тот или иной стиль CSS . Селектор по элементу До этого момента, мы с вами работали именно с этим селектором.Т.е. в качестве селектора использовалось непосредственно имя html элемента , к которому мы хотели применить данный стиль. Т.е. написав класс например для параграфа(Р) , все параграфы на странице приобретали стиль данного класса. P { А теперь представьте ситуацию, когда необходимо сделать первый параграф в одном стиле, второй в другом, третий в третьем и.т.д. Тут нам на помощь придет селектор по классу.
Селектор по классу Давайте разберем как создать универсальный класс в CSS . А сделать это очень просто: сначала ставим точку, затем сразу, без пробела,пишем имя класса, ну а затем в фигурных скобках стиль. Ну например: .green { Как применить данный стиль? Допустим мы хотим применить данный стиль к определенному параграфу в документе. Вот как это будет выглядеть в html: <P class ="green"> ... текст параграфа ... </P> Как видите используется атрибут class со значением названия стиля. Понятно? вот вам еще примерчик: html: <p>Это обычный параграф , для него используется селектор по элементу </p> css: p { Указываем сначала базовый стиль для всех параграфов(селектор по элементу), а потом уже, если хотим в каком-либо параграфе что-то изменить, создаем для него специальный стиль (селектор по классу) и присваиваем его этому параграфу. Когда мы создаем этот самый специальный класс, мы должны писать туда только те свойства, которые хотим добавить, или изменить, по отношению к базовому стилю для этого элемента. Классы из примера выше, можно применить не только к параграфу, но и например к заголовкам, или например к ячейке таблицы, или ко всей таблице, короче они могут применяться везде, где они могут на что-то повлиять (в данном случае везде, где есть параметр цвет, и текст). Сделать так, чтобы класс действовал только на определенный элемент(например параграф) можно указав название элемента перед точкой: P.green {color:green;} Теперь класс green не будет действовать ни на что другое, кроме элемента P. Селектор по id Данный селектор применяется если необходимо выделить один единственный элемент , уникальный,отличный от всех остальных в документе. К примеру, выделим первый заголовок на странице определенным образом: html- часть: <Н1 id="firstheader"> Первый заголовок на странице </Н1> css - часть: H1#firstheader { color: red; font-weight: bold; text-align: center } Как видите в html-части вместо атрибута class здесь употребляется атрибут id , а в css - вместо точки употребляется знак #. В принципе, то же самое можно сделать и с использованием селектора по классу, это уже кому как больше нравится :) Контекстный селектор Это очень полезная вещь. Допустим у нас есть страничка с таблицами и параграфами текста, причем и в таблице, и в параграфах встречаются выделенные жирным шрифтом(strong) слова. И вот, нам резко понадобилось сделать так, чтобы слова, в параграфе, которые выделены жирным стали зеленого цвета. Так вот: p strong {color:green } Т.е. в начале P затем пробел, затем STRONG а уже потом стиль. Читается эта строчка примерно так: Если внутри элемента P имеется элемент STRONG то элементу strong присвоить стиль зеленого цвета. Вложенность может быть любого уровня. Вот еще пример: "Если вдруг внутри ячейки таблицы (td) , встретится параграф (P) , внутри которого будет слово выделенное жирным (STRONG) то пусть это слово станет красным! " td p strong {color:red;} Ну теперь я думаю Вам все уже понятно. Эксперементируйте, создавайте свои стили, и будет вам счастье...
См. также Следующий - Урок 9: Блоковая модель в CSS |
|