5 полезных CSS советов


Содержание

Очередной блог фрилансера

коротко и полезно о веб-разработке

23 полезных CSS-приема для разработчика

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

Далее приведен список из двадцати трех различных CSS-приемов, которые будут полезны как начинающим, так и опытным разработчикам.

Прячем текст с помощью абзаца

Такой прием будет весьма полезен для логотипа компании. Чаще всего, в качестве логотипа используется картинка, однако для SEO, было бы неплохо отобразить название компании в тегах h1. Данный пример – самый лучший способ это реализовать. Фактически, мы просто скрываем текст за пределами экрана, и вместо этого назначаем фоновую картинку.

Стилизация ссылок в зависимости от формата файла

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

Удаляем полосы прокрутки многострочного поля в IE

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

Буквица

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

CSS-прозрачность

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

CSS Reset от Эрика Мейера

Фактически, css-reset, предложенный Эриком Мейером, уже стал повсеместным стандартом использования. Поскольку он был адаптирован многими известными разработчиками, вы можете не сомневаться в его качестве.

Предзагрузчик картинок

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

Простой css-спрайт для кнопки

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

Google Font API

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

Хаки для различных браузеров

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

Фиксированный подвал

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

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

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

Clearfix

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

Закругленные углы

С постепенным внедрением CSS3 в современных браузерах, создавать закругленные углы стало очень просто. К сожалению, пока нет поддержки CSS3 в IE, включая восьмую версию, но она будет добавлена в IE9.

Переопределение стилей

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

Font face

Font-face не использовался широко до прошлого года, хотя он известен еще с тех времен, когда IE6 считался современным браузером. Сейчас это свойство неплохо поддерживается современными браузерами и предлагает отличный способ использования небезопасных шрифтов в своих проектах. Чтобы сэкономить время, можно воспользоваться специальным генератором Font Squirrel Font Face.

Центрирование сайта

Распространенный дизайнерский прием – горизонтальное центрирование сайта. Это реализуется очень просто.

Min-height в IE

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

Загрузка картинки

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

Вертикальное центрирование

Это небольшой фрагмент кода, позволит вам вертикально центрировать содержимое контейнера, без использования дополнительной разметки. Вам понадобится просто отобразить контейнер в качестве ячейки таблицы, а затем задать значение атрибуту vertical-align.

Создаем врезы

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

Выделение текста

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

Добавляем разрыв страницы

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

Перевод статьи “25 Incredibly Useful CSS Snippets for Developers”, автор Matthew Corner

Рассказать друзьям

Понравилась статья? Лучший способ сказать спасибо — поделиться ссылкой в социальных сетях:

10 простых и полезных CSS сниппетов

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

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

1. Вертикальное выравнивание чего угодно

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

Используя эту технику, вертикально выровнять можно все, одну линию текста, несколько абзацев или блок с контентом. Это решение работает и поддерживается в разных браузерах. CSS3 Трансформации работают в Chrome4, Opera 10, Safari 3, Firefox 3, и Internet Explorer 9.

2. Растянуть элемент на всю высоту окна. Элемент на 100% высоты окна.

В некоторых случаях, вам может понадобится растянуть элемент по вертикали на всю высоту окна. Обычное изменение размера элемента — даст ему максимум высоту контейнера в котором он находится. Чтобы задать блоку высоту в 100% от всего окна, необходимо убедится что высота самых первых контейнеров html и body равна 100%, то есть высоте окна.

Теперь применяем 100% высоту к нужному нам блоку, вот так:

3. Разное оформление для разных ссылок — на файлы, почту, или разные типы файлов

Иногда у вас есть несколько ссылок, которые вы хотите оформить непохожими на другие ссылки. Чтобы выизуально было лече их различать, какая ссылка ведет на внешний сайт, какая откроет email для отправки письма, а какая используется для скачивания файлов. Этот сниппет добавит иконку перед текстом ссылки, и иконка будет разная, в завсимости от того н что ссылается ссылка (на сайт, почту или файл).

Вот как это будет выглядеть:

4. Сделать изображения черно-белыми

Обесцвечивание изображений в черно-белые цвета может помочь сделать ваш сайт более стильным и материалистичным. Это можно сделать применив черно-белый фильтр используя SVG. Вот что мы сделаем чтобы применить черно-белый тон:

Чтобы сделать это решение кросс-браузерным, добавим CSS свойство filter :

5. Градиентный фон и его анимация

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

6. Автоматическая ширина колонок в таблице с помощью CSS

Таблицы это головная боль, особенно когда это касается ширины колонок. Однако, есть решение которое нам поможет. Добавив white-space: nowrap для каждой td ячейки мы легко поправим то как таблица оборачивает текст внутри .

Посмотрите демо и сравните результат.

7. Box Shadow только с одной или двух сторон

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

8. Обертка для блока с длинным текстовым контентом

Чтобы понять, зачем это нужно лучше срау посмотреть на пример. Допустим у нс есть кнтейнер, шириной в 200px. И в нем кроме обычных слов есть длинная ссылка на сайт. Наверняка вы знаете что длинные слова или в данном случае ссылка — не будут разбиваться на переносы. Таким образом контент вылезет за пределы блока.

Исправить этот баг нам поможет простой CSS сниппет, который подгонит текст под размеры контейнера.

Вот как теперь будет выглядеть данный текст в контейнере:

9. Сделать «размытый» текст

Хотиете добавить эффект размытия к тексту? Это можно достичь сделав текст прозрачным, и добавив к нему CSS свойство text-shadow вот так:

«Размытый» текст готов!

See the Pen Blurry Text by Yurij Rightblog.ru (@rightblog) on CodePen.18493

10. Анимация для многоточия, используя только CSS анимацию


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

Давайте посмотрим демо:

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

Gtalk.kz

20 невероятно полезных css сниппетов

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

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

Сброс стилей от html5doctor.com специально для на html5.

Подробнее о файле сброса стиле можно почитать в статье Урок 5.1 Сброс стилей: reset.css

Clear хак – удаление обтекания блоков

Согласованный и предсказуемый размер шрифта в Rem (единица размера шрифта в css3)

Полный стиль для @face-font

Хак для IE6-8

Хаки для каждого браузера Ie с 6 версии до 8 :).

Кроссбраузерная прозрачность

Удаление контура вокруг ссылок для webkit браузеров

Кроссбраузерная минимальная высота (min-height)

Аналогично можно поступить с шириной

Краткий стиль селекта font

Заглавная буква

Помните эту первую красивую букву в сказках? Так вот как это можно сделать:

Вертикальное выравнивание по центру

Кроссбраузерный text-shadow (включая IE)

Делайте тень у текста для всех браузеров.

Кроссбраузерный box-shadow (включая IE)

Скрыть текст над картинкой с помощью text-indent

Исправляем баг в IE6-7: двойной отступ

Удалить полосы прокрутки textarea в IE

Изменения стиля выделенному тесту

Стиль для ссылок: внещних, mail и pdf-файлов

Стили для разных девайсов (по ширине экрана)

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

Можно прописать разные стили в отдельные файлы для каждого девайса, например:

Шрифты с помощью Google Font API

Вставьте код между тегами

Используйте стиль шрифта в css

Надеюсь данная статья помогла Вам в освоении и улучшении своих навыков верстки сайта.

Не забудьте поделиться с друзьями ;).

Спонсор статьи : Продвижение и раскрутка сайтов от веб-студии Z-studio.
На десерт сегодня Guitar Hero в парламенте Великобритании :mrgreen:

7 полезных ресурсов для тех, кто изучает CSS

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

Консорциум Всемирной паутины (World Wide Web Consortium, W3C) рекомендовал технологию CSS (Cascading Style Sheets) в 1996 году. С тех пор веб-разработчики используют каскадные таблицы стилей для создания уникального оформления сайтов.

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

Цукерберг рекомендует:  Java - Перенос кода с java на android

Установите расширение Web Developer для Chrome или дополнение Disable CSS для Firefox, чтобы полюбоваться любимыми сайтами без каскадных таблиц стилей.

Изменения будут разительными, хотя и не всегда. Например, новостной агрегатор Drudge Report почти не изменится: он прост как дважды два. Тем не менее ежемесячно ресурс просматривают свыше 150 миллионов раз.

Где научиться тонкостям CSS

1. HTMLbook

Будем последовательны и начнём с крепкой теоретической базы. За ней обратимся к Владу Мержевичу, автору книг и веб-разработчику, который поддерживает несколько качественных ресурсов о вёрстке и стилизации веб-страниц.

На HTMLbook вы найдёте понятный самоучитель и ответы на популярные вопросы о каскадных таблицах стилей. Здесь же представлены обучающие статьи об актуальной третьей спецификации CSS.

2. WebReference

WebReference предлагает алфавитный справочник по CSS. Каждое свойство имеет краткое описание, синтаксис и живой пример. Не стесняйтесь задавать вопросы — авторы проекта выходят на связь и охотно обсуждают детали.

3. CSS Reference

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

4. CSS Design Awards

Обучение — дело долгое и порой скучное. Неплохо бы найти мотивацию, чтобы она помогала в трудные минуты. Вдохновляться будем у других веб-дизайнеров, а точнее на сайте CSS Design Awards. Здесь каждый день представляют качественный проект, который служит образцом того, к чему стоит стремиться. Многие из победителей действительно удивляют. Не забывайте заглядывать и голосовать за понравившихся номинантов.

5. CSS Zen Garden

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

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

6. CSSPlay

Понятное дело, что вам захочется применить нечто эдакое, что привлечёт всеобщее внимание. Не знаем, есть ли такое на CSSPlay, но десятки и сотни любопытных приёмов там точно завалялись.

Скачать код напрямую не получится. Вам придётся залезть в меню разработчиков — такова политика местной партии. При этом подавляющее большинство CSS-стилей можно использовать без разрешения автора.

7. CSS Lint

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

А какие ресурсы о каскадных таблицах стилей можете посоветовать вы?

Немного о CSS для начинающих

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

Один из таких ресурсов – всевозможные вебинары крупных разработчиков и IT-компаний, среди которых, на мой взгляд, особого внимания заслуживает школа разработчиков Яндекса, лекции которой я периодически изучаю и делаю для себя пометки.

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

Существует огромное количество ресурсов, которые стоит изучить и прочитать. В первую очередь, конечно, необходимо читать и изучать основные спецификации (например, здесь https://www.w3.org/Style/CSS ). Тут вам потребуется знание английского языка, с ним гораздо проще понимать и вникать в стандарты как CSS, так и HTML. Хотя там и бывают иногда переведённые отрывки на русском языке, но лучше все же изучать английский. Также в помощь сайт https://www.webplatform.org , куда заливается множество описаний спецификаций, в формате Вики, или же сайт http://stackoverflow.com , где можно задать вопросы знатокам, на которые ответят оперативно, скорее всего, в тот же день. Лично меня не раз выручал сайт htmlbook.ru, который сейчас медленно, но верно переезжает на новый домен https://webref.ru , но это скорее справочник по свойствам и значениям, где тоже, кстати, можно задать вопрос, и обычно ребята там оперативно друг другу подсказывают. И, конечно, этот сайт очень полезен в процессе практики, когда у вас хоть тресни, но что-то не работает — часто помогают, и проблема разрешается. Также довольно мощный ресурс по самостоятельному обучению — https://htmlacademy.ru/ .

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

Также сейчас огромное количество специализированной литературы, обучающей в том числе. Лично я учусь в основном по книгам серии Head First, и самый первый опыт в создании сайта я получила, следуя руководству этого издания www.headfirstlabs.com/books/hfhtml. И уже в качестве дополнения изучала такие книги, как http://www.ozon.ru/context/detail/id/3881079 , http://www.ozon.ru/context/detail/id/24493075 .

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

Теория, это конечно, полезно и без нее ну никуда, но без постоянной практики трудно научиться делать что-то действительно стоящее.

Сейчас есть большое количество таких сайтов, «песочниц». На них приходишь, там есть что-то вроде textarea, куда вводишь свой код, и он моментально отображается на экране. То есть не нужно вбивать все в редакторе, обновлять браузер и так по кругу – правишь-обновляешь. Здесь сразу применяешь свойство и видишь, как оно работает. Примеры сайтов http://cssdesk.com , http://dabblet.com , http://jsbin.com , https://jsfiddle.net – как видно из названия, они предназначены не только для CSS, но и для HTML/JS. Если интересно, о последнем можете почитать здесь https://habrahabr.ru/post/126910 . Кстати, не пренебрегайте Хабром https://habrahabr.ru/interesting , здесь тоже много полезной информации. А таком сайте, как http://codepen.io вы можете поделиться своим кодом другими ( http://www.internet-technologies.ru/articles/article_1663.ht. — вот руководство по последнему, если интересно).

2.2. Браузерные инструменты или свойства разработчика

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

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

2.3. Редакторы кода.

Ну, это наш основной инструмент практики. В общем то, редакторы могут быть любыми. Начиная от банального Notepad+ и заканчивая такими мощными штуками как Sublime Text, DreamViewer, Web Storm. Отчасти, все эти редакторы похожи по принципу работы, главное, чтобы редактор поддерживал подсветку синтаксиса или какие-то сниппеты/автодополнения, которые могут облегчить вам работу. Важно также, чтобы редактор поддерживал автообновление страниц, чтобы сразу видеть изменения в браузере. Имеют механизм «живого обновления» страницы такие приложения, как Live Reload, Code Kit, Grunt. Чтобы определиться, что подходит лично вам для разработки, стоит самим покопаться в многообразии средств и выбрать то, что больше всего удовлетворяет вашим потребностям.

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

Самые известные из них – SASS, LESS, Stylus, Roole. SASS, пожалуй, самый старый из них и распространенный. LESS – самый простой и имеет меньше всего возможностей. Но начинать с препроцессоров, пожалуй, не стоит. Имеет смысл писать чистый CSS, смотреть, как он работает (можно в «песочницах», чтобы не заморачиваться первое время), но позже стоит посмотреть и попробовать препроцессоры и выбрать для себя тот, который вам нравится и подходит вам по задачам.

Существует огромное количество фреймворков, т.е. готовых наборов CSS и HTML, написанных и в том числе с помощью препроцессоров. Например, «бутстрапы» (самый известный из них – Twitter Bootstrap) — наборы уже готовых классов с CSS-свойствами, чтобы быстренько сделать какую-то определенную страничку, которая выглядит нормально и стандартно. При подключении файлов фрэймворков в проекте мы можем использовать определённые в них классы и сниппеты разметки, которые будут работать по уже описанным правилам и иметь установленный внешний вид (например, кнопки, поля ввода, таблицы и пр.). Таким образом мы экономим время, например, на описание расположения блоков дизайна, их размеров в зависимости от разрешения, внешний вид полей формы, кнопок и их состояния. Фреймворков очень много, и начинать с них тоже не советуется, поскольку код в них довольно специфичен и заточен под определенные задачи. Лучше делать свой код и учиться на своих ошибках, нежели копипастить код из готовых фреймворков.

В заключение, подведу итог – читайте специализированные книги, лекции, практикуйте как можно больше, экспериментируйте со свойствами 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. Такая оргнизицая стилей, поможет вам в дальнейшем избежать конфликтов и неразберихи в ваших таблицах стилей!

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

5 полезных CSS советов

Освойте бесплатно наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты.

Дизайн лендинга

Создавайте дизайн любых сайтов — для себя и на заказ!

Цукерберг рекомендует:  Javascript - Помогите с js request.post

Популярное

  • Главная
  • ->
  • Материалы
  • ->
  • 30 CSS-селекторов, о которых полезно помнить

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Бесплатный Курс «Практика HTML5 и CSS3»

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Что нужно знать для создания PHP-сайтов?

Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

Создайте свой сайт за 3 часа и 30 минут.

После просмотра данного видеокурса у Вас на компьютере будет готовый к использованию сайт, который Вы сделали сами.

Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

Изучите основы HTML и CSS менее чем за 4 часа.

После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

Бесплатный курс «Сайт на WordPress»

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Хотите изучить JavaScript, но не знаете, как подступиться?

После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

Развеются мифы о сложности работы с этим языком, и Вы будете готовы изучать JavaScript на более серьезном уровне.

*Наведите курсор мыши для приостановки прокрутки.

30 CSS-селекторов, о которых полезно помнить

Итак, Вы разобрались с основными селекторами: id, class, селекторами потомков. И все? Если да, то Вы теряете очень много в плане гибкости управления внешним видом элементов на странице.

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

1. *

Начнем с простейших вещей для новичков, прежде чем перейдем к продвинутым селекторам.

Символ звездочки позволяет выбрать все элементы на странице. Многие веб-разработчики используют это для «обнуления» всех внешних и внутренних отступов.

Также символ * можно использовать для дочерних элементов объекта.

Этот код нацелен на все элементы, которые являются дочерними по отношению к блоку с идентификатором container.

Совместимость:


* IE6+
* Firefox
* Chrome
* Safari
* Opera

2. #X

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

«Спросите себя: Мне точно необходимо использовать id для какого-то элемента, чтобы сослаться на него?»

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

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

3. .X

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

В противном случае используйте id для нахождения «иголки в стоге сена» и применения стиля только к одному конкретному объекту.

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

4. X Y

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

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

«Совет: Если Ваш селектор похож на X Y Z A B.error, то Вы, вероятно, что-то делаете на так. Всегда спрашивайте себя, действительно ли это самый простой способ»

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

5. X

Что, если Вы хотите сослать на все элементы определенного типа на странице, если у них нет id или классов? Делайте проще, используйте селекторы типа. Если Вам нужно выбрать все неупорядоченные списки, используйте ul<>.

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

6. X:visited и X:link

Здесь мы используем псевдо-класс :link для выбора всех ссылок, на которых еще не был совершен клик.

Также есть псевдо-класс :visited, который, как Вы и ожидали, позволяет нам применить стиль только к тем ссылкам, по которым был совершен клик или переход.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

7. X + Y

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

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

8. X > Y

Различие между X Y и X > Y в том, что последний выберет только прямых потомков. Рассмотрим следующий пример:

Селектор #container > ul выберет только те элементы ul, которые являются прямыми потомками блока div с идентификатором container. Т.е. в данном случае этот селектор не отберет элемент ul, который является потомком первого элемента li.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

Эта комбинация сестринских (сиблинговых) элементов похожа на X + Y, но она менее строгая. Если в случае ul + p будут выбраны только первые элементы p, следующие за ul (т.е. наблюдается смежность в выборе), то рассматриваемый нами сейчас селектор более общий.

В нашем случае он отберет все элементы p, следующие за элементом ul.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

10. X[title]

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

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

11. X[href=»foo»]

Код выше позволит придать стиль всем ссылкам, атрибут href у которых равен http://www.codeharmony.ru. Эти ссылки будут красного цвета. Остальные ссылки не получат данного стиля.

Это работает хорошо, но это немного негибко. Что, если ссылка на самом деле ведет на Codeharmony.ru но, возможно, адрес указан, как codeharmony.ru а не http://www.codeharmony.ru? В таких случаях мы можем использовать основы регулярных выражений.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

12. X[href*=»codeharmony»]

Поехали дальше; это как раз то, что нам нужно. Звездочка означает, что искомое значение может находиться в любой части атрибута href. Таким образом, мы можем отобрать и http://www.codeharmony.ru и www.codeharmony.ru и codeharmony.ru.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

13. X[href^=»http»]

Вы когда-нибудь думали о том, как на некоторых сайтах рядом с ссылками, ведущими на другие сайты (внешние по отношению к текущему) проставлены небольшие иконки, которые дают знать об этом пользователю? Это отличные «напоминалки» пользователю о том, что ссылка ведет на другой сайт.

Делается это с помощью символа ^ (карат). Он обычно используется в регулярных выражениях для обозначения начала строки. Если мы хотим отобрать ссылки, у которых атрибут href начинается с http, то мы можем использовать селектор из примера выше.

«Обратите внимание, что мы не ищем http://. Это необязательно и, к тому же, не учитывает ссылки по протоколу https://.»

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

14. X[href$=».jpg»]

И снова мы используем регулярное выражение и символ $ для того, чтобы обозначить конец строки. В данном примере мы ищем все ссылки, которые ссылаются на картинки с расширением .jpg. Разумеется, такой подход не будет работать для картинок с расширениями .gif, .png и т.д.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

15. X[data-*=»foo»]

Как же мы можем охватить различные типы картинок? Мы можем создать, например, несколько селекторов:

Но это муторно и не элегантно. Другой вариант — это создать собственный атрибут data-filetype и добавить его к каждой ссылке, ведущей на картинку.

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

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

Вот еще один интересный трюк, о котором не все знают. Знак

(тильда) позволяет нам выбирать атрибуты со значениями, разделенными пробелами, т.е.

Используя данный прием мы можем делать выборки с нужными нам комбинациями:

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

17. X:checked

Этот псевдо-класс отбирает те элементы, которые были отмечены, например, радиокнопку или чекбокс.

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari
* Opera

18. X:after

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

Данный пример показывает, как с помощью псевдо-класса :after после блока с классом .clearfix создаётся пустая строка, после чего очищается. Хороший метод, когда невозможно применить overflow: hidden.

Совместимость:

* IE8+
* Firefox
* Chrome
* Safari
* Opera

19. X:hover


Это Вы точно знаете. Официальное название звучит вроде «псевдо-класс, основанный на действии пользователя». Звучит страшновато, хотя на деле все просто. Хотите применить к элементу определенный стиль, когда на него наводится курсор мыши? Это оно самое!

«Помните, что старые версии IE не понимают этого псевдо-класса по отношению к чему-бы то ни было, кроме тэга а.»

Часто данный прием используется для задания нижней границы для ссылок при наведении на них курсора:

«Мега-чит: border-bottom: 1px solid black; выглядит лучше, чем text-decoration: underline;»

Совместимость:

* IE6+ (в IE6 работает только по отношению к ссылкам)
* Firefox
* Chrome
* Safari
* Opera

20. X:not(selector)

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

Если же мне нужно выбрать все элементы, кроме тэгов параграфов, то можно написать так:

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari
* Opera

21. X::pseudoElement

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

Выбираем первую букву параграфа:

Этот кусок кода найдет все параграфы на странице и применит к первой букве каждого из них указанные стили. Часто это используется для создания эффекта «газетного заголовка».

Выбираем первую строку параграфа:

Аналогично предыдущему примеру, но в данном случае будет выбрана первая строка каждого параграфа.

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

22. X:nth-child(n)

Помните времена, когда мы не имели возможности обратиться к конкретному порядковому элементу-потомку? Данный псевдо-класс решает эту проблему!

В качестве параметра принимается целое число. Если нужно выбрать 2-й элемент списка, нужно использовать конструкцию: li:nth-child(2).

Мы можем даже выбирать группы элементов-потомков. К примеру, чтобы выбрать каждый четвертый элемент списка, нужно использовать конструкцию: li:nth-child(4n).

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari

23. X:nth-last-child(n)

Что, если у Вас есть большой неупорядоченный список и Вам нужно, к примеру, выбрать третий элемент с конца. Вместо того, чтобы писать li:nth-child(397), Вы можете воспользоваться псевдо-классом nth-last-child.

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera

24. X:nth-of-type(n)

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

Представьте, что на странице есть пять неупорядоченных списков. Если Вам нужно применить стили только к третьему списку, но у него нет уникального идентификатора и иных «зацепок», то можно воспользоваться псевдо-классом nth-of-type(n). В коде выше показан способ придания стиля только третьему неупорядоченному списку.

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari

25. X:nth-last-of-type(n)

Да, для полноты картины есть и такой вариант. Так можно выбрать n-ный элемент определенного типа с конца.

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera

26. X:first-child

Этот псевдо-класс позволяет выбрать только первого потомка родительского элемента. Часто используется для удаления границ первого и последнего элементов списка.

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

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

Совместимость:

* IE7+
* Firefox
* Chrome

Сайт на WordPress

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress

Основы 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;

Цукерберг рекомендует:  Простой 2-х колоночный шаблон CSS, шаг 1 Материалы проета

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

  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 от А до Я

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

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

Заключение. Рекомендации по 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. Вы всегда можете обратиться к учебнику за подсказками, а также воспользоваться поиском по сайту, чтобы быстро найти определенную информацию.

5 полезных CSS селекторов

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

:first-child и :last-child

Селекторы :first-child и :last-child структурные псевдо-классы, позволяют выбрать первый или последний элемент от родительского.

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

Аналогично, :last-child, выберет последний элемент.

:nth-child

:nth-child, особо полезный структурный псевдо-класс, он позволяет выбирать элементы на основании их позиций в рамках родительского элемента

Синтаксис :nth-child, довольно прост, в круглых скобках заявляется какие элементы выбрать.

Одним из аргументов являются even или odd, выбирающие только четные или нечетные элементы. Следующее правило, выберет только четные элементы списка.

В следующем случае можно использовать целое число.

Что делает этот псевдо-класс реально мощным, так это пользовательская комбинация, для «особого» выбора элементов. Базовый синтаксис таков:

Значения a и b всегда представляются числом, в значение n не меняется (остается литералом). Значение b, это значение отступа, который определяет, какой элемент выбрать первым. Значение a, определяет цикл выбираемых элементов, после выбора первого элемента. Значение n, неизменно, это эдакий литерал, по сути с каждым «оборотом цикла» увеличивающийся на 1, начиная с 0. итак:

Что происходит, 3 элемент списка будет выбран первый ( значение b ), а затем до конца списка выбирается каждый второй ( a ).

Выражение, приведенное ниже, будет выбирать только первые 5 элементов списка, что достигается отрицательным значением n ( если его сделать положительным, то наоборот первые 5 будут пропускаться и выбираться все остальные ).

Иногда полезно использовать вариацию псевдо-класса, где b, считается не от начала а от конца ( работает она аналогично-инвертировано ), например выражение ниже, начнет выбирать с конца списка, отсчитав 10 элементов, и выделит каждый второй элемент вплоть до начала списка:

:nth-of-type

Аналогично :nth-child, выбирает элементы так же по выражению (an+b). Отличие его в том, что оно не зависит от позиции элемента в теле документа. Сейчас объясню более понятно: например

Если использовать div:nth-child(2n), то мы выделим блок только с номером 10, а если div:nth-of-type(2n), то будет выбираться каждый второй блок, независимо есть ли между ними span или нет. Грубо говоря :nth-child оперирует с элементами которые идут друг за другом, а :nth-of-type игнорирует все преграды и выбирает подряд. Какой псевдо-класс использовать, дело вкуса, но я склоняюсь к nth-of-type.

И соответственно «обратный» псевдо-класс :nth-last-of-type

:target

Весьма интересный псевдо-класс, который основывается на URL текущей страницы и выбирает элемент по соответствующему id. Например:

При нажатии на ссылку «введение», синим цветом будет выделяться блок с . По сути выделяется тот элемент, чей >

::before и ::after
псевдо-элементы

Псевдо-элементы, дают доступ к «виртуальным» элементам документа, которые не указаны в HTML-коде. С помощью псевдо-элементов ::before и ::after, можно вставить «виртуальный» контент, который виден только пользователю браузера, до выбираемого элемента и после.

::before

Как называется, так и работает. Этот псевдо-элемент вставит контент вперед выбираемого элемента. Дабы это имело смысл, всегда используется свойство css content, — иначе смысл? В любом случае, это свойство должно, хотя бы, быть просто пустыми ковычками ( чтобы корректно работать ).

Тут к примеру вставляется картинка ко всем элементам с классом .pdf, и к ней же применяются свойства css.

::after

Псевдо-элемент ::after, аналогично предыдущему вставит контент после выбираемого элемента.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих