Урок 16: Завершение...

Урок 16: Завершение...

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

Теперь, когда Вы уже ознакомлены с языком разметки html и технологией стилей CSS , как следующий шаг, я бы посоветовал Вам разобраться с программой Adobe Dreamweaver. Это просто незаменимый помощник, я не знаю, что бы я без него делал. Очень доходчиво и понятно излагаются основные принципы работы, в видеоучебнике по Дримвиверу, который можно скачать у меня на сайте бесплатно.

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

Существуют каркасы(они же макеты) построенные на таблицах(табличные) и на дивах(блочные) . Конечно табличная верстка уже немного устарела, но все же имеет право на существование.

Урок 15: Слои в CSS

Урок 15: Слои в CSS

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

Создавая блок в CSS, мы всегда четко задаем его параметры, а также позиционируем его в определенное место на экране. Таким образом, любой блок имеет две координаты X и Y, которые определяют положение блока на плоскости экрана. Но в CSS есть еще и третья, пространственная координата Z, которая определяет номер слоя, на котором находится блок. Т.е. чем больше координата Z, тем выше этот слой находится по отношению к остальным. Например слой с номером 2 будет ближе расположен к пользователю, просматривающему вашу страницу, чем слой с номером 1. А слой с номером 1, будет располагаться выше, чем основной код страницы.

За создание слоя в CSS отвечает свойство Z-index, а принимаемые им значения, указывают номер слоя.

Например, можно сделать из карт знаменитую комбинацию Royal Flash.



Как видите, каждая карта, немного перекрывает другую. Вот как это выглядит в коде:

.desatka_buba {
position: absolute;
left: 200px;
top: 200px;
z-index: 1;
}
.valet_buba {
position: absolute;
left: 215px;
top: 215px;
z-index: 2;
}
.dama_buba {
position: absolute;
left: 230px;
top: 230px;
z-index: 3;
}
.korol_buba {
position: absolute;
left: 245px;
top: 245px;
z-index: 4;
}
.tuz_bubna {
position: absolute;
left: 260px;
top: 260px;
z-index: 5;
}

Ну а в html коде , просто присваиваете рисункам соответствующие стили, типа:
<img src="10buba.gif" class="10_buba"> ну и так далее, вы поняли...
Смотреть пример

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

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

Урок 14: Плавающие блоки(свойство float)

Урок 14: Плавающие блоки(свойство float)

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

Итак, Плавающие блоки в CSS определяются свойством float.


Свойства FLOAT


Данное свойство определяет, будет ли блок плавающим и в какую сторону он будет перемещаться. Свойство может принимать следующие значения.

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

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

html код :

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

CSS код :

.box1 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
}
.box2 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
}
.box3 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
}

Смотреть пример

Как видите, по умолчанию каждый следующий блок, находится под предыдущим.

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

.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 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:right;
}
.box2 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:right;
}
.box3 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:right;
}

Смотреть пример

Классический пример применения - это когда надо сделать чтобы текст выводился в колонках. Пусть колонки будет три.

CSS код:

.column1 {
float:left;
width: 33%;
}
.column2 {
float:left;
width: 33%;
}
.column3 {
float:left;
width: 33%;
}

В html-коде просто заключим необходимый текст в соответствующие колонки, тегами DIV

<div class="column1">
<p>There is one universal truth in website making: To make a websitet...</p>
</div>

<div class="column2">
<p> If you're like the vast majority of people thinking ...</p>
</div>

<div class="column3">
<p>There is one universal truth in website...</p>
</div>
Смотреть пример

Говоря о плавающих блоках, необходимо упомянуть также о свойстве CLEAR -специфическое свойство, позволяющее определенным образом позиционировать плавающие блоки.
left - блок должен размещаться ниже всех левосторонних плавающих блоков.
right - блок должен размещаться ниже всех правосторонних плавающих блоков.
both - блок должен размещаться ниже всех плавающих блоков.
none - никаких ограничений на положение блока относительно перемещаемых объектов не накладывается.

Ну допустим имеется два плавающих влево блока(float:left;), которые обтекает текст.
Смотреть пример

Если заключить весь текст в блок, и придать ему свойство CLEAR:BOTH т.е. чтобы он размещался ниже всех плавающих блоков, можно избавиться от обтекания блоков текстом.

html-код

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

<div class="box3">
<p>There is one universal truth in website...</p>
</div>

CSS-часть

.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 {
clear:both;
}

Смотреть пример

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

Вот Вам еще один пример, когда один блок располагается под другим, и оба блока обтекаются текстом.

html-код

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

<p>There is one universal truth in website...</p>


css- часть

.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;
clear:both;
}
Смотреть пример

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

Если хотите посмотреть, как использовать плавающие блоки для создания каркаса сайта, Вам сюда .

Урок 13: Позиционирование блоков

Урок 13: Позиционирование блоков

Технология CSS позволяет размещать что угодно, там где Вам угодно. Нужно просто указать координаты блока и все. Под блоком мы понимаем не только <div>, но и заголовки, параграфы, рисунки, списки, в общем все, что является блоковой моделью. Это помогает создать действительно прикольный, уникальный дизайн.

Рассмотрим две основные модели позиционирования:

Абсолютное позиционирование (POSITION:ABSOLUTE;)
Относительное позиционирование (POSITION:RELATIVE; )



Абсолютное позиционирование (POSITION:ABSOLUTE;)

Обычно для позиционирования применяют именно этот тип. В технологии CSS, свойство позиционирования обозначается как POSITION, а чтобы указать , что это позиционирование абсолютное, пишут значение ABSOLUTE. Затем используя ключевые слова top, right,bottom,left указывают необходимые координаты, которые отсчитываются от краев окна браузера.

Посмотрите на рисунок ниже. Я специально сделал рамку боксу, чтобы было более понятно, откуда отсчитываются координаты.



Огромный плюс абсолютного позиционирования в том, что бокс с абсолютным позиционированием располагается по заданным координатам, а из того места, где он должен был бы быть, он удаляется.
Блин, на словах объяснить проблематично, так что давайте покажу на примере:

Рассмотрим, обычный документ с одним изображением, и обтекающим его текстом.
Смотреть пример

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

.smile{
border: 1px solid red;
position:absolute;
top:100px;
right:100px;
}

Ну а с html думаю проблем у Вас не будет, чтобы применить класс к изображению, пишем типо <img class="smile"> .
Смотреть пример

Что мы видим? как я уже писал раньше, изображение удалилось из того места, где оно было(вместо изображения теперь там текст), и переместилось соответственно указанным координатам. В примере выше, я сделал красную рамку, чисто для того, чтобы было нагляднее понятно, что координаты отсчитываются правильно. А вообще, ее лучше не ставить :)

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

Вот еще пример стиля:

.smile{
position:absolute;
bottom:300px;
left:100px;
}
Смотреть пример

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

.smile{
position:fixed;
bottom:300px;
left:100px;
}
Смотреть пример
↑ Наверх ↑


Относительное позиционирование (POSITION:RELATIVE; )

При относительном позиционировании, бокс смещается , но его прежнее место ничего не заполняет. Обозначается в как POSITION: RELATIVE;

Координаты в отличие от абсолютного позиционирования, отсчитываются от прежнего положения блока.

Вот пример простого документа с текстом и рисунком:
Смотреть пример

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

Css код:

.smile{
border:1px solid red;
position:relative;
top:200px;
left:100px;
}
Смотреть пример

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

Ниже Вы можете наблюдать скриншот из предыдущего примера, с пояснениями координат:







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

Урок 12: Высота(height) и ширина(width) блоков

Урок 12: Высота(height) и ширина(width) блоков

Как Вы уже наверное заметили, по умолчанию высота и ширина блоков определяются автоматически, т.е. чем больше текста(или другого содержимого) тем шире и выше блок.

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

HEIGHT - свойство устанавливающее высоту блока;

WIDTH - свойство устанавливающее ширину блока;

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

Теория - теорией, но давайте практиковаться. Я создал 4 класса, и поочередно присвоил их одному и тому же боксу (в данном случае DIV) с текстом. Смотрите что получилось.

.box1 {
width: 300px;
border: 1px solid red;
background: #FFE446;
}
Смотреть пример

Как видите, ширина фиксированная и равна 300 пикселей, а высота устанавливается по умолчанию, в зависимости от содержимого.



.box2 {
height: 300px;
border: 1px solid red;
background: #FFE446;
}
Смотреть пример

Теперь, фиксированная высота, а ширина растягивается по содержимому.



.box3 {
width: 300px;
height: 600px;
border: 1px solid red;
background: #FFE446;
}
Смотреть пример

Здесь фиксированная как высота, так и ширина.



.box4 {
width: 300px;
height: 300px;
border: 1px solid red;
background: #FFE446;
}
Смотреть пример

А это пример того, как будет выглядеть бокс с фиксированной шириной и высотой, если содержимое не влазит туда :)
Текст попросту выходит за рамки блока.

Примечание!

Как я уже говорил, в 9 уроке, согласно спецификации CSS, поля, границы и отступы не входят в ширину блока. Таким образом, указывая ширину блока, вы задаете ширину лишь той части блока, которая отведена для содержимого.

Ну вот мы и разобрались с шириной и высотой блоков. Можно смело двигаться дальше...

Урок 11: Поля (margin) и отступы (padding)

Урок 11: Поля (margin) и отступы (padding)

Это очень простой, но в это же время и нужный урок. Давайте посмотрим, в чем отличие margin от padding. Для этого, еще разок вспомним блоковую модель в CSS.



MARGIN (Поля) - это расстояние от границы(рамки) блока, до ближайших элементов, или, если их нет, до краев документа.

PADDING (Отступы) - как бы внутреннее расcтояние, между границей(рамкой) и содержимым блока.

И давайте сразу посмотрим примерчик: создадим три стиля для трех разных параграфов, с различными значениями margin и padding и посмотрим на результат:

.p1 {
background-color : #FFE446;
border:1px solid red;
margin:70px;
}
.p2 {
background-color : #FFE446;
border:1px solid red;
padding:70px;

}
.p3 {
background-color : #FFE446;
border:1px solid red;
margin:50px;
padding:20px;
}
Смотреть пример

Ну как разобрались? если читали текст внутри примера, то точно разобрались...

Добавляя уже знакомые нам ключевые слова: top, right, bottom, left можно регулировать отступы и поля соответственно сверху, справа, снизу, слева.

p {
margin-top:50px;
margin-right:50px;
margin-bottom:50px;
margin-left:150px;
}
Смотреть пример

Тоже самое, только в более сокращенной записи:

p {
margin:50px;
margin-left:150px;
}

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

Возможен также такой вариант записи:

p {
margin: 50px 50px 50px 150px;
}

Т.е. значения записываются по часовой стрелке: верхнее, правое, нижнее, левое.

В каких случаях лучше пользоваться отступами, а в каких полями?

А это уже решать Вам, могу только дать несколько принципиальных отличий:

Отступы(padding) распологаются внутри блока, а поля(margin) - за их пределами;
Фон блока и фоновое изображение распространяются только на отступы, но не на поля. Поля всегда прозрачны, и сквозь них просвечивает фон родительского элемента.

Думаю тут нет ничего сложного, главное попрактикуйтесь, придумайте свои примеры, а уже потом можете двигаться дальше

Урок 10: Рамки в CSS

Давайте в этом уроке поговорим о рамках. Основные свойства рамок в CSS следующие:

border-width
border-color
border-style
Сокращенная форма - border
Примеры



Свойство BORDER-WIDTH

Это свойство задает толщину рамки. Значение обычно указывается в пикселях, но также можно указывать ключевыми словами thin (2px) , medium(4px) и thick(6px). Для лучшего понимания, сколько это один пиксель, смотрите рисунок ниже:



На рисунке приведены значения ширины от 1 до 10 пикселей.



Свойство BORDER-COLOR



Как вы поняли данное свойство определяет цвет рамки. Значение цвета задается обычным образом, т.е. например: "#ff3344", или "gold".



Свойство BORDER-STYLE

Данное свойство определяет какого вида будет рамка. Ниже приведены 8 основных значений данного свойства. Все рамки в примере выполнены цветом gold и шириной 6 px .
SOLID Рамка состоит из сплошной линии

DOTTED Точечная рамка

DASHED Пунктирная рамка

DOUBLE Рамка из двойной сплошной линии

GROOVE Рамка как бы из вдавленной линии, с имитацией объема

RIDGE Рамка отображается выпуклой линией с имитацией объема

INSET Рамка отображается так, что весь блок кажется вдавленным

OUTSET Рамка отображается так, что весь блок кажется выпуклым



Примечание:минимальная ширина рамки типа double должна равняться 3 px, иначе она будет отображаться некорректно.

Вот пару примеров стилей:

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

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

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


Смотреть пример

Или такой вариант:

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

h2 {
border-width: 20px;
border-style: dashed;
border-color: gold;
}

h3 {
border-width: 16px;
border-style: double;
border-color: green;
}

p {
border-width: 1px;
border-style: dotted;
border-color: blue;
}


Смотреть пример
↑ Наверх ↑

Сокращенная форма - border

Как и в других свойствах, у рамки есть сокращенная форма border . В начале пишется толщина, затем после пробела стиль, а затем после пробела цвет. Предыдущий пример можно записать так:

h1 {
border:30px outset red;
}

h2 {
border:20px dashed gold;
}

h3 {
border: 16px double green;
}

P {
border:1px dotted blue
}
Смотреть пример
Примеры:

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

h1 {
border-top-width: 30px;
border-top-style:solid ;
border-top-color: red;

border-right-width: 20px;
border-right-style:dashed ;
border-right-color: gold;

border-bottom-width: 10px;
border-bottom-style:dashed;
border-bottom-color: green;

border-left-width: 40px;
border-left-style:solid ;
border-left-color: blue;
}
Смотреть пример

Естественно намного красивее код будет выглядеть в сокращенном виде:

h1 {
border-top: 30px solid red;
border-right: 20px dashed gold;
border-bottom: 10px dashed green;
border-left: 40px solid blue;
}
Смотреть пример

Можно также комбинировать перечисленные выше свойства, ну например так:

h1 {
border: 30px solid red;
border-bottom: 10px solid gold;
}

h2 {
border: 30px solid red;
border-bottom-color: green
}

Смотреть пример

Думаю Вам все понятно, пора переходить к следующему уроку

Урок 9: Блоковая модель в CSS

Давайте разберемся что значит эта самая блоковая модель, для этого вспомним немного html.

Дело в том, что в html различают элементы блочные и строчные. Причем блочные элементы это как бы отдельная структурная единица, которая всегда отделяется абзацными отступами. Т.е. нельзя расположить два блочных элемента на одной строке. Примером блоков в html могут служить элементы H1-Н6, Р, DIV. А строчные элементы не создают как-бы отдельной структурной единицы, не отделяются абзацными отступами, и например два строчных элемента могут без проблем расположиться на одной строке. Примером могут быть элементы strong ,EM , I.

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





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

Вокруг области контента могут быть пустые, не занятые содержимым области, называемые полями (margin). С точки зрения дизайна поля обеспечивают для содержимого блока эстетически более привлекательный вид. При наличии полей определенного размера текст не примыкает вплотную к границам блока. Можно провести аналогию с полями, устанавливаемыми при печати документов на бумаге. Если полей не было бы, то текст начинался бы прямо у края листа. При наличии полей имеются не занятые текстом области вдоль краев листа бумаги, и текст, напечатанный на листе, в этом случае читать приятнее и удобнее.

Непосредственно за полями проходит граница блока (border), которая может иметь определенную толщину и стиль линий. Ширина блока может быть произвольной - от нулевой (граница в этом случае не видна) до произвольно заданной в единицах измерениях длины. Стиль линий может быть различным, от простой линии до объемных вариантов. Кроме того, граница может иметь произвольный цвет.

Также блок может иметь отступы (padding), это дополнительное свободное пространство вокруг границы блока. Согласно спецификации CSS, поля, границы и отступы не входят в ширину блока. Таким образом, указывая ширину блока, вы задаете ширину лишь той части блока, которая отведена для содержимого.

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

Урок 8: Типы селекторов в CSS

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

Селектор по элементу;
Селектор по классу;
Селектор по id;
Контекcтный селектор;

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

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

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

А теперь представьте ситуацию, когда необходимо сделать первый параграф в одном стиле, второй в другом, третий в третьем и.т.д. Тут нам на помощь придетселектор по классу.



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

Давайте разберем как создать универсальный класс в CSS . А сделать это очень просто: сначала ставим точку, затем сразу, без пробела,пишем имя класса, ну а затем в фигурных скобках стиль. Ну например:

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

Как применить данный стиль?

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

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

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

html:

<p>Это обычный параграф , для него используется селектор по элементу</p>
<p class="green"> Этот параграф зеленый, т.к к нему применили класс</p>
<p class ="big_red" >А этот параграф большего шрифта и красный </p>
<p>Этот параграф снова обычный, по классу селектора элемента </p>

css:

p {
font-family:arial,verdana,sans-serif;
font-size:18px;
}
.green {color:green;}
.big_red{
font-size:28px;
color:red;
}
Смотреть пример

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

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

Сделать так, чтобы класс действовал только на определенный элемент(например параграф) можно указав название элемента перед точкой:

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;}
Смотреть пример

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

Урок 7: Ссылки в CSS

Урок 7: Ссылки в CSS

Наверное Вы не раз замечали на различных сайтах, как при наведении на ссылку меняется ее внешний вид. Ну например исчезает подчеркивание или меняется цвет. Это делает как-раз CSS , а именно за это отвечают псевдоклассы - классы, способные учитывать те или иные условия , при определении свойств html элемента.

Как применить псевдокласс к ссылкам?

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

А : ИМЯ ПСЕВДОКЛАССА { ...стиль ...}

Ну вот для ссылок например бывает четыре псевдокласса:

A:link { ... стиль оформления обычной ссылки... }
A:active { ... стиль оформления ссылки в момент нажатия... }
A:visited { ... стиль оформления посещенной ссылки... }
А:hover { ... стиль оформления ссылки, на которую наведен указатель мыши ... }


Ну теперь давайте я приведу вам некоторые примеры для лучшего понимания. Для начала, посмотрите, как выглядят ссылки по умолчанию:



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

a:link {
color: blue ;
}
a:visited {
color:gray;
}
a:hover {
color:red ;
text-decoration:none;
}
a:active {
color:green;
text-decoration:none;
}

Смотреть пример

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

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

a:link {
color: blue ;
}
a:visited {
color:gray;
}
a:hover {
color:red ;
text-decoration:none;
font-weight:bold;
}
a:active {
color:green;
text-decoration:none;
text-transform:uppercase;
}

Смотреть пример

Бывают случаи, когда мы не хотим вообще чтобы ссылка визуально выделялась на фоне текста. Решение опять же в CSS:

a:link {
color: black ;
text-decoration:none;
}
a:visited{
color: black ;
text-decoration:none;
}
a:hover {
color: black ;
text-decoration:none;
}
a:active {
color: black ;
text-decoration:none;
}

Смотреть пример

Если для всех псевдоклассов стиль одинаковый, как в примере выше, то это можно записать и короче:

a:link, a:visited, a:hover, a:active {color:black; text-decoration:none;}

А можно и вовсе без использования псевдоклассов:

a {color:black; text-decoration:none;}



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

Урок 6: Списки в CSS

В этом уроке мы рассмотрим основные свойства CSS , отвечающие за внешний вид списков. Их совсем чуть-чуть, так что урок будет коротким, но полезным!

list-style-type
list-style-position
list-style-image
list-style

Запомните: Все эти свойства универсальны, т.е. могут применяться как к упорядоченным спискам, так и к неупорядоченным. В этом то и прикол CSS , что можно из неупорядоченного списка, сделать упорядоченный и наоборот :)



Свойство LIST-STYLE-TYPE

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

disk - маркер в виде закрашенного круга;
circle - маркер в виде незакрашенного круга;
square - маркер в виде закрашенного квадрата;

decimal - обычные десятичные числа , например 1,2,3,4,5 и т. д. ;
upper-roman - большие римские цифры, типа I, II, III, IV, V и т.д. ;
lower-roman - маленькие римские цифры типа i, ii, iii, iv, v и т.д.
upper-alpha - большие буквы A, B, C, D, E и так далее;
lower-alpha - малые буквы типа a,b,c,d,e и т.д.;
none - маркер списка отсутсвует;

Переделаем, для прикола, упорядоченный список в неупорядоченный, т.е. элементу OL( упорядоченый список) напишем square, а элементу UL(неупорядоченный) тип upper-roman;

ol {list-style-type:square;}
ul {list-style-type: upper-roman;}
Смотреть пример

Результат на лицо! если не верите, посмотрите исходный html код примера:)
Свойство LIST-STYLE-POSITION

Это свойство определяет положение маркера. Может принимать два значения:
outside - за пределами основного блока элемента списка;
inside - внутри основного блока списка.

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






Только учтите, это свойство уже устарело, и сейчас, в новых версиях браузеров может уже и не работать!

Свойство LIST-STYLE-IMAGE

Это наверное самое интересное свойство в списках. Оно позволяет поставить вместо маркера любое изображение. В качестве значения указывается ключевое слово url и затем в круглых скобках путь к изображению. В некоторых устаревших версиях браузеров, работает неккоректно.

ul {list-style-image: url(galka.gif);}
Смотреть пример

Не забывайте, что url(galka.gif) означает что изображение galka.gif лежит в той же папке, где и css -файл. Если у вас изображение не там, соответственно и путь указывайте другой!

Сокращенная форма LIST-STYLE

Перечисленные выше свойства можно записать более компактно. Для этого существует сокращенный вариант list -style;

Такой вариант из трех строк:

ul {
list-style-type:square;
list-style-position: inside;
list-style-image: url(galka.gif);
}


Рациональнее заменить таким:

ul {list-style:square inside url(galka.gif) }

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

Если какое-либо свойство не указать, ему присвоится значение по умолчанию.

Ну вот и все по спискам! теперь Вам осталось попрактиковаться, и можете переходить к следующему уроку.

Урок 5: Текст в CSS

В этом уроке мы рассмотрим основные свойства CSS отвечающие за форматирование текста.

text-align
text-decoration
text-indent
text-transform
letter-spacing
word-spacing


Свойство TEXT-ALIGN


Свойство выравнивания текста, аналогичное атрибуту ALIGN используемому в html. Может принимать четыре значения:


left - выравнивание по левому краю(значение по умолчанию);

right - выравнивание по правому краю;

center - выравнивание по центру;

justify - выравнивание по ширине(по правому и левому краям одновременно).


Тут все очень просто, ну вот например:


h1{ text-align:center;}

h2 {text-align:left;}

h3 {text-align:right;}

p {text-align:justify;}
Смотреть пример






Свойство TEXT- DECORATION


Позволяет оформлять текст определенным образом. Рассмотрим четыре основных значения данного свойства:


none - значение по умолчанию. Дополнительного оформления не происходит;

underline - текст подчеркивается снизу;

overline - текст надчеркивается сверху;

line-through - текст перечеркивается;


h1 {

text-align:center;
text-decoration:underline;

}

h2 {

text-align:center;
text-decoration:overline;

}

h3 {

text-align:center;
text-decoration:line-through;

}
Смотреть пример


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





Свойство TEXT-INDENT


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


h1{text-align:center;}
p {

text-indent: 40px;

}
Смотреть пример


Однако можно задать и в процентах от общей длины базовой строки(строки без отступа)


h1{text-align:center;}
p {

text-indent: 20%;

}
Смотреть пример


Как видите, все очень просто, а в html это сделать гораздо сложнее.


Свойство TEXT-TRANSFORM


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


capitalize - меняет регистр первых букв каждого слова так, чтобы они были заглавными. Например:"создайте сайт сейчас" станет "Создайте Сайт Сейчас".

Частенько это свойство используется при написании рекламных текстов, это больше привлекает внимания!


uppercase - делает из всех букв заглавные. Например: "текст в css " станет " ТЕКСТ В CSS "


lowercase - делает из всех букв маленькие. Например: "TRANSFORM" cтанет "transform".


none - не производит смены регистра; это значение используется по умолчанию.





Свойство LETTER-SPACING


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


h1 { letter-spacing: 10px;}

p{ letter-spacing :4px; }
Смотреть пример


В примере выше для заголовков установлен интервал между буквами в 10 px, а для параграфов в 4px;






Свойство WORD-SPACING


Позволяет изменять расстояние между словами. Значение также лучше задавать в пикселах.


h1 { word-spacing: 20px;}

p{ word-spacing :10px; }
Смотреть пример


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


Вот мы и закончили изучение основных свойств из этого урока. Поверьте, дальше будет гораздо интересней. В следующем уроке мы поговорим о списках. Но не спешите идти дальше, сначала хорошенько закрепите пройденный материал!

Урок 4: Шрифты в CSS

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

Так вот за шрифты в CSS отвечают следующие свойства:

font-family
font-style
font-variant
font-weight
font-size
font



Свойство FONT-FAMILY

Данное свойство определяет гарнитуру шрифта. Вообще FONT-FAMILY с англ. означает семейство шрифта. Дело в том, что шрифты по тем или иным признакам, объединяются в семейства. Я рассмотрю три основных семейства:
Serif - шрифты с характерными "засечками", наиболее яркий представитель - "Times New Roman";
Sans-serif - шрифты рубленые, без засечек, например Arial или Verdana ;
Monospace - моноширинные шрифты (с одинаковым расстоянием между символами, наподобие печатной машинки), такие как "Courier New";

На рисунке ниже изображены названия основных, используемых на практике, шрифтов, сгруппированные по семействам. Причем отображены они именно так, как выглядят на самом деле, например название "Times New Roman" отображено шрифтом "Times New Roman" , ну вы поняли....





Может Вам интересно, почему некоторые шрифты мы заключаем в кавычки? А дело в том, что есть такое правило: "Если в названии шрифта встречаются пробелы, то его следует заключать в кавычки" .

h1 {font-family: verdana, arial, sans-serif;}
p {font-family: "Times New Roman", serif;}
Смотреть пример

Т.е. в начале пишется самый приоритетный шрифт, затем менее приоритетный, а затем желательно писать имя семейства. Надпись из примера выше -
h1 {font-family: verdana, arial, sans-serif;} означает, что все заголовки первого уровня будут отображаться шрифтом verdana. Если по каким либо причинам этот шрифт не установлен на компьютере, то браузер подставит шрифт arial, а если и его нет, то браузер подставит любой доступный шрифт из семейства serif . Вот так.



Свойство FONT-STYLE

Данное свойство задает стиль шрифта. Может принимать три значения:
normal - обычный;
italic - курсивный;
oblique - наклонный;

У вас может возникнуть вопрос: "чем отличается курсивный от наклонного?" , - дело в том, что значение italic означает использование встроенного в шрифт курсивного начертания. Ведь почти каждый шрифт включает в себя все символы и буквы в нормальном исполнении, в полужирном исполнении и в курсивном.
А значение oblique - это искусственно созданный курсив, т.е. созданный наклоном стандартных букв на определенный угол.

h1{
font-family: verdana, arial, sans-serif;
font-style:normal;
}
h2{
font-family: verdana, arial, sans-serif;
font-style:italic ;
}
h3{
font-family: verdana, arial, sans-serif;
font-style:oblique;
}

Смотреть пример



Свойство FONT-VARIANT

Это свойство используется для выбора варианта написания букв нижнего регистра. Может принимать два значения:

normal - значение по умолчанию, текст отображается обычным образом.
small-caps - буквы нижнего регистра отображаются как уменьшенные заглавные.



Т.е. как видите большие(заглавные буквы) остаются без изменений, а маленькие - представляют собой полную копию заглавных букв, только слегка меньшего размера.

По умолчанию (т.е. если вообще не записывать это свойство) текст будет отображаться обычным начертанием.

Пример записи стиля:

h1{
font-family: verdana, arial, sans-serif;
font-variant:small-caps;
}
h2{font-family: verdana, arial, sans-serif;}
Смотреть пример

Думаю тут все понятно, поехали дальше...
↑ Наверх ↑



Свойство FONT-WEIGHT

Это свойство определяет насыщенность шрифта, т.е. с его помощью можно сделать шрифт жирным. Основные значения: normal - обычный и bold - жирный. Некоторые браузеры поддерживают числовые значения: 100, 200,300,400,500,600,700,800,900. Для справки: 400 равносильно normal, а 700 - bold . Но я не советую вам пользоваться числами!

P {font-family: arial, verdana, sans-serif;}
DIV {
font-family: arial, verdana, sans-serif;
font-weight: bold;
}
Смотреть пример


Свойство FONT-SIZE

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

Давайте прикольнемся над заголовками:

h1 {
font-family: arial, verdana, sans-serif;
font-size: 18px;
}
h2{
font-family: arial, verdana, sans-serif;
font-size: 36px;
color: red;
}

Смотреть пример

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

Сокращенная запись. Свойство FONT

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

При этом нужно записывать значения всех свойств через пробел, в такой последовательности:

font-style_ font-variant_font-weight_font-size_font-family

Ну вот например:

P{
font-style: italic;
font-variant: normal ;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}

А теперь то же самое в краткой форме:

P{ font : italic normal bold 30px arial,sans-serif; }

Еще раз обратите внимание, на то, что все значения указаны в нужной последовательности, и ЧЕРЕЗ ПРОБЕЛ. Если какое-либо свойство не указать, ему присвоится значение по умолчанию.

НУ что, теперь попрактикуйтесь, и можно приступать к следующему уроку.

Урок 3: Цвет и фон в CSS

Этот урок мы посвятим такому важному моменту как цвет и фон в CSS . Вы увидите, как прикольно, и насколько эффективнее чем в html, все это работает!

Запомни: цвета в CSS указываются так же, как и в html. Т.е. можно указывать шестнадцатиричное значение, например #ff3355, либо же название цвета (red, green, blue и др.)

Основными свойствами цвета и фона в CSS являются:

color
background-color
background-image
background-repeat
background-attachment
background-position
background

А теперь подробнее, и по-порядку:



Свойство COLOR

Задает основной цвет(цвет переднего плана) того или иного элемента. Например, если мы хотим сделать цвет всех заголовков первого уровня красным, а цвет текста параграфов зеленым, то таблица стилей будет выглядеть так:

H1 {
color: red ;
}
P {
color: green ;
}
Смотреть пример

Для удобства восприятия я выделил свойства и их значения разными цветами.



Свойство BACKGROUND-COLOR

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

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

BODY {
background-color : #FFEE8C ;
}
H1 {
color: red ;
background-color :blue ;
}
P {
color: green ;
}
Смотреть пример

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



Свойство BACKGROUND-IMAGE

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

BODY {
background-color : #FFEE8C ;
background-image : url(smile.png) ;
}
H1 {
color: red ;
background-color :blue ;
}
P {
color: green ;
}
Смотреть пример

Как видите, в качестве значения свойства, указывается путь к изображению, но немного не так как в html. В начале пишется URL а затем сразу, Без пробелов!!! в круглых скобках положение картинки. Если она находится в той же папке, то пишем просто название картинки, как в примере выше. Если допустим в подпапке img , то пишем так url(img/smile.png) , ну Вы поняли...



Фоновое изображение в CSS можно задавать для любого элемента, не только для таблиц и всей страницы. Вверху, две картинки смайлика - большая и маленькая. Попробуйте сохранить их себе на компьютер и потренироваться. Большой смайлик поставьте на фон всей страницы, а маленький - на фон заголовков первого уровня.


Кто не знает, чтобы сохранить изображение просто наведите на него указатель, клацните правой кнопкой и выберите "Сохранить рисунок".



Свойство BACKGROUND-REPEAT

Вы наверное заметили, что фоновое изображение по-умолчанию повторяется начиная с верхнего левого угла, как по вертикали , так и по горизонтали, , пока не заполнит весь экран. Так вот, с помощью свойства background-repeat мы можем контролировать эти повторения.
Это свойство может принимать четыре значения:
Background-repeat: repeat-x ; повторение по горизонтали Смотри пример
Background-repeat: repeat-y ; повторение по вертикали Смотри пример
Background-repeat: repeat ; по вертикали и по горизонтали(значение по-умолчанию) Смотри пример
Background-repeat: no-repeat ; не повторяется Смотри пример


Это очень полезное свойство, и аналогов ему в html нет.

Пример записи стиля:

BODY {
background-image : url(smile.png) ;
background-repeat: repeat-x;
}

Смотреть пример

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



Свойство BACKGROUND-ATTACHMENT

При наличии фонового рисунка, это свойство устанавливает, будет ли фоновое изображение прокручиваться с содержимым страницы, или будет заблокировано, т.е. неподвижно. Может принимать два значения:
SCROLL - фон прокручивается вместе с содержимым;
FIXED - фон строго зафиксирован.

BODY {
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-attachment: scroll ;
}

Смотреть пример

BODY {
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-attachment: fixed ;
}

Смотреть пример

Значение по умолчанию - scroll , т.е. если вообще не писать это свойство, то фон будет прокручиваться вместе с содержимым, как в первом примере.

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



Свойство BACKGROUND-POSITION

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



В начале указываем координату по горизонтали (по оси Х), затем через пробел координату по вертикали (по оси Y ). Координату можно задавать в процентах от ширины окна браузера, также в пикселях. Можно задавать и в сантиметрах, но не советую.

Также положение можно задавать специальными словами:
left - лево, right - право, center -центр, top - верх, bottom - низ . Смотрите рисунок:



Примеры стилей:

BODY {
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-position: top right;
}

Смотреть пример

BODY {
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-position: 300px 500px ;
}
Смотреть пример


BODY {
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-position: 75% 25%;
}

Смотреть пример



Сокращенная форма записи - BACKGROUND

Свойство BACKGROUND служит для сокращенной записи всех выше расмотренных свойств.

Порядок свойств этого элемента таков:

background-color_background-image_background-repeat_background-attachment_background-position


Т.е. просто записывается пять значений свойств через пробел.Рассмотрев пример ниже Вам станет все понятно:

То что записано так:

BODY {
background-color:#ffee8c ;
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
}


Можно записать одной строчкой:


BODY {
background: #ffee8c url(smile.png) no-repeat fixed top right ;
}


Как видите, пишем значения свойств через пробел. Если какое либо свойство не указать, то ему автоматически присвоится значение по- умолчанию.


Ничего сложного здесь нет. Попрактикуйтесь, и Вы все запомните!