Разработка электронного портала (2011), страница 7
Описание файла
PDF-файл из архива "Разработка электронного портала (2011)", который расположен в категории "". Всё это находится в предмете "информатика" из 1 семестр, которые можно найти в файловом архиве НИУ «МЭИ» . Не смотря на прямую связь этого архива с НИУ «МЭИ» , его также можно найти и в других разделах. .
Просмотр PDF-файла онлайн
Текст 7 страницы из PDF
Однако именно таблицей стилей обычно называется отдельный документ,содержащий описание стилей элементов.Выражение «H1{font-size:28pt}» называется правилом или определением стиля.Определением стиля включает в себя селектор стиля и объявление стиля:Селектор----+|+--------------------- Объявление|H1{font-size:28pt}Свойство-----------++------------ЗначениеПоясним, как составляется определение стиля:ü Любое определение начинается с селектора стиля, в простейшем случае - этоHTML-тег, которому будут приписываться некоторые свойства. Также свойствамогут относиться к нескольким тегам, поэтому теги могут перечисляться череззапятую.Например: UL, DT { font-size: 16pt}ü Далее следует непосредственно объявление стиля, которое заключается вфигурные скобки - { }. В фигурных скобках на первом месте стоит определяемоесвойство, затем, после двоеточия, его значение.
Если необходимо определитьнесколько свойств, то объявления свойств перечисляются через точку с запятой.Пример: H2 {color: navy; font-size: 16pt}Способы подключения стилей к страницеСуществует три способа включения определений стилей: 1) при помощи тега<STYLE>, 2) при помощи внешней таблицы стилей и 3) определение стилянепосредственно в элементе разметки – теге .(атрибут STYLE)Рассмотрим каждый из способов.Первый способ – тег <STYLE> - часто называют внедренными таблицами стилей.Такой способ, пожалуй, самый простой. Чаще всего тег <STYLE> вставляют в заголовокстраницы (<HEAD>).
Чтобы все браузеры могли отображать (либо пропускать данный,если браузер не поддерживает таблицы стилей), рекомендуется заключать списокопределений в теги HTML комментария. Таким образом, схема использования данногометода следующая:<HTML><HEAD><STYLE TYPE=”text/css”><!Список определений-></STYLE></HEAD><BODY>Контент страницы</BODY></HTML>Второй способ предполагает использование внешнего файла, содержащегоопределения стилей. Чтобы использовать внешний файл, нужно добавить тэг <LINK> взаглавие страницы, который укажет браузеру имя файла с таблицей стилей и принеобходимости путь к нему.Файл с внешней таблицей стилей не должен содержать ничего, кроменепосредственно определений стилей (правил), т.е.
только конструкции языка CSS, вчастности в этом файле не нужно задавать тег STYLE.Например, в любом текстовом редакторе создадим файл, в котором будетсодержаться следующий набор определений:H2 {font-size: 18pt}UL {color: green}Затем файл сохраняется с расширением *.CSS.
Назовем нашу таблицу стилейStyles.css.Добавим таблицу стилей к странице:<HTML><HEAD><LINK REL=”stylesheet” TYPE=”text/css” HREF=”Styles.css”></HEAD><BODY>Контент страницы</BODY></HTML>Удобство данного метода заключается в том, что одну и ту же таблицу стилейможно применять ко всем или нескольким страницам, тем самым значительно сокращаявременные затраты на редактирование HTML-кода.Третий способ удобен в случае, когда необходимо применить стиль к конкретномуэлементу, а не всем элементам страницы. В данном случае добавляется атрибут STYLEнепосредственно к тегу изменяемого элемента.
Например:<HTML><HEAD><STYLE TYPE=”text/css”><!H2 {font-size: 18pt}-></STYLE></HEAD><BODY><H2 STYLE=”font-size: 24pt”>Размер шрифта равен 24</H2><H2>Размер шрифта равен 18</H2></BODY></HTML>Таким образом, в первом заголовке <H2> размер шрифта будет равен 24, а во всехпоследующих, если не будет указано иное, размер шрифта будет равен 18, как указано вопределении стиля в заглавии страницы.Кроме того, можно применить стиль к конкретному блоку. В HTML разделзаключается в тег-контейнер <DIV>.
При применении данного тега браузер вставляетразрыв строки (как при применении тега <BR>). Атрибут STYLE добавляется к тегу<DIV> подобно предыдущему примеру.<DIV STYLE=”font-size: 18pt”>Размер шрифта также равен 18</DIV>Еслинеобходимоизменитьстильдляконкретногословаилифразы,воспользуйтесь тегом-контейнером <SPAN> с атрибутом STYLE.Пример: Применить стиль к <SPAN STYLE=”font-size: 18pt”>слову</SPAN>.Контейнер <DIV> отличается от контейнера <SPAN> тем, что <DIV> -блочныйэлемент, т.е.
имеет высоту и ширину, а <SPAN> - строковый.Комментарии CSSКак и во всех языках в CSS можно задавать комментарии, которые ограничиваютсясимволами /* и */ Комментарии, как и везде, не могут быть вложенными.Типы селекторов стилейВ CSS существуют следующие типы селекторов стилей:•селекторы – имена тегов (часто также называются селекторами элементов)•универсальный селектор•селекторы – классы•селекторы – идентификаторы•селекторы атрибутов•селекторы, связанные со структурой документа (селекторы потомков,селекторы сестринских элементов)•селекторы псевдоклассов и псевдоэлементовПервый тип селекторов – имена тегов самый понятный, так как очевидно, что здесьзадается вид отображения элементов языка HTML (тегов).
Если различным элементам(тегам) должны быть присвоены одинаковые значения свойств, то селекторы элементовможно перечислить через запятую. Количество перечисляемых через запятую элементовне ограничено. Один и тот же элемент (тег) может участвовать в различных объявленияхстилей, то есть стиль тега можно последовательно формировать в нескольких объявленияхстилей. За счет группировки объявлений свойств тегов сокращается объем таблицыстилей. Примеры группировок приводятся ниже.H1, H2, H4 {color:silver}H2, H3 {background:gray}H1, H4 {background:white}H3 { color: white }b { color: gray }Того же самого результата можно добиться и с помощью следующей группировки:H1, H4 {color:silver; background:white }H2 { color:silver }H3 { color:white }H2, H3 {background:gray }b { color:gray; background:white }Новым типом селекторов, появившемся в CSS2, является универсальный селектор,представляющий собой символ звездочка (*).
Этот селектор соответствует любомуэлементу языка HTML. Например, чтобы сделать все элементы документа красными,можно написать:*{color:red;}В HTML имеется возможность создавать классы стилей. Классы стилейиспользуются в том случае, если необходимо один стиль применить к разным элементамHTML. Например, нужно специальным образом выделить предупреждения в инструкциипо технике безопасности. Как будут размечены эти предупреждения заранее неизвестно.Например, предупреждение может быть размечено тегом абзаца или быть элементомсписка.
То есть нельзя определить правило выделения с помощью простых селекторовтегов. В этом случае используются селекторы классов.Классы стилей можно описывать как во внешней таблице стилей, так инепосредственно внутри текста.Класс стилей задается по следующей схеме:.ИмяКласса{определение стиля}, где ИмяКласса- уникальное название класса безпробелов.Определение класса начинается с точки. Понятно, если ее опустить, то имя классабудет восприниматься как имя тега.Пример: .tbl{font-family: Verdana, Arial, Helvetica, sans-serif; color: midnightblue;text-decoration: underline}Чтобы применить класс стилей необходимо добавить атрибут CLASS к тегуизменяемого элемента HTML.Пример: <H3 CLASS=tbl>Заголовок</H3>CSS позволяют задать дополнительные свойства класса стиля, относящиеся котдельным элементам разметки.
Например, для всех тегов, где будет задан класс warningдолжен быть применен жирный шрифт, а в контейнере SPAN должен быть применен также и курсив. Эту задачу можно решить следующим образом:.warning{font-weight:bold}span.warning{font-style:italic}В результате во всех тегах, где будет задан атрибут CLASS=WARNING текст будетвыделен жирным шрифтом, а если этот класс задан в контейнере SPAN, то текст будетвыделен не только жирным шрифтом, но и курсивом.В качестве значения атрибута CLASS можно задать несколько имен классов и,соответственно, к элементу разметки будут применены свойства обоих классов.Например, можно задать.warning{font-weight:bold}.kl1{ font-style:italic }и тогда, если задать тег-контейнер <SPANCLASS =“ warning kl1 ”>, тозаключенный в него текст будет выделен жирным курсивом.Для группы классов можно задать дополнительные свойства, например, еслизадать:.warning.kl1{background:gray }то текст выделенный приведенным выше контейнером SPAN будет выводиться на серомфоне, причем порядок задания имен классов в атрибуте CLASS значения не имеет.Следующим типом селекторов являются селекторы – идентификаторы.
Внекотором смысле селекторы идентификаторы аналогичны селекторам классов. Однакоесть несколько отличий. Во-первых, с точки зрения синтаксической записи вместо точкииспользуется решетка. Во вторых, в теге языка HTML вместо атрибута CLASSиспользуется атрибут ID. Таким образом, если задать объявление стиля#warning{font-weight:bold; font-style:italic }и затем задать следующую разметку<SPAN ID= warning> НЕКОТОРЫЙ ТЕКСТ</SPAN>то текст будет выдан жирным курсивом.По правилам заданное в ID имя должно встречаться только один раз, хотя еслииспользовать его как и CLASS в разных элементах (тегах), то браузеры отображают егоправильно. Проблемы могут возникнуть при динамическом изменении страницысредствами JavaScript с помощью функции getElementById, так как использование этойфункции предполагает наличиев документе (странице) только одного элемента суказанным идентификатором.В отличие от селекторов класса, селекторы идентификаторов не могутобъединяться, поскольку в атрибуты ID нельзя помещать разделенные пробелами списки.Важно отметить также, что идентификаторы имеют больший приоритет посравнению с классами.
Это значит, что если в теге заданы одновременно атрибуты CLASSи ID и в них заданы определения одних и тех же свойств, то будут применены свойства,заданные в ID.Следует также отметить, что в HTML и ХHTML имена классов и идентификаторыопределяются как чувствительные к регистру, хотя в некоторых браузерах это требованиене соблюдается.Нижеприводитсяпримеродновременногоиспользованияклассаиидентификатора в одном теге..Пример:<STYLE>.tbl{font-family: Verdana; text-decoration: underline}#blue {color:#003366}</STYLE><H3 CLASS=tbl ID=blue>Заголовок</H3>Селекторы атрибутовСелекторы атрибутов применяются для выбора элементов (тегов) на основанииналичия у них атрибутов или значений этих атрибутов.
