CSS-шпаргалка
Любой элемент наследует свойства от элемента, в котором он содержится.
Определение, имеющее наивысший приоритет, независимо от своего расположения.
Чем ближе к элементу описано свойство, тем выше его приоритет. Приоритеты от высшего к низшему:
Каждый элемент уровня блока (
, и т. д.) можно представить как прямоугольник. Изменением размеров этого прямоугольника с помощью CSS можно добиваться разнообразных эффектов.
Заметьте: в IE6.0 свойство width обрабатывается не так, как предусмотрено стандартами W3C!
Размеры полей элемента. Отрицательные значения допустимы, но могут вызывать проблемы в Netscape 4 и IE 4
Сокращение для размеров полей. Следующее определение эквивалентно приведенному выше:
Размеры отбивки между рамкой элемента и его содержимым. Отрицательные значения недопустимы.
Сокращение для размеров отбивок. Следующее определение эквивалентно приведенному выше:
Толщина рамки. Отрицательные значения недопустимы.
Сокращение для размеров рамки. Следующее определение эквивалентно приведенному выше:
Цвет рамки элемента. В данном примере, верхняя и нижняя линии рамки будут серебристо-серыми, а боковые — черными. Можно указать все 4 линии по отдельности.
Тип линий рамки элемента. Значения: dashed; dotted; double; groove; inset; outset; ridge; solid; none. По умолчанию: none (рамки нет).
Сокращения для свойств границ рамки.
border-right: 3px solid red;
border-bottom: 2px dashed red;
border-left: 0.3em dotted black;>
Сокращение, определяющее все свойства рамки.
Ширина элемента. Только для заменяемых элементов и элементов уровня блока. Отрицательные значения недопустимы.
Высота элемента. Только для заменяемых элементов (любых) и элементов уровня блока (с ограничениями). Отрицательные значения недопустимы.
Определяет поведение блока, если содержимое не укладывается в заданные размеры. Допустимые значения: visible (показывать все); hidden (скрыть то, что не поместилось); scroll (обеспечить прокрутку); auto (обработать, как предусмотрено в браузере)
Элемент размещается с указанной стороны, остальной текст «обтекает» его. Допустимые значения: left; right; none.
Указывает, с какой стороны от блока не может быть «плавающих» элементов. Допустимые значения: both; left; right; none. По умолчанию none.
Определяет метод позиционирования элемента. Допустимые значения: static (в общем потоке); relative (относительно нормального положения в потоке); absolute (относительно левого верхнего угла «родительского» элемента); fixed (не прокручивается вместе с содержимым страницы; значение не поддерживается в IE 5/6 for Windows и Netscape 6). По умолчанию static.
Смещение по горизонтали и вертикали при относительном и абсолютном позиционировании. Допустимые значения: auto, либо значение в единицах длины (pt, in, cm, px), либо в процентах. Допустимы отрицательные значения.
Определяет «слой», в котором расположен элемент. Допустимые значения: auto (по порядку описания элементов в html-файле) либо целое число. Чем больше число, тем «ближе» расположен элемент.
Таблица стилей CSS в удобном виде
Таблица стилей CSS, если уж брать само определение, это язык описания внешнего вида документа. То есть за структуру страницы отвечает HTML, а за всё оформление именно таблицы стилей CSS. Я собрал здесь информацию, которая позволит Вам свободно использовать таблицу стилей. Я не буду писать о том, как необходимо ее знать, потому что и так понятно — без нее Вы не сможете привести сайт в более менее нормальный вид. Если кто-то только начинает изучать CSS стили, то этих материалов хватит чтобы начать изучение CSS. Чтобы получить структурированные знания и применять HTML+CSS+JS максимально эффективно для своих проектов и для проектов заказчика необходимо регулярно обучаться и поддерживать свой уровень. Но хорошо иметь основу. Многие, обучаясь самостоятельно, упускают многие базовые вещи и затем страдают клиенты, а человек не понимает, почему им недовольны. Чтобы таких ситуаций не возникало необходимо получить базовые навыки в правильной последовательности. Если вы занимаетесь разработкой сайтов и хотите в этом дальше расти, то рекомендую посмотреть в сторону обучения в онлайн-школах. Это не отнимает время от основной работы, но с помощью преподавателей, которым можно задать вопрос, вы будете расти очень быстро. Одна из таких онлайн-школ — это Нетология и мне приглянулся курс «Front-end разработчик с нуля«, также, в качестве альтернативы от другой школы Skillbox образовательный курс «Front-end разработчик«. Обязательно изучите их внимательно, а особенно преподавателей, которые ведут этот курс.
1. Базовые вещи
Начну с самых основ. Когда я начинал вести этот сайт, я написал небольшие уроки по изучению таблиц стилей CSS. Уроки хорошо подойдут как для тех кто только начинает, так и для тех кто уже кое-что знает, чтобы освежить свои знания. Там всё оформлено в картинках и на реальных примерах.
Маленькое отступление: когда я сам начинал изучать тему сайтостроения, я выучил практически все HTML теги и они меня не сильно вдохновили. Но после того как я начал изучать таблицу стилей CSS и пробовать применять каждое из свойств — мне это так сильно понравилось (я бы не создал смурфика на css, если бы мне это не нравилось). Я увидел что можно делать просто поразительные вещи только с помощью CSS. Это не язык программирования, который нужно учить месяцами. Таблицу стилей можно освоить за одну (максимум за две) недели.
Конечно, Вы не изучите абсолютно все свойства и их значения, да это и не нужно! Вам нужно знать лишь основы, чтобы Вы начали применять и использовать в своих проектах. Одним важным нюансом является то, что нужно СРАЗУ же применить свойство, которое Вы только что узнали, на реальном примере. Пусть это будет Ваш собственный сайт или же простой HTML сайт — нет разницы. Важно то, чтобы Вы своими руками попробовали написать и увидели результат. У меня на сайте есть очень много примеров в которых используется CSS. Только категория CSS и категория CSS3 вместе содержат более 100 уроков! Когда Вы будете знать хотя бы основы, тогда Вы сможете смело менять и применять все примеры из уроков.
- Урок 1. Что такое CSS?
- Урок 2. Базовые селекторы
- Урок 3. Групповые селекторы и селекторы потомков
- Урок 4. Псевдоселекторы ссылок
- Урок 5. Шрифты
- Урок 6. Оформление текста
- Урок 7. Рамки
- Урок 8. Оформление списков
- Урок 9. Наследование
- Урок 10. Блочная модель
- Урок 11. Высота и ширина блока
- Урок 12. Конфликты полей
- Урок 13. Работа с изображениями. Часть 1
- Урок 13. Работа с изображениями. Часть 2
- Урок 14. Таблицы
- Урок 15. Формы
- Урок 16. Свойство float
- Урок 17. Каркас на основе свойства float
- Урок 18. Позиционирование. Часть 1
- Урок 18. Позиционирование. Часть 2
- Урок 18. Позиционирование. Часть 3
- Урок 19. z-индекс
- Урок 20. Видимость элементов
2. Шпаргалки CSS и CSS3
Ну вот изучили Вы основы и через пару дней всё с «успехом» забыли и, наверное, думаете что это не Ваше и всё сложно. Хочу Вас сразу немного подбодрить — я сам не знаю всех свойств CSS. Но что мне мешает посмотреть их в интернете?
Правда пока зайдешь в Яндекс или Google, потом наберешь тот запрос, который нужен. А если еще и не выдаст в поиске то что нужно. Так можно потратить очень много времени но так и не найти то, что действительно искал.
К счастью, хорошие люди составили очень полезные шпаргалки, которые не раз меня выручали. Достаточно один разобраться где что находится и затем поиск нужных свойств не составляет никаких трудностей.
Краткая шпаргалка для CSS (v2), где можно найти все самые основные свойства. Отлично подойдет для начинающих.
Подробная шпаргалка для всех свойств CSS3. Подойдет как для начинающих, так и для опытных веб-мастеров и веб-дизайнеров.
Это просто незаменимые материалы при верстке и разработке дизайна сайта. Время на то, чтобы отвлекаться и искать в интернете описание свойств уменьшается во много раз.
Правда, как Вы понимаете, чем больше верстаешь сайты или занимаешься дизайном, тем меньше приходится заглядывать в эту подсказку, так как в памяти постоянно остаются все необходимые свойства. Но всё же иметь под рукой этот набор шпаргалок будет не лишним.
Это как в школе: даже если не пользуешься шпаргалкой, но с ней всё равно как-то на душе спокойнее 😆 .
Дополнение к уроку — HTML шпаргалки
Помимо CSS шпаргалок также есть HTML шпаргалки. Если забыли какой-нибудь тег, Вы всегда их можете подсмотреть в такой HTML шпаргалке. Ссылка на скачивание появится после того как Вы нажмете на одну из кнопок социальных сетей ниже этого видео.
Вывод
Если Вы начинающий, и только осваиваете азы CSS, то Вам отлично подойдут мои уроки по CSS. Материал в них изложен кратко и Вам нужно лишь повторить своими руками то, что о чем урок. А также более опытные веб-мастера смогут освежить свои знания быстро просмотрев все уроки. Также Вы можете скачать шпаргалки CSS и CSS3, которые помогут Вам не забыть основные свойства и всегда будут под рукой, в случае чего Вы можете быстро посмотреть и вспомнить необходимую информацию.
Ну и конечно же, основные пункты статьи: