Что такое CSS

Цель данного мини курса - дать Вам базовые знания CSS, которые помогут Вам создавать свои первые web-страницы или редактировать уже готовые шаблоны своих web-сайтов!.

В первую часть мини курса вошли уроки:
Урок 1 Начало: Вы узнаете об основах базовой модели CSS и о том, какие коды необходимо использовать для CSS в HTML-документе.
Урок 2 Фон и цвет в CSS: В этом уроке вы научитесь, как использовать цвета и фон на ваших web-сайтах.
Урок 3 Шрифты в CSS: Управление шрифтами с помощью CSS.
Урок 4 Текст в CSS: В этом уроке вы увидите возможности CSS при форматировании(отображении) текста.

Что такое CSS?

Возможно, вы уже слышали о CSS, но не знаете, что это такое? В этом мини курсе вы узнаете, что такое CSS и что он может сделать для вас.

CSS это акроним для Cascading Style Sheets/Каскадных таблиц стилей.
Что можно делать с помощью CSS?

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

HTML может (неправильно) использоваться для оформления web-сайтов. Но CSS предоставляет бóльшие возможности и более точен и проработан. CSS, на сегодняшний день, поддерживается всеми браузерами (программами просмотра).

Прочитав лишь несколько уроков этого мини курса, вы сможете создавать собственные таблицы стилей и использовать CSS для придания вашему web-сайту великолепного вида.
В чём разница между CSS и HTML?

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

Давным-давно язык HTML использовался только для вывода структурированного текста. Автор мог только размечать текст: "это - заголовок" или "это - параграф", используя HTML-тэги, такие как <h1> и <p>.

По мере развития Web дизайнеры начали искать возможности форматирования онлайновых документов. Чтобы удовлетворить возросшим требованиям потребителей, производители браузеров (тогда - Netscape и Microsoft) изобрели новые HTML-тэги, такие, например, как <font>, которые отличались от оригинальных HTML-тэгов тем, что они определяли внешний вид, а не структуру.

Это также привело к тому, что оригинальные тэги структурирования, такие как <table>, стали всё больше применяться для дизайна страниц вместо структурирования текста. Многие новые тэги дизайна, такие как <blink>, поддерживались только одним браузером. "Вам необходим браузер X для просмотра этой страницы" - такой отказ стал обычным явлением на web-сайтах.

CSS был создан для исправления этой ситуации путём предоставления web-дизайнерам возможностей точного дизайна, поддерживаемых всеми браузерами. Одновременно произошло разделение представления и содержимого документа, что значительно упростило работу.
Какие преимущества даст мне CSS?

Появление CSS стало революцией в мире web-дизайна. Конкретные преимущества CSS:

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

Каскадные таблицы стилей/CSS это язык стилей, определяющий отображение HTML-документовCascading Style Sheets (CSS) это поразительное изобретение для улучшения вида ваших web-сайтов. Оно поможет сэкономить уйму времени и предоставит вам совершенно новые возможности в дизайне web-сайтов. CSS совершенно необходим каждому, работающему с web-дизайном.

Этот мини курс поможет вам начать работать с CSS всего через несколько часов. Он разъясняет всё очень доходчиво и научит вас сложной этой технологии.

Изучение CSS увлекает. Читая этот мини курс, выделяйте достаточное количество времени для экспериментов с изученным в каждом уроке материалом.

Использование CSS требует знания основ HTML. Если вы не знаете HTML, то начните с нашего Мини Курса HTML, прежде чем перейти к CSS.
Какое программное обеспечение необходимо иметь?

Не используйте при работе с этим учебником такие программы, как FrontPage, DreamWeaver или Word. Эти продвинутые программы не помогут вам в изучении CSS. Наоборот, они сильно ограничат ваше продвижение в этом направлении.

Вам понадобится бесплатный и простой текстовый редактор.

Например, Microsoft Windows поставляется с программой Notepad(Блокнот). Она обычно находится в Пуск - Программы - Стандартные:. Вы можете также использовать простой текстовый редактор, например Pico для Linux или Simple Text для Macintosh.

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

С этим мини курсом можно использовать любой браузер. Мы советуем иметь новейшую версию браузера.

Браузер и простой текстовый редактор - вот всё, что вам необходимо.

Урок 1: Начало.

Вы этом уроке вы создадите свою первую таблицу стилей/style sheet. Вы узнаете об основах базовой модели CSS и о том, какие коды необходимо использовать для CSS в HTML-документе.

Многие свойства, используемые в Cascading Style Sheets (CSS), аналогичны свойствам HTML. Таким образом, если вы используете HTML для дизайна страниц, вы, наверняка узнáете многие коды. Посмотрим на конкретном примере.
Базовый синтаксис CSS

Скажем, нам нужен красный цвет фона web-страницы:

В HTML это можно сделать так:



С помощью CSS того же самого результата можно добиться так:



Как видите, эти коды более или менее идентичны в HTML и CSS. Этот пример также демонстрирует фундаментальную модель CSS:



Селектор : HTML теги, классы, идентификаторы
Свойство : CSS свойство (которое вы хотите применить)
Значение : Значение, применяемого CSS свойства
Очень важно не забывать про открывающую и закрывающую фигурные скобки "{}" и точку с запятой в конце каждого правила ";"
Применение CSS к HTML-документу

Есть три способа применить правила CSS к HTML-документу. Ниже мы рассмотри эти три метода. Мы рекомендуем сосредоточиться на третьем - то есть внешней/external таблице стилей.
Метод 1: Инлайн/In-line (атрибут style)

Можно применять CSS к HTML с помощью HTML-атрибута style. Красный цвет фона можно установить так:



Метод 2: Внутренний (тэг style)

Второй способ вставки CSS-кодов - HTML-тэг <style>. Например:



Метод 3: Внешний (ссылка на таблицу стилей)

Рекомендуемый метод - создание ссылки на так называемую внешнюю таблицу стилей. В данном мини курсе мы будем использовать именно этот метод во всех примерах.

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

Например, скажем, ваша таблица стилей называется style.css и находится в папке style.

Нам небходимо создать ссылку из HTML-документа на таблицу стилей (style.css). Это можно сделать одной строчкой HTML-кода:



Обратите внимание, как указан путь к вашей таблице стилей атрибутом href.

Эту строку кода нужно вставлять в разделе header HTML, то есть между тэгами <head> и </head>. Например, так:



Эта ссылка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла.
Самое важное здесь то, что несколько HTML-документов могут ссылаться на одну таблицу стилей. Иначе говоря, один CSS-файл можно использовать для управления отображением множества HTML-документов.



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

Давайте посмотрим, как это сделать.
Попытайтесь сделать это сами

Откройте Блокнот (или другой ваш текстовый редактор) и создайте два файла - HTML-файл и CSS-файл - такого содержания:
default.htm



style.css



Разместите эти файлы в одной папке. Не забудьте сохранить файлы с правильными расширениями (".css" и ".htm")

Откройте default.htm в вашем браузере и вы увидите, что страница имеет красный фон. Поздравляем! Вы создали вашу первую таблицу стилей!

Урок 2: Фон и цвет

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

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

Цвет переднего плана : свойство "color"

Свойство color описывает цвет переднего плана элемента.

Например, мы хотим сделать все заголовки документа тёмно-красными. Все заголовки первого уровня обозначаются HTML-элементом <h1>. В нижеприведённом коде цвет элемента <h1> устанавливается красным.




Посмотреть пример >

Цвета можно указывать как шестнадцатеричные значения, как в примере (#ff0000 если каждая пара знаков одинаковая, например: #ff00cc, то запись цвета можно сократить до трёх знаков: #ff00cc = #f0c), либо вы можете использовать названия цветов ("red") или rgb-значения (rgb(255,0,0)).

Свойство "background-color"

Свойство background-color описывает цвет фона элемента.

В элементе <body> размещается всё содержимое HTML-документа. Таким образом, для изменения цвета фона всей страницы свойство background-color нужно применить к элементу(селектору) <body>.

Вы можете также применять это свойство к другим элементам, в том числе - к заголовкам и тексту. В следующем примере различные цвета фона применяются к элементам(селекторам) <body> и <h1>.




Посмотреть пример >

Заметьте, что мы устанавливаем два свойства для <h1>, разделяя их точкой с запятой.

Фоновые изображения "background-image"

CSS-свойство background-image используется для вставки фонового изображения.

Ниже мы используем в качестве фонового изображение - узор фона для сайта. Вы можете загрузить это изображение и использовать его на вашем компьютере (щёлкните правой клавишей мыши на изображении и выберите "сохранить изображение как/save image as"), либо вы можете использовать другое изображение.



Для вставки узора в качестве фонового изображения web-страницы просто примените свойство background-image для тега(селектора) <body> и укажите местоположение рисунка.




Посмотреть пример >

Обратите внимание, что мы специфицируем место, где находится файл как url("fon.jpg"). Это означает, что он находится в той же папке, что и таблица стилей. Вы, разумеется, можете ссылаться и на файлы изображений в других папках, используя, например, url("../images/fon.jpg"), или даже на файлы в Internet, указывая полный адрес файла : url("http://webostrovok.ru/demo/css/fon.jpg").

Повторение/мультипликация фонового изображения "background-repeat"

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

Вот четыре примера значения background-repeat:

background-repeat: repeat-x    Рисунок повторяется по горизонтали Посмотреть пример >
background-repeat: repeat-y    Рисунок повторяется по вертикали Посмотреть пример >
background-repeat: repeat        Рисунок повторяется по горизонтали и вертикали Посмотреть пример >
background-repeat: no-repeat  Рисунок не повторяется(не размножается) Посмотреть пример >

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




Посмотреть пример >

Блокировка фонового изображения "background-attachment"

Свойство background-attachment определяет, фиксируется ли фоновый рисунок, или прокручивается вместе с содержимым страницы.

В примерах указаны два значения background-attachment. Щёлкните на примере, чтобы увидеть разницу между scroll и fixed.

Background-attachment: scroll Изображение прокручивается вместе со страницей Посмотреть пример >
Background-attachment: fixed Изображение зафиксировано Посмотреть пример >

Например, следующий код фиксирует изображение.




Посмотреть пример >

Расположение фонового рисунка "background-position"

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

Есть много способов установить значение background-position. Тем не менее, все они представляют собой набор координат. Например, значение '100px 200px' располагает фоновый рисунок на 100px слева и на 200px сверху в окне браузера.

Координаты можно указывать в процентах ширины экрана, в фиксированных единицах (пикселы, сантиметры, и т. п.), либо вы можете использовать слова top, bottom, center, left и right. Модель ниже иллюстрирует сказанное:



Примеры позиционирования:

background-position: 2cm 2cm    Рисунок расположен на 2 cm слева и на 2 cm сверху Посмотреть пример >
background-position: 50% 25%  Рисунок расположен по центру и на четверть экрана сверху Посмотреть пример >
background-position: top right    Рисунок расположен в правом верхнем углу страницы Посмотреть пример >

В примере кода фоновое изображение располагается в правом нижнем углу экрана:




Посмотреть пример >

Сокращённая запись "background"

Свойство background входит в состав всех свойств, перечисленных в этом уроке.

С помощью background вы можете сжимать несколько свойств и записывать ваши стили в сокращённом виде, что облегчает чтение таблиц.

Например, посмотрите на эти строки:



Используя background, того же результата можно достичь одной строкой кода:



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



Если свойство отсутствует, оно автоматически получает значение по умолчанию. Например, если background-attachment и background-position нет в данном примере:



то этим двум неспецифицированным свойствам будут присвоены значения по умолчанию - scroll и top left.
Резюме

В этом уроке вы уже познакомились с техникой, отсутствующей в HTML.

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

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

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

Семейство шрифта "font-family"

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

Для категоризации шрифтов используются два типа имён: имя семейства/family-name и общее/родовое семейство/generic family. Эти два термина объясняются далее.

Family-name
Пример family-name (часто называемое просто "шрифт") это, например, "Arial", "Times New Roman" или "Tahoma".
Generic family
Его можно проще описать как группу family-names, имеющих характерные общие черты. Пример - sans-serif, набор шрифтов без "засечек/feet".

Разницу можно также проиллюстрировать так:



При указании шрифтов для вашего web-сайта вы, естественно, начинаете с предпочтительного шрифта, а затем перечисляете альтернативные. Необходимо в конце списка указывать родовое имя. Тогда страница, как минимум, будет отображена шрифтом того же семейства, если отсутствуют все специфицированные конкретные шрифты.

Список шрифтов может выглядеть так:







Заголовки <h1> будут отображаться шрифтом "Arial". Если он не установлен на пользовательской машине, будет использоваться "Verdana". Если недоступны оба шрифта, для показа заголовков будет использован шрифт семейства sans-serif.

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

Стиль шрифта "font-style"

Свойство font-style определяет normal, italic или oblique. В примере все заголовки <h2> будут показаны курсивом italic.







Вариант шрифта "font-variant"

Свойство font-variant используется для выбора между вариантами normal и small-caps. Шрифт small-caps использует малые заглавные буквы (upper case) вместо букв нижнего регистра. Смотрите примеры:



Если font-variant имеет значение small-caps, а шрифт small-caps недоступен, браузер, скорее всего, отобразит текст буквами верхнего регистра.





Вес шрифта(толщина) "font-weight"

Свойство font-weight описывает, насколько толстым, или "тяжёлым", должен отображаться шрифт. Шрифт может быть normal или bold. Некоторые браузеры поддерживают даже числовые значения 100-900 (в сотнях) для описания веса шрифта.






Размер шрифта "font-size"

Размер шрифта устанавливается свойством font-size.

Используются различные единицы измерения (например, пикселы и проценты) для описания размера шрифта. В данном миникурсе мы будем использовать самые распространённые и удобные единицы измерения. Вот примеры:







Есть одно отличие в указанных единицах измерения: 'px' и 'pt' дают абсолютное значение размера шрифта, а '%' и 'em' - относительные. Многие пользователи не могут читать мелкий текст, по разным причинам. Чтобы сделать ваш web-сайт доступным для всех, вы должны использовать относительные значения, такие как '%' или 'em'.

Сокращённая запись "font"

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

Например, вот четыре строки описания свойств шрифта для <p>:



Используя сокращённую запись, код можно упростить:



Порядок свойств font таков:



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

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

Форматирование и установка стиля текста - ключевая проблема для любого web-дизайнера. В этом уроке вы увидите впечатляющие возможности CSS при отображении текста. Будут рассмотрены следующие свойства:

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

Отступы "text-indent"

Свойство text-indent позволяет выделить параграф с помощью установки отступа для его первой строки. В примере 30px применяется ко всем параграфам <p>:



Посмотреть пример >

Выравнивание текста "text-align"

CSS-свойство text-align соответствует атрибуту, используемому в старых версиях HTML. Текст может быть выровнен left, right, center или justify.

В примере текст заголовочных ячеек таблицы <th> выравнивается по правому краю, а в ячейках данных <td> - по центру. В параграфах текст выравнивается по ширине - justify(Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.):



Посмотреть пример >

Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания "text-decoration"

Свойство text-decoration позволяет добавлять различные "декоративные эффекты". Например, можно подчеркнуть текст, провести линию по или над текстом и т. д. В примере <h1> подчёркнуты, <h2> - имеют черту над текстом, <h3> - перечёркнуты и <h4> - мигающий текст.





Интервал между буквами "letter-spacing"

Интервал между буквами текста можно специфицировать свойством letter-spacing. Значение - нужная величина. Например, если вам необходимо 3px между буквами в параграфах <p> и 6px - в заголовках <h1>, то используется такой код:



Посмотреть пример >

Управление преобразованием текста элемента в заглавные или прописные символы "text-transform"

Свойство text-transform управляет регистром символов. Можно выбрать capitalize, uppercase или lowercase, в зависимости от того, как выглядит текст в оригинальном HTML-коде.

Например, слово "headline" можно показать "HEADLINE" или "Headline". Имеются четыре возможных значения text-transform:

capitalize    Капитализирует каждое слово. Например: "john doe" станет "John Doe".
uppercase   Конвертирует все символы в верхний регистр. Например: "john doe" станет "JOHN DOE".
lowercase    Конвертирует все символы в нижний регистр. Например: "JOHN DOE" станет "john doe".
none       Трансформации нет - текст отображается так же, как в HTML-коде.

Для примера мы используем список имён. Все имена выделены с помощью <li> (list-item). Давайте капитализируем все имена и отобразим все заголовки верхним регистром.

Видите, HTML-код в этом примере в действительности записан в нижнем регистре.