Курс CSS. Урок 55. CSS3.
Итоги. Последний урок курса CSS.
Итоги. Последний урок курса CSS.
Данный урок является заключительным в курсе CSS.
При необходимости вы можете пользуясь ссылками ниже повторить необходимый урок или найти дополнительную информацию, пользуясь поисковиком ниже.
Расширенное содержание курса CSS
Урок 01 ::
01. Подготовительные мероприятия, установка расширений для FireFox. Определим, сколько времени прошло от момента создания курса мною до момента изучения его вами. Любой вебмастер должен на весьма высоком уровне знать все браузеры из большой тройки: Гугль Хром, FireFox, IE. Скачивание и установка браузера FireFox. Установка дополнений для FireFox: "Web Developer" (Веб Девелопер, Веб Разработчик) и "Firebug" (ФайяБаг, Поджигатель Клопов). В результате данного урока должен быть установлен и проверен необходимый инструментарий.
Урок 02 ::
02. Принципы работы CSS. CSS есть сокращение (начальные буквы) от термина "Cascade Styles Sheets" ("Таблицы Каскадных Стилей"). Под каскадностью здесь следует понимать особенности технологии CSS: множественность источников, приоритетность. Технология HTML отвечает на вопрос "Что?" (в смысле, что именно отображать на веб странице), а технология CSS отвечает на вопрос "Как?" (в смысле, как именно отображать на веб странице ту информацию, которая предоставлена средствами HTML). Внешние файлы *.css позволяют быстро и эффективно изменять дизайн сразу для большой группы веб страничек. Именно по этой причине технология CSS так понравилась всем дизайнерам в мире. Дизайнер вносит простое изменение в один единственный файл *.css, и это изменение сказывается сразу на многих страничках *.html
Урок 03 ::
03. Подключение CSS и 3 базовых селектора. Можно не только подключать один файл *.css к разным файлам *.html, справедливо также обратное утверждение. К одному определенному файлу *.html можно подключить несколько файлов *.css. Селектор - в переводе с английского означает "выбранный". В роли "выбранного" или "селектора" может выступать любой элемент веб страницы: список, абзац, блок и т.д. Три основных вида подключения Селектора: Селектор Тэгов, Селектор ID, Селектор Классов.
Урок 04 ::
04. Групповые селекторы. Можно использовать одно правило для применения к группе селекторов путем их перечисления через запятую. Например: p, h4, #myList { color: #909090; }.
Урок 05 ::
05. Селекторы потомков. B CSS есть понятия "предок" и "потомок", а также селекторы, основанные на принципе наследственности. Для браузера наша HTML страница представляется в виде дерева, и корнем этого дерева является тэг <html>. Все остальные тэги находятся внутри тэга <html>. Непосредственно внутри тэга <html> находятся тэги <head> (контейнер для служебных тэгов) и <body> (контейнер для тэгов с контентом для пользователя). Можно сказать, что теги внутри пары <body> и </body> являются потомками для тега <body>. Это, например, теги <div> и другие.
Урок 06 ::
06. ПсевдоСелекторы (ПсевдоКлассы) ссылок. ПсевдоСелекторы (ПсевдоКлассы) чаще всего имеют отношения именно к ссылкам. Любые ссылки могут иметь следующие состояния: "непосещенный линк" ("unvisited link"), "посещенный линк" ("visited link"), "мышка над линком" ("mouse over link"), "выбранный линк" ("selected link").
Урок 07 ::
07. Семейство шрифтов. Следует выбирать шрифты не только исходя из тех, которые установлены на вашем компьютере, но и те, которые с большой долей вероятности, установлены на компьютерах наших пользователей. Мы можем все популярные шрифты свести к трем большим группам: шрифты с засечками serif("Times New Roman", "Georgia"), шрифты без засечек sans-serif("Verdana", "Geneva", "Arial", "Helvetica"), моноширные шрифты monospace("Courier New", "Courier", "Andale Mono"). Указанные 9 шрифтов и группы шрифтов и следует использовать для веб дизайна, за исключением совсем уж специфических задач, связанных со шрифтами.
Урок 08 ::
08. Размер шрифта. Подобно тому, как во встроенные стили любого браузера установлен тип шрифта по умолчанию (обычно это "Times New Roman"), также имеются базовые (дефолтные, по умолчанию) размеры шрифта: 100%, 1em, 16px, 12pt, medium. Если мы хотим увеличить размер шрифта, то должны использовать значения свойства больше, чем базовые, а если уменьшить, то меньше, чем базовые.
Урок 09 ::
09. Жирный и курсивный текст. Эффект создания жирного и курсивного текста можно создавать с помощью старых тегов HTML <strong>(жирный текст)</strong> и <em>(курсивный текст)</em>. Но идеологически правильно это делать помощью CSS. Насыщенность (жирность) шрифта определяется с помощью свойства font-weight:normal|lighter|bold|100-900;. С помощью свойство font-style:italic; можно сделать шрифт курсивным.
Урок 10 ::
10. Декорирование текста. Под декорацией (декорированием) текста понимается его подчеркивание, надчеркивание и перечеркивание. Часто декорация используется для оформления ссылок с обратной целью: не добавить декорацию, а убрать подчеркивание, которое добавляется в каждую ссылку браузерами по умолчанию. Возможности использования: text-decoration:none; - декорирование отсутствует, text-decoration:underline; - подчеркивание внизу, text-decoration:overline; - надчеркивание сверху, text-decoration:line-through; - перечеркивание.
Урок 11 ::
11. Выравнивание текста, "красная" строка. Если не дано никаких указаний-свойства, то по умолчанию текст выравнивается по левому краю. Достигается требуемый способ выравнивания с помощью свойства (property) text-align: text-align:left; - по левому краю (по умолчанию), text-align:center; - по центру, text-align:right; - по правому краю, text-align:justify; - по ширине текста. Эффект "красной" строки, когда самая первая строка абзаца имеет определенный отступ от края достигается за счет свойства text-indent. Примеры: text-indent:32px; - отступ в первой строке равен 32 пикселям, text-indent:12%; - отступ в первой строке равен 12%.
Урок 12 ::
12. Высота строки, расстояния. На данном уроке мы изучим еще 4 свойства (property), имеющих отношение к отображению строк: line-height - межстрочный интервал определяет высоту строки, word-spacing - интервал между словами, letter-spacing - межбуквенный интервал, text-transform - изменение регистра позволяет отображать текст либо маленькими буквами (lowercase), либо большими буквами (uppercase), либо так, чтобы первые буквы каждого слова были большими (capitalize).
Урок 13 ::
13. Сокращенная запись свойств шрифта. Помимо подробных записей установки свойств шрифта можно использовать сокращенный аналог: [<'font-style'>||<'font-variant'>||<'font-weight'>]?<'font-size'>[/<'line-height'>]?<'font-family'>. Двойные палки означают, что из трех можно назначить от 1 до 3 указанных свойств. Если бы была не двойная палка, а одинарная, то тогда можно было выбрать только 1 свойство из данных трех. Квадратные скобки обозначают определенную группу свойств. Знак вопроса означает, что элементы данной группы указывать не обязательно. Пример простой записи, в которой используются только обязательные свойства <'font-size'> (16px) и <'font-family'> (Tahoma): font: 16px Tahoma;.
Урок 14 ::
14. Рамки. Рамки вокруг блочных элементов создаются по следующему правилу сокращенной записи: [<'border-width'>||<'border-style'>||<'border-color'>]. Ширина рамки измеряется в пикселях, а стили могут быть следующими: none - рамка вообще отсутствует, dotted - рамка точечная, dashed - рамка "тире", solid - рамка "сплошная", double - рамка "двойная", groove - рамка стиля "грув", ridge - рамка стиля "ридж", inset - рамка стиля "инсет", outset - рамка стиля "outset". Возможность прорисовки рамки только снизу довольно часто используется дизайнерами для создания оригинальных необычных подчеркиваний для ссылок.
Урок 15 ::
15. Работа со списками. В работе со списками удобно использовать правило сокращенной записи: Список (list-style): [<'list-style-type'>||<'list-style-position'>||<'list-style-image'>]. Возможные значения свойства list-style-type для отображения маркера: none, circle, disc, square и др. Для позиционирования маркеров используются значения inside и outside (это значение по умолчанию) свойства list-style-position. Для использования графических файлов для маркеров используются значения имени файла вместе с путем к нему свойства list-style-image.
Урок 16 ::
16. Наследственность. Наследственность есть один из основопологающих принципов CSS. Означает этот принцип то, что дочернии элементы могут наследовать значения некоторых свойств от своих родителей. Однако, ключевое слово здесь "некоторых" и в этом заключается сложность в освоении CSS. Правила наследования достаточно логичны и с небольшим опытом приходит интуитивное понимание, что будет наследоваться, а что не будет.
Урок 17 ::
17. Каскадность и приоритетность. Каскадность означает, что любой элемент получает значения свойств из разных источников: из встроенной таблицы стилей браузера, от родителей ближайшего родителя, от классов самого элемента, от селектора тэга данного элемента, от id элемента, от атрибута style. При этом происходит каскадное вытеснение значений параметров от менее приоритетных источников более приоритетными источниками.
Урок 18 ::
18. Блочная модель, padding и margins. Вообще, элемент HTML можно считать плоской прямоугольной областью (блок, бокс, box). В CSS термин "блочная модель" ("box model") используется, когда обсуждается дизайн и расположение элементов. В CSS "блочная модель" ("box model") есть блок (box), который окружает элемент HTML. Состоит этот самый блок из следующих составляющих: margins - маржины (внешние отступы), borders - бордеры (пограничные линии), padding - паддинги (отступы для контента), актуальный контент (actual content) - находится в самой середине блока.
Урок 19 ::
19. Ширина и высота блока, выравнивание. Если блоку не задавать определенное значение по ширине (свойство width), то элемент будет стремиться занять все пространство по ширине. Если блоку не задавать определенное значение по высоте (свойство height), то элемент будет иметь высоту, исходя из расположенного в нем контента. Когда вы устанавливаете значения свойств ширины (свойство width) и высоты (свойство height), вы устанавливаете ширину и высоту именно области контента. Чтобы рассчитать полный размер необходимо к значениям ширины (width) или высоты (height) прибавить значения паддингов (padding), бордеров (borders) и марджинов (margins).
Урок 20 ::
20. Конфликты полей. Конфликты полей - это парадоксы технологии CSS, когда интуитивно кажется, что должно быть так, а на самом деле получается по-другому. Столкновение двух блочных элементов маржинами. Верхний и нижний маржины у соседних блоков не суммируются, а берется наибольшее значение из данных двух. Кардинально конфликты разрешаются путем использования паддингов вместо маржинов.
Урок 21 ::
21. Блочные и встроенные элементы. Блочный элемент занимает всю возможную ширину в родительском элементе и вставляет разрывы строки в своем начале и в своем конце. Встроенные элементы (инлайновые элементы, inline element) имеют такую же структуру, как и у блочных элементов, за исключением отсутствия у встроенных элементов верха и низа. Встроенный элемент занимает по ширине столько место, сколько ему необходимо для отображения своего контента. Встроенный элемент не вставляет разрывы строки в своем начале и в своем конце.
Урок 22 ::
22. Фоновый цвет и изображение. Введение. Любой блочный элемент (body, div и пр.) имеет фоновый цвет по умолчанию. Как правило, это прозрачный цвет. Фоновый цвет распространяется на область контента и на внутренние отступы (паддинги, padding). На внешние отступы (маржины, margin) фоновый цвет не распространяется.
Урок 23 ::
23. Повтор фонового изображения. На данном уроке мы изучим свойство background-repeat, которое определяет повторять ли фоновое изображение и как именно его следует повторять. По умолчанию фоновый рисунок повторяется по горизонтали и вертикали. Используя свойство background-repeat со значением repeat-x получаем повторение фонового рисунка по горизонтали. Используя свойство background-repeat со значением repeat-y получаем повторение фонового рисунка по вертикали. Используя свойство background-repeat со значением no-repeat получаем фоновый рисунок без повторений.
Урок 24 ::
24. Позиционирование фонового изображения. Следующее свойство фоновых изображений, которое мы сейчас изучим - это позиционирование. Когда мы устанавливаем фоновую картинку, она устанавливается в левый верхний угол, и уже оттуда начинает размножаться, согласно установленным значениям свойства background-repeat. Позиционирование фонового изображения в нужное место блочного элемента достигается с помощью свойства background-position.
Урок 25 ::
25. Фиксация фона. На данном уроке мы с вами изучим еще одно свойство для фоновых изображений, которое позволяет фиксировать фон в определенном месте блочного элемента. Достигнуть эффекта жесткого закрепления фона на одном месте можно с помощью свойства background-attachment, если присвоить ему значение fixed.
Урок 26 ::
26. Краткая запись фоновых свойств. Для фоновых свойств элементов также можно использовать краткую запись: background: color position size repeat origin clip attachment image; или background: color position repeat attachment image;. Вообще, любые значения можно опускать, тогда будут использованы значения по умолчанию. Пример записи: background: 0% 100px no-repeat fixed url('images/tel.jpg');.
Урок 27 ::
27. CSS и таблицы. На курсе HTML мы уже занимались построением таблиц, используя подход HTML-кодировщика. Теперь настало время сделать такую же таблицу, но уже используя подход CSS-дизайнера, что представляется более правильным, естественным и перспективным. Подробный разбор теоретических моментов тех свойств, которые нам ранее не встречались. Свойство border-collapse устанавливает, будут ли границы таблицы объединяться в простую границу или же будут раздельными, как в стандартом HTML. Свойство vertical-align устанавливает, как будет производится выравнивание элемента по вертикали.
Урок 28 ::
28. CSS и формы. Часть 1. Формы мы с вами уже изучали на курсе HTML. Теперь настало время нашу форму, созданную на курсе HTML с помощью технологии CSS привести в более привлекательный вид. Для начала удаляем все "костыли" для несостоявшихся CSS дизайнеров (задания свойств в тегах style="..."), которые так любят HTML кодировщики. Затем рисуем правила для стилей в файле css. Затем созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
Урок 29 ::
29. CSS и формы. Часть 2. Псевдо-классы используются для добавления специальных эффектов в некоторые селекторы. На практике текущего урока мы будем использовать конструкции: input:focus и textarea:focus, чтобы особым образом выделить поля текущего ввода данных. Свойство cursor (курсор) определяет тип курсора, который будет использоваться при наведении на элемент. На практике текущего урока из всего данного теоретического материала мы будем использовать конструкцию cursor:pointer; чтобы в нужный момент курсор принял вид указателя (кисти руки).
Урок 30 ::
30. Свойство float. Плавающие элементы. Элементы здесь появляются на свет в естественном виде, сверху вниз. Причем каждый элемент занимает всю ширину родительского окна, даже если он по ширине намного меньше, и имеется место по горизонтали, на той же широте для других блоков. По умолчанию, занимать это место нельзя, таковы правила. Но все-таки часто бывает нужно, чтобы определенный элемент вышел из основного потока и аккуратно подвинулся влево или вправо, освобождая пространство справа или слева для других блочных элементов. Для таких целей используется свойство float, а элементы, обладающие данным свойством называются плавающими. В нашем примере мы картинке (будильнику) присвоили свойство float:right; В результате будильник уплыл вправо, что в общем-то логически понятно и вполне объяснимо. Удивительно другое: последующие за уплывшей картинкой блочные элементы не упираются в "пловца", а проходят сквозь него. А вот контент последующих блочных элементов (текстовые строки) не может пройти внутрь "пловца".
Урок 31 ::
31. Создание простого каркаса на основе float. Пусть на нашем сайте будут 4 блочные области: Шапка (Хидер, header), Меню в сторонке (СайдБар, sidebar), Содержание (Контент, content), Низ (Футер, footer). Будем стараться использовать академически правильный подход по разработке сайтов, который заключается в следующем: надо стараться как можно меньше подвергать изменениям сам HTML каркас и имеющие классы, а изменения вносить путем создания и внедрения новых классов.
Урок 32 ::
32. Очистка обтекания. Свойство clear. Положение блока Низ (Футер, footer) разражает. По хорошему, его место в самом низу каркаса, но он вслед за блоком Содержание (Контент, content) пошел на верх занимая место плавающих СайдБаров. Проблему решает свойство clear (отменяет возможность захвата пространства плавающих элементов слева, справа или с обоих сторон), которое мы на этом уроке и освоим.
Урок 33 ::
33. Колонки одной высоты. Решение на основе JavaScript и jQuery. На прошлом уроке мы с помощью свойства clear решили одну из проблем дизайна нашего каркаса - отодвинули футер вниз, где ему наиболее естественное место. Однако, наши колонки: левый и правый сайдбары, а также центральная колонка контента остались с разными высотами. Вообще говоря, такая ситуация вполне нормальная вещь с точки зрения CSS - высота колонки определяется автоматически, исходя из ее контента. Это естественно. Но с точки зрения дизайна, это также и безобразно. На этом уроке мы рассмотрим решение на основе JavaScript и jQuery. Основы теории JavaScript и jQuery мы изучим, а саму простенькую программу выравнивания так тщательно задокументируем и прокомментируем, что даже непрограммист сможет легко понять, как она работает.
Урок 34 ::
34. Позиционирование. Введение. Тип позиционирования определяется свойством position. Позиционирование по умолчанию имеет свойство static. Разбор теории позиционирования.
Урок 35 ::
35. Абсолютное позиционирование. При абсолютном позиционирование (position:absolute;) элемент позиционируется относительно своего первого позиционируемого (нестатичного) предка. Это значит, что элемент сначала ищет ближайшего нестатичного предка и если находит, то позиционируется относительно него. А если не находит, то позиционируется относительно <body> (<html>). Если элемент имеет свойство position:absolute; и не имеет координирующих свойств (top: right: bottom: left:), то элемент остается на том же месте, что и при position:static; (по умолчанию) с той лишь разницей, что теперь при position:absolute; он может расшаривать пространство с контентом родителя.
Урок 36 ::
36. Относительное позиционирование. Блок после присвоения position:relative; остался на том же месте, даже не пошевелился. Но кое-что принципиально изменилось. Теперь, после того как свойство position приняло значение relative, Блок от потока оторван. Блок, имеющий свойство position:relative; можно двигать с помощью координирующих свойств (top: right: bottom: left:). Пример типичного использования одного блока, имеющего свойство position:relative;, с другим блоком, имеющим свойство position:absolute;.
Урок 37 ::
37. Фиксированное позиционирование. Фиксированное позиционирование (position:fixed;) похоже на Абсолютное позиционирование (position:absolute;). Принципиальное отличие заключается в том, что элемент при фиксированном позиционировании позиционируется относительно окна браузера, независимо от того, в каком блоке он фактически находится.
Урок 38 ::
38. Z-индексы. Z-индексы представляют собой технику разрешения конфликта места. Если Z-индексы отсутствуют, то конфликт места разрешается по принципу "кто последний, того и место". Если, например, требуется, чтобы независимо от очередности появления на странице, некий элемент занимал спорное место, то ему следует прописать z-index с большим значением, чем у конкурентов. Примеры: z-index:-1; z-index:10; z-index:20; z-index:auto; z-index:inherit;
Урок 39 ::
39. Видимость элементов. Для того, чтобы сделать элемент невидимым используют свойства visibility (в таком виде: visibility:hidden;) и display (в таком виде: display:none;). visibility:hidden; - (видимость:спрятан;) элемент будет спрятан, но он по-прежнему будет занимать тоже самое место, как и раньше. display:none; - (отображать:нет;) также элемент будет спрятан, но он теперь НЕ будет занимать тоже самое место. Страница будет отображаться, как-будто данного элемента нет вообще. В реальной практике, эти свойства используются также, как и на этой страничке - в сочетании с программами на JavaScript, когда нужно быстро спрятать или показать какой-то элемент.
Урок 40 ::
40. Максимальная и минимальная ширина сайта. Макси и мини ширина. Ранее мы изучили свойство выравнивания блока по ширине (например, width: 200px; и т.п.). Кроме свойства width на практике также широко используются более гибкие свойства max-width (максимальная ширина элемента) и min-width (минимальная ширина элемента). Часто эти свойства используются совместно, когда дизайнер хочет обеспечить удовлетворительный вид страницы при любом разрешении экрана пользователя и при любых его действиях по уменьшению ширины окна.
Урок 41 ::
41. Браузеры. Браузеры, большая пятерка. Гугль Хром, FireFox, IE, Safari, Opera. Я взял пару своих сайтов, один заточен на российский трафик, второй на американский. Затем подсчитал процент пользователей, которые использовали определенный браузер (суммируя все подверсии) в октябре 2013-го года и получил статистику популярности каждого браузера. Гугль Хром: 36,95%. FireFox: 19,20%. IE: 16,45%. Safari: 15,65%. Opera: 10,15%. Практические выводы из информации по популярности браузеров.
Урок 42 ::
42. Браузер IE, решение проблем старых версий. Старых версий IE у нас нет, поэтому для начала следует скачать специальный тестер, который будет имитировать различные старые версии IE. Таким способом мы сможем посмотреть на наш сайт глазами любителей старых версий IE. Три основных вида решения проблем старых версий IE. Способ мягкий - использование специальных заплаток, в результате страничка будет отображаться достаточно корректно. Способ жесткий - пользователь не сможет пользоваться контентом странички, а сможет только прочитать сообщение, о том, что у него слишком старый браузер.
Урок 43 ::
43. Cпособы подключения стилей. В больших проектах файлы *.css могут быть очень большими. Поэтому иногда бывает удобным разбить их на логические составные части и подключать весь комплект с помощью специального ключевого слова @import.
Урок 44 ::
44. Наследование ненаследуемых свойств. Наследование ненаследуемых свойств с помощью значения inherit. На данном уроке мы изучим специальное значение свойств inherit, которое обычно используется для того, чтобы насильно заставить унаследовать значения свойств, которые не наследуются по умолчанию. Свойства: значения по умолчанию и наследование. Практический пример использования специального значения свойств inherit.
Урок 45 ::
45. Заключение по версиям CSS 1.xx, 2.xx. Введение по версиям CSS 3.xx. Все, что мы изучили до этого относится к стандартам CSS 1.xx и CSS 2.xx. Последним стандартом является CSS 3, который по состоянию на сейчас (конец 2013-го года) все еще находится в разработке организацией W3C. Тем не менее, последние версии широко поддерживают новый стандарт, поэтому есть смысл некоторые наиболее интересные, красивые и наименее глючные возможности новой спецификации CSS 3 использовать уже сегодня, проявляя, конечно, осторожность и сдерженность. CSS3 логически разбивается на "модули". Селекторы (Selectors). Блочные Модели (Box Model). Фоны и Границы (Backgrounds and Borders). Текстовые эффекты (Text Effects). Двумерные и Трехмерные Трансформации (2D/3D Transformations). Анимационные эффекты (Animations). Разбивка Текста на Колонки (Multiple Column Layout). Интерфейс Пользователя (User Interface).
Урок 46 ::
46. CSS3. Границы. Borders. Свойство border-radius для закругления углов блочных элементов. Свойство box-shadow для создания тени блочных элементов. Свойство border-image для создания рамок с помощью графических файлов.
Урок 47 ::
47. CSS3. Фоны. Backgrounds. Тему фоновых изображений мы достаточно глубоко и широко изучали на уроках 21, 22, 23, 24, 25, не выходя за пределы стандарта CSS2. Теперь посмотрим, что нового и интересного нам предоставляет стандарт CSS3. Свойства background-clip, background-origin, background-size.
Урок 48 ::
48. CSS3. Текстовые эффекты. Text Effects. Тему отображения текстов мы достаточно глубоко и широко изучали на уроках 07, 08, 09, 10, 11, 12, 13. Cтандарт CSS3 добавляет к предыдущим стандартам такие возможности как эффект отброса текстом тени (text-shadow) и разбивку слова на части (word-wrap). Свойства text-shadow, text-overflow, word-wrap, word-break.
Урок 49 ::
49. CSS3. Шрифты. Fonts. Судьба свойства (точнее, правила) @font-face непростая. Его то вводили в стандарт, то выводили, но вот, наконец, свойство @font-face есть в стандарте CSS3, и не просто есть, а поддерживается всеми браузерами. Теперь вебдизайнер может использовать не только стандартные шрифты, а практические любые, какие ему позволят его технические навыки и представления о хорошем стиле. Шрифты можно скачать бесплатно, купить за деньги, сделать самому. Как подключать шрифты. Сначала следует в правиле @font-face определить имя для шрифта (например, ekaterina1), а затем указать на файл шрифта.
Урок 50 ::
50. CSS3. Трансформации плоские и объемные. Transforms 2D, 3D. Трансформации это есть эффекты различного рода изменений нормального положения и состояния блочных элементов. Используя свойство transform можно элемент сдвинуть, повернуть, прокрутить, растянуть, сжать, и т.д., и т.п. Трансформации плоские (2D) имеют следующие методы: translate() - перемещение, rotate() - вращение, scale() - растяжение или сжатие, skew() - поворот, matrix() - комбинация всех методов плоской трансформации 2D. Трансформации объемные (3D) имеют следующие методы: rotateX() - вращение по оси X, rotateY() - вращение по оси Y.
Урок 51 ::
51. CSS3. Преобразования. Transitions. Очень полезное свойство transitions (преобразования) позволяет получать интересные визуальные анимационные эффекты самым естественным путем, чисто через CSS, без таких технологий как JavaScript, Java, Flash. Преобразование CSS3 это эффекты, которые позволяют элементу переходить от одного стиля к другому. Для получения требуемого эффекта необходимо сделать следующее. Определить свойство CSS к которому мы желаем добавить эффект. Определить продолжительность эффекта в секундах.
Урок 52 ::
52. CSS3. Анимация. Animations. Очень полезное свойство animation (анимация) позволяет получать интересные визуальные анимационные эффекты самым естественным путем, чисто через CSS, без таких технологий как JavaScript, Java, Flash. Для создания анимации в CSS3 необходимо использовать правило @keyframes. Правило @keyframes определяет где и как создается анимация. Необходимо определить стили CSS внутри правила @keyframes, и анимация будет постепенно изменять свойства объекта от текущего стиля к новому. Для получения анимации необходимо сделать привязку, определив по меньшей мере два анимационных свойства. 1. Определить имя анимации. 2. Определить продолжительность анимации.
Урок 53 ::
53. CSS3. Многоколоночный режим просмотра информации. Multiple Columns. Стандарт CSS3 позволяет использовать многоколоночный режим просмотра информации, похожий на тот, который используется в газетах и журналах. Например, для разбивки контента на 3 колонки следует использовать свойства: column-count:3; (универсальное), -moz-column-count:3; (для Firefox) и -webkit-column-count:3; (для Chrome и Safari).
Урок 54 ::
54. CSS3. Интерфейс пользователя. User Interface. Стандарт CSS3 расширяет возможности пользовательского интерфейса, добавляя такие новые фичи как изменение размера элементов, расчет размера блока нестандартным способом, аутлайнинг и пр. Свойство appearance позволяет сделать так, чтобы какой-то обычный элемент (например, span) вдруг выглядел, как стандартный элемент интерфейса пользователя, например, кнопка. Зачем это нужно и где это может пригодиться, и почему нельзя элемент просто создать как кнопку, пока мне непонятно, но вот есть такая возможность. Свойство box-sizing позволяет для определенных элементов рассчитывать площадь нестандартным способом (например, с учетом границ). Свойство outline-offset отодвигает обводку блочного элемента и рисует ее на расстоянии от границ. Свойство resize определяет, может пользователь или нет изменять размер блочного элемента.
Урок 55 ::
55. CSS3. Итоги. Последний урок курса CSS. На этой страничке вы сейчас находитесь.
Поиск дополнительной информации
Вполне вероятно, что вам будет недостаточно информации данного курса для получения необходимых знаний и развития нужных практических навыков. В этом случае рекомендую вам воспользоваться поисковиком ниже для получения необходимой учебной литературы.
Это тематический поиск по книгам. Здесь вы можете найти, например, книги по имени автора, по названию книги или по нужной вам теме.
Примечание. Это SQL запрос. Можно (и нужно) использовать специальные символы:
% (процент) - означает любую последовательность символов.
_ (нижняя черта) - означает один любой символ.
Теперь некоторые типовые поисковые запросы для нашего поисковика ниже:
И совсем уже последние заключительное слово по курсу CSS
Если вы читаете эти строки, то, значит, вы внимательно проштудировали этот курс, за что я вам весьма признателен.
Я сам иногда изредка возвращаюсь к этому курсу, чтобы вспомнить какие-то моменты, которые на практике встречаются редко, но внезапно бывают нужны в каких-то специфических случаях.
Возможно, что и вам покажется удобным использовать этот курс в виде онлайнового справочника.
Благодарю вас за внимание и желаю успеха.
При необходимости вы можете пользуясь ссылками ниже повторить необходимый урок или найти дополнительную информацию, пользуясь поисковиком ниже.
Расширенное содержание курса CSS
Урок 01 ::
01. Подготовительные мероприятия, установка расширений для FireFox. Определим, сколько времени прошло от момента создания курса мною до момента изучения его вами. Любой вебмастер должен на весьма высоком уровне знать все браузеры из большой тройки: Гугль Хром, FireFox, IE. Скачивание и установка браузера FireFox. Установка дополнений для FireFox: "Web Developer" (Веб Девелопер, Веб Разработчик) и "Firebug" (ФайяБаг, Поджигатель Клопов). В результате данного урока должен быть установлен и проверен необходимый инструментарий.
Урок 02 ::
02. Принципы работы CSS. CSS есть сокращение (начальные буквы) от термина "Cascade Styles Sheets" ("Таблицы Каскадных Стилей"). Под каскадностью здесь следует понимать особенности технологии CSS: множественность источников, приоритетность. Технология HTML отвечает на вопрос "Что?" (в смысле, что именно отображать на веб странице), а технология CSS отвечает на вопрос "Как?" (в смысле, как именно отображать на веб странице ту информацию, которая предоставлена средствами HTML). Внешние файлы *.css позволяют быстро и эффективно изменять дизайн сразу для большой группы веб страничек. Именно по этой причине технология CSS так понравилась всем дизайнерам в мире. Дизайнер вносит простое изменение в один единственный файл *.css, и это изменение сказывается сразу на многих страничках *.html
Урок 03 ::
03. Подключение CSS и 3 базовых селектора. Можно не только подключать один файл *.css к разным файлам *.html, справедливо также обратное утверждение. К одному определенному файлу *.html можно подключить несколько файлов *.css. Селектор - в переводе с английского означает "выбранный". В роли "выбранного" или "селектора" может выступать любой элемент веб страницы: список, абзац, блок и т.д. Три основных вида подключения Селектора: Селектор Тэгов, Селектор ID, Селектор Классов.
Урок 04 ::
04. Групповые селекторы. Можно использовать одно правило для применения к группе селекторов путем их перечисления через запятую. Например: p, h4, #myList { color: #909090; }.
Урок 05 ::
05. Селекторы потомков. B CSS есть понятия "предок" и "потомок", а также селекторы, основанные на принципе наследственности. Для браузера наша HTML страница представляется в виде дерева, и корнем этого дерева является тэг <html>. Все остальные тэги находятся внутри тэга <html>. Непосредственно внутри тэга <html> находятся тэги <head> (контейнер для служебных тэгов) и <body> (контейнер для тэгов с контентом для пользователя). Можно сказать, что теги внутри пары <body> и </body> являются потомками для тега <body>. Это, например, теги <div> и другие.
Урок 06 ::
06. ПсевдоСелекторы (ПсевдоКлассы) ссылок. ПсевдоСелекторы (ПсевдоКлассы) чаще всего имеют отношения именно к ссылкам. Любые ссылки могут иметь следующие состояния: "непосещенный линк" ("unvisited link"), "посещенный линк" ("visited link"), "мышка над линком" ("mouse over link"), "выбранный линк" ("selected link").
Урок 07 ::
07. Семейство шрифтов. Следует выбирать шрифты не только исходя из тех, которые установлены на вашем компьютере, но и те, которые с большой долей вероятности, установлены на компьютерах наших пользователей. Мы можем все популярные шрифты свести к трем большим группам: шрифты с засечками serif("Times New Roman", "Georgia"), шрифты без засечек sans-serif("Verdana", "Geneva", "Arial", "Helvetica"), моноширные шрифты monospace("Courier New", "Courier", "Andale Mono"). Указанные 9 шрифтов и группы шрифтов и следует использовать для веб дизайна, за исключением совсем уж специфических задач, связанных со шрифтами.
Урок 08 ::
08. Размер шрифта. Подобно тому, как во встроенные стили любого браузера установлен тип шрифта по умолчанию (обычно это "Times New Roman"), также имеются базовые (дефолтные, по умолчанию) размеры шрифта: 100%, 1em, 16px, 12pt, medium. Если мы хотим увеличить размер шрифта, то должны использовать значения свойства больше, чем базовые, а если уменьшить, то меньше, чем базовые.
Урок 09 ::
09. Жирный и курсивный текст. Эффект создания жирного и курсивного текста можно создавать с помощью старых тегов HTML <strong>(жирный текст)</strong> и <em>(курсивный текст)</em>. Но идеологически правильно это делать помощью CSS. Насыщенность (жирность) шрифта определяется с помощью свойства font-weight:normal|lighter|bold|100-900;. С помощью свойство font-style:italic; можно сделать шрифт курсивным.
Урок 10 ::
10. Декорирование текста. Под декорацией (декорированием) текста понимается его подчеркивание, надчеркивание и перечеркивание. Часто декорация используется для оформления ссылок с обратной целью: не добавить декорацию, а убрать подчеркивание, которое добавляется в каждую ссылку браузерами по умолчанию. Возможности использования: text-decoration:none; - декорирование отсутствует, text-decoration:underline; - подчеркивание внизу, text-decoration:overline; - надчеркивание сверху, text-decoration:line-through; - перечеркивание.
Урок 11 ::
11. Выравнивание текста, "красная" строка. Если не дано никаких указаний-свойства, то по умолчанию текст выравнивается по левому краю. Достигается требуемый способ выравнивания с помощью свойства (property) text-align: text-align:left; - по левому краю (по умолчанию), text-align:center; - по центру, text-align:right; - по правому краю, text-align:justify; - по ширине текста. Эффект "красной" строки, когда самая первая строка абзаца имеет определенный отступ от края достигается за счет свойства text-indent. Примеры: text-indent:32px; - отступ в первой строке равен 32 пикселям, text-indent:12%; - отступ в первой строке равен 12%.
Урок 12 ::
12. Высота строки, расстояния. На данном уроке мы изучим еще 4 свойства (property), имеющих отношение к отображению строк: line-height - межстрочный интервал определяет высоту строки, word-spacing - интервал между словами, letter-spacing - межбуквенный интервал, text-transform - изменение регистра позволяет отображать текст либо маленькими буквами (lowercase), либо большими буквами (uppercase), либо так, чтобы первые буквы каждого слова были большими (capitalize).
Урок 13 ::
13. Сокращенная запись свойств шрифта. Помимо подробных записей установки свойств шрифта можно использовать сокращенный аналог: [<'font-style'>||<'font-variant'>||<'font-weight'>]?<'font-size'>[/<'line-height'>]?<'font-family'>. Двойные палки означают, что из трех можно назначить от 1 до 3 указанных свойств. Если бы была не двойная палка, а одинарная, то тогда можно было выбрать только 1 свойство из данных трех. Квадратные скобки обозначают определенную группу свойств. Знак вопроса означает, что элементы данной группы указывать не обязательно. Пример простой записи, в которой используются только обязательные свойства <'font-size'> (16px) и <'font-family'> (Tahoma): font: 16px Tahoma;.
Урок 14 ::
14. Рамки. Рамки вокруг блочных элементов создаются по следующему правилу сокращенной записи: [<'border-width'>||<'border-style'>||<'border-color'>]. Ширина рамки измеряется в пикселях, а стили могут быть следующими: none - рамка вообще отсутствует, dotted - рамка точечная, dashed - рамка "тире", solid - рамка "сплошная", double - рамка "двойная", groove - рамка стиля "грув", ridge - рамка стиля "ридж", inset - рамка стиля "инсет", outset - рамка стиля "outset". Возможность прорисовки рамки только снизу довольно часто используется дизайнерами для создания оригинальных необычных подчеркиваний для ссылок.
Урок 15 ::
15. Работа со списками. В работе со списками удобно использовать правило сокращенной записи: Список (list-style): [<'list-style-type'>||<'list-style-position'>||<'list-style-image'>]. Возможные значения свойства list-style-type для отображения маркера: none, circle, disc, square и др. Для позиционирования маркеров используются значения inside и outside (это значение по умолчанию) свойства list-style-position. Для использования графических файлов для маркеров используются значения имени файла вместе с путем к нему свойства list-style-image.
Урок 16 ::
16. Наследственность. Наследственность есть один из основопологающих принципов CSS. Означает этот принцип то, что дочернии элементы могут наследовать значения некоторых свойств от своих родителей. Однако, ключевое слово здесь "некоторых" и в этом заключается сложность в освоении CSS. Правила наследования достаточно логичны и с небольшим опытом приходит интуитивное понимание, что будет наследоваться, а что не будет.
Урок 17 ::
17. Каскадность и приоритетность. Каскадность означает, что любой элемент получает значения свойств из разных источников: из встроенной таблицы стилей браузера, от родителей ближайшего родителя, от классов самого элемента, от селектора тэга данного элемента, от id элемента, от атрибута style. При этом происходит каскадное вытеснение значений параметров от менее приоритетных источников более приоритетными источниками.
Урок 18 ::
18. Блочная модель, padding и margins. Вообще, элемент HTML можно считать плоской прямоугольной областью (блок, бокс, box). В CSS термин "блочная модель" ("box model") используется, когда обсуждается дизайн и расположение элементов. В CSS "блочная модель" ("box model") есть блок (box), который окружает элемент HTML. Состоит этот самый блок из следующих составляющих: margins - маржины (внешние отступы), borders - бордеры (пограничные линии), padding - паддинги (отступы для контента), актуальный контент (actual content) - находится в самой середине блока.
Урок 19 ::
19. Ширина и высота блока, выравнивание. Если блоку не задавать определенное значение по ширине (свойство width), то элемент будет стремиться занять все пространство по ширине. Если блоку не задавать определенное значение по высоте (свойство height), то элемент будет иметь высоту, исходя из расположенного в нем контента. Когда вы устанавливаете значения свойств ширины (свойство width) и высоты (свойство height), вы устанавливаете ширину и высоту именно области контента. Чтобы рассчитать полный размер необходимо к значениям ширины (width) или высоты (height) прибавить значения паддингов (padding), бордеров (borders) и марджинов (margins).
Урок 20 ::
20. Конфликты полей. Конфликты полей - это парадоксы технологии CSS, когда интуитивно кажется, что должно быть так, а на самом деле получается по-другому. Столкновение двух блочных элементов маржинами. Верхний и нижний маржины у соседних блоков не суммируются, а берется наибольшее значение из данных двух. Кардинально конфликты разрешаются путем использования паддингов вместо маржинов.
Урок 21 ::
21. Блочные и встроенные элементы. Блочный элемент занимает всю возможную ширину в родительском элементе и вставляет разрывы строки в своем начале и в своем конце. Встроенные элементы (инлайновые элементы, inline element) имеют такую же структуру, как и у блочных элементов, за исключением отсутствия у встроенных элементов верха и низа. Встроенный элемент занимает по ширине столько место, сколько ему необходимо для отображения своего контента. Встроенный элемент не вставляет разрывы строки в своем начале и в своем конце.
Урок 22 ::
22. Фоновый цвет и изображение. Введение. Любой блочный элемент (body, div и пр.) имеет фоновый цвет по умолчанию. Как правило, это прозрачный цвет. Фоновый цвет распространяется на область контента и на внутренние отступы (паддинги, padding). На внешние отступы (маржины, margin) фоновый цвет не распространяется.
Урок 23 ::
23. Повтор фонового изображения. На данном уроке мы изучим свойство background-repeat, которое определяет повторять ли фоновое изображение и как именно его следует повторять. По умолчанию фоновый рисунок повторяется по горизонтали и вертикали. Используя свойство background-repeat со значением repeat-x получаем повторение фонового рисунка по горизонтали. Используя свойство background-repeat со значением repeat-y получаем повторение фонового рисунка по вертикали. Используя свойство background-repeat со значением no-repeat получаем фоновый рисунок без повторений.
Урок 24 ::
24. Позиционирование фонового изображения. Следующее свойство фоновых изображений, которое мы сейчас изучим - это позиционирование. Когда мы устанавливаем фоновую картинку, она устанавливается в левый верхний угол, и уже оттуда начинает размножаться, согласно установленным значениям свойства background-repeat. Позиционирование фонового изображения в нужное место блочного элемента достигается с помощью свойства background-position.
Урок 25 ::
25. Фиксация фона. На данном уроке мы с вами изучим еще одно свойство для фоновых изображений, которое позволяет фиксировать фон в определенном месте блочного элемента. Достигнуть эффекта жесткого закрепления фона на одном месте можно с помощью свойства background-attachment, если присвоить ему значение fixed.
Урок 26 ::
26. Краткая запись фоновых свойств. Для фоновых свойств элементов также можно использовать краткую запись: background: color position size repeat origin clip attachment image; или background: color position repeat attachment image;. Вообще, любые значения можно опускать, тогда будут использованы значения по умолчанию. Пример записи: background: 0% 100px no-repeat fixed url('images/tel.jpg');.
Урок 27 ::
27. CSS и таблицы. На курсе HTML мы уже занимались построением таблиц, используя подход HTML-кодировщика. Теперь настало время сделать такую же таблицу, но уже используя подход CSS-дизайнера, что представляется более правильным, естественным и перспективным. Подробный разбор теоретических моментов тех свойств, которые нам ранее не встречались. Свойство border-collapse устанавливает, будут ли границы таблицы объединяться в простую границу или же будут раздельными, как в стандартом HTML. Свойство vertical-align устанавливает, как будет производится выравнивание элемента по вертикали.
Урок 28 ::
28. CSS и формы. Часть 1. Формы мы с вами уже изучали на курсе HTML. Теперь настало время нашу форму, созданную на курсе HTML с помощью технологии CSS привести в более привлекательный вид. Для начала удаляем все "костыли" для несостоявшихся CSS дизайнеров (задания свойств в тегах style="..."), которые так любят HTML кодировщики. Затем рисуем правила для стилей в файле css. Затем созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
Урок 29 ::
29. CSS и формы. Часть 2. Псевдо-классы используются для добавления специальных эффектов в некоторые селекторы. На практике текущего урока мы будем использовать конструкции: input:focus и textarea:focus, чтобы особым образом выделить поля текущего ввода данных. Свойство cursor (курсор) определяет тип курсора, который будет использоваться при наведении на элемент. На практике текущего урока из всего данного теоретического материала мы будем использовать конструкцию cursor:pointer; чтобы в нужный момент курсор принял вид указателя (кисти руки).
Урок 30 ::
30. Свойство float. Плавающие элементы. Элементы здесь появляются на свет в естественном виде, сверху вниз. Причем каждый элемент занимает всю ширину родительского окна, даже если он по ширине намного меньше, и имеется место по горизонтали, на той же широте для других блоков. По умолчанию, занимать это место нельзя, таковы правила. Но все-таки часто бывает нужно, чтобы определенный элемент вышел из основного потока и аккуратно подвинулся влево или вправо, освобождая пространство справа или слева для других блочных элементов. Для таких целей используется свойство float, а элементы, обладающие данным свойством называются плавающими. В нашем примере мы картинке (будильнику) присвоили свойство float:right; В результате будильник уплыл вправо, что в общем-то логически понятно и вполне объяснимо. Удивительно другое: последующие за уплывшей картинкой блочные элементы не упираются в "пловца", а проходят сквозь него. А вот контент последующих блочных элементов (текстовые строки) не может пройти внутрь "пловца".
Урок 31 ::
31. Создание простого каркаса на основе float. Пусть на нашем сайте будут 4 блочные области: Шапка (Хидер, header), Меню в сторонке (СайдБар, sidebar), Содержание (Контент, content), Низ (Футер, footer). Будем стараться использовать академически правильный подход по разработке сайтов, который заключается в следующем: надо стараться как можно меньше подвергать изменениям сам HTML каркас и имеющие классы, а изменения вносить путем создания и внедрения новых классов.
Урок 32 ::
32. Очистка обтекания. Свойство clear. Положение блока Низ (Футер, footer) разражает. По хорошему, его место в самом низу каркаса, но он вслед за блоком Содержание (Контент, content) пошел на верх занимая место плавающих СайдБаров. Проблему решает свойство clear (отменяет возможность захвата пространства плавающих элементов слева, справа или с обоих сторон), которое мы на этом уроке и освоим.
Урок 33 ::
33. Колонки одной высоты. Решение на основе JavaScript и jQuery. На прошлом уроке мы с помощью свойства clear решили одну из проблем дизайна нашего каркаса - отодвинули футер вниз, где ему наиболее естественное место. Однако, наши колонки: левый и правый сайдбары, а также центральная колонка контента остались с разными высотами. Вообще говоря, такая ситуация вполне нормальная вещь с точки зрения CSS - высота колонки определяется автоматически, исходя из ее контента. Это естественно. Но с точки зрения дизайна, это также и безобразно. На этом уроке мы рассмотрим решение на основе JavaScript и jQuery. Основы теории JavaScript и jQuery мы изучим, а саму простенькую программу выравнивания так тщательно задокументируем и прокомментируем, что даже непрограммист сможет легко понять, как она работает.
Урок 34 ::
34. Позиционирование. Введение. Тип позиционирования определяется свойством position. Позиционирование по умолчанию имеет свойство static. Разбор теории позиционирования.
Урок 35 ::
35. Абсолютное позиционирование. При абсолютном позиционирование (position:absolute;) элемент позиционируется относительно своего первого позиционируемого (нестатичного) предка. Это значит, что элемент сначала ищет ближайшего нестатичного предка и если находит, то позиционируется относительно него. А если не находит, то позиционируется относительно <body> (<html>). Если элемент имеет свойство position:absolute; и не имеет координирующих свойств (top: right: bottom: left:), то элемент остается на том же месте, что и при position:static; (по умолчанию) с той лишь разницей, что теперь при position:absolute; он может расшаривать пространство с контентом родителя.
Урок 36 ::
36. Относительное позиционирование. Блок после присвоения position:relative; остался на том же месте, даже не пошевелился. Но кое-что принципиально изменилось. Теперь, после того как свойство position приняло значение relative, Блок от потока оторван. Блок, имеющий свойство position:relative; можно двигать с помощью координирующих свойств (top: right: bottom: left:). Пример типичного использования одного блока, имеющего свойство position:relative;, с другим блоком, имеющим свойство position:absolute;.
Урок 37 ::
37. Фиксированное позиционирование. Фиксированное позиционирование (position:fixed;) похоже на Абсолютное позиционирование (position:absolute;). Принципиальное отличие заключается в том, что элемент при фиксированном позиционировании позиционируется относительно окна браузера, независимо от того, в каком блоке он фактически находится.
Урок 38 ::
38. Z-индексы. Z-индексы представляют собой технику разрешения конфликта места. Если Z-индексы отсутствуют, то конфликт места разрешается по принципу "кто последний, того и место". Если, например, требуется, чтобы независимо от очередности появления на странице, некий элемент занимал спорное место, то ему следует прописать z-index с большим значением, чем у конкурентов. Примеры: z-index:-1; z-index:10; z-index:20; z-index:auto; z-index:inherit;
Урок 39 ::
39. Видимость элементов. Для того, чтобы сделать элемент невидимым используют свойства visibility (в таком виде: visibility:hidden;) и display (в таком виде: display:none;). visibility:hidden; - (видимость:спрятан;) элемент будет спрятан, но он по-прежнему будет занимать тоже самое место, как и раньше. display:none; - (отображать:нет;) также элемент будет спрятан, но он теперь НЕ будет занимать тоже самое место. Страница будет отображаться, как-будто данного элемента нет вообще. В реальной практике, эти свойства используются также, как и на этой страничке - в сочетании с программами на JavaScript, когда нужно быстро спрятать или показать какой-то элемент.
Урок 40 ::
40. Максимальная и минимальная ширина сайта. Макси и мини ширина. Ранее мы изучили свойство выравнивания блока по ширине (например, width: 200px; и т.п.). Кроме свойства width на практике также широко используются более гибкие свойства max-width (максимальная ширина элемента) и min-width (минимальная ширина элемента). Часто эти свойства используются совместно, когда дизайнер хочет обеспечить удовлетворительный вид страницы при любом разрешении экрана пользователя и при любых его действиях по уменьшению ширины окна.
Урок 41 ::
41. Браузеры. Браузеры, большая пятерка. Гугль Хром, FireFox, IE, Safari, Opera. Я взял пару своих сайтов, один заточен на российский трафик, второй на американский. Затем подсчитал процент пользователей, которые использовали определенный браузер (суммируя все подверсии) в октябре 2013-го года и получил статистику популярности каждого браузера. Гугль Хром: 36,95%. FireFox: 19,20%. IE: 16,45%. Safari: 15,65%. Opera: 10,15%. Практические выводы из информации по популярности браузеров.
Урок 42 ::
42. Браузер IE, решение проблем старых версий. Старых версий IE у нас нет, поэтому для начала следует скачать специальный тестер, который будет имитировать различные старые версии IE. Таким способом мы сможем посмотреть на наш сайт глазами любителей старых версий IE. Три основных вида решения проблем старых версий IE. Способ мягкий - использование специальных заплаток, в результате страничка будет отображаться достаточно корректно. Способ жесткий - пользователь не сможет пользоваться контентом странички, а сможет только прочитать сообщение, о том, что у него слишком старый браузер.
Урок 43 ::
43. Cпособы подключения стилей. В больших проектах файлы *.css могут быть очень большими. Поэтому иногда бывает удобным разбить их на логические составные части и подключать весь комплект с помощью специального ключевого слова @import.
Урок 44 ::
44. Наследование ненаследуемых свойств. Наследование ненаследуемых свойств с помощью значения inherit. На данном уроке мы изучим специальное значение свойств inherit, которое обычно используется для того, чтобы насильно заставить унаследовать значения свойств, которые не наследуются по умолчанию. Свойства: значения по умолчанию и наследование. Практический пример использования специального значения свойств inherit.
Урок 45 ::
45. Заключение по версиям CSS 1.xx, 2.xx. Введение по версиям CSS 3.xx. Все, что мы изучили до этого относится к стандартам CSS 1.xx и CSS 2.xx. Последним стандартом является CSS 3, который по состоянию на сейчас (конец 2013-го года) все еще находится в разработке организацией W3C. Тем не менее, последние версии широко поддерживают новый стандарт, поэтому есть смысл некоторые наиболее интересные, красивые и наименее глючные возможности новой спецификации CSS 3 использовать уже сегодня, проявляя, конечно, осторожность и сдерженность. CSS3 логически разбивается на "модули". Селекторы (Selectors). Блочные Модели (Box Model). Фоны и Границы (Backgrounds and Borders). Текстовые эффекты (Text Effects). Двумерные и Трехмерные Трансформации (2D/3D Transformations). Анимационные эффекты (Animations). Разбивка Текста на Колонки (Multiple Column Layout). Интерфейс Пользователя (User Interface).
Урок 46 ::
46. CSS3. Границы. Borders. Свойство border-radius для закругления углов блочных элементов. Свойство box-shadow для создания тени блочных элементов. Свойство border-image для создания рамок с помощью графических файлов.
Урок 47 ::
47. CSS3. Фоны. Backgrounds. Тему фоновых изображений мы достаточно глубоко и широко изучали на уроках 21, 22, 23, 24, 25, не выходя за пределы стандарта CSS2. Теперь посмотрим, что нового и интересного нам предоставляет стандарт CSS3. Свойства background-clip, background-origin, background-size.
Урок 48 ::
48. CSS3. Текстовые эффекты. Text Effects. Тему отображения текстов мы достаточно глубоко и широко изучали на уроках 07, 08, 09, 10, 11, 12, 13. Cтандарт CSS3 добавляет к предыдущим стандартам такие возможности как эффект отброса текстом тени (text-shadow) и разбивку слова на части (word-wrap). Свойства text-shadow, text-overflow, word-wrap, word-break.
Урок 49 ::
49. CSS3. Шрифты. Fonts. Судьба свойства (точнее, правила) @font-face непростая. Его то вводили в стандарт, то выводили, но вот, наконец, свойство @font-face есть в стандарте CSS3, и не просто есть, а поддерживается всеми браузерами. Теперь вебдизайнер может использовать не только стандартные шрифты, а практические любые, какие ему позволят его технические навыки и представления о хорошем стиле. Шрифты можно скачать бесплатно, купить за деньги, сделать самому. Как подключать шрифты. Сначала следует в правиле @font-face определить имя для шрифта (например, ekaterina1), а затем указать на файл шрифта.
Урок 50 ::
50. CSS3. Трансформации плоские и объемные. Transforms 2D, 3D. Трансформации это есть эффекты различного рода изменений нормального положения и состояния блочных элементов. Используя свойство transform можно элемент сдвинуть, повернуть, прокрутить, растянуть, сжать, и т.д., и т.п. Трансформации плоские (2D) имеют следующие методы: translate() - перемещение, rotate() - вращение, scale() - растяжение или сжатие, skew() - поворот, matrix() - комбинация всех методов плоской трансформации 2D. Трансформации объемные (3D) имеют следующие методы: rotateX() - вращение по оси X, rotateY() - вращение по оси Y.
Урок 51 ::
51. CSS3. Преобразования. Transitions. Очень полезное свойство transitions (преобразования) позволяет получать интересные визуальные анимационные эффекты самым естественным путем, чисто через CSS, без таких технологий как JavaScript, Java, Flash. Преобразование CSS3 это эффекты, которые позволяют элементу переходить от одного стиля к другому. Для получения требуемого эффекта необходимо сделать следующее. Определить свойство CSS к которому мы желаем добавить эффект. Определить продолжительность эффекта в секундах.
Урок 52 ::
52. CSS3. Анимация. Animations. Очень полезное свойство animation (анимация) позволяет получать интересные визуальные анимационные эффекты самым естественным путем, чисто через CSS, без таких технологий как JavaScript, Java, Flash. Для создания анимации в CSS3 необходимо использовать правило @keyframes. Правило @keyframes определяет где и как создается анимация. Необходимо определить стили CSS внутри правила @keyframes, и анимация будет постепенно изменять свойства объекта от текущего стиля к новому. Для получения анимации необходимо сделать привязку, определив по меньшей мере два анимационных свойства. 1. Определить имя анимации. 2. Определить продолжительность анимации.
Урок 53 ::
53. CSS3. Многоколоночный режим просмотра информации. Multiple Columns. Стандарт CSS3 позволяет использовать многоколоночный режим просмотра информации, похожий на тот, который используется в газетах и журналах. Например, для разбивки контента на 3 колонки следует использовать свойства: column-count:3; (универсальное), -moz-column-count:3; (для Firefox) и -webkit-column-count:3; (для Chrome и Safari).
Урок 54 ::
54. CSS3. Интерфейс пользователя. User Interface. Стандарт CSS3 расширяет возможности пользовательского интерфейса, добавляя такие новые фичи как изменение размера элементов, расчет размера блока нестандартным способом, аутлайнинг и пр. Свойство appearance позволяет сделать так, чтобы какой-то обычный элемент (например, span) вдруг выглядел, как стандартный элемент интерфейса пользователя, например, кнопка. Зачем это нужно и где это может пригодиться, и почему нельзя элемент просто создать как кнопку, пока мне непонятно, но вот есть такая возможность. Свойство box-sizing позволяет для определенных элементов рассчитывать площадь нестандартным способом (например, с учетом границ). Свойство outline-offset отодвигает обводку блочного элемента и рисует ее на расстоянии от границ. Свойство resize определяет, может пользователь или нет изменять размер блочного элемента.
Урок 55 ::
55. CSS3. Итоги. Последний урок курса CSS. На этой страничке вы сейчас находитесь.
Поиск дополнительной информации
Вполне вероятно, что вам будет недостаточно информации данного курса для получения необходимых знаний и развития нужных практических навыков. В этом случае рекомендую вам воспользоваться поисковиком ниже для получения необходимой учебной литературы.
Это тематический поиск по книгам. Здесь вы можете найти, например, книги по имени автора, по названию книги или по нужной вам теме.
Примечание. Это SQL запрос. Можно (и нужно) использовать специальные символы:
% (процент) - означает любую последовательность символов.
_ (нижняя черта) - означает один любой символ.
Теперь некоторые типовые поисковые запросы для нашего поисковика ниже:
- CSS. - для поиска книг по теме CSS ("Cascade Styles Sheets", "Таблицы Каскадных Стилей"). Обратите внимание на точку в конце запроса, это уменьшает количество мусорных результатов.
- %Каскадные%таблицы%стилей%
- %Каскад%таб% - упрощенная версия предыдущего запроса.
- %Таблицы%Каскадных%Стилей% - вариация с переводом.
- HTML - для поиска книг по теме HTML (HyperТext Markup Language — язык разметки гипертекста). Вообще говоря, перед изучением CSS следует иметь хороший уровень владения HTML.
- JavaScript - следующий естественный шаг постижения компьютерной мудрости после постижения технологий HTML и CSS - изучение языка программирования JavaScript. Программы на JavaScript исполняются на рабочей станции пользователя.
- PHP - после того, как изучили CSS, HTML и JavaScript следует браться за PHP - это серверный язык.
- MySQL - поиск литературы для изучения Базы Данных MySQL.
- SQL - поиск литературы для изучения языка Базы Данных SQL.
- %график% - поиск литературы по графике.
***** Поисковик для книг интернет-магазина "Озон" *****
←
введите сюда строку для поиска...
←
максимальное количество строк выборки (от 1 до 1000, оптимально 50)
В этой области будут отображены результаты поиска. Для старта поиска нажмите кнопку 'Искать!' выше...
И совсем уже последние заключительное слово по курсу CSS
Если вы читаете эти строки, то, значит, вы внимательно проштудировали этот курс, за что я вам весьма признателен.
Я сам иногда изредка возвращаюсь к этому курсу, чтобы вспомнить какие-то моменты, которые на практике встречаются редко, но внезапно бывают нужны в каких-то специфических случаях.
Возможно, что и вам покажется удобным использовать этот курс в виде онлайнового справочника.
Благодарю вас за внимание и желаю успеха.
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
