CSS & WEB Суть и преимущества CSS CSS (Cascading Style Sheets – каскадные таблицы стилей) – язык описания внешнего вида документа, созданного при помощи. - презентация

1 CSS & WEB

2 Суть и преимущества CSS CSS (Cascading Style Sheets – каскадные таблицы стилей) – язык описания внешнего вида документа, созданного при помощи языка разметки. Концепция каскадных таблиц стилей была предложена Хоконом Виум Ли – норвежским ученым и специалистом в области информационных технологий, работавшим на консорциум W3C. Как правило, CSS применяется при работе с HTML и XHTML языками, и используется для задания цветов, параметров шрифтов, расположения блоков и иных элементов представления веб - страниц. К преимуществам использования CSS относятся: централизованное управление отображением множества документов при помощи одной таблицы стилей; упрощенный контроль внешнего вида веб - страниц; наличие разработанных дизайнерских техник; возможность использования различных стилей для одного документа, в зависимости от устройства, при помощи которого осуществляется доступ к веб - странице.

3 Применение таблиц стилей к документу Рассмотрим, как можно применить таблицу стилей к документу. Для осуществления этой задачи мы можем воспользоваться одним из 4-ёх способов: Linking (Связывание). Embedding (Встраивание) Inline-описание Import-импорт

4 Linking (Связывание) Существует возможность создания таблицы стилей в виде отдельного файла для применения его ко всем страницам сайта. Хранить таблицу стилей следует в текстовом файле с расширением css. Его можно создать при помощи любого текстового редактора. Для связывания таблицы стилей с документом HTML используйте тег следующим образом: В атрибуте href указывается адрес таблицы стилей. Дайте атрибуту type значение "text/css", что позволит программам просмотра, не поддерживающим таблицы стилей, проигнорировать указанный адрес. Данный тег принято прописывать в контейнере head. Применение таблиц стилей к документу

5 Embedding (Встраивание) Таблицу стилей необязательно хранить в виде отдельного файла. Ее можно встроить непосредственно в документ, однако в этом случае она будет действовать только внутри этого документа. Для распространения действия таблицы на другие документы ее необходимо скопировать в каждый из них. Для включения таблицы стилей в документ нужно воспользоваться контейнером. Он размещается в разделе заголовка: Применение таблиц стилей к документу

6 Inline-описание Inline-описание, описание стиля встроенное непосредственно в тег. В этом случае в тег нужно поместить атрибут STYLE, значением которого и будет являться описанный стиль Import-импорт Для того чтобы импортировать таблицу стилей в HTML.- документ, надо воспользоваться следующей url ("путь к таблицам url ("путь к таблицам стилей"); Применение таблиц стилей к документу

7 Описание стилей Описание стилей подчиняются простым правилам. Стиль элемента определяется с помощью списка пар свойство:значение, который имеет вид: Имя_свойства:значение_свойства; Имя_свойства:значение_свойства;… Существует несколько способов определения стиля. Определение стиля для данного тега Синтаксис: Селектор { Имя_свойства:значение_свойства; …}

8 Описание стилей Без использования css

9 Описание стилей Без использования css

10 Определение стиля при помощи классов. Под классом в данном случаи подразумевается определение нескольких стилей, каждый из которых может использоваться в нужном месте страницы. Описание каждого класса делается при помощи следующей конструкции:.имя_класса { описание стиля } Сначала указывается имя класса - оно может быть произвольным, но желательно все-таки давать осмысленное название. Далее, в фигурных скобках {} перечисляются все необходимые параметры для данного класса. Обратите внимание что перед именем класса стоит точка. Таким образом определяется универсальный класс, т.е. такой, который может быть применен к любому тегу при помощи следующей конструкции: … … Описание стилей

11

12 Для определения тегового класса нужно воспользоваться конструкцией вида: имя_тега.имя_класса{описание стиля} Класс, определенный таким образом, сработает только в том теге, для которого он предназначен, а для всех остальных будет проигнорирован. Мы можем определять параметры не только для одного тега, но и сразу для нескольких. Для этого в определении стиля достаточно перечислить их через запятую: p, td { font-size: 9pt; color:green} Такой прием называется группировкой, и в данном случае мы определили и для, и для одинаковый размер и цвет текста. Описание стилей

13 Можно также определить именованные стили. Для этого нужно воспользоваться следующей конструкцией: #имя_стиля1{ описание стиля} #имя_стиля2{ описание стиля} … Имя стиля присваивается атрибуту id в теге, где должен быть применен данный стиль. Например: … … Описание стилей

14 Контекстный селектор определяет точную последовательность тегов, для которых будет применен тот или иной стиль. Другими словами, вы можете указать, что какой-то стиль должен применяться, например, в теге только в том случае, если этот тег является подчиненным тегу : ol li {list-style-type: decimal} Для того же тега можно определить другой стиль, действительный только в случае подчиненности тегу : ul li {list-style-type: square} Заметьте, что список селекторов не разделен запятыми. В противном случае всем тегам списка будет приписан один и тот же стиль. Описание стилей

15 Псевдостили гиперссылок Псевдостили применяются к гиперссылкам. active active - применяется к активным гиперссылкам, т.е. гиперссылкам, на которых находится фокус ввода пользователя. a:active {Определение стиля} Аналогичен атрибуту alink тега. Пример: a:active {color: lime} активная гиперссылка будет ярко-зеленой. По умолчанию в IE активные гиперссылки выделяются красным цветом.

16 Псевдостили гиперссылок hover - применяется к гиперссылкам, когда пользователь помещает над ними курсор мыши. а:hover {Определение стиля} Пример: a:hover {color: lime; text-decoration: none;} Гиперссылка, при наведении на нее мыши, будет ярко-зеленой и неподчеркнутой. link link - применяется к не посещенным еще пользователем гиперссылкам. a:link {Определение стиля} Аналогичен атрибуту link тега. Пример: a:link {color: black;} По умолчанию в IE непосещенные гиперссылки отображаются синим цветом.

17 Псевдостили гиперссылок visited - применяется к уже посещенным пользователем гиперссылкам. a:visited {Определение стиля} Аналогичен атрибуту vlink тега. Пример: a:visited {color: indigo;} По умолчанию в IE посещенные гиперссылки отображаются бордовым цветом.

18 Единицы измерения в CSS В свойствах, которым требуется указание размеров, можно использовать следующие единицы измерения:

19

20

21 CSS3. Работа с контейнерами

22 Для управления размещением элементов используется атрибут стиля float, принимающий следующие значения: left – элемент выравнивается по левому краю родителя, остальные элементы "обтекают" указанный по правой стороне; right – элемент выравнивается по правому краю родителя, остальные элементы "обтекают" указанный по левой стороне; none – обтекание элемента не указано; inherit – значение наследуется от родителя. Для того чтобы элементы расположились по горизонтали один за другим, необходимо задать одно и то же значение float для следующих друг за другом элементов. Для размещения блоков ниже выровненных по горизонтали, необходимо использовать атрибут стиля clear, явно указывающий на то, что данный блок должен располагаться ниже предшествующих ему контейнеров. Атрибут clear может принимать следующие значения: left – элемент будет расположен ниже всех элементов, значение атрибута float у которых равно left; right – элемент будет расположен ниже всех элементов, значение атрибута float у которых равно right; both – элемент будет расположен ниже всех элементов, значение атрибута float у которых равно left или right; none – отмена свойств атрибута clear; inherit –значение наследуется от родителя.

23 Добавим следующий htm - код для размещения пяти контейнеров: top left content right bottom В таблицу стилей добавим соответствующие стили для каждого контейнера: #top { height: 20px; width:412px; border: 3px double black} #left { height: 200px; width:50px; border: 3px double black; float: left} #content { height: 200px; width:300px; border: 3px double black; float:left} #right { height: 200px; width:50px; border: 3px double black; float:left} #bottom { height: 20px; width:412px; border: 3px double black; clear: left}

24 Переполнение контейнеров Для управления отображением содержимого контейнера в таких случаях используется атрибут стиля overflow, принимающий следующие значения: visible – отображается весь контент даже за пределами контейнера; hidden – отображается только область внутри контейнера, оставшаяся часть контента скрывается; scroll – добавление полос прокрутки контейнеру, полосы будут отображаться даже если в них нет необходимости; auto – полосы прокрутки появятся только в случае необходимости.

25 Правила и каскадность CSS Внешняя таблица стилей, ссылка на которую встречается в html - документе позже, имеет приоритет по отношению к внешней таблице стилей, ссылка на которую встречается раньше. Внутренние таблицы стилей приоритетнее внешних. Таблицы стилей, располагающиеся в рамках самого элемента ( ), имеют приоритет, по отношению ко всем остальным стилям. Более конкретные стили имеют приоритет перед менее конкретными (к примеру, p.classname {...} приоритетнее p {..}), т.е. стилевой класс приоритетнее переопределения тега, комбинированный класс приоритетнее стилевого. В случае привязки к тегу нескольких стилевых классов, приоритетными считаются те, что указаны правее. Атрибуты стиля, объявленные как !important, имеют приоритет перед всеми другими значениями. Таким образом, стиль p {color: red !important} сделает весь текст в рамках тегов красным вне зависимоти от любых других переопределений стиля для.