CSS от А до Я решение распространенных проблем в CSS


Содержание материала:

Заключение. Рекомендации по CSS

Заключительный урок нашего учебника по CSS мы хотели бы посвятить рекомендациям по организации работы с таблицами стилей. Вы уже хорошо знаете, как стилизовать элементы веб-страницы, однако профессионала отличает не только умение писать стили, но и навыки ведения и оформления самих CSS-файлов. Как быстро можно разобраться в вашей работе? Легко ли использовать и поддерживать ваш код? Давайте рассмотрим основные моменты, которых важно придерживаться веб-разработчикам.

Комментирование кода

Когда вам (или другому разработчику) приходится обращаться к CSS-таблице через продолжительное время (месяц, полгода, год и т. п.), то при взгляде на код может возникнуть вопрос: «К чему он относится? Каково его действие?». Чтобы таких вопросов не возникало либо возникало меньше, необходимо добавлять комментарии к коду. Конечно, не нужно комментировать, что делает каждое свойство. Однако описательный комментарий будет уместным, например, возле кода CSS-анимации, при взгляде на который можно не сразу понять, что он делает.

Согласитесь, небольшой комментарий способен сильно изменить картину в лучшую сторону: без него можно было бы долго гадать, что делает эта анимация и где она применяется.

Понятные имена для селекторов

У профессионала должен быть развит такой навык как умение давать хорошие имена селекторам. Как правильно придумывать названия? Первый совет: не называйте селектор, исходя из цвета или местоположения элемента. Это те вещи, которые с высокой долей вероятности могут быть изменены в ходе доработки дизайна. Клиент может прислать правки, где попросит сделать кнопку не зеленой, а голубой, и если вы уже назвали класс .green-button , возникнут проблемы: придется либо везде менять .green-button на .blue-button , либо оставить всё как есть, но потом это будет вводить вас (или другого разработчика) в заблуждение. То же самое касается привязки к местоположению: элемент .left-block вскоре может стать элементом .right-block , потому что дизайнер или заказчик так захотел. И вновь вы столкнетесь с проблемой несоответствия имени.

Так как же называть селекторы? Более правильным будет давать такие имена, которые указывают на назначение элемента либо действие стиля. Например, кнопка отмены может называться .cancel-button , форма для обратного звонка — .callback-form , всплывающее окно — .popup-window и так далее. Если вы создаете класс для выравнивания текста по центру, то будет уместным назвать его как-то вроде .text-center :

Также не стоит давать селекторам бессмысленные имена вроде #b1 , .sb , .abc и т. п., поскольку потом ни вы, ни другие разработчики не сможете понять, что же означают эти загадочные названия.

Несколько классов для одного элемента

Может возникнуть ситуация, когда у вас есть набор элементов с почти одинаковыми стилями, которые отличаются лишь одной-двумя строками. К примеру, представьте, что вам нужно создать кнопку .button и использовать ее на странице три раза. Стиль всех кнопок идентичен:

Однако первая кнопка должна быть выровнена по левому краю, вторая — по центру, а третья — по правому краю. Как это сделать? Самое очевидное решение — создать дополнительные классы специально для выравнивания блочного элемента:

По сути, класс .block-left можно и не создавать, поскольку наша кнопка по умолчанию примыкает к левому краю. Итак, нужный класс теперь можно использовать в паре с классом .button :

К элементу будут применяться стили сразу от двух классов, и если вам вдруг понадобится изменить выравнивание кнопки, вы можете просто переписать класс на другой.

Группирование стилей

Если ваша таблица стилей содержит всего десяток правил, то проблем с ее восприятием не возникнет. Но в реальной жизни даже совсем небольшой проект может иметь более 500 строк CSS-кода. И если вы будете записывать все правила подряд, без разбивки на группы, вы очень скоро запутаетесь в своей же работе. Отыскать нужное правило будет сложно, поддержка такой CSS-таблицы превратится в мучение.

Если вы проходили практические уроки данного учебника, то помните, что мы делили таблицу стилей на разделы при помощи комментариев и говорили вам записывать стили в соответствующую группу.

Железных правил относительно организации групп в CSS-файле не существует. Однако есть несколько популярных приемов, которые помогут удобно сгруппировать стили:

Группируйте стили, которые относятся к определенной секции страницы. Например, стили для шапки сайта помещайте в одну группу, стили для футера — в другую, стили для навигации — в третью и т. д.

Группируйте стили, относящиеся к одной задаче. К примеру, стили для разметки размещайте в одной группе, стили для форматирования — в другой и т. д.

Для выделения групп используйте обычные CSS-комментарии. Это общепринятый способ создания разделов в таблицах стилей. Комментарии старайтесь оформлять так, чтобы они были хорошо заметны. Например:

Вы можете придумать другой удобный для себя вариант оформления комментариев, главное, следите за тем, чтобы комментарий начинался с символов /* и заканчивался символами */ , и между ними не было такой же комбинации символов (во избежание ошибок).

Несколько CSS-таблиц

Когда таблица стилей расширяется до огромных размеров, становится неудобно искать и редактировать в ней стили. В этом случае удобным решением может стать разделение одной CSS-таблицы на несколько файлов. Безусловно, здесь нужно иметь чувство меры: не стоит создавать 20-40 штук файлов со стилями для каждой секции сайта (это сильно загрузит веб-сервер), однако будет разумным разъединить большие группы стилей. Например, вы можете поместить код разметки в файл layout.css , основные стили — в main.css , медиа-запросы — в media.css и т. д.

Затем понадобится подключить все эти файлы к HTML. Можно добавить каждый файл по отдельности через тег
, но есть способ получше: создайте отдельную внешнюю таблицу стилей (скажем, styles.css ), внутри которой используйте правило @import для подключения всех остальных таблиц стилей:

В принципе, это весь код, который должна содержать таблица styles.css . Подключите ее к HTML-документу (другие таблицы подключать этим образом не нужно):

Теперь, когда веб-страница будет загружаться, браузер загрузит файл styles.css , который, в свою очередь, скажет браузеру загрузить три остальные таблицы стилей.

Препроцессоры CSS

Если вы стремитесь к быстрому и эффективному написанию CSS-кода, обратите внимание на препроцессоры CSS. Препроцессор позволяет писать CSS-стили по определенным облегченным правилам, после чего этот код преобразуется в обычный CSS, который вы разместите на сервере.

Среди преимуществ препроцессоров стоит выделить:

Переменные CSS. С помощью препроцессора вы можете определять CSS-переменные, которые хранят нужные значения. Например, если вам необходимо использовать определенный цвет для многих элементов сайта, вы указываете этот цвет в формате HEX каждый раз для каждого элемента. Если потом понадобится изменить этот цвет на другой, вам придется проходиться по всем стилям, где он используется. Переменная CSS позволяет указать этот цвет один раз, в начале таблицы стилей. Если затем вам придется менять этот цвет, вы просто поменяете значение в переменной.

Добавление префиксов. В нашем учебнике мы не раз упоминали о необходимости дописывать префиксы производителей к некоторым свойствам. Препроцессор CSS избавит вас от необходимости делать это и добавит все необходимые вендорные префиксы сам.

Объединение CSS-файлов. При разработке удобно хранить CSS-стили разного назначения в отдельных файлах. Но при загрузке нескольких таблиц стилей увеличивается количество обращений к веб-серверу. И когда идет борьба за каждую миллисекунду в скорости загрузки сайта, может понадобиться объединить все CSS-таблицы в один большой файл. Препроцессор позволяет держать ваш код CSS в разных файлах для удобства разработки, а в качестве финального файла, который будет размещен на сервере, объединить все стили в одну внешнюю таблицу. Он также уберет из конечного файла все лишнее, включая комментарии.

Самые распространенные препроцессоры

, а на другой — тег

Существуют и другие модели организации кода: BEM, SMACSS, Atomic CSS и т. д. У каждого из этих подходов есть свои преимущества и недостатки. Какой из них выбрать — решать вам как разработчику, опираясь на собственный опыт и предпочтения. Кроме того, ничто не мешает вам выработать свой способ организации CSS. Быть может, именно придуманный вами вариант позволит веб-разработке подняться на новый уровень!

Завершение

Итак, наш учебник подошел к своему завершению. Поздравляем вас с окончанием обучения и благодарим каждого нашего читателя за то, что выбрали нас в качестве отправной точки в изучении языка CSS. Вы всегда можете обратиться к учебнику за подсказками, а также воспользоваться поиском по сайту, чтобы быстро найти определенную информацию.

Проблемы CSS

Впервые css был представлен примерно в 1995 году, и был предназначен для стилизации простых текстовых документов. Не веб сайтов. Не приложений. А именно текстовых документов. С тех пор, css, прошел долгий путь. Возможно слишком долгий.

Для многих вещей, css, не был предназначен изначально, например для таких как: многоколоночность, отзывчивый веб дизайн и т.д. Вот почему он стал языком полным хаков и глюков, как какая-то древняя машина с кучей расширений.

В лучшем случае — работу с css можно назвать веселым занятием. И это то, благодаря чему мы имеем работу. Потому что, как я считаю, генерация эффективных и кроссбраузерных css стилей невозможна и не будет возможна в ближайшее время.

Перейдем к сути, ведь я здесь не для того, что бы высказать свое мнение о css. А для того, что бы рассмотреть ряд часто встречающихся в css проблем, и их возможных решений.

Я старался выбрать несколько действительно очень распространенных:

  • Очистка float`ов.
  • Как победить отступы между элементами с inline-block?
  • Понимание абсолютного позиционирования.
  • Когда использовать w >Очистка float`ов.

Мне кажется, что это самый распространенный вопрос в css. Он стар как мир, честно, я на тысячу процентов уверен, что каждый, кто хоть когда нибудь писал на css сталкивался с ним.

Простыми словами его можно описать так: когда внутри элемента содержатся только элементы с float, он схлопывается так, как будто в нем вообще нет дочерних элементов. То есть, по факту, элементы с float выпадают из общего потока.

Есть несколько способов для решения этой проблемы. Раньше мы использовали пустой div со стилем «clear: both» в самом низу контейнера. Затем, мы заменили его на тег hr, что не на много лучше.

И наконец Nicolas Gallagher предложил новый путь очистки float`ов без необходимости трогать разметку совсем. После продолжительных дискуссий и тестов, мы получили минимально необходимый, для его работы, набор стилей, вот его последняя версия:

На самом деле я солгал, она не последняя, она самая короткая. Но если вам нужна поддержка IE 6/7, то вам нужно добавить еще вот это:

Для работы необходимо добавить класс .clearfix в свой проект, а затем применять его к элементам разметки. Это самый простой и чистый способ для работы с float`ами.

Как победить отступы между элементами с inline-block?

Продолжим с размещением элементов в строку, в этот раз не с помощью float, а с помощью inline-blocks. display: inline-block долгое время был недооценен, и все же мы разобрались, как он работает и почему это круто. Сегодня, все больше и больше front-end разработчиков предпочитают использовать inline-block взамен float`ов, когда у них есть такая возможность.

Главный плюс inline-block в том, что нам не приходится отчищать float`ы и мы не сталкиваемся с другими проблемами которые могут возникнуть из-за элементов спозиционированных с помощью float`ов. Просто установив свойство элемента display в значение inline-block получим гибрид строчного элемента и блока. Они могут иметь размер, отступы, но их ширина, по-умолчанию, зависит от контента, а не занимает всю ширину родителького элемента. Таким образом они размещаются горизонтально, а не вертикально.

Вы можете спросить: «В чем же тогда проблема?». А проблема в том, что они на половину строчные, а значит имеют отступ друг от друга размером равным пробелу. Со стандартным шрифтом размером 16px, он составляет 4px. В большинстве случаев размер отступа можно рассчитать, как 25% от размера шрифта. Так или иначе, это может помешать нормальному расположению элементов. Например, возьмем контейнер размером в 600px с тремя элементами внутри, размер которых 200px и задано свойством display: inline-block. Если не убрать отступ, то нам не удастся разместить их в одну линию (200 *3 + 4 * 2 = 608).

Есть несколько путей, как убрать ненужный нам пробел, каждый со своими плюсами и минусами. Если честно, то пока нет идеального решения. Давайте взглянем на все по очереди!

Уровень разметки: удаление пробелов

Для всех наших тестов воспользуемся следующей разметкой.

Как я уже говорил ранее, дочерние элементы не станут в одну линию, потому что есть дополнительный символ пробела между каждым из них (в нашем случае перевод строки и 4 пробела). Первый способ решить проблему — полностью удалить пробелы.

Это действительно работает, но делает не удобным чтение нашего кода. Хотя, мы можем, немного реорганизовать наши элементы, что бы сохранить читаемость:

И если быть уж совсем крутым, можно сделать и так:

Да — это работает! Конечно я не рекомендую такой подход, потому что он не интуитивен и делает код уродливым. Давайте, лучше, попробуем, что нибудь еще.

Уровень разметки: комментируем пробелы

Что если закомментировать пробелы вместо того, что бы удалить их?

Да, так гораздо лучше! Код читаем и работает. Да, способ выглядит не привычно на первый взгляд, но не так и сложно к нему привыкнуть. Я и сам использую такой способ, когда мне надо удалить пробелы между элементами с inline-block.
Конечно, кто-то скажет, что это не идеальное решение, так как оно работает на стороне разметки, а проблема должна быть решена на уровне css. Действительно. Большинство из нас на самом деле используют css решения.

Уровень css: расстояние между символами

Свойство letter-spacing используется для задания отступов между символами. Идея заключается в том, что бы установить отступ таким, что бы он нивелировал отступ между нашими элементами, затем, нам придется сбросить letter-spacing для дочерних элементов, что бы текст в них выглядил нормально.

Эта техика используется в Griddle — основанной на Sass системе сеток за авторством Nicolas Gallagher, так что, как вы видите, это достаточно серьезное решение. Хотя, честно говоря, мне не нравится тот факт, что мы полагаемся на магичиские числа в стилях. Плюс с некоторыми шрифтами, это число может меняться например на 0.31em и т.д. То есть, его необходимо подгонять под каждый конкретный случай.

Уровень css: отрицательный margin

Еще один подход к решению задачи, очень похож на предыдущий, но с использование отрицательного отступа. Главный его недостаток он не работает в IE 6/7. Плюс нам необходимо убрать отступ с первого элемента, что бы они ровно встали внутри нашего контейнера.

Если вам не требуется поддержка IE 6/7, я считаю что это достаточно неплохе решение.

Уровень css: font-size

Ну и на последок, вы можете установить размер шрифта родительского блока в 0, что бы сделать пробел равным 0px, а затем восстановить размер шрифта для дочерних элементов.

У этого решения есть несколько своих проблем и ограничений:

  • Вы не сможете восстановить шрифт для дочерних элементов используя em как размер шрифта
  • Пробелы не удаляются на устройствах с Android до Jellybean
  • Текст с использование @font-face может потерять сглаживание в Safari 5
  • Некоторые браузеры игнорируют font-size: 0, например Китайская версия Chrome, в таком случае font-size сбрасывается до 12px

Так что, это не лучшее решение. Как я уже говорил ранее, скорее всего буду использовать путь с комментирование пробелов. Если для вас он выглядит неудобным, вы можете вернуться к float`ам или же вообще использовать flexbox.

Понимание абсолютного позиционирования.

Позиционирование элементов — каверзный процесс и всегда им был. Позиционирование, начинающим, дается с большим трудом. Они часто (не)используют свойство position. Это свойство определяет как элемент может перемещаться с помощью смещений (top, right, bottom and left). И принимает следующие значения:

  • static — по-умолчанию, смещения не действуют
  • relative — смещения двигают визуальный слой, но не сам элемент
  • absolute — смещения двигают элемент внутри контекста (первый не static элемент)
  • fixed — смещения позиционируют элемент внутри viewport`a и не важно где он расположен в документе

Проблемы появляются при использовании position: absolute. И наверняка вы с ними уже сталкивались: вы определили элемент с абсолютным позиционирование, потому что хотите, что бы он был в верхнем правом углу своего родителя (например кнопка закрыть у модального окна).

… а он оказывается в верхнем правом углу документа. У вас промелькает мысль «Какого черта?». На самом деле, это нормальное поведение браузера. Ключевое слово тут контекст.

Код выше просто говорит: «Я хочу что бы мой элемент был спозиционирован в верхнем правом углу контекста». Так что же такое контекст? Это первый элемент со свойством position не равным static. Это может быть непосредственно родительский элемент, или родитель родителя, или родитель родителя родителя. И так до первого элемента с position != static.

Эта концепция часто оказывается сложной для понимания новичками, но когда вы ее поняли она открывает обширные возможности по работе с элементами спозиционированными абсолютно.

Небольшая демка иллюстрирующая вышесказанное. Два родителя, в каждом по одному дочернему элементу спозиционированному абсолютно со смещение top: 0 и right: 0. Слева правильный родитель с position: relative, справа неправильный с position: static.

Когда использовать width / height равный 100%?

Пожалуй начнем с того, что по проще. Когда использовать height: 100%? На самом же деле, вопрос часто звучит немного по-другому: «Как мне сделать так, что бы моя страница заняла всю высоту экрана?». Ведь правда?

Для ответа на него нужно понять, что height: 100% равен высоте родительского элемента. Это не магическое «высота всего окна». Так что, если вы захотите, что бы ваш элемент занял все 100% от высоты окна, то установить height: 100%будет недостаточно.

Почему? А потому что родителем вашего контейнера является элемент body, а у него свойство height установлено в auto по-умолчанию, это значит, что его высота равна высоте контента. Конечно, вы можете попробовать добавить height: 100%к body, но этого тоже будет недостаточно.

Почему? А все по тому же, родителем элемента body является элемент html, у которого, так же, свойство height равно auto и он так же растягивается под размер контента. А вот теперь, если добавить height: 100% и к элементу html, то все заработает.

Стало понятнее? Корневой элемент html на самом деле не самый верхней уровень на странице, самый верхний это «viewport». Для простоты, будем считать, что это окно браузера. Так вот, если установить height: 100% элементу html, то это то же самое, что сказать — стань такой же высоты, как окно браузера.

Суммируем полученную информацию в небольшом кусочке кода:

Готово. Если вам интересно углубится в тему, как устроен viewport, я настоятельно рекомендую статью от PPK.

А что если у родительского элемента установлено свойство min-height, а не height?

Недавно, Роджер Йохансен (Roger Johansson) описал проблему с height: 100%, проявляющуюся, когда у родительского элемента не установлен height, но указан min-height. Я не хочу углубляться в сказанное в статье, а перейду сразу к выводам. Вам необходимо установить height: 1px для родителя, что бы дочерний элемент смог занять всю высоту указанную в min-height.

Более подробно, с этим вопросом, вы можете ознакомится в статье Роджера Йохансена (Roger Johansson).

Width: 100%

Теперь давайте разберемся с width: 100%. Для начала, небольшое уточнение: устанавливая свойство width: 100%, мы хотим, что бы наш элемент занял всю ширину родительского элемента. Все стандартно.

Позвольте открыть вам небольшой секрет. width, для этого свойства — не очень подходящие название. Свойство width — это не абсолютный размер элемента, а размер содержимого элемента и это огромная разница.

Если добавить padding и/или border к элементу с width: 100%, то он перестанет помещаться в родительский элемент. Потому что появились padding и border, вот почему width должен был называться content-width. А теперь, пожалуйста, посмотрите на пример демонстрирующий вышесказанное.

Допустим, родитель имеет ширину 25em, а дочерний элемент, ширину 100% (от ширины родителя), но он так же имеет padding равный 1em (1em справа и 1em слева, в сумме 2em по горизонтали) и border размером 0.5em (0.5em справа и 0.5em слева, в сумме 1em по горизонтали), что в итоге нам дает 25em (100%) + 2em + 1em = 28em.

Есть 4 возможных пути решения этой проблемы. Первый и наверное лучший способ — избегать свойства width: 100%, тем более, что в данном случае оно абсолютно бесполезно. Если дочерний элемент блочный, то он и так займет всю ширину родителя автоматически (без проблем с padding`ами и border`ами). Но если мы работаем с inline-block элементом, то нам не удастся так просто решить эту проблему.

Мы можем заменить w >

Третий способ — использовать calc() для расчета ширины: width: calc(100% — 3em). Но оно тоже не подходит. Во-первых, нам все еще нужно вычислять размеры padding + border. Во-вторых, calc() не то, что бы хорошо поддерживался браузерами (не работает в IE 8, Safari 5, Opera 12, родном браузере Android).

Идея номер четыре — использовать свойство box-sizing: border-box. Оно изменяет алгоритм расчета ширины и высоты элемента так, что бы в них учитывались свойства padding и border. Отличная новость, заключается в том, что у box-sizingхорошая поддержка браузерами (IE8+, Opera 7+). А для всех остальных браузеров можно использовать polyfill.

Вывод: не используйте width: 100% без box-sizing: border-box.

Как не облажаться с z-index.

Все элементы на страницы позиционируются в трех плоскостях: кроме вертикальной и горизонтальной оси, существует дополнительная ось Z (глубина). По началу все выглядит очень просто — элементы с большим z-index находятся выше элементов с меньшим z-index. К несчастью, все гораздо сложнее. Я уверен, что z-index самое сложное css свойство за всю его историю. А так же уверен, что проблемы связанные с z-index встречаются чаще других при работе с css. Надеюсь, что мы просветим возможные пути их решения.

Для начала. Свойство z-index не имеет эффекта на статических элементах. Что бы иметь возможность перемещать элемент по оси Z, нам нужно изменить его позиционирование на relative, absolute или fixed.

Следующие, что нужно знать о z-index — это то, что не все элементы в DOM дереве размещены на одном уровне. Это значит, что изменение z-index у элемента до очень большого значения, не гарантирует того, что элемент будет помещен на передний план. Это называется контекстом наложения.

Простыми словами, контекст наложения является, своего рода, группой на основе одного html элемента, у которого все дочерние элементы получают ту же позицию в контексте и такой же z-index. Изменения z-index у элемента может привести к перекрыванию им других элементов, так как вам необходимо. Вот как располагаются элементы в одном контексте наложения (снизу вверх):

  1. Фон и границы элемента, формирующего контекст
  2. Дочерние контексты наложения с негативным z-index (самый маленький первый)
  3. Не позиционированные элементы
  4. Позиционированные элементы с значением z-index равным auto или 0
  5. Позиционированные элементы с положительным z-index
Когда ситуация становится неприятной

Итак, мы рассмотрели основы z-index понимание которых сэкономит вам кучу времени, уж поверьте. Но, к сожалению, их недостаточно. Это было бы слишком просто.

Дело в том, что каждый контекст наложения имеет свою ось Z. Например, элемент A в контексте наложения 1 и элемент B в контексте наложения 2 не могут взаимодействовать через z-index. Это значит, что элемент A, как часть контекста наложения находящегося в самом низу общего контекста, ни когда не сможет перекрыть элемент B другого контекста, находящегося выше уровнем, даже с очень большим значением z-index.

Но, что еще хуже. Элемент html создает корневой контекст наложения. Затем, каждый не статично-спозиционированный элемент со свойством z-index не равным auto, так же создает свой контекст наложения. Ничего нового. Но вот где все начинает рушиться: некоторые, ни как не связанные с контектом наложения css свойства, так же создают новые контексты. Например свойство opacity.

Все верно, свойство opacity создает новый контекст наложения. То же самое делают свойства transform и perspective. Хотя это не имеет ни какого смысла, не так ли? Например, если у вас есть какой-нибудь элемент с opacity меньше 1 или с любой трансформацией, у вас потенциально может возникнуть проблема.

К сожелению каждая проблема с z-index имеет свой контекст (не каламбур) делающий невозможным универсальное решение.

Давайте подведем краткий итог вышесказанного:

  • Перед применением z-inedx убедитесь, что установили свойство position не равным static
  • Не используйте значения большем чем 5 цифр для z-index, это абсолютно бессмысленно; в большинстве случаев, значение z-index в районе 10, будет более чем достаточно
  • Убедитесь, что элемент который вы хотите перекрыть находится в том же контексте наложения
  • Если у вас все еще что-то работает не так, как должно, убедитесь в отсутствии трансформаций и opacity выше у родительских элементов

В тему, я так же рекомендую к прочтению What No One Told You About Z-index от Филипа Волтона (Philip Walton) и официальную спецификацию css.

Борьба со схлопыванием отступов

Как мне кажется — это один из глюков css, который крадет наибольше количество времени, что бы разобраться в чем же дело. Можно сказать, что он чем-то похож на баг с z-index. Как-бы то ни было, схлопывание отступов — это когда верхний и нижний отступ двух элементов схлопываются в один (самый большой из двух).

К счастью, как правило такое поведение и ожидается. Возможно по-этому оно так и работает (так указано в спецификации css). Однако, иногда вы не хотите, что бы вертикальные отступы схлопнулись. Что бы понять как этого избежать, мы для начала посмотрим, почему так происходит. Схлопывание отступов может произойти в трех разных случаях.

Сосдение элементы

Когда два соседних элемента имеют вертикальные отступы, они схлопываются до самого большого из них. Есть несколько способов предотвратить схлопывание:

  • clear: left; float: left; (right то же работает)
  • display: inline-block;

Пример на jsFiddle иллюстрирует работу фиксов.

Родитель и первый/последний дочерний элемент

Обычно, верхний отступ родительского элемента и верхний отступ дочернего схлопываются до самого большого. Аналогичным образом работает и для последнего дочернего элемента и нижних отступов. Для решения этой проблемы, так же есть несколько способов. Большинство из них заключаются в добавлении одого из следующих свойств родительскому элементу:

  • overflow: hidden (или любой другой но не auto)
  • padding: 1px (или другое значение больше 0)
  • border: 1px solid transparent (или любой другой border)
  • float: left (right то же работает)

Пример на jsFiddle иллюстрирует работу фиксов.

Пустые блоки

Когда пустой блок не имеет границ, padding`ов, высоты, его верхние и нижние отступы схлопываются в один. Так или иначе использовать пустые блоки плохая практика, так что такое встречается не часто.

Заключение

К несчастью, тут описана только верхушка айзберга из багов и хаков css. Но это действительно те, которые встречаются чаще других, но есть еще множество вещей таких как: несовместимость браузеров, вендорные префиксы, специфичность селекторов, каскады и наследование, и многое многое другое.

Также, я бы рекомендовал к ознакомлению следующие статьи и сайты:

Надеюсь статья помогла понять некоторые вещи которые смогут уберечь вас от проблем в будущем.

10 советов по CSS, которые позволят оптимизировать вашу таблицу стилей

Зачастую очень просто словить себя на мысли, что ваш CSS код получился довольно сумбурным, и даже вам не так-то и просто в нем разобраться. Иногда это результат неаккуратного кодирования с самого начала, иногда потому что вы делали несколько хаков и изменений по ходу написания проекта.

Какой бы ни была причина, код должен быть чистым и аккуратным. Для этого советуем начать с правильной ноты вначале проекта, и строго придерживаться своих же правил.
Ниже мы дадим вам 10 советов о том, как можно и нужно организовывать свой CSS код, чтобы не было головной боли у вас или ваших коллег по проекту.

1. Оставайтесь организованным от А до Я

Вместо того, чтобы случайно добавлять идентификаторы и классы в том порядке, в котором они приходят на ум, используйте упорядоченную систему. Вначале выявите наиболее общие элементы, а затем второстепенные и так далее. Это упорядочит ваш CSS лист и позволит в последствии легко модифицировать нужную часть.

Используйте структуру, которая лучше работает для вас, обдумывая при этом будущие изменения и других разработчиков которым возможно придется работать с вашим кодом:

    Сброс и оверрайды / Reset & Overr >

2. Название, Дата и Подпись

Дайте знать, кто написал ваш CSS код, когда он был написан и к кому обращаться, если у них есть вопросы по этому поводу. Это особенно полезно при проектировании шаблонов или тем.

Подождите … что такое SwatchColors? Ничто иное как палитра цветов вебсайта. За эти годы я обнаружил, что добавление простого списка наиболее распространенных и используемых цветов на сайте в CSS является чрезвычайно полезным во время начального развития и при принятии изменений в дальнейшем. Это избавит вас от необходимости открывать Photoshop и пробовать цвета с дизайном, или посмотреть цвета в стиле руководства сайта (если оно есть). Когда вам нужен HTML код для конкретного цвета, просто прокрутите вверх CSS листа, и скопируйте нужный.

3. Храните все свои темплейты в одном месте и используйте их как основы для новых проектов

После того как вы остановились на структуре в использовании, вырезаем все, что не является универсальным и сохраняем файл в качестве шаблона CSS для последующего использования.

Вы можете сохранить несколько версий для различных применений: две колонки, блог, верстка, печать, мобильные и так далее. Coda (редактор для OSX) имеет отличную функцию, Clips, которая позволяет легко это сделать. При использовании типичной структуры сайта, идентификаторов и тд, писать новый CSS будет просто безумством, если вы можете использовать уже готовую структуру.

4. Называйте классы своими именами

К примеру, если у меня есть два класса .col-alpha & .col-beta, почему бы их не переименовать в .col-left & .col-right, что является более логичным и позволит проще ориентироваться в коде при дальнейших правках. Думайте о будущем всегда! В следующем году вам, возможно, придется перестроить свой сайт и поменять левую колонку на правую. Если идентификатор говорит левая колонка, следует ожидать, что она всегда будет с левой стороны. Это не оставит вам много места для маневров в дальнейшем.

Одним из основных преимуществ CSS является возможность отделить стиль от содержания. Вы можете полностью изменить дизайн сайта, просто изменив CSS, не касаясь HTML. Используйте более универсальные имена и оставайтесь последовательным. Называйте элементы так, на чем они основаны, а не на то, как они выглядят. Например, .comments-blue менее универсален, чем .comments-бета, и тд.

5. Дефисы вместо подчеркиваний

Старые браузеры иногда глючат при наличии подчеркивания в CSS, или не поддерживают их вообще. Для лучшей совместимости, возьмите за привычку использование дефиса вместо подчеркивания. Используйте #col-alpha, а не #col_alpha.

6. Не повторяться

Группируйте элементы, если это возможно, вместо повторения их. Если ваш h1 и h2 элементы используют один и тот же шрифт, размер, цвет и поля, то группируйте их с помощью запятой. Также используйте шорткоды. Вместо border-top:5px; border-right:5px; border-bottom:5px;border:-left:5px; можно легко использовать сокращение в виде border:5px;

Порядок, в котором CSS понимает ваши параметры идет по кругу: сверху, справа, снизу, слева. Большой круг по часовой стрелке, начиная с полудня. Кроме того, если верхний и нижний, или левый и правый атрибуты те же, вам нужно всего лишь использовать два: border:5px 10px; У нас получится граница сверху/снизу по 5px, и по 10 пикселей справа и слева.

7. Оптимизируйте код

Используя эти советы, вы можете реально сократить размер вашей таблицы стилей. Меньшие загружаются быстрее, и их легче поддерживать и обновлять. Вырежьте то, что вам не нужно и консолидируйте, по возможности. Будьте осторожны при использовании готовых фреймворков. Вы, наверняка, приобретете много “мусора”

Еще один совет для уменьшения обьема файла: вам не нужно указывать единицу измерения при использовании нуля. Если у вас 0px или 0em, можно просто указать 0, CSS это распознает сам.

8. Написать основу для нормальных браузеров, а затем настроить для Webkit и IE

Вначале напишите оптимизированый код для Firefox, Mozilla. Если ваш CSS правильно работает с ними, то будет меньше проблем в Webkit (Safari, Chrome) и Internet Explorer.

9. Валидируйте код!

Воспользуйтесь бесплатным валидатором CSS от W3C. Если вы застряли, и ваш код не работает так, как вы хотите , CSS валидатор будет большой помощью, указав на ошибки.

10. Придерживайтесь чистоты в доме

Отдельные браузеры используют свои конкретные CSS стили, и по мере необходимости, включают JavaScript код на стороне сервера. Не стоит засорять ваш основной CSS. Вынесите все хаки в отдельный stylesheet. Такая оргнизицая стилей, поможет вам в дальнейшем избежать конфликтов и неразберихи в ваших таблицах стилей!

Надеюсь эти советы помогут вам в организации ваших проектов и уменьшении размера файлов стилей за счет оптимизации и группирования! Напишите в комментариях, если у вас так же есть свои хитрости, которыми вы пользуетесь для написания чистого кода.

Основы CSS

На этой странице

CSS (Cascading Style Sheets) — это код, который вы используете для стилизации вашей веб-страницы. Основы CSS помогут вам понять, что вам нужно для начала работы. Мы ответим на такие вопросы как: Как сделать мой текст черным или красным? Как сделать так, чтобы контент появлялся в определенном месте на экране? Как украсить мою веб-страницу с помощью фоновых изображений и цветов?

Так что же такое CSS?

Как и HTML, CSS на самом деле не является языком программирования. Это не язык разметки — это язык таблицы стилей. Это означает, что он позволяет применять стили выборочно к элементам в документах HTML. Например, чтобы выбрать все элементы абзаца на HTML странице и изменить текст внутри них с черного на красный, вы должны написать этот CSS:

Давайте попробуем: вставьте эти три строки CSS в новый файл в ваш текстовый редактор, а затем сохраните файл как style.css в вашей папке styles .

Но нам все равно нужно применить CSS к нашему HTML документу. В противном случае, CSS стиль не повлияет на то, как ваш браузер отобразит HTML документ. (Если вы не следили за нашим проектом, то прочитайте раздел Работа с файлами и Основы HTML, чтобы узнать, что вам нужно сделать в первую очередь.)

  1. Откройте ваш файл index.html и вставьте следующую строку куда-нибудь в шапку, между и тегами:
  2. Сохраните index.html и загрузите его в вашем браузере. Вы должны увидеть что-то вроде этого:

Если текст вашего абзаца теперь красный, примите наши поздравления! Вы написали свой первый успешный CSS!

Анатомия набора CSS правил

Давайте взглянем на вышеупомянутый CSS немного более подробно:

Вся структура называется набором правил (но зачастую для краткости «правило» ). Отметим также имена отдельных частей:

Селектор (Selector) Имя HTML элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы p ). Для стилизации другого элемента, просто измените селектор. Объявление (Declaration) Единственное правило, например color: red; указывает, какие из свойств элемента вы хотите стилизовать. Свойства (Properties) Способы, которыми вы можете стилизовать определенный HTML элемент (в данном случае, color является свойством для элементов представляет собой абзац.»>

). В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле. Значение свойства (Property value) Справа от свойства, после двоеточия, у нас есть значение свойства, который выбирает одно из множества возможных значений для данного свойства (существует множество значений color , помимо red ).

Обратите внимание на важные части синтаксиса:

  • Каждый набор правил (кроме селектора) должен быть обернут в фигурные скобки ( <> ).
  • В каждом объявлении необходимо использовать двоеточие ( : ), чтобы отделить свойство от его значений.
  • В каждом наборе правил вы должны использовать точку с запятой ( ; ), чтобы отделить каждое объявление от следующего.

Таким образом, чтобы изменить несколько значений свойств сразу, вам просто нужно написать их, разделяя точкой с запятой, например так:

Выбор нескольких элементов

Вы также можете выбрать несколько элементов разного типа и применить единый набор правил для всех из них. Добавьте несколько селекторов, разделенных запятыми. Например:

Разные типы селекторов

Существует множество различных типов селектора. Выше мы рассматривали только селектор элементов, который выбирает все элементы определенного типа в HTML документе. Но мы можем сделать выбор более конкретным. Вот некоторые из наиболее распространенных типов селекторов:

Имя селектора Что выбирает Пример
Селектор элемента (иногда называемый селектором тега или типа) Все HTML элемент(ы) указанного типа. p
Выбирает

ID селектор Элемент на странице с указанным ID (на одной HTML странице, может быть только один элемент с каким-либо ID). #my-id
Выбирает

или

Селектор класса Элемент(ы) на странице с указанным классом (множество экземпляров класса может объявляться на странице). .my-class
Выбирает

и

Селектор атрибута Элемент(ы) на странице с указанным атрибутом. img[src]
Выбирает но не
Селектор псевдо-класса Указанные элемент(ы), но только в случае определенного состояния, например, при наведении курсора. a:hover
Выбирает , но только тогда, когда указатель мыши наведен на ссылку.

Существует еще много селекторов для изучения, и вы можете найти более подробный список в нашем Руководстве селекторов.

Шрифты и текст

Теперь, когда мы изучили некоторые основы CSS, давайте добавим ещё несколько правил и информацию в наш файл style.css , чтобы наш пример хорошо выглядел. Прежде всего, давайте сделаем, чтобы наши шрифты и текст выглядели немного лучше.

Примечание: Все в CSS документе между /* и */ является CSS комментарием, который браузер игнорирует при исполнении кода. Это место, где вы можете написать полезные заметки о том, что вы делаете.


). Мы также отцентрируем текст нашего заголовка и установим некоторую высоту строки и расстояние между буквами в теле документа, чтобы сделать его немного более удобным для чтения:

Вы можете настроить значения px так, как вам нравится, чтобы ваш дизайн выглядел так, как вы хотите, но, в общем, ваш дизайн должен выглядеть вот так:

Блоки, блоки и ещё раз блоки

Одна вещь, которую вы заметите в написании CSS, заключается в том, что многое из этого касается блоков — настройка их размера, цвета, положения и т.д. Большинство HTML элементов на странице можно рассматривать как блоки, расположенные друг над другом.

Не удивительно, макет CSS основан, главным образом, на блочной модели (box model). Каждый из блоков, занимающий пространство на вашей странице имеет такие свойства, как:

  • padding , пространство только вокруг контента (например, вокруг абзаца текста)
  • border , сплошная линия, которая расположена рядом с padding
  • margin , пространство вокруг внешней стороны элемента

В этом разделе мы также используем:

  • width (ширину элемента)
  • background-color , цвет позади контента и padding элементов
  • color , цвет контента элемента (обычно текста)
  • text-shadow : устанавливает тень на тексте внутри элемента
  • display : устанавливает режим отображения элемента (пока что не волнуйтесь об этом)

Итак, давайте начнем и добавим больше CSS на нашей странице! Продолжайте добавлять эти новые правила, расположенные в нижней части страницы, и не бойтесь экспериментировать с изменением значений, чтобы увидеть, как это работает.

Изменение цвета страницы

Это правило устанавливает цвет фона для всей страницы. Измените код цвета сверху, на цвет который вы выбрали при планировании вашего сайта.

Разбираемся с телом

Теперь для представляет собой контент (содержимое) документа HTML. В документе может быть только один элемент .»> элемента. Здесь есть немало деклараций, так что давайте пройдем через них всех по одному:

  • width: 600px; — заставляет тело быть всегда 600 пикселей в ширину.
  • margin: 0 auto; — когда вы устанавливаете два значения для таких свойств как margin или padding , первое значение элемента влияет на верхнюю и нижнюю сторону (делает их 0 в данном случае), и второе значение на левую и правую сторону (здесь, auto является особым значением, которое делит доступное пространство по горизонтали поровну слева и справа). Вы также можете использовать один, три или четыре значения, как описано здесь.
  • background-color: #FF9500; — как и прежде, устанавливает цвет фона элемента. Я использовал красновато-оранжевый для тела, в отличие от темно-синего цвета для представляет собой корень (элемент верхнего уровня) HTML-документа, поэтому его так же называют корневым элементом. Все другие элементы должны быть потомками этого элемента (должны находиться внутри него).»> элемента, но не стесняйтесь и эксперементируйте.
  • padding: 0 20px 20px 20px; — у нас есть четыре значения, установленные для padding, чтобы сделать немного пространства вокруг нашего контента. В этот раз мы не устанавливаем padding на верхней части тела, но делаем 20 пикселей слева, снизу и справа. Значения устанавливаются сверху, справа, снизу, слева, в таком порядке.
  • border: 5px solid black; — просто устанавливает сплошную черную рамку шириной 5 пикселей со всех сторон тела.

Позиционирование и стилизация нашего заголовка главной страницы

Вы, возможно, заметили, что есть ужасный разрыв в верхней части тела. Это происходит, потому что браузеры применяют некоторый стиль по умолчанию для элемента

Затем мы установили заголовку верхний и нижний padding на 20 пикселей, и сделали текст заголовка того же цвета, как и цвет фона html.

Здесь, мы использовали одно довольно интересное свойство — это text-shadow , которое применяет тень к текстовому контенту элемента. Оно имеет следующие четыре значения:

  • Первое значение пикселей задает горизонтальное смещение тени от текста — как далеко она движется поперек: отрицательное значение должно двигать ее влево.
  • Второе значение пикселей задает вертикальное смещение тени от текста — как далеко она движется вниз, в этом примере: отрицательное значение должно переместить ее вверх.
  • Третье значение пикселей задает радиус размытия тени — большее значение будет означать более размытую тень.
  • Четвертое значение задает основной цвет тени.

И вновь попробуйте поэкспериментировать с различными значениями, чтобы посмотреть, что вы можете придумать.

Центрирование изображения

В заключение, мы отцентрируем изображение, чтобы оно лучше выглядело. Мы можем использовать margin: 0 auto уловку снова, как мы это делали раньше для body, но мы также должны сделать кое-что еще. Элемент представляет собой контент (содержимое) документа HTML. В документе может быть только один элемент .»> является блочным, это значит, что он занимает место на странице и может иметь margin и другие значения отступов, применяемых к нему. Изображения, наоборот, являются строчными элементами, то есть они этого не могут. Таким образом, чтобы применить margin к изображению, мы должны дать изображению блочное поведение с помощью display: block; .

Примечание: Не стоит беспокоиться, если вы еще не понимаете display: block; и различия между блочным/строчным. Вы поймете, когда будете изучать CSS более подробно. Вы можете узнать больше о различных доступных значениях display на нашей странице о свойстве display.

Заключение

Если вы следовали всем инструкциям в этой статье, вы должны получить страницу, которая выглядит примерно так (вы также можете посмотреть нашу версию здесь):

Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на Github.

Здесь мы узнали только самую поверхность CSS. Чтобы узнать больше, перейдите на нашу страницу изучения CSS.

Существует ли ресурс для проверки поддержки CSS-свойств в браузерах по загруженному CSS-файлу?

Доброго времени суток!
Собственно интересует такой вопрос. Предположим, что у меня есть мною написанный CSS-файл. Я хочу «скормить» его какому-нибудь сервису и на выходе получить:
1) валидность по W3C самого файла;
2) поддержку браузерами этого файла (например, если используется transform, то поддержка идет с такого-то семейства IE и т.д.)
3) приведенный в соответствие с загруженным стайл-гайдом код

Да, звучит фантастично, но ведь вполне осуществимо? Может, кто-то уже такое придумал и все этим пользуются?

Основы CSS — Руководство для самых маленьких

Приветствую, дорогие друзья! В этом уроке вы узнаете что такое CSS, для чего нужен и как его правильно использовать. Это базовый урок из серии «Для самых маленьких», в котором я постараюсь объяснить наиболее понятным языком основы стилизации документов посредством CSS — Каскадных таблиц стилей (Cascading Style Sheets).

Часть 1. Основы CSS

Данный урок является логическим продолжением урока «Основы HTML для начинающих», в котором я подробно объяснял, что такое язык разметки HTML, как он устроен и работает, базовые теги и правила верстки. В данном же уроке мы затронем стилизацию документа, созданного с использованием языка разметки, т.е. придание определенной формы, определенного цвета, последовательности, размеров различных элементов и текста на странице, рассмотрим наиболее эффективные приемы работы с каскадными таблицами стилей. Поняв основы, вы сможете самостоятельно правильно и эффективно стилизовать HTML документы.

Обращаю ваше внимание, что в данном руководстве мы будем рассматривать CSS только в контексте использования с HTML документами в веб-браузере. С помощью CSS можно стилизовать и другие документы, использующие различные языки разметки. Например, стилизовать XML в Android приложениях, SVG или различные Desktop Environment в Unix-подобных операционных системах.

Вообще, CSS довольно элементарный формальный язык, который придумали для описания внешнего вида документов. Это говорит о том, что он довольно прост и состоит из самобытных примитивных конструкций, которые не так сложны для изучения. Самое сложное не синтаксис, не правила написания конструкций, а огромное количество CSS свойств для запоминания, которые выполняют различные задачи. Благо, все правила англоязычные с соответствующей смысловой нагрузкой. Простой перевод на наш язык дает понятие о том, что это правило делает и наоборот — при переводе того, что мы хотим добиться определенным свойством на английский язык, велика вероятность того, что мы получим правильное свойство. Это значительно упрощает запоминание CSS правил на интуитивном уровне. Например, если нужно задать фоновый цвет достаточно сделать перевод на английский, в результате чего получаем background-color (отдельные слова в CSS пишутся через дефис).

1.1 Использование CSS в HTML документах

CSS довольно просто использовать в HTML документах. Его можно:

Подключить как внешний CSS файл к документу. Для этого достаточно прописать тег
в теге . Это наиболее распространенный способ подключения таблиц стилей к документу, когда внешнее оформление страниц выносится в отдельный внешний CSS файл.

Прописать стили в самом документе, используя тег

Инлайновое использование CSS свойств в конкретных тегах с помощью атрибута style.

Такой способ внутренней стилизации используется очень редко в особых случаях, когда необходимо: А. Вывести из админ. панели сайта параметры для конкретных тегов; Б. Сделать динамическую стилизацию элементов посредством JavaScript.

Пример инлайнового вывода фонового изображения секции из админ. панели сайта:

Вывод $bgi_option — простой пример, показывающий что значение свойства задается в админке сайта.

1.2 CSS синтаксис

Как я уже говорил ранее, CSS имеет довольно простой синтаксис. Давайте разберем его.

Правила объявлений настолько просты, что их можно описать в одном предложении. Сначала пишется селектор, который выбирает конкретный элемент на странице, после фигурных скобок пишутся свойства со значениями после двоеточия, а сами свойства отделяются друг от друга точкой с запятой. Это всё.

Просто, не правда ли?

Самое сложное в CSS объявлении — селектор. Подробнее узнать о том, как формируются и как используются селекторы вы можете в уроке Все CSS селекторы в одном уроке — это очень важная тема, так как здесь раскрывается вся магия выборки элементов на странице, рекомендую посмотреть этот урок в обязательном порядке всем новичкам.

Вкратце CSS селектор — (от слова select — выбирать) — это конструкция, с которой начинается каждый блок объявлений и которая служит для выборки элемента или однотипных элементов на странице для дальнейшей стилизации. Чаще всего в качестве селектора используется определенный класс тега, например:

Здесь селектором выступает класс my-class тега div, который получает необходимое оформление в CSS файле. В данном случае фоновый цвет — серый. Соответственно, если на странице есть несколько тегов (не только div) с классом my-class, все эти элементы получат одинаковое оформление — серый фон цвета #999.

1.3 Каскадирование, наследование и приоритет

Понять принцип каскадирования несложно. Давайте взглянем на пример:

Из примера мы видим, что в CSS написан каскад, в котором класс .parent стоит на первом месте, после него через пробел указан дочерний класс .children, который отвечает уже за стилизацию только дочернего элемента. Дочерний тег обязательно должен быть вложен в тег с классом .parent. Если в HTML документе мы вынесем тег .children из тега div с классом .parent, он потеряет свое оформление, так как каскад уже не будет работать, структура нарушена.

Что мы получим в результате нашего примера. Тег с классом .children получит цвет текста #666, так как имеет более длинный каскад, а .parent покрасится в цвет #999. Родительский класс будет иметь внутренние отступы 10px, в то время, как дочерний этих отступов иметь не будет, так как свойство padding не распространяется на дочерние элементы. Однако если мы уберем color: #666; у селектора .parent .children, то его текст покрасится в цвет родителя color: #999;

Каскадирование и наследование позволяют стилизовать конкретные элементы на странице и определять приоритет применяемых стилей. Давайте рассмотрим иерархию приоритетов.

  1. Самым высоким приоритетом обладают свойства, в конце объявления которых указана конструкция !important. Не важно, какую вложенность имеет селектор, каким образом используются стили — инлайново или подключением внешнего файла, у них будет наибольший приоритет. Я крайне не рекомендую использовать !important при стилизации, так как в процессе поддержки или даже в процессе разработки в дальнейшем обязательно возникнет путаница, которую спасет только рефакторинг стилей. Как показывает практика, всегда есть способ не использовать !important.
    Пример использования !important:
  2. Следующим по значимости приоритетом обладают инлайновые стили, прописанные в самом теге через атрибут style, которые мы рассмотрели ранее:
  3. Стили, заданные в теге style в самом документе имеют меньший приоритет;
  4. Ещё меньшим приоритетом обладают стили, подключенные к документу как внешний CSS файл посредством тега
  5. Самый низкий приоритет, окромя стандартных стилей браузера имеют стили родительских селекторов перед дочерними, например:
    В результате тег

, находящийся в теге с классом .my-class получит значение свойства margin: 15px.

Стоит также отметить, что количество классов или идентификаторов, а также наличие дополнительных псевдоклассов и конструкций в селекторе повышают приоритет для стилизации:

И т.д. по логической цепочке.

И в завершение по приоритетам важно отметить, что стили, идущие в последующих объявлениях ниже по документу также имеют наибольший приоритет. Например:

В результате последний селектор в потоке документа получит значение свойства margin: 15px, так как является наиболее приоритетным. Однако если бы селектор первого объявления был длиннее, значния его свойств несомненно бы превалировали.

Что касается наследования, здесь всё просто. Все дочерние элементы наследуют некоторые свойства родителя. Какие именно свойства наследуются предстоит выяснить вам в процессе изучения различных свойств и применении их на практике. Например, цвет текста всегда наследуется потомками, а отступы — нет.

Часть 2. CSS свойства

Я думаю нет смысла перечислять все CSS свойства, так как их очень много и практичней обратиться к справочнику всех CSS свойств. Я рекомендую изучить CSS свойства в справочнике на HTMLBook.

Однако рассмотрим 10 самых используемых CSS свойств в верстке. Я взял 10 больших CSS файлов из своих проектов и отсортировал свойства по частоте использования.

CSS Свойство

Частота использования

Описание

color 960 раз Цвет текста элемента: background-color 755 раз Цвет фона элемента: font-size 524 раза Размер шрифта: opacity 435 раз Уровень прозрачности элемента: padding 372 раза Размер полей внутри элемента: width 356 раз Ширина блочного элемента, не включая размеры границ и полей: margin 311 раз Внешние отступы элемента: height 305 раз Высота блочного элемента, не включая размеры границ и полей: font-weight 280 раз Насыщенность шрифта: text-align 245 раз Горизонтальное выравнивание текста:

Часть 3. Медиа-запросы

Медиа-запросы в CSS — это база для создания отзывчивой верстки, позволяющая стилизовать элементы в зависимости от размера экрана или устройства, на котором отображается веб-сайт. Технически Медиа-запрос — это простое логическое выражение, которое может быть или истинным или ложным. Условиями для такого выражения являются либо параметры устройства, на котором отображается веб-страница, либо размер экрана в пикселах.

В данном руководстве мы рассмотрим базовые возможности медиа-запросов, которые необходимы для адаптивной верстки сайтов и практически полезны.

Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media. Структура медиа запроса довольно проста:

Условием может выступать либо устройство — all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.

Наиболее часто используемые медиа-функции определяют именно максимальное и минимальное разрешение экрана устройства:

Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом .my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.

Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И), not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы). Нет логического оператора or (ИЛИ), его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.

Размещение свойств в медиа-запросе не дает никакого приоритета, поэтому логичней размещать медиа-запросы в конце CSS документа, либо загружать тегом link внешний CSS файл с медиа-запросами после загрузки основных стилей сайта для правильного переопределения последних на разных разрешениях или на различных устройствах.

Часть 4. Рекомендации

Ну и конечно-же мои рекомендации. За всю практику верстки у меня накопились некоторые правила, которыми я с радостью поделюсь.

  1. Старайтесь использовать только внешние подключаемые CSS файлы. Внутреннюю стилизацию применяйте только если это необходимо для корректного функционирования веб-сайта;
  2. Старайтесь стилизовать только классы. Не стилизуйте идентификаторы (задаются через >

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Создание современного интернет-магазина от А до Я

Я — фрилансер! — Руководство успешного фрилансера

Google PageSpeed Insights: «Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы»

В этой статье я расскажу, что означает рекомендация удалить блокирующие скрипты и стили и как её выполнить.

Это одна из наиболее распространенных проблем, которую я встречаю, анализируя веб-сайты. Решение данной задачи — один из самых сложных моментов при оптимизации скорости загрузки страницы, поскольку требует глубоких технических знаний.

Хочу обратить внимание – каждый сайт индивидуален. И если для одного сайта некоторые решения будут полезны, то для другого могут оказать негативное влияние.

Суть проблемы

Данное предупреждение срабатывает, когда в коде документа между тегами … обнаружены ссылки на внешние файлы javascript и css. И пока они не будут загружены, дальнейший рендеринг страницы не будет выполняться. Таким образом они блокируют вывод контента на странице.

Как удалить JavaScript, препятствующий отображению верхней части страницы

Большинство рекомендаций в Интернете сводятся к тому, чтобы перенести все скрипты в подвал сайта. Однако не стоит слепо выполнять эту рекомендацию — есть большая вероятность того, что функционал сайта будет нарушен:

    Для начала мы должны убедиться, что JavaScript не участвует в процессе отображения страницы. Скрипты небольшого размера размещаем в самом содержимом HTML страницы. Например: Проверяем скрипты на зависимости и очередность загрузки. Если ни того, ни другого не имеется, то добавляем к ним атрибут «async»:
  • Благодаря этому атрибуту такие скрипты будут загружаться асинхронно.

Данную инструкцию нельзя применять к библиотеке JQuery, которая используется в подавляющем большинстве сайтов. Далее рассмотрим правильное решение для JQuery.

CSS: статьи и примеры верстки на css

Каскадные таблицы стилей (англ. Cascading Style Sheets или сокращенно CSS) — специальный язык, который используется для отображения страниц, написанных языками разметки данных. Наиболее часто CSS используют для визуальной презентации страниц, написанных HTML и XHTML, но формат CSS может использоваться к другим видам XML-документов.

CSS – язык для создания стилей, его должен знать каждый кто создает веб сайты или только учится это делать. Мы рассмотрим основы грамотного составления css документов а также предложим необходимые материалы для облегчения вашей работы и экономии драгоценного времени.

  • Материалы:
  • Все
  • Статьи
  • Видео
  • Книги
  • Софт
  • Уроки

Стремительно развивающиеся технологии заставляют нас идти в ногу со временем. Если раньше дизайн создавался на чистом HTML и CSS коде, то сегодня время библиотек кода.

Многие фронт энд разработчики, которые ценят свое время, давно уже используют шаблонизаторы, сетчастые структуры, SESS, LESS, Bootstrap и другие решения. Это правильно, зачем усложнять себе жизнь, когда есть готовые коллекции и реализации задач.

Сегодня мы рассмотрим, как просто можно создавать блочные сетки на bootstrap 3.0. Хотя с уверенностью могу сказать, через пол года, нужно будет вникать в новую 4 версию бутстрапа.

При написании CSS кода возникает проблема медленного ранжирования в старых браузерах и компьютерах. Сегодня мы рассмотрим способы написания кода, который будет потреблять меньше пользовательский ресурсов и ранжироваться быстрее.

Мы объединим все идеи и рекомендации существующие на данный момент, после чего обсудим детальнее каждую из них.

Сегодня, практически в каждом дизайне сайта присутствует красивая background картинка.

Каждый верстальщик знает, что самый простой способ создания дизайна – лучшее, что может быть. Одним из простых и удобных техник является растягивание background на весь экран, с помощью нескольких строк css кода.

Казалось бы, мелочь, но все же, порой нужно сотворить что-то сложное простым способом. Например, реализовать несколько background с индивидуальными параметрами, без использования вспомогательных div блоков. То есть, сохраняя семантическую верстку.

В этой статье мы рассмотрим синтаксис кода, который поддерживает несколько background (multiple backgrounds) в одном элементе.

Действительно приходиться много труда приложить, чтобы достичь одного вида странички во всех браузерах. Вам не придется изобретать колесо каждый раз, если вы воспользуетесь этой подборкой кроссбраузерного HTML + CSS кода. Надеемся наш труд был не напрасен, а для вас будет полезен.

Цель данной статьи собрать полезные решения на HTML и CSS коде, соответственно кроссбраузерности. То есть, эти примеры кода будут отображаться во всех браузерах одинаково.

Я уверен, вы уже знакомы с css свойством border. Узнаете ли вы что-то новое, чего не знали раньше о css border? Что же, не только узнаете, но и увидите несколько новых вещей, которых вы никогда не знали прежде!

Не только CSS3 можно использовать для закругления уголков, но и чистый CSS код подойдет для создания сложных форм. Раньше вы могли использовать background-image, для создания впечатления закругленных уголков. Благодаря новым техникам использования border, мы можем сделать это на чистом css коде.

Сегодня мы будем создавать простое горизонтальное меню с помощью CSS. Для начала мы создадим скелет меню на HTML, и усвоим главные навыки создания горизонтальных меню. После чего мы придадим красивый вид для меню, используя CSS. Как известно, корифеи верстки, предпочитают семантику, от которой мы постараемся не отступать.

В данном видео, будет подробно рассказано и показано как с помощью CSS делается горизонтальное меню, используя спрайты. Видео является пошаговой инструкцией создания горизонтального меню на css.

Книга «CSS: 100 и 1 совет» будет интересна для веб-дизайнеров и разработчиков, у которых нет времени на штудирование огромного количества теоретических материалов при создании собственного сайта. Это сборник готовых решений наиболее распространенных проблем, которые можно сразу применить на практике; более того, они могут послужить основой для разработки собственных методов.

Редко можно увидеть на сайте горизонтальные меню, которые ведут себя которые при наведении мыши выпадают, но они очень красивы и функциональны. Или как принято говорить – юзабильные. Сегодня мы создадим юзабильное выпадающее горизонтальное меню на чистом css коде. Часто замечал, что люди используют javascript, для достижения данного эффекта. На самом деле, все можно сделать только на CSS.

Пользовательский интерфейс должен быть понятным и практичным. При использовании фотографий или картинок в контенте сайта, приходиться их уменьшать, чтобы они красиво выглядели в теле страницы. Но уменьшив изображение, нужно также дать понять пользователю, что оно может увеличиваться. Для этого используется наложение одной картинки на другую картинку. Сегодня мы реализуем наложение иконки увеличения на картинку с помощью CSS.

CSS от А до Я: решение распространенных проблем в CSS

Позиционирование в CSS кажется довольно простым. Указываете какой блок и где должен находиться. Однако всё не так просто, как кажется на первый взгляд. Есть несколько моментов, которые могут запутать новичков. Вы сможете извлечь из позиционирования гораздо больше пользы, если детально разберётесь как оно работает.

Box-модель в CSS и типы позиционирования.

Прежде чем приступить, советую вам прочитать статью Box-модель в CSS. В двух словах: каждый элемент в html — это прямоугольник, для которого можно указать величины внутренних и внешних отступов, а также границу, которая разделяет их.

Схемы позиционирования определяют где должен располагаться этот прямоугольник, а также как он должен влиять на элементы вокруг себя.

Свойство position в CSS может принимать пять значений:

Значение static используется по умолчанию. Любой элемент с позиционированием static находится в общем потоке документа. Правила для его размещения определяются Box-моделью. Для таких элементов, свойства top, right, bottom и left будут игнорироваться. Для того, чтобы использовать эти свойства, позиционирование элемента должно быть абсолютным (absolute), относительным (relative) или фиксированным (fixed).

Значение inherit, как и во всех остальных свойствах CSS, используется для того, чтобы элемент использовал тоже самое значение, что и родительский элемент.

Абсолютное позиционирование

Абсолютное позиционирование удаляет элемент из общего потока документа. Что касается элементов вокруг, то в этом случае они просто игнорируют искомый, как будто ему установлено свойство display: none;. Если вы не хотите чтобы пространство для такого элемента заполнялось другими элементами, то вам надо придумать другой подход.

Вы устанавливаете расположение элемента с абсолютным позиционированием, используя свойства top, left, right и bottom. Вам достаточно указать два из них, top или bottom и left или right. Если ни одного свойства не указано, то устанавливается 0 для пары top-left.

Ключевой момент в абсолютном позиционировании — это понимание того, что является точкой отсчёта. Если свойству top указано значение 20px, то откуда их необходимо отсчитывать.

Ответ прост: такие элементы позиционируются относительно ближайшего родительского элемента, для которого задано позиционирование отличное от static. Если такого элемента нет, то элемент позиционируется относительно основного документа. То есть при установки абсолютного позиционирования, CSS сообщает браузеру, чтобы он посмотрел на родительский элемент и, если его позиционирование не статическое, то надо выровнять текущий элемент относительно него.

Относительное позиционирование.

Относительно позиционированные элементы, размещаются на основе своей же позиции, обычный сдвиг относительно своего нормального расположения. Это похоже на то, как если бы вы добавили элементу внешние отступы с помощью свойства margin. Однако есть одно существенное различие: соседние элементы, в случае использования позиционирования, не учитывают этот сдвиг.

Представьте себе это так: некое изображение сдвигается, а на его месте остаётся «призрак», все элементы располагаются относительно этого «призрака». Это позволяет нам накладывать элементы друг на друга.

Таким образом, элементы с относительным позиционированием, взяты из нормального потока элемента, но по-прежнему оказывают влияние на расположение соседних элементов, которые ведут себя так, что исходный элемент всё ещё находится в потоке документа.

В этом случае мы не должны задавать вопрос относительно чего здесь позиционируется элемент. Ответ всегда: нормальный поток документа. Очень похоже на то, что вы добавили внешний отступ к элементу, но в то же время не повлияли на соседние элементы.

Фиксированное позиционирование

Фиксированное позиционирование действует подобно абсолютному, с небольшими различиями.

Во-первых, элемент с фиксированным позиционированием всегда располагается относительно окна браузера, родительские элементы при этом игнорируются.

Второе отличие исходит из его названия. Фиксированные элементы зафиксированы на странице. Они не смещаются при её прокручивании.

Z-index

Страница сайта двумерна. У неё есть ширина и высота. Z-index добавляет третье измерение, глубину.

Чем выше этот индекс тем выше на странице расположен элемент. С помощью него мы можем добиться чтобы один элемент располагался поверх другого. По умолчанию, его значение — ноль. Отрицательные значения также допустимы.

На самом деле, z-index гораздо сложнее, чем я его здесь описываю, но это тема для отдельной статьи. Сейчас, главное запомнить саму идею третьего измерения и то, что только позиционируемые элементы могут использовать это свойство.

Проблемы позиционирования.

Рассмотрим несколько общих проблем, связанных с позиционированием, а также несколько слов об их решении.

    Вы не можете одновременно использовать свойство position и свойство float для одного и того же элемента. Оба эти свойства влияют на позицию элемента, поэтому использоваться будет свойство, указанное последним.

Одновременно можно использовать position:relative и float.

Когда одновременно указывается position:absolute и float, то применяется не последнее указанное свойство. В этом случае, независимо от порядка следования этих стилей, применяется position:absolute, а итоговое (или вычисленное) значение свойства float устанавливается в none, независимо от начального значения, т.е. игнорируется.

В IE6 и IE7 есть ещё одна проблема с z-index-ом. IE смотрит на родительский элемент для определения в какой группе элементов находится вершина стека, остальные браузеры используют глобальный контекст. Например:

Мы ожидаем, что параграф будет находиться выше, чем изображение, поскольку его z-index больше. Однако IE6 и IE7 располагают выше картинку, поскольку они находятся в разных стеках документа. Один стек для div, второй для img, а у картинки z-index выше, чем у div-а.

Заключение

Свойство position устанавливает поведение расположения элемента в соответствии с одной из схем позиционирования. Доступные значения свойства: absolute, relative, fixed, static (по умолчанию) и inherit.

Схемы позиционирования определяют правила размещения элемента на web-странице, а также влияние на расположение соседних элементов.

Свойство z-index может быть применено только для элементов с установленным свойством position. Оно добавляет третье измерение на странице и устанавливает порядок стека элементов.

Свойство position кажется лёгким для восприятия, но работает немного иначе, чем кажется с первого взгляда. Зачастую разработчики думают что им необходимо относительное позиционирование, хотя скорее всего надо использовать абсолютное. В основном при вёрстке используется свойство float, а свойство position необходимо для элементов, которые вы хотите «вырвать» из общего потока документа.

Заключение. Рекомендации по CSS

Заключительный урок нашего учебника по CSS мы хотели бы посвятить рекомендациям по организации работы с таблицами стилей. Вы уже хорошо знаете, как стилизовать элементы веб-страницы, однако профессионала отличает не только умение писать стили, но и навыки ведения и оформления самих CSS-файлов. Как быстро можно разобраться в вашей работе? Легко ли использовать и поддерживать ваш код? Давайте рассмотрим основные моменты, которых важно придерживаться веб-разработчикам.

Комментирование кода

Когда вам (или другому разработчику) приходится обращаться к CSS-таблице через продолжительное время (месяц, полгода, год и т. п.), то при взгляде на код может возникнуть вопрос: «К чему он относится? Каково его действие?». Чтобы таких вопросов не возникало либо возникало меньше, необходимо добавлять комментарии к коду. Конечно, не нужно комментировать, что делает каждое свойство. Однако описательный комментарий будет уместным, например, возле кода CSS-анимации, при взгляде на который можно не сразу понять, что он делает.

Согласитесь, небольшой комментарий способен сильно изменить картину в лучшую сторону: без него можно было бы долго гадать, что делает эта анимация и где она применяется.

Понятные имена для селекторов

У профессионала должен быть развит такой навык как умение давать хорошие имена селекторам. Как правильно придумывать названия? Первый совет: не называйте селектор, исходя из цвета или местоположения элемента. Это те вещи, которые с высокой долей вероятности могут быть изменены в ходе доработки дизайна. Клиент может прислать правки, где попросит сделать кнопку не зеленой, а голубой, и если вы уже назвали класс .green-button , возникнут проблемы: придется либо везде менять .green-button на .blue-button , либо оставить всё как есть, но потом это будет вводить вас (или другого разработчика) в заблуждение. То же самое касается привязки к местоположению: элемент .left-block вскоре может стать элементом .right-block , потому что дизайнер или заказчик так захотел. И вновь вы столкнетесь с проблемой несоответствия имени.

Так как же называть селекторы? Более правильным будет давать такие имена, которые указывают на назначение элемента либо действие стиля. Например, кнопка отмены может называться .cancel-button , форма для обратного звонка — .callback-form , всплывающее окно — .popup-window и так далее. Если вы создаете класс для выравнивания текста по центру, то будет уместным назвать его как-то вроде .text-center :

Также не стоит давать селекторам бессмысленные имена вроде #b1 , .sb , .abc и т. п., поскольку потом ни вы, ни другие разработчики не сможете понять, что же означают эти загадочные названия.

Несколько классов для одного элемента

Может возникнуть ситуация, когда у вас есть набор элементов с почти одинаковыми стилями, которые отличаются лишь одной-двумя строками. К примеру, представьте, что вам нужно создать кнопку .button и использовать ее на странице три раза. Стиль всех кнопок идентичен:

Однако первая кнопка должна быть выровнена по левому краю, вторая — по центру, а третья — по правому краю. Как это сделать? Самое очевидное решение — создать дополнительные классы специально для выравнивания блочного элемента:

По сути, класс .block-left можно и не создавать, поскольку наша кнопка по умолчанию примыкает к левому краю. Итак, нужный класс теперь можно использовать в паре с классом .button :

К элементу будут применяться стили сразу от двух классов, и если вам вдруг понадобится изменить выравнивание кнопки, вы можете просто переписать класс на другой.

Группирование стилей

Если ваша таблица стилей содержит всего десяток правил, то проблем с ее восприятием не возникнет. Но в реальной жизни даже совсем небольшой проект может иметь более 500 строк CSS-кода. И если вы будете записывать все правила подряд, без разбивки на группы, вы очень скоро запутаетесь в своей же работе. Отыскать нужное правило будет сложно, поддержка такой CSS-таблицы превратится в мучение.

Если вы проходили практические уроки данного учебника, то помните, что мы делили таблицу стилей на разделы при помощи комментариев и говорили вам записывать стили в соответствующую группу.

Железных правил относительно организации групп в CSS-файле не существует. Однако есть несколько популярных приемов, которые помогут удобно сгруппировать стили:

Группируйте стили, которые относятся к определенной секции страницы. Например, стили для шапки сайта помещайте в одну группу, стили для футера — в другую, стили для навигации — в третью и т. д.

Группируйте стили, относящиеся к одной задаче. К примеру, стили для разметки размещайте в одной группе, стили для форматирования — в другой и т. д.

Для выделения групп используйте обычные CSS-комментарии. Это общепринятый способ создания разделов в таблицах стилей. Комментарии старайтесь оформлять так, чтобы они были хорошо заметны. Например:

Вы можете придумать другой удобный для себя вариант оформления комментариев, главное, следите за тем, чтобы комментарий начинался с символов /* и заканчивался символами */ , и между ними не было такой же комбинации символов (во избежание ошибок).

Несколько CSS-таблиц

Когда таблица стилей расширяется до огромных размеров, становится неудобно искать и редактировать в ней стили. В этом случае удобным решением может стать разделение одной CSS-таблицы на несколько файлов. Безусловно, здесь нужно иметь чувство меры: не стоит создавать 20-40 штук файлов со стилями для каждой секции сайта (это сильно загрузит веб-сервер), однако будет разумным разъединить большие группы стилей. Например, вы можете поместить код разметки в файл layout.css , основные стили — в main.css , медиа-запросы — в media.css и т. д.

Затем понадобится подключить все эти файлы к HTML. Можно добавить каждый файл по отдельности через тег
, но есть способ получше: создайте отдельную внешнюю таблицу стилей (скажем, styles.css ), внутри которой используйте правило @import для подключения всех остальных таблиц стилей:

В принципе, это весь код, который должна содержать таблица styles.css . Подключите ее к HTML-документу (другие таблицы подключать этим образом не нужно):

Теперь, когда веб-страница будет загружаться, браузер загрузит файл styles.css , который, в свою очередь, скажет браузеру загрузить три остальные таблицы стилей.

Препроцессоры CSS

Если вы стремитесь к быстрому и эффективному написанию CSS-кода, обратите внимание на препроцессоры CSS. Препроцессор позволяет писать CSS-стили по определенным облегченным правилам, после чего этот код преобразуется в обычный CSS, который вы разместите на сервере.

Среди преимуществ препроцессоров стоит выделить:

Переменные CSS. С помощью препроцессора вы можете определять CSS-переменные, которые хранят нужные значения. Например, если вам необходимо использовать определенный цвет для многих элементов сайта, вы указываете этот цвет в формате HEX каждый раз для каждого элемента. Если потом понадобится изменить этот цвет на другой, вам придется проходиться по всем стилям, где он используется. Переменная CSS позволяет указать этот цвет один раз, в начале таблицы стилей. Если затем вам придется менять этот цвет, вы просто поменяете значение в переменной.

Добавление префиксов. В нашем учебнике мы не раз упоминали о необходимости дописывать префиксы производителей к некоторым свойствам. Препроцессор CSS избавит вас от необходимости делать это и добавит все необходимые вендорные префиксы сам.

Объединение CSS-файлов. При разработке удобно хранить CSS-стили разного назначения в отдельных файлах. Но при загрузке нескольких таблиц стилей увеличивается количество обращений к веб-серверу. И когда идет борьба за каждую миллисекунду в скорости загрузки сайта, может понадобиться объединить все CSS-таблицы в один большой файл. Препроцессор позволяет держать ваш код CSS в разных файлах для удобства разработки, а в качестве финального файла, который будет размещен на сервере, объединить все стили в одну внешнюю таблицу. Он также уберет из конечного файла все лишнее, включая комментарии.

Самые распространенные препроцессоры

, а на другой — тег

Существуют и другие модели организации кода: BEM, SMACSS, Atomic CSS и т. д. У каждого из этих подходов есть свои преимущества и недостатки. Какой из них выбрать — решать вам как разработчику, опираясь на собственный опыт и предпочтения. Кроме того, ничто не мешает вам выработать свой способ организации CSS. Быть может, именно придуманный вами вариант позволит веб-разработке подняться на новый уровень!

Завершение

Итак, наш учебник подошел к своему завершению. Поздравляем вас с окончанием обучения и благодарим каждого нашего читателя за то, что выбрали нас в качестве отправной точки в изучении языка CSS. Вы всегда можете обратиться к учебнику за подсказками, а также воспользоваться поиском по сайту, чтобы быстро найти определенную информацию.

Топ-пост этого месяца:  Google «устал» от спама в комментариях вебмастеров
Добавить комментарий