CSS стили

Заметки в рубрике охватывают работу с CSS

Задания по основам CSS

Задачи по основам CSS призваны закрепить работу с набором базовыми CSS понятиями:  CSS селекторы, CSS-свойства, каскадность, CSS-свойства для работы с текстом, оформление фона HTML-элементов и работа с бордюрами. От понимания основ CSS зависит дальнейшая работа верстальщика. Важно помнить, что в отличие от спецификации HTML, о CSS можно прочитать в отдельных модулях W3. Читать далее…

Задания: float CSS

Задания: float CSS Обтекание в HTML и CSS — хорошая возможность разместить блоки на одном уровне или построить многоколоночную страницу. Владея свойством float, можно отчасти управлять блочностью элемента, а зная как решать проблемы с обтеканием — не тратить время на поиски «ошибок». Задачи на обтекания предполагают, что Вы владеете этим свойством или имеете эквивалент знаний […]

Задания: CSS селекторы

Для уверенной верстки, требуется в идеале знать селекторы CSS: css селекторы классов, css селекторы атрибутов, соседние селекторы css, контекстные селекторы css, дочерние селекторы +в css, приоритет селекторов (нахождение приоритета, специфичность селектора), группировка селекторов, селектор первый элемент, селектор по id.

Календарь HTML

На курсах по JavaScript мы иногда затрагиваем тему построения HTML-календаря. Каркас календаря запрограммировать достаточно быстро, а вот на оформление CSS-стилями время тратить не хочется, потому было решено заранее прописать эти стили отдельной заметкой в блоге для дальнейшего быстрого применения. Пусть у нас есть календарь на июль 2084 года, сверстанный в HTML (фидл). Связь JavaScript с […]

Обтекание в HTML и CSS

Если вы не очень хорошо понимаете как работает обтекание в HTML и CSS (свойство float), то эта заметка поможет сориентироваться. Свойство CSS float часто применяется для расположения двух и более блоков в одну линию. Верхняя часть этих блоков находится на одном уровне, нижняя — в зависимости от высоты блоков. Сами блоки «плывут» влево (float:left) или […]

Анимация в CSS

Анимация в CSS — очень интересная возможность для создания подвижных фрагментов на сайте. Двигать (а также менять цвет, размеры и т.д.) можно при помощи свойств начинающихся на animate-property, где вместо property подставляется одно из слов: name, duration, timing-function, iteration-count, direction, play-state, delay, fill-mode. Но можно записать сокращенный формат animation, описав все внутри. Почти как background. […]

Документация по CSS

Когда начинаем изучать HTML , документацию найти достаточно просто.  А  спецификация CSS разбита на модули. Один модуль — документ с самостоятельным описанием. Посвящены они работе с цветом фона элементов и бордюрами/рамками, шрифтом, медиа-запросами и т.д. Общий список модулей можно найти на странице текущей работы над CSS. Там же предлагается посетить страницу со списком CSS-свойств и […]