Помощничек
Главная | Обратная связь


Археология
Архитектура
Астрономия
Аудит
Биология
Ботаника
Бухгалтерский учёт
Войное дело
Генетика
География
Геология
Дизайн
Искусство
История
Кино
Кулинария
Культура
Литература
Математика
Медицина
Металлургия
Мифология
Музыка
Психология
Религия
Спорт
Строительство
Техника
Транспорт
Туризм
Усадьба
Физика
Фотография
Химия
Экология
Электричество
Электроника
Энергетика

Каскадные таблицы стилей, практическое значение CSS для Web-инжиниринга, синтаксис каскадных таблиц: селекторы и определения



Возможности CSS

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

С использованием таблиц стилей можно забыть о необходимости физического форматирования текста, а также о настройке отображения таблиц, тех же списков и других элементов HTML-до­кументов. Кроме того, таблицы стилей позволяют настраивать даже параметры отображения со­держимого документа, недоступные при использовании HTML-элементов (отступы абзацев, сти­ли рамок рисунков и многое другое, вплоть до интервала между буквами текста и свободного позиционирования элементов страницы).

Однако по-настоящему убедиться в полезности CSS можно тогда, когда приходит время менять дизайн всего сайта. Предположим, что есть сайт, представляющий собой достаточно большое учебное пособие, например по программированию на С++, содержащее 50 страниц с 200 при­мерами (листингами). По какой-то причине нужно поменять цвет шрифта этих самых листин­гов: ничего не поделаешь, придется вносить изменения в каждый тег <PRE> (200 штук). А при использовании CSS достаточно изменить (или добавить) одну запись в таблице стилей.

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

Синтаксис CSS

Каскадные таблицы стилей формально независимы от HTML, имеют свой собственный синтаксис и не наследуют никаких идеологических ограничений.

Таблица стилей представляет из себя набор правил, ассоциированных с документом и определяющих его отображение. Каждое правило в таблице стилей состоит из селектора и блока объявлений. Блок объявлений всегда отделяется от селектора пробелом и заключается в фигурные скобки.

Селектор определяет область применения стилевого правила, а блок объявлений содержит одно или несколько объявлений, которые отделяются друг от друга точкой с запятой.

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

 


 

40. Встроенные таблицы стилей, задание правил отображения текста, находящегося внутри HTML-элементов, параметр style, стилевые атрибуты.

Встроенные таблицы стилей задаются внутри HTML-элемента STYLE (между парными тегами <STYLE> и </STYLE>), помещенного в разделе HEAD документа. При создании встроенных таб­лиц стилей нужно указывать значение атрибута type элемента STYLE, также можно задать зна­чение атрибута media. Назначение этих атрибутов в этом случае совпадает с назначением од­ноименных атрибутов HTML-элемента LINK.

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

Правила отображения HTML-элементов

Рассмотрим самое простое применение CSS — задание правил отображения текста (или прочего содержимого), находящегося внутри определенных HTML-элементов. Для этого нужно указать в первой части правила название HTML-элемента (или нескольких HTML-элементов), напри­мер:

Н1 {color: red; font-family: arial}

H2, H3 {color: blue; font-family: courier}

P {font-style: italic}

Теперь все заголовки первого уровня будут отображаться красным цветом шрифтом Arial, за­головки второго и третьего уровней будут отличаться только размером шрифта, а текст внутри каждого HTML-элемента Р будет отображаться курсивом.


 

41.Внешние таблицы стилей, элемент LINK и его атрибуты.

Для начала нужно рассмотреть, где могут находиться таблицы стилей. Итак, внешние таблицы стилей названы так потому, что помещаются в отдельных файлах. Эти файлы являются обычны­ми текстовыми файлами, созданными, например, в редакторе БЛОКНОТ. Нужно лишь при сохране­нии этих файлов использовать расширение CSS (например, mystyle. ess). Подключаются вне­шние таблицы стилей к документу при помощи HTML-элемента LINK. При этом используются следующие атрибуты этого элемента:

<S> href — задает URI файла с подключаемой таблицей стилей;

❖ rel — для подключения таблицы стилей этому атрибуту присваивается значение stylesheet; <S> type — при подключении CSS задается значение text /ess;

<s> media — задает тип устройства, для которого применяется подключаемая CSS (эта замеча­тельная возможность будет рассмотрена далее).

HTML-элемент LINK задается при помощи одиночного тега <LINK>, который помещается в шап­ке документа. Для одного и того же документа можно подключать неограниченное количество таблиц стилей. Пример подключения двух внешних таблиц стилей:

<HEAD>

<LINK href = "mystyle.css" rel = "stylesheet" type = "text/css">

<UNK href = "mystyle_ex.css" rel = "stylesheet" type = "text/css"> <HEAD>


 

42.Использование стилевых классов, псевдостили гиперссылок.

Второй способ использования таблиц стилей — создание стилевых классов. Рассмотрим это на примере:

Н1.arial {color: red; font-family: arial} H2.newroman {color: blue; font-family: newroman} P.italic {font-style: italic} bold {font-weight: bold}

Здесь создано четыре стилевых класса с именами arial, newroman, italic, bold. Первые три из них могут использоваться только для HTML-элементов HI, Н2 и Р соответственно. Четвер­тый стилевой класс можно назначать любому элементу.

Назначение стилевого класса HTML-элементу осуществляется при помощи атрибута class. Этот атрибут поддерживается для всех элементов, кроме BASE, BASEFONT, HEAD, HTML, МЕТА, PARAM, SCRIPT, STYLE, TITLE.

псевдостили гиперссылок.

Мы можем задавали параметры отображения гиперссылок докумен­та при помощи атрибутов HTML-элемента BODY? С использованием CSS можно сделать то же самое.При этом нужно применять предопределенные названия элементов в записях таблицы стилей:А: link (непосещенная гиперссылка), A: visited (посещенная ссылка), A: active (ак­тивная гиперссылка, проявляется, например, при перемещении по гиперссылкам при помощи та­буляции) и А: hover (состояние при наведении указателя мыши на гиперссылку). При этом со­здаются псевдостили гиперссылок

<STYLE> A:link {text decoration: none} A:hover {font-style: italic} A:active {color: red}

A:visited {color: green; font-weight: bold} </STYLE>


43.Единицы измерения CSS, порядок применения стилей, свободное позиционирование. Применение стилей для различных устройств.

При использовании таблиц стилей у автора имеется возможность позаботиться о том, чтобы страницы сайта одинаково хорошо обрабатывались самыми различными устройствами. Это достигается созданием таблиц, которые используются, если просмотр осуществляется с помощью заданного устройства. Особенность заключается в том, что в указании нужного значения атрибута media элемента link или style.

Атрибут может принимать в качестве значения список одного или более следующих строковых идентификаторов:

All – для всех устройств

Aural – для речевых синтезаторов

Braille – для устройств, используемых для людей с ослабленным зрением

Handled – для устройств с небольшим экраном

Print – для принтеров

Projection – для отображения страниц с помощью проектора

Screen – стандартный экран

Tty – телетайпы, терминалы и др.

Tv – экран телевизора

Единицы изме6рения Css

Единица Описание
Пиксель (px) Обозначение точки устройства отображения, является абсолютной единицей
Миллиметр (mm) Абсолютная единица
Пика (pc) Типографическая единица измерения.Абсолютная единица
Сантиметр(cm) Абсолютная единица
Дюйм (in) Абсолютная единица
Ширина буквы m (em) Относительная единица. Зависит от конкретного шрифта
Высота буквы x (ex) Относительная единица. Зависит от конкретного шрифта
Процент (%) Относительная единица. Доля от высоты и ширины доступного пространства

 

Сокрытие стилей

Рассмотрим прием, который позволяет документам со встроенными таблицами стилей корректно отображаться браузерами не поддерживающими таблицы стилей.

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


 

44.Применение стилей к фрагментам документа. Элементы Div и Span.Сокрытие таблиц стилей.

Существует возможность применять каскадные таблицы стилей. Каскадирование проявляется при наличии при наличии в одной или нескольких используемых документом таблицы стилей заданий разных значений одного и того же свойства определенного элемента или стилевого класса

Стили, заданные для HTML-элементов, стилевые классы и встроенные стили каскадируются следующим образом:

Ø Стили, заданные для HTML-элементов

Ø стилевые классы

Ø встроенные стили.

 

· сначала применяются стили браузера по умолчанию;

· стили браузера по умолчанию переопределяются прилинкованными стилями (элемент LINK заголовка документа);

· прилинкованные стили переопределяются описаниями стилей в элементе STYLE;

· стили элемента STYLE переопределяются атрибутом STYLE в любом из элементов.

Группирование

 

При создании стиля для сайта, когда одновременно используется множество селекторов, возможно появление повторяющихся стилевых правил. Чтобы не повторять дважды одни и те же элементы, их можно сгруппировать для удобства представления и сокращения кода. В примере 1 показана обычная запись, здесь для каждого селектора приводится свой набор стилевых свойств.

 




Поиск по сайту:

©2015-2020 studopedya.ru Все права принадлежат авторам размещенных материалов.