br 8eb34


search

Введение в CSS

css-imgНачиная введение в CSS, я рекомендую изучить основы HTML, благодаря которым изучение стилей CSS будет идти легче. CSS - это самостоятельный язык, который успешно развивается и поддерживается многими браузерами. Стили CSS значительно расширяют возможности HTML в плане вёрстки и дизайна.

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

Применение стилей обладает рядом преимуществ:

  • возможность переноса функций оформления из HTML в отдельный файл стилей CSS, тем самым разгружая html-код
  • с помощью стилей возможности оформления страниц значительно возрастают, по сравнению с HTML
  • все стили находятся в одном файле и после их изменения, стили поменяются на всём сайте
  • страницы сайта быстрее загружаются за счет кеширования файла со стилями CSS

Привязка стилей CSS

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

  1. С помощью отдельного файла стилей *.css. Для этого в контейнере <head> указывается:

    <head>

    <link rel="stylesheet" type="text/css" href="/style.css">

    </head>

    где style.css - название файла со стилями, который находится в той же папке, где и документ.

  2. Можно указать все стили в документе в контейнере <head>:

    <style type="text/css">p {color:#993300}</style>

  3. Разрешается, но не рекомендуется использование внутренних стилей вида:

    <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-страницу читайте здесь.

Добавить комментарий

Защитный код
Обновить

Комментарии