00. Главная страничка курса CSS.
В данном курсе мы поделимся своими соображениями на тему создания хорошего стиля сайта. С одной стороны, вроде бы нет ничего проще, чем создание стильного сайта, учитывая множество книг и курсов по данной теме. Но когда начинаешь создавать сайт и разрабатывать его стиль на практике, начинают появляться трудности и возникать проблемы.
Что ж, с помощью данного курса указанные выше появившиеся трудности мы будем преодолевать, а возникающие проблемы - решать.
Прежде чем начать изучение технологии CSS, ответьте сами себе на вопрос: знаете ли вы язык разметки HTML, хотя бы в пределах курса по данной ссылке?
Если ответ 'да', то можно начинать изучение CSS, если 'нет', то разумнее будет сначала подтянуть свои знания и навыки по HTML, а затем уже вернуться к изучению CSS.
Кроме слабых знаний HTML эффективному освоению CSS могут помешать некоторые стереотипы, которые записались в наше подсознание еще во времена обучения в школе и ВУЗе.
Вот, например, давайте, бросим беглый взгляд на эти графики функций:
В данном случае нам интересны не сами функции как таковые, а тот факт, что начальной (нулевой) точкой системы координат принято считать некую центральную точку. Далее от этой точки ось X идет направо от нуля до плюс бесконечности и налево от нуля до минус бесконечности. Ось Y от нулевой точки идет на верх до плюс бесконечности и вниз от нуля до минус бесконечности.
Однако, что хорошо и логично для школьной доски не очень хорошо для монитора компьютера. Поэтому для технологии CSS принята несколько иная идеология, которая в упрощенном виде выглядет следующим образом.
Нулевая точка отсчета находится в левом верхнем углу основного объекта (окна монитора, блока <body>, блока див <div> и т.д.).
Ось X идет от нулевой точки направо от нуля до значения ширины монитора (например, 1280 пикселей - для типичных офисных мониторов).
Ось Y идет от нулевой точки вниз от нуля до плюс бесконечности. При достижении значения высоты монитора (например, 1024 пикселей - для типичных офисных мониторов) появляется справа вертикальная полоска прокрутки.
При этом объекты появляются внутри основного объекта сверху вниз, образуя такую своеобразную очередь.
Вот такая картина отображения объектов по технологии CSS в упрощенном и наиболее естественном виде. Обратите внимание, что во власти дизайнера эту упрощенную и естественную жизнь объектов менять по своему вкусу как угодно. Например, дизайнер может заставить объект расположиться за пределами правой границы, или, например, может наложить один объект на другой и т.д., все, что только может ему захотеться сделать.
Но классический естественный способ появления объектов именно такой, как описан выше.
Чтобы совсем стало все понятно, давайте, понаблюдаем за типичной картиной появления объектов в основном блочном элементе (роль основного блочного элемента обычно предоставляется тегу <body>, но в нашем случае ее будет играть обычный блок див <div>):
Теперь нажмите несколько раз кнопку для создания блоков.
Точно также, как на этом простейшем тренажере, строятся все странички на всех сайтах. На каждой страничке имеется несколько блоков, которые в естественном виде следуют один за другим сверху вниз (хотя могут и накладываться друг на друга по воле дизайнера или внезапных обстоятельств). Если не хватает места для всех блоков в несущем основном блоке появляются полоски прокрутки.
В каждом блоке, как правило, есть какой-то контент (содержание), если не хватает места для контента в определенном блоке, то в данном блоке появляются полоски прокрутки, или же контенту приходится вываливаться за пределы блока, или же этот контент просто полностью не показывается.
Дизайнер может располагать эти блоки, как ему захочется, выравнивать их определенным образом, накладывать друг на друга, раскрашивать их, стачивать острые углы (чтобы неосторожный пользователь не порезался), проводить более сложные манипуляции (например, вращать их). Короче, может делать все, что позволяет ему собственная фантазия, представления о хорошем дизайне и уровень владения технологией CSS.
Но по умолчанию порядок появления блоков очень простой, естественный и интуитивно понятный. Первый блок появляется сверху своего контейнера, следующий ниже и т.д. Сверху вниз, строго по очереди рождения.
Вот и вся суть технологии CSS, ее глубинные основы, уловив которые в дальнейшем вам будет очень легко двигаться дальше, освоивать различные детали (иногда важные, иногда второстепенные).
Итак, основу CSS мы постигли, теперь начинаем изучать детали.
Урок 01 :: 01. Подготовительные мероприятия, установка расширений для FireFox.
Урок 02 :: 02. Принципы работы CSS.
Урок 03 :: 03. Подключение CSS и 3 базовых селектора.
Урок 04 :: 04. Групповые селекторы.
Урок 05 :: 05. Селекторы потомков.
Урок 06 :: 06. ПсевдоСелекторы (ПсевдоКлассы) ссылок.
Урок 07 :: 07. Семейство шрифтов.
Урок 08 :: 08. Размер шрифта.
Урок 09 :: 09. Жирный и курсивный текст.
Урок 10 :: 10. Декорирование текста.
Урок 11 :: 11. Выравнивание текста, "красная" строка.
Урок 12 :: 12. Высота строки, расстояния.
Урок 13 :: 13. Сокращенная запись свойств шрифта.
Урок 14 :: 14. Рамки.
Урок 15 :: 15. Работа со списками.
Урок 16 :: 16. Наследственность.
Урок 17 :: 17. Каскадность и приоритетность.
Урок 18 :: 18. Блочная модель, padding и margins.
Урок 19 :: 19. Ширина и высота блока, выравнивание.
Урок 20 :: 20. Конфликты полей.
Урок 21 :: 21. Блочные и встроенные элементы.
Урок 22 :: 22. Фоновый цвет и изображение. Введение.
Урок 23 :: 23. Повтор фонового изображения.
Урок 24 :: 24. Позиционирование фонового изображения.
Урок 25 :: 25. Фиксация фона.
Урок 26 :: 26. Краткая запись фоновых свойств.
Урок 27 :: 27. CSS и таблицы.
Урок 28 :: 28. CSS и формы. Часть 1.
Урок 29 :: 29. CSS и формы. Часть 2.
Урок 30 :: 30. Свойство float.
Урок 31 :: 31. Создание простого каркаса на основе float.
Урок 32 :: 32. Очистка обтекания.
Урок 33 :: 33. Колонки одной высоты.
Урок 34 :: 34. Позиционирование. Введение.
Урок 35 :: 35. Абсолютное позиционирование.
Урок 36 :: 36. Относительное позиционирование.
Урок 37 :: 37. Фиксированное позиционирование.
Урок 38 :: 38. Z-индексы.
Урок 39 :: 39. Видимость элементов.
Урок 40 :: 40. Максимальная и минимальная ширина сайта.
Урок 41 :: 41. Браузеры.
Урок 42 :: 42. Решение проблем с IE6.
Урок 43 :: 43. Два способа подключения стилей.
Урок 44 :: 44. Наследование ненаследуемых свойств.
Урок 45 :: 45. Заключение по версиям CSS 1.xx, 2.xx. Введение по версиям CSS 3.xx.
Урок 46 :: 46. CSS3. Границы. Borders.
Урок 47 :: 47. CSS3. Фоны. Backgrounds.
Урок 48 :: 48. CSS3. Текстовые эффекты. Text Effects.
Урок 49 :: 49. CSS3. Шрифты. Fonts.
Урок 50 :: 50. CSS3. Трансформации плоские и объемные. Transforms 2D, 3D.
Урок 51 :: 51. CSS3. Преобразования. Transitions.
Урок 52 :: 52. CSS3. Анимация. Animations.
Урок 53 :: 53. CSS3. Многоколоночный режим просмотра информации. Multiple Columns.
Урок 54 :: 54. CSS3. Интерфейс пользователя. User Interface.
Урок 55 :: 55. CSS3. Итоги. Последний урок курса CSS.
Осуществлять навигацию по урокам вы можете либо с помощью списка уроков наверху ↑, либо с помощью панели управления (см справа наверху).
Кроме того, на каждой страничке курса есть такой простенький навигационный прибор:
Что ж, с помощью данного курса указанные выше появившиеся трудности мы будем преодолевать, а возникающие проблемы - решать.
Прежде чем начать изучение технологии CSS, ответьте сами себе на вопрос: знаете ли вы язык разметки HTML, хотя бы в пределах курса по данной ссылке?
Если ответ 'да', то можно начинать изучение CSS, если 'нет', то разумнее будет сначала подтянуть свои знания и навыки по HTML, а затем уже вернуться к изучению CSS.
Кроме слабых знаний HTML эффективному освоению CSS могут помешать некоторые стереотипы, которые записались в наше подсознание еще во времена обучения в школе и ВУЗе.
Вот, например, давайте, бросим беглый взгляд на эти графики функций:
В данном случае нам интересны не сами функции как таковые, а тот факт, что начальной (нулевой) точкой системы координат принято считать некую центральную точку. Далее от этой точки ось X идет направо от нуля до плюс бесконечности и налево от нуля до минус бесконечности. Ось Y от нулевой точки идет на верх до плюс бесконечности и вниз от нуля до минус бесконечности.
Однако, что хорошо и логично для школьной доски не очень хорошо для монитора компьютера. Поэтому для технологии CSS принята несколько иная идеология, которая в упрощенном виде выглядет следующим образом.
Нулевая точка отсчета находится в левом верхнем углу основного объекта (окна монитора, блока <body>, блока див <div> и т.д.).
Ось X идет от нулевой точки направо от нуля до значения ширины монитора (например, 1280 пикселей - для типичных офисных мониторов).
Ось Y идет от нулевой точки вниз от нуля до плюс бесконечности. При достижении значения высоты монитора (например, 1024 пикселей - для типичных офисных мониторов) появляется справа вертикальная полоска прокрутки.
При этом объекты появляются внутри основного объекта сверху вниз, образуя такую своеобразную очередь.
Вот такая картина отображения объектов по технологии CSS в упрощенном и наиболее естественном виде. Обратите внимание, что во власти дизайнера эту упрощенную и естественную жизнь объектов менять по своему вкусу как угодно. Например, дизайнер может заставить объект расположиться за пределами правой границы, или, например, может наложить один объект на другой и т.д., все, что только может ему захотеться сделать.
Но классический естественный способ появления объектов именно такой, как описан выше.
Чтобы совсем стало все понятно, давайте, понаблюдаем за типичной картиной появления объектов в основном блочном элементе (роль основного блочного элемента обычно предоставляется тегу <body>, но в нашем случае ее будет играть обычный блок див <div>):
Количество рожденных блоков:
::
Теперь нажмите несколько раз кнопку для создания блоков.
Точно также, как на этом простейшем тренажере, строятся все странички на всех сайтах. На каждой страничке имеется несколько блоков, которые в естественном виде следуют один за другим сверху вниз (хотя могут и накладываться друг на друга по воле дизайнера или внезапных обстоятельств). Если не хватает места для всех блоков в несущем основном блоке появляются полоски прокрутки.
В каждом блоке, как правило, есть какой-то контент (содержание), если не хватает места для контента в определенном блоке, то в данном блоке появляются полоски прокрутки, или же контенту приходится вываливаться за пределы блока, или же этот контент просто полностью не показывается.
Дизайнер может располагать эти блоки, как ему захочется, выравнивать их определенным образом, накладывать друг на друга, раскрашивать их, стачивать острые углы (чтобы неосторожный пользователь не порезался), проводить более сложные манипуляции (например, вращать их). Короче, может делать все, что позволяет ему собственная фантазия, представления о хорошем дизайне и уровень владения технологией CSS.
Но по умолчанию порядок появления блоков очень простой, естественный и интуитивно понятный. Первый блок появляется сверху своего контейнера, следующий ниже и т.д. Сверху вниз, строго по очереди рождения.
Вот и вся суть технологии CSS, ее глубинные основы, уловив которые в дальнейшем вам будет очень легко двигаться дальше, освоивать различные детали (иногда важные, иногда второстепенные).
Итак, основу CSS мы постигли, теперь начинаем изучать детали.
Урок 01 :: 01. Подготовительные мероприятия, установка расширений для FireFox.
Урок 02 :: 02. Принципы работы CSS.
Урок 03 :: 03. Подключение CSS и 3 базовых селектора.
Урок 04 :: 04. Групповые селекторы.
Урок 05 :: 05. Селекторы потомков.
Урок 06 :: 06. ПсевдоСелекторы (ПсевдоКлассы) ссылок.
Урок 07 :: 07. Семейство шрифтов.
Урок 08 :: 08. Размер шрифта.
Урок 09 :: 09. Жирный и курсивный текст.
Урок 10 :: 10. Декорирование текста.
Урок 11 :: 11. Выравнивание текста, "красная" строка.
Урок 12 :: 12. Высота строки, расстояния.
Урок 13 :: 13. Сокращенная запись свойств шрифта.
Урок 14 :: 14. Рамки.
Урок 15 :: 15. Работа со списками.
Урок 16 :: 16. Наследственность.
Урок 17 :: 17. Каскадность и приоритетность.
Урок 18 :: 18. Блочная модель, padding и margins.
Урок 19 :: 19. Ширина и высота блока, выравнивание.
Урок 20 :: 20. Конфликты полей.
Урок 21 :: 21. Блочные и встроенные элементы.
Урок 22 :: 22. Фоновый цвет и изображение. Введение.
Урок 23 :: 23. Повтор фонового изображения.
Урок 24 :: 24. Позиционирование фонового изображения.
Урок 25 :: 25. Фиксация фона.
Урок 26 :: 26. Краткая запись фоновых свойств.
Урок 27 :: 27. CSS и таблицы.
Урок 28 :: 28. CSS и формы. Часть 1.
Урок 29 :: 29. CSS и формы. Часть 2.
Урок 30 :: 30. Свойство float.
Урок 31 :: 31. Создание простого каркаса на основе float.
Урок 32 :: 32. Очистка обтекания.
Урок 33 :: 33. Колонки одной высоты.
Урок 34 :: 34. Позиционирование. Введение.
Урок 35 :: 35. Абсолютное позиционирование.
Урок 36 :: 36. Относительное позиционирование.
Урок 37 :: 37. Фиксированное позиционирование.
Урок 38 :: 38. Z-индексы.
Урок 39 :: 39. Видимость элементов.
Урок 40 :: 40. Максимальная и минимальная ширина сайта.
Урок 41 :: 41. Браузеры.
Урок 42 :: 42. Решение проблем с IE6.
Урок 43 :: 43. Два способа подключения стилей.
Урок 44 :: 44. Наследование ненаследуемых свойств.
Урок 45 :: 45. Заключение по версиям CSS 1.xx, 2.xx. Введение по версиям CSS 3.xx.
Урок 46 :: 46. CSS3. Границы. Borders.
Урок 47 :: 47. CSS3. Фоны. Backgrounds.
Урок 48 :: 48. CSS3. Текстовые эффекты. Text Effects.
Урок 49 :: 49. CSS3. Шрифты. Fonts.
Урок 50 :: 50. CSS3. Трансформации плоские и объемные. Transforms 2D, 3D.
Урок 51 :: 51. CSS3. Преобразования. Transitions.
Урок 52 :: 52. CSS3. Анимация. Animations.
Урок 53 :: 53. CSS3. Многоколоночный режим просмотра информации. Multiple Columns.
Урок 54 :: 54. CSS3. Интерфейс пользователя. User Interface.
Урок 55 :: 55. CSS3. Итоги. Последний урок курса CSS.
Осуществлять навигацию по урокам вы можете либо с помощью списка уроков наверху ↑, либо с помощью панели управления (см справа наверху).
Кроме того, на каждой страничке курса есть такой простенький навигационный прибор:
Кроме того, на каждой страничке курса есть и более сложный механизм навигации по материалам курса, это машина-функционал с возможностью поиска.
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Совет. Поскольку поиск здесь чисто локальный, в пределах курса CSS, запросы следует делать простые и краткие, например: css, firefox, принципы, подключение, селекторы, потомки, родители, псевдо, шрифт, семейство, Times New Roman, Courier New, групповые селекторы, font-size, размер шрифта, жирный текст, курсив, font-weight, font-style, черкивание, text-decoration, выравнивание текста, красная строка, text-align, text-indent, высота строки, line-height, межстрочный интервал, word-spacing, между словами, letter-spacing, межбуквенный, text-transform, lowercase, uppercase, большие буквы, маленькие, capitalize, капитель, сокращенная запись свойств шрифта, font:, рамки, border-width, border-style, border-color, dotted, dashed, solid, double, groove, только снизу, работа со списками, list-style-type, list-style-position, list-style-image, правила наследования, каскадность, приоритетность, блочная модель, margins, paddings, borders, отступы контента, ширина блока, высота блока, конфликты маржинов, парадоксы сложения маржинов, блочные элементы, встроенные элементы, inline elements, block elements, фоновый цвет, фоновое изображение, background-color, повтор фона, background-repeat, позиция фона, background-position, закрепление фона, фиксация фона, background-attachment, background:, краткая запись фоновых свойств, таблица, border-collapse, vertical-align, форма, input:focus, textarea:focus, cursor:pointer;, float:, плавающие элементы, простой каркас сайта, очистка обтекания, clear:both;, колонки одной высоты, javascript, jquery, позиционирование элемента, position:, абсолютное позиционирование, position:absolute;, координирующие свойства, top:, right:, bottom:, left:, относительное позиционирование, position:relative;, фиксированное позиционирование, position:fixed;, z-индексы, z-index:10;, z-index:auto;, невидимость элементов, visibility:hidden;, display:none;, максимальная ширина, минимальная ширина, max-width, min-width, браузеры, большая пятерка, популярность, гугль хром, firefox, ie, safari, opera, Опера, internet explorer, обозреватель интернета, ослик, ie6, ie7, ie8, ie9, ie10, ie11, @import, значение inherit, таблица свойств, CSS3, CSS 3, границы, borders, border-radius, закругление углов, box-shadow, тень, border-image, несколько фоновых изображений, background-origin, content-box, padding-box, border-box, background-clip, background-size, тень текста, text-shadow, word-wrap, шрифты, fonts, @font-face, почерк пушкина, трансформации, transform, 2d, 3d, translate(), rotate(), scale(), skew(), matrix(), transitions, преобразования, @keyframes, animation, анимация, многоколоночный режим просмотра информации, multiple columns, column-count, box-sizing, интерфейс пользователя, user interface, appearance, outline-offset, resize, содержание курса css, поиск дополнительной информации, и т.п. Т.е. в отличии от поиска в Яндексе или Гугле, чем короче запрос, тем лучше. Вы не ограничены использованием в поиске только данными примерами. Примеры приведены просто для лучшего понимания, как поиск работает. Клики на примерах НЕ запускают поиск, а только помещают строку в окошечко ввода поиской строки.
Курс составлен по мотивам замечательных видеокурсов Евгения Попова.
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
