Начиная введение в CSS, я рекомендую изучить основы HTML, благодаря которым изучение стилей CSS будет идти легче. CSS - это самостоятельный язык, который успешно развивается и поддерживается многими браузерами. Стили CSS значительно расширяют возможности HTML в плане вёрстки и дизайна.
Многие задачи, которые решаются при использовании стилей CSS можно реализовывать с помощью HTML. Однако в результате этого, HTML-страницы будут иметь большой вес.
Применение стилей обладает рядом преимуществ:
- возможность переноса функций оформления из HTML в отдельный файл стилей CSS, тем самым разгружая html-код
- с помощью стилей возможности оформления страниц значительно возрастают, по сравнению с HTML
- все стили находятся в одном файле и после их изменения, стили поменяются на всём сайте
- страницы сайта быстрее загружаются за счет кеширования файла со стилями CSS
Привязка стилей CSS
К документу стили могут привязываться несколькими способами:
- С помощью отдельного файла стилей *.css. Для этого в контейнере <head> указывается:
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
где style.css - название файла со стилями, который находится в той же папке, где и документ.
- Можно указать все стили в документе в контейнере <head>:
<style type="text/css">p {color:#993300}</style>
- Разрешается, но не рекомендуется использование внутренних стилей вида:
<p style="color:#993300">Текст в абзаце</p>
После этого текст в заданном абзаце будет выбранного стиля.
Правила записи в файле стилей CSS
1. Чтобы описать стили, применяемые на веб-странице используют селекторы, которые имеют свойства и значения. Селектором могут являться классы, идентификаторы и теги. Для применения стилей в документе к тегу p, используют следующую запись в файле стилей:
p {margin-left:10px; color:yellow;}
После этого в документе весь текст, стоящий в параграфе станет желтого цвета с левым отступом в 10 пикселей.
2. В файле стилей CSS приоритет имеет запись сделанная ниже для одного и того же селектора. Нижняя запись перекрывает предыдущее значение. Например: если сначала был выбран цвет текста синий, то следующее указанное значение цвета текста перекроет это.
3. В стилях на результат не влияют пробелы и переходы на новую строку. Важно сохранять последовательность: после селектора (-ов) всегда ставятся фигурные скобки, в которые заключены свойства и значения, разделяющиеся между собой точкой с запятой.
4. Допускается использование комментариев, которые облегчают поиск среди стилей. Комментарии имеют вид:
/* Новый комментарий */
5. К свойству можно применять только то значение, которое ему соответствует.
6. Значения в свойствах селекторов также имеют определенные правила:
- Размеры могут указываться в абсолютных (cm, mm) и относительных (px,%,em) единицах
- Число может быть как целое, так и десятичное (0.5; 2)
- В кавычки берутся только какие-либо названия, в отличие от значений в HTML
- Цвета могут задаваться по названию (yellow, black, aqua), с помощью RGB (rgb (0,255,0)) и шестнадцатиричным значением (#33FF99; #993300)
- Адреса могут быть относительными (background:url('/images/picture.jpg')) и абсолютными (background:url('http://www.spinch.net.ua/picture.jpg')).
Попробуйте создать текстовый документ, описать в нём несколько стилей и сохранить его в формате *.css. После чего привязать файл стилей к веб-документу. Как создать HTML-страницу читайте здесь.
