2.12.5. Типы селекторов в css

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

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

b) Селектор по классу;

c) Селектор по id;

d) Контекcтный селектор;

Примеры использования селекторов..

P { font-family: arial, verdana, sans-serif; font-size: 12px; }

.green { font-family: arial, verdana; font-size: 12px; color:green; }

H1 { color: red; font-weight: bold; text-align: center }

.txt {color:green } или вложенный td p strong {color:red;}

Селектор по элементу. В качестве селектора используется непосредственно имя html элемента, к которому мы хотели применить данный стиль. Т.е. написав класс например для параграфа (Р), все параграфы на странице приобретают стиль данного класса. А теперь представьте ситуацию, когда необходимо сделать первый параграф в одном стиле, второй в другом, третий в третьем и.т.д. Тут нам на помощь придет селектор по классу.

Селектор по классу. Чтобы создать универсальный класс в CSS, необходимо сначала поставить точку, затем сразу, без пробела, написать имя класса, а затем в фигурных скобках блок стилей.

Например: .green { font-family: arial, verdana, sans-serif; font-size: 12px; color: green; }

Как применить данный стиль? Допустим, мы хотим применить данный стиль к определенному параграфу в документе. Вот как это будет выглядеть в html:

<P class ="green"> ... текст параграфа ... </P>

Как видите используется атрибут class со значением названия стиля green.

Рамки в CSS.

h1 { border-width: 4px; border-style: dotted; border-color: red;}

h2 { border-width: 18px; border-style: inset; border-color: red; }

h3 { border-width: 30px; border-style:outset ; border-color: red; }

p { border-width: 2px; border-style: solid; border-color: blue;}

Во всех перечисленных выше примерах, если добавить после слова border одно из ключевых слов (top, right, bottom, left) можно регулировать параметры рамки с разных сторон соответственно (верх, право, низ, лево). Например можно сделать так:

h1 { border-top: 30px solid red;

border-right: 20px dashed gold;

border-bottom: 10px dashed green;

border-left: 40px solid blue; }

Плавающие блоки(свойство float) . Рассмотрим, что такое плавающие блоки. C помощью плавающих блоков можно создавать различные эффекты и даже дизайн страниц, так называемый блочный дизайн. Большинство современных сайтов строятся именно по блочному принципу. Поэтому, что очень важно разобраться как это работает! Плавающие блоки в CSS определяются свойством float.

Свойства float. Данное свойство определяет, будет ли блок плавающим и в какую сторону он будет перемещаться. Свойство может принимать следующие значения: • left - структурный блок перемещается влево. Остальное содержимое документа будет выводиться вдоль правой стороны блока, начиная с самого верха. • right - структурный блок перемещается вправо. Остальное содержимое документа выводится вдоль левой стороны блока, начиная с самого верха. • none - блок не перемещается (значение по умолчанию). Рассмотрим html-код и выясним, как будут располагаться три квадратных блока, со стороной в 200 пикселей.

<div class="box1">Первый блок</div> <div class="box2">Второй блок</div> <div class="box3">Третий блок</div>

Ниже приводится CSS код трех классов: box1, box2, box3.

.box1 { width:200px; height:200px; border:1px solid red;

background-color:orange; float:left; }

.box2 { width:200px; height:200px; border:1px solid red;

background-color:orange; float:left; }

.box3 { width:200px; height:200px; border:1px solid red;

background- color:orange; float:left; }

Если из каждого класса (box1, box2, box3) исключить свойство float:left ,то по умолчанию каждый следующий блок, находится под предыдущим.

Используя свойство float можно сделать так, чтобы каждый блок всплывал влево. Если использовать свойство float:right , то блоки будут всплывать вправо.

Классический пример применения свойства float - это когда надо сделать, чтобы текст выводился в колонках. Заметим, что в блоках может находится что угодно ( картинки, списки, текст и др.).

Пример использование стилей.

<div style="width:250px; background-color:yellow; color: blue; border: red 2px solid; padding:10px">

<form>

Студент <input type="text">

Группа <input type="password" >

Регистрация<input type="button" value="ОК">

</form>

</div>