Понятие и назначение css. Лекция Понятие и назначение css. Понятие и назначение каскадных таблиц стилей
 Скачать 1.29 Mb.
|
Курс лекций по дисциплине «Программные средства создания Internet-приложений» 1 Тема: Понятие и назначение каскадных таблиц стилей. Вопрос 1. Понятие и назначение каскадных таблиц стилей. CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, оформленного языком разметки. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL. Каскадные таблицы стилей используются создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления веб-документа. Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и оформления документа (написанного на CSS). Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля. Каскадные таблицы стилей (Cascading Style Sheets, CSS) — это стандарт, определяющий представление данных в браузере. Если HTML предоставляет информацию о структуре документа, то таблицы стилей сообщают как он должен выглядеть. Стиль — это совокупность правил, применяемых к элементу гипертекста и определяющих способ его отображения. Стиль включает все типы элементов дизайна: шрифт, фон, текст, цвета ссылок, поля и расположение объектов на странице. Таблица стилей — это совокупность стилей, применимых к гипертекстовому документу. Каскадирование — это порядок применения различных стилей к веб-странице. Браузер, поддерживающий таблицы стилей, будет последовательно применять их в соответствии с приоритетом: сначала связанные, затем внедренные и, наконец, встроенные стили. Другой аспект каскадирования — наследование (inheritance), — означает, что если не Курс лекций по дисциплине «Программные средства создания Internet-приложений» 2 указано иное, то конкретный стиль будет применен ко всем дочерним элементами гипертекстового документа. Например, если вы примените определенный цвет текста в теге , то все теги внутри этого блока будут отображаться этим же цветом. Использование каскадных таблиц дает возможность разделить содержимое и его представление и гибко управлять отображением гипертекстовых документов путем изменения стилей. Вопрос 2. Синтаксис CSS. CSS правила. Виды селекторов. Таблицы стилей строятся в соответствии с определенным порядком (синтаксисом), в противном случае они не могут нормально работать. Таблицы стилей составляются из определенных частей (рис. 1): Рисунок 1 – Синтаксис CSS Сам блок объявления стилей состоит из свойств и их значений, разделенных точкой с запятой: Селектор (Selector) — это элемент, к которому будут применяться назначаемые стили. Это может быть тег, класс или идентификатор объекта гипертекстового документа. Свойство (Property). Свойство определяет одну или несколько характеристик селектора. Свойства задают формат отображения селектора: отступы, шрифты, выравнивание, размеры и т.д. Значение (Value). Значения — это фактические числовые или строковые константы, определяющие свойство селектора. Описание (Declaration). Совокупность свойств и их значений. Правило (Rule). Полное описание стиля (селектор + описание). Курс лекций по дисциплине «Программные средства создания Internet-приложений» 3 Таким образом, таблица стилей — это набор правил, задающих значения свойств селекторов, перечисленных в этой таблице. Общий синтаксис описания правила выглядит так: селектор[, селектор[, ...]] {свойство: значение;} Регистр символов значения не имеет, порядок перечисления селекторов в таблице и свойств в определении не регламентирован. ПРАВИЛА CSS Итак, каскадная таблица стилей — это набор правил форматирования тегов HTML. Свойства CSS должны находиться в фигурных скобках. Для каждого тега HTML можно указать не одно, а несколько свойств стиля. Изменим с помощью CSS не только цвет фона Web-страницы, но и цвет шрифта (на белый). body{background:black;color:white} Формат самого правила не имеет значения, главное – правило должно читаться удобно и легко. Например, вышеприведенное правило можно записать и так: body{ background:black; color:white} Одно и то же правило сстиля можно применить сразу к нескольким различным тегам HTML-страницы. Например: body,td,h1{ background:black; color:white} Приведем несколько примеров написания таких правил: 1. Основной текст с выравниванием по ширине, абзацный отступ 30px, гарнитура (шрифт) — Serif, кегль (размер шрифта) — 14px: Курс лекций по дисциплине «Программные средства создания Internet-приложений» 4 Это правило будет применено ко всем тегам 2. Синий цвет для заголовков с первого по третий уровень: 3. Таблицы и изображения выводить без обрамления: 4. Ссылки в элементах списков показывать без подчеркивания: 5. Внутренние отступы слева и справа для блоков ( ), заголовков таблиц и ячеек таблиц установить в 10px и залить фон желтым цветом: 6. Все ссылки в документе отображать черным цветом и полужирным шрифтом, а в основном тексте и списках — обычным, а также выделять их зеленым цветом и подчеркивать только при наведении курсора (в описании правил использован псевдоэлемент a:hover). Курс лекций по дисциплине «Программные средства создания Internet-приложений» 5 Для того, чтобы CSS легко читался, полезно соблюдать пять правил форматирования. Каждое свойство – на отдельной строке Так – неверно: /*+ no-beautify */ #snapshot-box h2 { padding : 0 0 6px 0 ; font-weight : bold ; position : absolute ; left : 0 ; top : 0 ; } Так – правильно: /*+ no-beautify */ #snapshot-box h2 { position : absolute ; left : 0 ; top : 0 ; padding : 0 0 6px 0 ; font-weight : bold ; } Каждый селектор – на отдельной строке Неправильно: /*+ no-beautify */ #snapshot-box h2, #profile-box h2, #order-box h2 { padding : 0 0 6px 0 ; font-weight : bold ; } Правильно: /*+ no-beautify */ #snapshot-box h2, #profile-box h2, #order-box h2 { padding : 0 0 6px 0 ; font-weight : bold ; } Свойства, сильнее влияющие на документ, идут первыми Рекомендуется располагать свойства в следующем порядке: Курс лекций по дисциплине «Программные средства создания Internet-приложений» 6 1. Сначала положение элемента относительно других: position, left/right/top/bottom, float, clear, z-index. 2. Затем размеры и отступы: width, height, margin, padding… 3. Рамка border , она частично относится к размерам. 4. Общее оформление содержимого: list-style-type, overflow… 5. Цветовое и стилевое оформление: background, color, font… Общая логика сортировки: «от общего – к локальному и менее важному». При таком порядке свойства, определяющие структуру документа, будут видны наиболее отчётливо, в начале, а самые незначительно влияющие (например цвет) – в конце. Например: /*+ no-beautify */ #snapshot-box h2 { position : absolute ; /* позиционирование */ left : 0 ; top : 0 ; padding : 0 0 6px 0 ; /* размеры и отступы */ color : red ; /* стилевое оформление */ font-weight : bold ; } Свойство без префикса пишется последним. Например: -webkit-box-shadow : 0 0 100px 20px #000 ; box-shadow : 0 0 100px 20px #000 ; Это нужно, чтобы стандартная (окончательная) реализация всегда была важнее, чем временные браузерные. Различают следующие виды селекторов CSS: 1) Универсальные селекторы. Универсальный селектор соответствует любому элементу html- документа. Для обозначения универсального селектора применяется символ "звёздочка" ( * ). Курс лекций по дисциплине «Программные средства создания Internet-приложений» 7 Его используют, если надо установить одинаковый стиль для всех элементов Web-страницы. Например: * { font-size: 16px; } 2) Селекторы по названию тега. В качестве селектора может выступать любой html-тег, для которого определяются правила стилевого оформления. Например: h1 {color: red; text-align: center; } Если несколько элементов будут иметь общий стиль, то соответствующие им селекторы можно перечислить в таблице стилей через запятую. Например: h1 , h2 , h3 , h4 {color: red; text-align: center; } 3) Селекторы по классу. Для стилевого оформления чаще всего используются селекторы классов. Класс для тега задается атрибутом class . Например: < div class = "c1" > div > Имя класса должно начинаться с латинской буквы и может содержать буквы ([A-Z],[a-z]), цифры ([0-9]), "дефисы" ( - ) и "подчеркивания" ( _ ). Если атрибут id применяется для уникальной идентификации, то при помощи атрибута class тег относят к той или иной группе. В CSS-коде селектор идентификатора обозначается знаком "точка" ( . ). Разные теги можно отнести к одному классу. В таком случае имя тега перед знаком "точка" ( . ) опускают: i .green {color: #008000; } b .red {color: #f00; } .blue {color: #00f; } Для тега можно одновременно указать несколько классов, перечисляя их в атрибуте class через пробел. В этом случае к элементу применяются стили каждого из указанных классов. < div class = "left w100" > div > Курс лекций по дисциплине «Программные средства создания Internet-приложений» 8 Если некоторые из этих классов содержат одинаковые свойства стиля, но с разными значениями, то будут применены значения стиля класса, который в CSS-коде расположен ниже. 4) Селекторы по id. HTML предоставляет возможность присвоить уникальный идентификатор любому тегу. Идентификатор задается атрибутом id Например: < div id = "a1" > div > Значение идентификатора должно начинаться с латинской буквы и может содержать буквы ([A-Z],[a-z]), цифры ([0-9]), "дефисы" ( - ) и "подчеркивания" ( _ ). Значения всех атрибутов id в html-документе обязаны быть уникальными . Если встречаются id с одинаковыми значениями, то эти идентификаторы игнорируются, а код Web-страницы становится невалидным. В CSS-коде селектор идентификатора обозначается знаком "решетка" ( # ). Так как идентификатор id применяется только к уникальным элементам, название тега перед знаком "решетка" ( # ) обычно опускают: div #a1 {color: green; } аналогично #a1 {color: green; } 5) Селекторы по атрибуту. Существует множество селекторов атрибутов, с помощью которых можно задать стилевое оформление для тега в зависимости от его атрибутов. [ элемент с атрибутом atr, назависимо от его значения. Например: h1 [title] {color: #800000; } /* элемент h1, у которого есть атрибут title */ [atr="val"] элемент с атрибутом atr, значение которого равно val. Например: input [type="text"] { border: 1px solid #ссс; Курс лекций по дисциплине «Программные средства создания Internet-приложений» 9 padding: 4px 6px; width: 300px; } [atr="val"] элемент с атрибутом atr, значение которого представляет собой список разделенных пробелами слов, одно из которых равно val . Например: a [rel="sidebar"] { text-decoration: none; border-bottom: 1px solid #06c; color: #06c; } [atr^="val"] элемент с атрибутом atr, значение которого начинается строкой val. Например: span [class^="icon"] { display: inline-block; background-image: url( "/img/icon_sprite.png" ); } [atr$="val"] элемент с атрибутом atr, значение которого заканчивается строкой val. Например: a [href$="doc"] , a [href$="docx"] { background: url( "pic.gif" ) bottom left no-repeat; display: inline-block; width: 32px; } [atr*="val"] элемент с атрибутом atr, значение которого содержит строку val. Например: [class*="cat-"] { display: block; float: left; width: 280px; } Между именем тега и квадратной скобкой ( [ ) не должно быть пробела! Курс лекций по дисциплине «Программные средства создания Internet-приложений» 10 Универсальный селектор, селекторы тегов, идентификаторов, классов и атрибутов, а также псевдоклассы относятся к простым селекторам Простые селекторы можно связать в определенные последовательности на основе отношений элементов в дереве Web-документа. Такие конструкции называют комбинаторами 6) Селекторы потомков, или контекстные селекторы. Один из самых часто используемых комбираторов – контекстный селектор. Контекстные селекторы или селекторы потомков определяют несколько элементов, один из которых находится внутри другого. В контекстном селекторе простые селекторы разделены пробелом. Пример: < style > ol li {border: 1px solid #06c; } style > < ol > < li > Пушкин А.С. < ul > < li > «Выстрел» li > < li > «Метель» li > < li > «Дубровский» li > ul > li > < li > Гоголь Н.В. < ul > < li > «Ревизор» li > < li > «Тарас Бульба» li > < li > «Мертвые души» li > ul > li > < li > Толстой Л.Н. < ul > < li > «Война и мир» li > < li > «Анна Каренина» li > < li > «Воскресение» li > ul > li > ol > Курс лекций по дисциплине «Программные средства создания Internet-приложений» 11 7) Селекторы дочерние (только первые). Дочерний селектор определяет элемент, который находится внутри другого непосредственно. В дочернем селекторе простые селекторы разделены знаком "больше" ( > ). Пример: < style > ol > li {border: 1px solid #06c; } style > < ol > < li > Пушкин А.С. < ul > < li > «Выстрел» li > < li > «Метель» li > < li > «Дубровский» li > ul > li > < li > Гоголь Н.В. < ul > < li > «Ревизор» li > < li > «Тарас Бульба» li > < li > «Мертвые души» li > ul > li > < li > Толстой Л.Н. < ul > < li > «Война и мир» li > < li > «Анна Каренина» li > < li > «Воскресение» li > ul > li > ol > Курс лекций по дисциплине «Программные средства создания Internet-приложений» 12 8) Селекторы сестринские, или соседние (расположенные на одном уровне). Соседний селектор определяет знак "плюс" ( + ) , разделяющий две последовательности простых селекторов. Элементы, представленные этими последовательностями, находятся внутри одного контейнера и следуют второй за первым непосредственно, не разделенные никакими другими тегами. Пример: < style > h3 + p { padding-left: 260px; font-style: italic; } style > < h3 > РЕФЛЕКСОТЕРАПИЯ h3 > < p > "Все акты сознательной и бессознательной жизни по способу происхождения суть рефлексы". И.М. Сеченов p > < p > Рефлексотерапия – лечение заболеваний через управление рефлексами. Успешно применяется в программах комплексного лечения или как индивидуальная методика. p > Курс лекций по дисциплине «Программные средства создания Internet-приложений» 13 9) Смежные селекторы Смежный селектор определяет знак "тильда" ( ) , разделяющий две последовательности простых селекторов. Элементы, представленные этими последовательностями, находятся внутри одного контейнера и следуют второй за первым (необязательно непосредственно). Пример: < style > h3 + p { padding-left: 260px; font-style: italic; 0; } hr { background-color: #06c; border: none; height: 1px; } h3 hr { background-color: #666; margin: 5px 0 5px 260px; } style > < hr > < h3 > РЕФЛЕКСОТЕРАПИЯ h3 > < p > "Все акты сознательной и бессознательной жизни по способу происхождения суть рефлексы". И.М. Сеченов p > < hr > < p > Рефлексотерапия – лечение заболеваний через управление рефлексами. Успешно применяется в программах комплексного лечения или как индивидуальная методика. p > 10) Селекторы псевдоклассов (селекторы состояния). Концепция псевдоклассов была введена, чтобы разрешить выбор на основе информации, которая лежит вне дерева документа или не может быть выражена с помощью простых тегов. Псевдоклассы могут быть динамическими, в том смысле, что элемент получает или теряет псевдокласс при определенных действиях пользователя. По умолчанию (если нет атрибута disabled) все элементы форм доступны. Курс лекций по дисциплине «Программные средства создания Internet-приложений» 14 :enabled определяет доступный элемент формы. Пример: РЕЗУЛЬТАТ: По умолчанию (если нет атрибута disabled) все элементы форм доступны. :disabled определяет недоступный (заблокированный) элемент формы. Пример: РЕЗУЛЬТАТ: :checked определяет включенные флажки (checkbox) и переключатели (radio). Устанавливается состояние «включено» пользователем или с помощью атрибута checked тега . Пример: < style type = "text/css" > input [type="checkbox"] + span { position: relative; top: -2px; left: 3px; } input [type="checkbox"] :checked + span { color: #039; Курс лекций по дисциплине «Программные средства создания Internet-приложений» 16 text-decoration: underline; } style > < p > Какой напиток Вы предпочитаете пить по утрам? p > < div style = "float:left; margin-right: 50px;" > < label >< input type = "checkbox" checked name = "a1" >< span > Кофе span >label >< br > < label >< input type = "checkbox" name = "a2" >< span > Чай span >label >< br > < label >< input type = "checkbox" name = "a3" >< span > Какао span >label > div > < label >< input type = "checkbox" name = "a4" >< span > Сок span >label >< br > < label >< input type = "checkbox" name = "a5" >< span > Вода span >label >< br > < label >< input type = "checkbox" name = "a6" >< span > Рассол span >label > :indeterminate определяет неопределенные флажки (checkbox) и переключатели (radio). Неопределенное состояния для флажков является чисто визуальным эффектом и маскирует истинное состояние (включен или выключен). Установить в HTML-коде неопределенное состояние нельзя, т.к. нет специального атрибута. Это можно сделать только в JavaScript. Пример: Курс лекций по дисциплине «Программные средства создания Internet-приложений» 17 РЕЗУЛЬТАТ: 11) Селекторы псевдоэлементов. Псевдоэлементы позволяют задать стиль для части элемента (например, для первой буквы или первой строки абзаца), а также генерировать содержимое, которого нет в HTML-коде документа. Псевдоэлемент состоит из двух двоеточий ( :: ) и имени. Двойное двоеточие было введено в CSS3 для того, чтобы отделить псевдоэлементы от псевдоклассов . Однако для совместимости с прежними таблицами стилей допускается использовать одинарное двоеточие ( : ). ::first-line первая строка текстового блока. Пример: < style type = "text/css" > p::first-line { font-weight: bold; } style > < p > При редактировании CSS-файла возникает противоречивая задача. С одной стороны код должен быть удобным для восприятия и редактирования, быстрого отыскания нужного селектора, для чего активно применяются отбивки, комментарии, пробелы и символы табуляции. С другой стороны, объем кода должен быть компактным и не содержать в себе ничего лишнего. Компактность позволяет несколько ускорить загрузку сайта и повысить его производительность. Курс лекций по дисциплине «Программные средства создания Internet-приложений» 18 p > < p > Данное противоречие решается наличием двух версий CSS-файла: один для редактирования, а второй для загрузки на сервер. Сам же процесс сокращения кода называется минимизацией и вполне автоматизирован с помощью специализированных программ или сетевых сервисов. Но если приходится часто вносить изменения в CSS-файл, то процесс минимизации становится неудобным. Сами посудите, вначале надо отредактировать файл, затем его минимизировать и полученный код сохранить в файл, который нужно залить на сервер. Слишком много действий приходится совершать ради одного изменения. Логичнее было бы возложить задачу минимизации на сайт. Загрузили файл на сервер, и вот он уже в компактном виде отдается посетителям. Одно из таких универсальных решений называется minify, это библиотека на PHP5. Она минимизирует, объединяет и кэширует CSS-файлы, а также JavaScript. p > Псевдоэлемент ::first-letter дает возможность оформить текст "буквицами". ::first-letter первая буква текстового блока. Пример: < style type = "text/css" > p::first-letter { font: italic 40px Georgia, serif; } style > < p > За горами, за лесами, < br > За широкими морями, < br > Курс лекций по дисциплине «Программные средства создания Internet-приложений» 19 Не на небе – на земле < br > Жил старик в одном селе... p > ::before генерируемое содержимое, расположенное до содержимого элемента; ::after генерируемое содержимое, расположенное после содержимого элемента. Псевдоэлементы ::before и ::after используются вместе со свойством content и наследуют стиль от элемента, к которому добавляются. При добавлении ::before или ::after к блочному элементу их свойство display может принимать значения block, inline, none, list-item . Все остальные будут восприниматься как block. При добавлении ::before или ::after к строчному элементу их свойство display может принимать значения inline и none. Все остальные будут восприниматься как inline. Псевдоэлементы ::before и ::after нельзя добавить ни к элементу img, ни к элементу input, так как эти элементы не имеют содержимого. Пример: < style type = "text/css" > li { list-style: none; } li::before { content: "\25BA" ; padding-right: 5px; } style > < ul > < li > α – альфа li > Курс лекций по дисциплине «Программные средства создания Internet-приложений» 20 < li > β – бета li > < li > γ – гамма li > ul > ::selection текст, выделенный пользователем. К выделенному тексту можно применять свойства color, background и background-color. Firefox понимает этот псевдоэлемент только с префиксом, т.е. ::-moz- selection Пример < style type = "text/css" > p::selection { background-color: #ff0; } p::-moz-selection { background-color: #ff0; } style > < p > Выделите левой кнопкой мыши текст этого абзаца, и он будет на желтом фоне. p > Курс лекций по дисциплине «Программные средства создания Internet-приложений» 21 Вопрос 3. Свойства CSS. Группировка селекторов и свойств. Наследование и каскадирование. Свойство – свойство представляет собой слово или несколько слов написанных через дефис. Большинство свойств имеют простые для понимания названия, такие как color (цвет текста), background-color (цвет заднего фона), text-align (горизонтальное выравнивание текста) и так далее. Значение – в зависимости от используемого свойства, значения могут устанавливать различные характеристики для элемента, будь то цвет, ширина, высота, расположение и тому подобное. Список свойств и значений находится внутри фигурных скобок CSS- правила. Свойство определяет, какую характеристику внешнего вида мы хотим изменить, а значение — как именно. .feature-kitten { padding-top: 60px; } Каждый раз, когда мы добавляем новое свойство или изменяем его значение, мы меняем что-то на странице. Для более детального изучения свойств css воспользуемся сайтом https://msiter.ru/references/css-reference В таблицах стилей обычно существуют элементы с одинаковым стилевым оформлением. Чтобы уменьшить объем кода, вы можете группировать селекторы. Отделяйте каждый селектор запятой.
|