Подготовили студенты 4 курса Группы И Длугоборский Ярослав

Подготовили студенты 4 курса Группы И Длугоборский Ярослав Пащук Богдан Презентация на тему основы CSS

Введение CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, написанного языком разметки.

CSS — одна технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web». В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01 и XHTML и стандарт CSS. CSS использует наследование от родителя к потомку, поэтому разработчик может определить разные стили, основываясь на уже определенных ранее стилях.

Основной целью разработки CSS является разделение данных документа и их представления. CSS при отображении страницы позволяет стилизировать документ различными способами: Авторские стили : - Inline-стили - Встроенне стили - Внешние таблицы стилей

Пользовательские стили - Локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили, и применяемый ко всем документам. Стиль браузера - Стандартный стиль, используемый браузером по умолчанию для представления элементов.

Таблицу стилей схематически можно показать так : селектор, селектор { свойство: значение; свойство: значение; свойство: значение; }

Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей. Приоритеты рассчитываются таким образом (от большего к меньшему): 1. свойство задано при помощи !important; 2. стиль прописан напрямую в теге; 3. количество идентификаторов (#id) в селекторе (чем больше, тем больше приоритет); 4. количество классов (.class) и псевдоклассов (:pseudoclass) в селекторе; 5. количество имён тегов в селекторе.

p { font-family: "Garamond", serif; } h2 { font-size: 110 %; color: red; background: white; } .note { color: red; background: yellow; font-weight: bold; } p#paragraph1 { margin: 0; } a:hover { text-decoration: none; } #news p { color: blue; } Пример таблицы стилей:

CSS-вёрстка До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.

Тег link Основное назначение тега – предоставить авторам html возможность устанавливать связь между документом, содержащим тег link и другими документами. В случае css он связывает таблицы стилей с документом (см. рисунок).

Элемент style Элемент style - это единственный способ включения таблиц стилей и располагается он в самом документе : .

Комментарии css В css предусмотрены комментарии. Они ограничиваются символами /* */ .

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

Самый прекрасный завтрак - это вафля, рифельный кусочек домашнего воздушного совершенства...

Структура правила

Объявления и ключевые слова Блок объявлений состоит из множества объявлений. Формат объявлений : имя свойства : значение ; Значение – это отдельное ключевое слово, или список из нескольких ключевых слов, разделенных пробелами Пример: p {font: medium Helvetica;} h2 {font: large sans-serif}

Группировка Для применения одного стиля к нескольким элементам рекомендуется использовать группировку селекторов. Достигается посредством следующего объявления : h2, p {color: gray}

Селекторы классов и идентификаторов Кроме простых элементов документа есть еще два типа селекторов : - Селекторы классов - Селекторы идентификаторов Они позволяют назначить стили, независимо от элементов документа

Селекторы классов : Чтобы связать стили селектора класса с элементом, необходимо присвоить соответствующее значение атрибуту class данного документа.

При работе с плутонием необходимо принять меры по предопущению достижения критической массы.

Этот параграф будет выделен полужирным шрифтом.

Наследование Наследование – это механизм, с помощью которого стили применяются не только к указанным элементам, но так же к их потомкам. Для избежания столкновения с проблемами наследования следует помнить следующее : Некоторые свойства не наследуются из соображений здравого смысла, например, свойство border. Чтобы понять, почему взглянем на рисунок.

Каскад Рассмотрим весьма важный вопрос : что происходит, когда к одному элементу применяются два правила с равной специфичностью? Например имеются правила : h1 {color: red;} h1 {color: blue;} Возникает вопрос, какое из правил применится к объекту h1. Этот вопрос решается некоторым набором правил.

Правила каскадирования : Найти все правила, содержащие селектор, сопоставляемый с данным элементом. Отсортировать согласно приоритетности всех объявлений. Правилам, отмеченным, как !important, присваивается наивысший приоритет. Провести сортировку всех объявлений, согласно их специфичности. Элементы с более высокой специфичностью имеют больший приоритет. Отсортировать объявления в соответствии с очередностью расположения. Чем позже объявление появляется, тем больший у него приоритет

Примеры : Согласно второму правилу, если к элементу применяются два правила и одно из них отмечено как !important, то оно "побеждает": p {color: gray !important;}

Well, hello there!

Значения и единицы измерения Рассмотрим единицы измерения в css, применяемых во всех свойствах для задания цвета, расстояний и размеров.

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

Цвет Определяется ключевыми словами или шестнадцатеричными кодами. Базовый набор цветов : aqua, fuchsia, lime, olive, red, white, black, gray, maroon, orange, silver, yellow, blue, green, navy, purple, teal

Рассмотрим несколько примеров: Пример 1: Итак, скажем, мы хотим, чтобы все заголовки первого уровня были красно-коричневыми. Лучше всего объявить их так: h1 {color: maroon;} Пример 2: Встречаются названия цветов, отсутствующие в вышеприведенном списке. Например, если задать: h1 {color: lightgreen;} Скорее всего, действительно отобразится светлозелёный цвет. Но таким образом задавать цвета нежелательно, т. к. не все браузеры их поддерживают и в результате желаемый результат может не отобразиться.

Шестнадцатеричные RGB цвета Шестнадцатеричные RGB цвета. Css позволяет определять цвет с помощью шестнадцатеричной записи : h1 {color: #FF0000;} h2 {color: #903BC0;} h3 {color: #000000;} h4 {color: #808080;}

Единицы измерения длины Пять типов абсолютных единиц измерения : - Дюймы (in) - Сантиметры (cm) - Миллиметры (mm) - Пункты (pt) – единица измерения, используемая в принтерах. По стандарту дюйму соответствует 72pt. - Пики (pc) пика эквивалентна 12 pt. Относительные единицы разделяются на три типа : em, ex, px. Первые два – типографические меры длины. Px – единицы измерения в пикселях.

Шрифт Семейства шрифтов используются в документе посредством свойства font – family. Если указанное семейство недоступно, выполняется попытка применить следующий указанный шрифт. body {font-family: serif;} h1 {font-family: Georgia, serif}

Задание размера шрифта

Свойства текста Отступ

Горизонтальное выравнивание

Высота строк

Вертикальное выравнивание текста

Преобразование текста Uppercase и lowercase – переводят символы в верхний и нижний регистр соответственно. Capitalize – прописной становится первая буква каждого слова.

Основы модели визуального форматирования Основные блоки Область содержимого окружена произвольным количеством отступов, рамок и полей. Эти элементы считаются необязательными, потому что всем им может быть присвоена нулевая ширина, что удалит их из блока. Каждый элемент генерирует один или несколько прямоугольных блоков, называемых контейнерами элементов. Поля, рамки и отступы задаются такими свойствами, как margin- left или border- bottom и padding.

Чтобы лучше понять описанное, можно посмотреть на следующую схему:

Блок - контейнер Рассмотрим следующую разметку :

Отступы, рамки и поля Css позволяет определять области вокруг элемента, которые управляют размещением рамки и отступа от нее других элементов. Области определяют отступы (padding) между содержимым и рамкой и поля за рамкой (margins).

Модель блоков Ширина и высота Ширина – это расстояние от его левого внутреннего края до правого внутреннего края, высота соответственно.

Задание ширины и высоты :

Примеры:

Рамки и фон Определение стиля рамок :

Задание фона

Свойство background-color описывает цвет фона элемента. Пример: h1 { color: #990000; background-color: #FC9804; }

Отступы

margin - Устанавливает величину отступа от каждого края элемента. margin-bottom - Устанавливает величину отступа от нижнего края элемента. margin-left - Устанавливает величину отступа от левого края элемента. margin-right - Устанавливает величину отступа от правого края элемента. margin-top - Устанавливает величину отступа от верхнего края элемента.

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

Значения свойства display для таблиц В HTML нетрудно понять, какие элементы являются частями таблицы, поскольку в броузеры встроена обработка таких элементов, как tr и td. В XML, напротив, по сути невозможно знать, какие элементы могут быть частью таблицы. Вот где в игру вступает полный набор значений свойства display. Остальные (block, inline, inline-block, run-in и list-item) обсуждаются в других главах. Касающиеся таблиц значения можно охарактеризовать следующим образом:

table Это значение показывает, что элемент определяет таблицу уровня блока. Таким образом, оно определяет прямоугольный блок, который обрабатывается как блочный элемент. Соответствующий HTML-элемент, что не удивительно, – table. inline-table Это значение показывает, что элемент определяет таблицу строкового уровня. Следовательно, элемент определяет прямоугольный блок, который генерирует строковый блок. Ближайший аналог – значение inline-block. Ближайший HTML-элемент – table, хотя по умолчанию HTML-таблицы не являются строковыми элементами. table-row Это значение определяет, что элемент является строкой ячеек. Соответствующий HTML-элемент – tr. table-row-group Это значение определяет, что элемент объединяет одну или несколько строк. Соответствующее HTML-значение – tbody. table-header-group Это значение очень похоже на table-row-group, за исключением того, что при визуальном форматировании группа заголовков таблицы всегда отображается перед всеми остальными строками и группами строк и после всех основных заголовков. При печати агент пользователя может повторять строки заголовков в начале каждой страницы, если для распечатки таблицы необходимо несколько страниц. Спецификация не определяет, что происходит, если table-header-group задано для нескольких элементов. Группа заголовков может включать несколько строк. Эквивалент HTML – thead. table-footer-group Это значение во многом похоже на table-header-group, за исключением того, что группа строк нижнего заголовка всегда отображается после всех остальных строк и групп строк и перед любыми нижними основными заголовками. При печати агент пользователя может повторять строки нижних заголовков внизу каждой страницы, если для распечатки таблицы требуется несколько страниц. Спецификация не определяет, что происходит, если задать table-footer-group для нескольких элементов. Аналогичен HTML-элементу tfoot. table-column Означает, что элемент описывает столбец ячеек. С точки зрения CSS для элемента с таким значением свойства display не генерируется визуальное представление, как будто он имеет значение none. Они вводятся в основном во вспомогательных целях, чтобы определить представление ячеек в столбце. Аналог HTML-элемента col. table-column-group Означает, что элемент объединяет один или несколько столбцов. Как и для элементов table-column, для элементов table-column-group визуальное представление не генерируется, но это значение полезно для определения представления элементов группы столбцов. Аналогичен HTML-элементу colgroup. table-cell Это значение определяет, что элемент представляет отдельную ячейку таблицы. В качестве примеров элементов table-cell можно назвать элементы HTML th и td. table-caption Это значение определяет основной заголовок таблицы. CSS не оговаривает, что должно произойти, если значение caption имеют несколько элементов, но предупреждает: «…авторы не должны помещать более одного элемента со значением display: caption в таблицу или элемент таблицы строкового уровня».

Пример В XML, где элементы не имеют семантики отображения по умолчанию, эти значения становятся крайне полезными. Рассмотрим следующую разметку: Команда Счет Красные 8 Кабс 5 Эту разметку можно отформатировать в виде таблицы с помощью следующих стилей: scores {display: table;} headers {display: table-header-group;} game {display: table-row-group;} team {display: table-row;} label, name, score {display: table-cell;}

Столбцы В css столбцы могут принимать только четыре свойства стиля : border, background, width, visibility (задание рамки, фона, ширины). Visibility - имеет значение collapse- визуальное представление не генерируется. - кроме collapse никаких значений не принимает.

Основные заголовки. Основной заголовок представляет собой короткий фрагмент текста, описывающий суть содержимого таблицы. В css стиль заголовка можно определить, задав правило с названием селектора caption-side.

Пример, иллюстрирующий наиболее важные аспекты представления заголовка: caption { background: gray; margin: 30px; caption-side: top; } table { color: white; background: black; margin: 10px; }

Рамки ячеек таблицы Существует две модели рамок : - Модель отдельных рамок (ячейки отделены друг от друга). - Модель сливающихся рамок (нет визуального разделения ячеек).

Модель можно определить, задав правило с названием селектора border- collapse.

Отдельные рамки ячеек Пример:

Промежуток между рамками задается определением свойства border- spacing .

Слияние рамок Когда рядом располагаются две или более рамки, они сливаются. Этот процесс не происходит случайно. Здесь действуют строгие правила, которые определяют, какие рамки "одержат верх": - Если свойство border-style одной из рамок имеет значение hidden, она получает более высокий приоритет, чем остальные рамки. Все рамки на этом месте будут скрытыми. - Если свойство border-style одной из сливающихся рамок имеет значение none, она получает самый низкий приоритет. В этом месте рамки не будут отрисововаться, только если все границы имеют значение none. Обратите внимание, что none - это применяемое по умолчанию значение свойства border-style. - Если хотя бы одна из сливающихся рамок имеет значение, отличающееся от none, и ни одна не имеет значение hidden, более узкие рамки проигрывают более широким. Если несколько сливающихся рамок имеют одинаковую ширину, то стили рамки применяются в порядке от более предпочтительного к менее: double, solid, dashed, dotted, ridge, outset, groove, inset. Таким образом, если сливаются две рамки одинаковой ширины, из которых одна - dashed, а другая - outset, то рамка в этом месте будет пунктирной (dashed) - Если сливающиеся рамки имеют одинаковые стиль и ширину, но отличаются цветом, тогда цвет определяется более приоритетным элементом в соответствии с приведенным в порядке уменьшения приоритета списком: ячейка, строка, группа строк, столбец, группа столбцов, таблица.