web-технологии. CSS3
презентация к уроку
Предварительный просмотр:
Подписи к слайдам:
Синтаксис CSS Правило CSS состоит из двух частей: селектор и одно или больше объявлений свойств: Селектором обычно является элемент HTML, форматирование которого вы хотите изменить. Каждое объявление состоит из свойства и его значения. Свойство — это атрибут стиля, который вы хотите изменить. Каждое свойство имеет значение.
Тип селектора Пример Универсальный селектор * { color: #555; } Селектор тэга b { color: red; } Селектор класса .classname { color: blue; } Селектор идентификатора #idname { background: cyan; } Селектор потомка span em { color : green; } Селектор непосредственно дочернего элемента div > em { background: lime; } Селектор смежного элемента i + b { color: gray; } Селектор соседнего элемента i ~ b { color: silver; } Селектор атрибута a[href='info.htm'] { color: red; } Псевдокласс a:hover { font-weight: bold; } Псевдоэлемент p::first-letter { font-size: 300%; } CSS-селекторы, псевдоклассы и псевдоэлементы
Соответствие частям строк Оператор ^ Например, следующему селектору будет соответствовать любой href-атрибут, чье значение начинается со строки ’ http: / /website ': a[href^='http://website'] Таким образом, ему будет соответствовать следующий элемент: <а href='http://website.com'> А этот элемент соответствовать не будет: <а href='http://mywebsite.com'>
Соответствие частям строк Оператор $ Для поиска соответствия только в конце строки можно использовать следующий селектор, которому будет соответствовать любой img-тег, чей src-атрибут заканчивается на ' . png *: img[src$='.png'] Например, ему будет соответствовать следующий тег: 
Соответствие частям строк Оператор * Для поиска соответствия подстроки, находящейся в любом месте атрибута, можно воспользоваться следующим селектором. Он найдет любые ссылки па странице, имеющие строку 'google' в любом месте ссылки: a[href*='google'] Например, ему будет соответствовать эта часть кода HTML: <а href='http://google.com'> а эта часть соответствовать не будет: <а href='http://gmai1.com’>
Селекторы id и class Кроме форматирования обычных HTML элементов (например, h1, p и тд), CSS позволяет вам указать свои собственные селекторы, называемые " id " и " class ", которые позволяют применять свойства CSS к элементам определенного блока страницы. Например, вы можете присвоить класс всем ссылкам в блоке навигации и другой класс блоку содержимого страницы. После этого при помощи CSS вы можете присвоить различный стиль ссылкам в блоке навигации и блоке контента. На этом сайте вы можете убедиться в том, что ссылки в блоках навигации слева и справа имеют различный стиль, отличающийся от стиля ссылок в блоке контента.
Селектор id Селектор id используется для определения стиля единственного, уникального элемента страницы. Селектор id использует атрибут id HTML-элемента и определяется знаком "#". Стилевое правило в примере ниже будет применено к элементу с id="para1":
Селектор id Пример : HTML
К этому абзацу будет применен стиль id para1, то есть текст абзаца будет выровнен по центру и окрашен в красный цвет.
CSS #para1 { text-align: center; color: red; } Совет: название id не должно начинаться с цифры, так как такой id не будет работать в firefox.Селектор class Селектор class используется для определения стиля групп элементов. В отличие от селектора id, селектор class обычно используют для форматирования нескольких элементов. Это позволяет вам задавать одинаковый стиль для любого html-элемента с одинаковым классом. Селектор class использует атрибут HTML class и определяется знаком "."
Селектор class В примере ниже, текст всех html-элементов с class="center" будет выровнен по центру: Пример : HTML
Текст этого заголовка будет выровнен по центру
Текст этого абзаца также будет выровнен по центру.
CSS .center {text-align: center;}Селектор class Вы можете указать, что стиль класса должен применяться только к одному тегу HTML. В примере ниже текст всех элементов p (абзац) с class="center" будет выровнен по центру: Пример: p.center {text-align:center;} Совет : название класса не должно начинаться с цифры, так как такие названия поддерживаются только в Internet Explorer.
Способы вставки стиля CSS Существует три способа вставки стиля css: Внешние таблицы стилей (css файл) Внутренние таблицы стилей (стиль в элементе head) Атрибут style= у тэгов
Внешние таблицы стилей Внешние таблицы стилей отлично подходят для стилей, которые применяются к множеству страниц. С помощью внешних таблиц стилей вы можете изменить оформление всего веб-сайта, изменяя только один файл. На каждой странице сайта вы должны сделать ссылку на внешние таблицы стилей (css файл/файлы) с помощью тега . Тег помещается в элементе head: Пример
Внешние таблицы стилей можно создать в любом текстовом редакторе (хотя лучше использовать специальные текстовые редакторы, например, Notepad++, Kate, CotEditor или Sublime Text). В этом файле не должно быть тегов html. Файл внешних стилей надо сохранить с расширением .css.Внутренние таблицы стилей Внутренние таблицы стилей обычно используют в том случае, когда единственная страница сайта имеет уникальный стиль. Внутренний стиль записывается в элементе head между тегами : Пример
Атрибут style= (встроенный стиль) Встроенный стиль CSS противоречит идеологии разделения оформления и содержания, поэтому используйте его осторожно. Для вставки строчного стиля используется атрибут style= соответствующего элемента HTML. Атрибут style= может содержать любые свойства CSS. В примере ниже показано, как изменить отступ слева и цвет текста абзаца: Пример
Это абзац.
Приоритет стилей Все стили для элемента складываются в новую виртуальную иерархию стилей в соответствии со следующим списком, где номер четыре имеет самый высший приоритет: Установки браузера Внешний стиль Внутренний стиль (в элементе head) Строчный стиль (в HTML-элементе в атрибуте style=)
Комментарии CSS Комментарии игнорируются браузерами. Комментарий CSS пишется между знаками "/*" и "*/", например: Пример /* Выравниваем текст абзацев по центру */ p { text-align: center; /* Цвет текста абзацев черный, шрифт из списка */ color: black; font-family: 'DejaVu Sans', 'Lucida Grande', Arial, sans-serif; }
Как применить один стиль к нескольким селекторам Достаточно перечислить селекторы через запятую: Впоследствии оформление для селекторов можно переопределить индивидуально: /* все абзацы и списки делаем красными, шрифтом Tahoma */ p, li, ul, ol {color: red; font-face: Tahoma, sans-serif;} /* переопределяем цвет на синий для нумерованных списков */ ol {color: blue;}
Селекторы вложенности (контекста) /* все ссылки, находящиеся внутри списков, станут красными: */ li a {color: red;} /* все ссылки в абзацах, находящихся внутри таблиц, станут зелеными: */ table p a {color: green;}
Селекторы потомков «Потомками» элемента HTML называются любые вложенные в него элементы: это его «дети» (то есть непосредственно вложенные), дети его детей, и так далее, вглубь иерархии тегов. Правильно используя селекторы, мы можем прицельно применить CSS стили к нужным элементам, сославшись на их родительский элемент. Для этого перед селектором искомого элемента надо вставить селекторы его «предков», разделив их пробелом
Селекторы детей «Детьми» или «дочерними элементами» элемента HTML называются непосредственно вложенные в него элементы, он для них является «родительским» элементом. Элементы, находящиеся на 2-м и более глубоких уровнях вложенности, «детьми» не являются – это дети детей, то есть «потомки» CSS позволяет нам создать селектор для выбора дочерних элементов любого элемента и изменить их свойства, применив CSS стили. Для этого перед селектором искомого элемента надо вставить селекторы его «предков», разделив их знаком >.
Селекторы смежных элементов (Adjacent Sibling Selectors) Иногда нам надо выбрать элемент, расположенный в HTML-документе непосредственно за другим элементом. Так, например, чтобы выбрать все заголовки H1, следующие за абзацами P, и изменить их верхний отступ:
Свойства CSS по функциям Фон Бордюр и внешний бордюр Физические размеры Шрифт Генерируемый контент Списки Внешний отступ Внутренний отступ Позиционирование Печать Таблицы Текст Псевдо классы/элементы
Свойства фона Свойство Описание background Свойства фона одной записью background-attachment Указывает прокручивать фоновое изображение вместе с текстом или нет background-color Цвет фона элемента background-image Изображение фона элемента background-position Позиция фонового изображения background-repeat Повтор фонового изображения
Свойства бордюра и внешнего бордюра (outline) Свойство Описание border Свойства бордюра (границы элемента) одной записью border-bottom Свойства нижнего бордюра border-bottom-color Цвет нижнего бордюра border-bottom-style Стиль нижнего бордюра border-bottom-width Ширина линии нижнего бордюра border-color Цвет всех четырех бордюров border-left Свойства левого бордюра одной записью border-left-color Цвет левого бордюра
Свойства бордюра и внешнего бордюра (продолжение 1) Свойство Описание border-left-style Стиль левого бордюра border-left-width Ширина левого бордюра border-right Свойства правого бордюра одной записью border-right-color Цвет правого бордюра border-right-style Стиль правого бордюра border-right-width Ширина правого бордюра border-style Стиль всех бордюров элемента
Блочная модель CSS Каждый HTML-элемент можно рассматривать как прямоугольный ящик (коробку). В CSS упоминают термин "блочная модель", когда речь идет о дизайне и разметке веб-страниц. Блочная модель CSS — это прямоугольник, окружающий html-элемент и состоящий из следующих параметров: margin, border, padding и контента.
Элементы блочной модели Margin — очищает пространство вокруг границы элемента, не позволяя другим элементам приближаться к границе элемента. Можно сказать, что это "личное пространство" элемента. Margin не имеет фонового цвета и прозрачен Border — граница (рамка), окружающая padding и контент (содержимое). Цвет границы можно изменить Padding — очищает пространство вокруг контента (содержимого). Можно сказать, что это "личное пространство" контента. Padding окрашивается в цвет фона элемента. Содержимое — пространство для содержимого, куда помещается текст и/или изображения.
Код страницы
Ширина этого элемента тоже 250px.
Заметка: мы добавили DOCTYPE, теперь этот элемент отображается корректно во всех браузерах.