|
4. Основны CSS |
Цель: |
Познакомиться с языком CSS. Разобраться в его синтаксисе. Узнать основные свойства css. |
Tags: |
CSS, selector, width, height, color, px … |
Оглавление
Оглавление 1
Введение 3
Что такое CSS 3
Синтаксис CSS, селекторы 4
Селекторы 5
@-команды 6
Константы 6
Основные свойства 7
Границы, отступы и поля 7
Отображение и позиция 7
display 7
position 8
float 8
z-index 8
direction 8
Размеры боксов 8
line-height 8
vertical-align 8
overflow (полностью поддержано IE 5.5) 9
visibility 9
Заключение 9
Дополнительный материал: 10
Литература 10
Введение
HTML используется для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого. По мере развития Web дизайнеры начали искать возможности форматирования онлайновых документов. Чтобы удовлетворить возросшим требованиям потребителей, производители браузеров (тогда - Netscape и Microsoft) изобрели новые HTML-тэги, такие, например, как <font>, которые отличались от оригинальных HTML-тэгов тем, что они определяли внешний вид, а не структуру. Это также привело к тому, что оригинальные тэги структурирования, такие как <table>, стали всё больше применяться для дизайна страниц вместо структурирования текста. Многие новые тэги дизайна, такие как <blink>, поддерживались только одним браузером. "Вам необходим браузер X для просмотра этой страницы" - такой отказ стал обычным явлением на web-сайтах. CSS был создан для исправления этой ситуации путём предоставления web-дизайнерам возможностей точного дизайна, поддерживаемых всеми браузерами. Одновременно произошло разделение представления и содержимого документа, что значительно упростило работу.
Что такое css
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. В настоящее время существует три версии стандарта CSS: CSS1, CSS2 и CSS3. CSS это язык стилей, определяющий отображение HTML-документов. Например, CSS работает со шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами.
Сначала перечислим способы связывания файлов в фомате CSS с HTML-файлами и способы встраивания фрагментов CSS-кода в HTML-документами:
У всех тэгов, кроме <base>, <basefont>, <head>, <html>, <meta>, <param>, <script>, <style> и <title>, можно указать атрибут style. Пример: <p style="color:red"> задаёт абзац, в котором символы будут иметь красный цвет.
В заголовке HTML-документа (внутри элемента head) можно вставить фрагмент CSS-кода внутри тэга <style>. Его атрибуты:
type задаёт тип языка (в нашем случае это всегда text/css).
media задаёт тип устройства. Возможные значения:
all (по умолчанию) соответствует любому устройству
tty соответствует устройствам с моноширинным шрифтом (некоторые принтеры, факсы и т. п.)
tv соответствует телевизору (маленькое разрешение, низкое количество цветов, проблемы скроллинга)
projection соответствует проэкторам
haldheld соответствует карманным устройствам (малое разрешение, экран, цвета и т. п.)
print соответствует режиму preview (для печати)
braille соответствует устройствам для слепых
aural соответствует синтезаторам речи
Пример:
<style type="text/css" media="all"> p {color:red} </style>
Можно связать файл с текстом в формате CSS с текущим HTML-документом с помощью тэга <link>. С помощью него можно связывать HTML-документ не только с CSS-файлами, но и файлами любой природы. Приведём список его атрибутов: charset, href, hreflang, type, rel, rev, target предназначены для тех же целей, что и одноименные атрибуты тэга <a>; атрибут media задаёт тип устройства (используется для text/css, например). Для случая стилевых таблиц используют rel="stylesheet" или rel="alternate stylesheet". Указывая значение атрибута title, можно его использовать для задания предпочитаемого стиля в HTTP-заголовке или тэге <meta>. Пример:
<link href="style.css" rel="stylesheet" title="Compact" />
Среди приведённых способов задания информации следует отдавать предпочтение описаниям во внешних CSS-файлах, так как это будет облегчать задание общего стиля документам всего сайта.