10 советов CSS, от мастеров


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

Секреты верстки

Как покрасить буквы в слове?

Письмо от подписчика:

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

Мой вопрос касается стилей css, ты же мастер У меня есть сайт на вордпресс (знаю, ты ими не занимаешься), но мой вопрос по стилям.

Заголовок моего сайта из 12 букв, мне надо чтобы он был трехцветным, то есть первые три буквы — белые (#ffffff), следующие пять букв — синие (#0060ff), и последние четыре — красные (#ff0000).

Как мне все это изобразить, ниже вставил в письмо код заголовка в файле style.css шаблона темы:

Что мне надо там прописать, и можно ли вообще прописать каждую букву своим цветом? Искал информацию в сети по этой теме, ничего не нашел.

Раньше у меня была темка шаблона, где одна буква (первая) прописывалась своим цветом:

Может мой вопрос и лоховский. я не спец. Поможешь, скажу СПАСИБО.

Ответ на вопрос:

Привет Юра. В стилях можно задать отдельные значения как для первого символа так и для первой строки. Но если тебе надо покрасить в разный цвет буквы или слова в предложении. Рекомендую использовать парный тег — это так сказать «пустой» тег строчного типа. То есть оформление у него по умолчанию отсутствует и он идеально подходит для таких вот задач. Вот пример:

В итоге получаем вот такую надпись (шрифт увеличил, что бы было лучше видно):

www. Master-CSS .com

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

30 советов о CSS для начинающих

Эту статью я перевела с net.tutsplus.com, что заняло у меня почти неделю. Мне очень понравились замечания редактора, поэтому перевожу с ними. Они будут отмечены в тексте так:

Мои замечания будут отмечены как:

1. Сделайте это читабельным

Читабельность вашего CSS очень важна, хотя многие люди не понимают почему это важно. Хорошая читабельность вашего CSS позволит его проще поддерживать в будущем, т.к. вы сможете находить элементы быстрее. Также вы никогда не знаете кто будет смотреть на ваш код в последствии.

Когда пишут CSS, большинство программистов попадают в одну из двух групп.

Группа 1: Всё в одной строке

Группа 2: Каждый стиль на своей строке

Оба применения абсолютно приемлемы, хотя вы можете часто заметить что что группа два не любит группу один! Просто помните — выберите тот метод который читабельней ДЛЯ ВАС. Только это имеет значение.

Полностью согласна с редактором. Я например отношусь к первой группе, как можно заметить, посмотрев стиль моего бложика. В несколько строк я пишу что-то что выбивается из-ряда вон. Например невалидный CSS, типа -moz-border-radius.
Как улучшить читабельность вашего файла стилей также вы можете прочитать в свеженькой статье Яна Маркина «Как улучшить CSS».

2. Будьте постоянны

Среди слов о том как делать ваш код читабельным, скажу что нужно следить за постоянством CSS. Вы должны разработать ваш свой собственный «под-язык» CSS который позволит вам быстро называть вещи. Есть несколько классов которые я создаю почти каждый раз и я использую каждый раз одинаковые названия. Например я использую «.caption-right» для плавающих картинок которые содержат заголовок справа.

Думать о вещах, таких как, использовать подчёркивание или тире в именах классов и ID, или использовать что-то другое. Когда вы начнёте создавать свои собственные стандарты для CSS, вы станете более опытны.

3. Начните с фреймворка

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

У многих дизайнеров ( верстальщиков ) есть собственные фреймворки, которые они создают со временем, это тоже хорошая идея. Это поддерживает постоянность в проектах.

Я не согласен. CSS фреймворки замечательная вещь. для тех кто знает как их использовать.

Это в меньшей степени изобретение колеса заново, и в большей степени изучение как колесо работает.

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

4. Используйте Сброс значений (reset)

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

Популярны файлы от Эрика Мейера — MeyerWeb, и Yahoo’s developer reset. Или вы можете сделать свой собственный roll your own reset, если вам так хочется.

Не согласна с этим пунктом. Я думаю вам не стоит залезать на велосипед если вы не знаете как он работает. Попробуйте изобрести свой. Я например ограничиваюсь только border-collapse:collapse для таблиц, обнулением рамки для изображений и т.п. При обнулении отступов у всех элементов скорее всего вы подумаете «WHAA, что случилось?!» и вам придётся ниже повторно задавать отступы для нужных элементов и если вы даже приблизительно не знаете как они задаются, есть большая вероятность что пользователь сочтёт это некрасивым.

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

в случаях когда хочу задать border-radius у таблицы (который не работает в варианте collapse).

5. Упорядочите файл стилей

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

  1. Основные классы(body, a, p, h1, etc.)
  2. #header
  3. #nav-menu
  4. #main-content

Не забудьте коментировать каждую секцию!

6. Комбинируйте элементы

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

Всегда можно добавить уникальные характеристики для каждого из этих заголовков если нужно (например. h1 ) позже в коде.

7. Создайте сначала HTML

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

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

8. Используйте несколько классов

Иногда полезно добавить несколько классов для элемента. Например у вас есть блок

Вы можете добавить столько классов сколько заходите (через пробел).

Будьте осторожны используя id или имена классов типа «left» и «right.» Я использую их, но только для вещей типа постов блога. Почему? Давайте представим что, в какой-то момент, вы захотите ваш «box» со значением LEFT. В этом случае вам придётся возвращаться к вашей разметке и менять имена классов, и всё только для того чтобы поменять

страницы. Это несемантично. Запомните — HTML для разметки и контента. CSS для отображения. Правило:

Если вы должны вернуться к HTML чтобы изменить отображение (или дизайн) страницы, вы сделали что-то неправильно!

9. Используйте правильны Doctype

Объявление doctype значит многое для того чтобы ваша разметка и CSS были валидными. Такше всё отображение вашего сайта могут сильно поменяться в зависимости от DOCTYPE который вы укажите.

Я использую доктайп HTML5 для всех моих проектов.

«Что самое хорошее в новом DOCTYPE, особенно, что все современные браузеры (IE, FF, Opera, Safari) распознают его и переключаются в стандартный режим — даже хотя не поддерживают HTML5. Это значит что вы можете начать писать ваши веб-страницы используя HTML5 уже сегодня, и они будут актуальны долгое-долгое время.»

Джон Ресиг — создатель фреймворка JQuery и веб-евангилист.

10. Используйте сокращения

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

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

Помните, что если вам нужно поправить только одину сторону из четырёх, для отступов padding или margin, то вам лучше написать только её. Правило для группировки свойств легко запомнить — Сначала идёт верх, потом по часовой стрелке. Левая сторона — последняя. Для свойства border-radius другой метод, тут первое свойство — для левого верхнего угла, а потом тоже по часовой стрелке.

11. Комментируйте ваш CSS

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

Честно говоря, я никогда не тратила время на написание комментариев для стилей, только для разметки. Для людей кто пишет свойства CSS каждое с новой строки — получится всё равно слишком много строк. Хотя начало комментария при подсветке кода будет легче найти.
Для «группы 2», которые как я пишут на одной строке все стили для одного элемента — совершенно нет необходимости что-то комментировать, всё и так видно, гораздо проще тогда уж всем дочерним элементам делать отступ, например так:

Где #navi_td — это соответствующая секция контента.
Также комментарии имеет смысл дать в начале с перечислением основных цветов дизайна.

12. Понять разницу между блочными и строчными элементами

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

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

Вот список элементов которые являются строчными:

13. Отсортируйте свойства по алфавиту

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

Эмм. пожертвовать скоростью для слегка улучшенной читебельности? Я пас — но решайте для себя!

Для «группы 2», это становится совсем неактуально. Например я расставляю свойства только по приоритету, например display,float,width и height по-возможности в начале. Но вообще не трачу на это время.

14. Используйте Компрессоры CSS

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

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

15. Используйте общие классы

Вы увидите что существуют стили которые вам необходимо постоянно применять. Вместо добавления этих особых стилей к каждому ID, yвы можите создать общие классы которые сможете добавлять к другим классам или ID (совет #8).

Например, я часто применяю float:right и float:left в моих дизайнах. Поэтому я просто добавляю классы .left и .right в мой лист, и ссылаюсь на них в элементах.

Это способ чтобы не добавлять постоянно «float:left» ко всем элементам которым нужно плавать.

Пожалуйста смотрите редакторскую правку к #8.

16. Используйте «Margin: 0 auto» для центровки

Многие новички в CSS не могут понять почему нельзя использовать просто float: center для достижения эффекта центровки блочных элементов. Если б всё было так просто! К сожалению вам нужно использовать это:

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

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

17. Не надо просто обёртывать всё Дивом

Когда начинаешь, есть соблазн обернуть всё в див с ID или классом вокруг каждого элемента и создать для этого стиль.

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


Теперь вы можете просто добавить стили к h1 вместо родительского дива.

18. Используйте Firebug

Если вы ещё не скачали Firebug, остановитесь и сачайте. Серьёзно. Эта маленькая штука из разряда must have для любого веб-разработчика. Среди многих особенностей предоставляемых этим дополнением Firefox (отладка JavaScript, проверка HTML, поиск ошибок), вы можете также визуально наблюдать м править ваш CSS в реальном времени. Вы можете узнать больше на официальном Firebug website.

19. Без Хаков

Избегайте использования маленьких браузеро-специфичных хаков если возможно. Большое давление оказывает необходимость сделать чтоб дизайн выглядил одинаково во всех браузерах, но использование хаков только усложнит поддержку дизайна в будущем. Плюс, использование reset-файла (смотри #4) может устранить почти все напрвильности рендеринга в современных браузерах.

20. Меньше используйте абсолютное позиционирование

Абсолютное позиционирование это удобный способ CSS который позволяет вам определять где точно элемент должен располагатьсяна странице с точностью до пикселя. Тем не менее, несмотря на невнимание абсолютно-позиционированных элементов к остальным, However, because of absolute positioning’s disregard for other elements on the page, the layouts can get quite hairy if there are multiple absolutely positioned elements running around the layout.

Топ-пост этого месяца:  Отзывы в Инстаграм - как собирать и публиковать отзывы реальных людей

21. Используйте Text-transform

Text-transform — это очень полезное CSS свойство, которое позволяет вам «стандартизировать» как текст будет отформатирован на вашем сайте. Например, вы захотите чтобы заголовки были только строчными буквами. Просто добавьте следующее свойство в стили:

Теперь все буквы в заголовке по-умолчанию будут строчными. Text-transform позволяет вам изменить ваш текст (первые буквы заглавные, все буквы заглавные, или все строчные) простым свойством.

22. Не используйте отрицательный Margin для чтобы спрятать ваш h1

Часто верстальщики используют картинки для их заголовков, и затем используют display:none или отрицательный margin чтобы выкинуть h1 со страницы. Matt Cutts, глава команды «Google Вебспам», официально заявил что это плохая идея, т.к Google может счесть это поисковым спамом.

Как мистер Cutt недвусмысленно сказал, откажитесь от способа прятать ваш текст логтипа с помощью CSS. Просто используйте атрибут alt. Пока многие утверждают что можно использовать CSS чтобы спрятать тег h1 пока h1 это то же что и текст на лого, я предпочитаю блуждать по безопасной стороне.

как можно видеть в моём блоге, часть h1 содержащая дату публикации — заменяется на соответствующую картинку, а текст скрывается display:none. Честно говоря мне всё равно что думает по этому поводу гугл, т.к. я использую это для того чтобы посетители моего блога видели более красивую картинку. Читатели RSS видят её текстом. Думайте о посетителях — это самое главное. Ни один поисковик не посмеет утверждать обратного.

23. Проверяйте ваш CSS и (X)HTML

Проверка вашего CSS и (X)HTML — это не просто дело чести: она позволяет быстро находить пятна грязи в коде и избежать ошибок. Если вы верстаете дизайн и по каким-либо причинам дела идут не так как надо, попробуйте проверить валидатором разметки и CSS валидатором и увидите какие ошибки появились. Обычно вы увидите что забыли где-нибудь закрыть див, или пропустили точку с запятой в свойсте CSS.

Правило — Всегда ставьте точки с запятой после каждого свойства. Даже если свойство одно — всегда.

24. Em против. пикселей

Всегда были громкие дебаты — что лучше использовать пиксели (px) или относительные значения (em) при определении размеров. Пиксели — это более статический путь определения шрифтов, а em — более совместим с размерами в разных браузерах и мобильных устройствах. С преимуществом разных типов веб-сёрфинга (лаптоп, мобильник, и т.п.), em всё больше и больше становятся умолчанием для измерения размера шрифтов т.к. позволяют большую гибкость. Вы можете прочитать больше о том почему следует использовать ems для размеров шрифтов в этом содержательной теме форума. About.com также содержит статью отличия между способом измерения размеров.

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

Я думаю что em никогда и не следовало использовать. Если пользователю будет слишком мелко или слишком крупно — он нажмёт Ctrl+»+». Прошло то время когда значения заданные в пикселях не масштабировались браузерами. Если вы захотите использовать em — нужно задать для body атрибут font-size, и относительно его высчитывать длины блоков и картинок например, вместо того чтобы сразу вписать значение в пикселях. Оно вам надо? Я знаю некоторых пуристов которые используют em, я так никогда и не могла понять чем использование относительных размеров поможет мне и моим пользователям.

25. Не недооценивайте списки

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

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

Вы часто можете видеть навигационные ссылки как тут:

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

Глупый гусь =), кроме ненумерованных списков есть ещё тег , прочитайте «Используйте тег menu для меню»

26. Избегайте дополнительных селекторов

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

В данном случае использование .someclass li и так работает прекрасно.

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

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

27. Добавьте Margin и Padding ко всему

Разные браузеры отображают элементы по-разному. IE отображает элементы отлично от Firefox. IE 6 отображает отлично от IE 7 и IE 8. Пока браузеры начинают приближаються к W3C стандартам, они все ёще не совершенны (*кхе-IE-кхе*).

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

Теперь все элементы имеют padding и margin равным 0, пока на будет задан другой стиль в листе стилей.

Проблемма как раз в этом, так как ВООБЩЕ ВСЁ обнуляется, с этим методом вы больше навредите себе чем поможете. Вы уверены что хотите чтобы отступы у всех до единого элемента обнулились? Если да — то это прекрасно. Но по крайней мере обдумайте это.

28. Когда будете готовы, попробуйте объектно ориентированный CSS

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

Вот презентация слайдшоу о том как работает Объектно ориентированный CSS:

Если вы новичёк в игре CSS/HTML, OOCSS может быть в начале проблеммой. Но принципы неплохо знать для ООП в общем.

Я думаю что надо очень постараться чтобы сказать что CSS изначально не объектно ориентирован. А вообще например мой коллега mr.troll — ярый противник ООП, надеюсь он найдёт времени написать статью в мой бложик по этом поводу.

29. Используйте несколько файлов стилей

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

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

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

30. При отладке сначала проверьте закрывающие теги

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

10 способов протестировать свои навыки в HTML и CSS

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

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

1. Запустить проект

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

2. Участвуйте в битве

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

3. Присоединитесь к сообществу

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

4. Программный симулятор

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

5. Наблюдайте за скринкастами

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

6. Головоломки и викторины

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

7. Играйте в игры

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

8. Найдите сайт с тестами

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

9. Дисциплинируйте себя

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

10. Общайтесь со специалистами со всего мира

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

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

10 советов CSS, от мастеров

Настройки CSS
для блоков
и секций

Да здравствует кастомизация!

Представляем обновление, которое расширяет возможности настройки внешнего вида элементов сайта.

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

А сейчас немного теории, чтобы вам всё было понятно.

CSS это настройки внешнего вида контента на сайте: картинок, кнопок, форм, фигур. Чего угодно.

Какие могут быть настройки:

— тень и свечение
— изменение цвета при наведении
— изменение размера при наведении
— градиенты
— обводка.

— настроить любые css-стили одного блока или всей секции
— отдельно настроить стили блока в мобильной версии
— настроить стили элементов, вложенных в секцию или блок
— копировать блоки или секции с настройками CSS.
При копировании все настройки сохраняются.

Покажем на примерах как это работает.

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

Что делаем: скроем блок с меню и контактами в мобильной версии. Для этого воспользуемся новым функционалом и пропишем настройки стилей в разделе @mobile:

Мы прописали вот такие настройки:

Теперь наш сайт выглядит так:

Как видим, из мобильной версии пропало меню.

Теперь добавим секцию с мобильным меню,
в настройках скроем отображение в десктопе:

В итоге получаем сайт, где на десктопе отображается стандартное меню, а в мобильной версии — меню-бургер:

Здесь мы собрали примеры стилизации кнопок:
​https://lpmotor.ru/block-styles

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


Стилизовать ссылки стало намного проще. Мы можем задать нужные CSS свойства как для всей секции, так и для конкретного блока

Например, добавив в настройки CSS секции такой простой код:

a <
color: #000000;
text-decoration: underline;

a:hover <
text-decoration: none;
background: #ffe100;

img <
transition: all 0.3s ease;
overflow:hidden;
>

img:hover <
transform: scale(1.05);
filter: brightness(50%);
>

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

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

Также будем рады вашим примерам работы с CSS! Лучшие наработки будем добавлять в библиотеку CSS-настроек.

Хорошие и плохие CSS-практики для начинающих

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

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

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

Топ-пост этого месяца:  Как вставить код счетчиков посещений на сайт под управлением Joomla через модуль Произвольный

Плохие CSS-практики

Много раз использовать одно и то же правило

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

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

Например, вместо того чтобы повторять правило color: blue для каждого тега и ID:

Используйте для этих целей класс:

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

Прим. переводчика: Проще говоря ID должен быть уникальным.

Вы должны написать:

Когда уместно правило !important

Правило !important было создано во второй половине 90-х чтобы помочь веб-дизайнерам и разработчикам переопределять существующие стили. !important преобладает над всеми предыдущими стилями как бы говорит браузеру: “Я главнее, забудь обо всем другом CSS и используй меня!”. Используя его от собственной лени, вы рискуете заработать головную боль позже. Ваш код будет труднее поддерживать.

В представленном выше примере тексту в header назначен красный цвет. Исключением будет header с классом intro и с >специфичности селектора.

Если вы используете !important, то добавляйте его на уровне свойства, а не на уровне селектора. Это означает что свойство color имеет более высокий приоритет, чем размер шрифта. Свойство color более важное чем тот же color в правиле header#capture.

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

Частое использование правила !important является плохой практикой поскольку вносит беспорядок в один из основных механизмов CSS — специфичность (на русском, но лучше на английском).

Использование неэффективных CSS-селекторов

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

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

Например посмотрите на эти длинные селекторы:

Мы можем укоротить их до двух или трех уровней глубины:

Использовать тонны веб-шрифтов

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

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

Оптимизация шрифта и способ его загрузки могут влиять на размеры страницы и время отрисовки текста.

Рекомендуется использовать один или два (точно не больше трех) веб-шрифтов на вашем сайте и пользоваться значениями по умолчанию браузеров для оптимизации вашего сайта.

Использование встроенных (инлайн) стилей

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

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

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

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

Хорошие CSS-практики

Теперь, когда мы закончили говорить о плохих приемах написания CSS, можем рассмотреть несколько хороших.

Используйте в CSS структуру контента

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

За основу можете взять указанный ниже код:

Сделайте CSS “читабельным”

“Читабельность” кода означает, что вы создаете чистые во всех отношениях наборы правил. Когда ваш CSS легко читать, то его проще и поддерживать в дальнейшем. Вы быстро можете найти каждое правило.

Есть два способа, при помощи которых вы можете сделать свой CSS пригодным для чтения.

2. Стандартный вид

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

Отделите стили jQuery-плагинов

Если вы используете плагины jQuery, то вам стоит поместить стили для них в отдельный css-файл и назвать его легким и запоминающимся именем, например, JS-plugin.css. Это поможет вам поддерживать порядок среди вашего CSS, и вы вспомните добрым словом этот совет, когда вам потребуется изменить или добавить стили для плагинов.

Файл сброса стилей

Файл сброса стилей (или “Reset CSS”) представляет из себя краткий набор правил CSS, который сбрасывает основные стили html-разметки. Использование файла сброса уменьшает разницу отображения в разных браузерах и позволяет получить общий внешний вид.

MeyerWeb самый популярный и широко используемый файл сброса стилей, хотя наряду с ним популярен и normalize.css от Nicolas Gallagher. Это современные файл сброса, полностью соответствующие HTML5. Вы можете подключить отдельный файл со сбросом стилей на вашу страницу или скопировать всю таблицу в файл с вашими стилями.

CSS3 анимация в последнюю очередь

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

Комбинируйте элементы

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

Например, h1, h2 и h3 элементы имеют одинаковое правило font-family и цвет текста.

Используйте краткие записи свойств

Краткие записи (шорткаты) позволяют одновременно установить значения для несколько свойств CSS. Шорткаты сокращают ваш код и увеличивают читаемость.

Например, вместо того чтобы использовать margin-top, margin-bottom, margin-left и margin-right вы можете просто использовать одну строку.

Всегда комментируйте

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

Вендорные префиксы

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

Цель вендорных префиксов — избежать неверного исполнения кода.

В CSS следующие префиксы:

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

Посмотрите на код ниже.

Примечание переводчика: Для автоматической расстановки префиксов у нужных свойств воспользуйтесь Autoprefixer-online .

Сжатие CSS

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

Чаще используйте HEX-цвета

Есть несколько мнений и аргументаций в интернете, когда речь заходит о выборе между HEX-цветами и цветами по их названию. Различные браузеры могут быть не в состоянии определить, что значат некоторые названия цветов. Значения HEX имеет палитру цветов, содержащую 16 777 216 оттенков, в то время как HTML и CSS имеет в своем арсенале всего 140. Там нет названий для всех 16 миллионов 24-разрядных цветов, поэтому HEX — лучший выбор, когда вы определяетесь с цветовыми вариациями.

Ознакомьтесь со спецификацией CSS Color Module Level 3 для получения дополнительной информации.

Валидация

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

Что дальше?

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

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

Что думаете? Какие плохие или хорошие практики вызывают у вас вопросы? Пожалуйста, оставляйте комментарии.

Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!

Вредные советы по CSS

Все мы знаем, для чего существуют правила

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

Комментарии для слабаков

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

Но оставьте гордость в стороне и лучше сохраните нервы себе и коллегам. Если вы используете какую-либо неочевидную в мелочах технологию, просто пофиксили съехавшую шапку или что-то подобное, будьте добры оставить комментарий!


Страна комбинированных селекторов

О да! Вы только что научились CSS и готовы покорять новые вершины. Время поиграть мышцами.

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

Helastel, удалённо, от 150 000 ₽

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

Производительность? Да кому она нужна!

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

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

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

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

Но зачем? Практически любой видимый элемент — дочерний для body , это только пустая трата времени.

Я не могу в имена объектов, так что не парюсь

В программировании есть только две трудности. Придумывание имён для объектов и…

Наверняка вам знакомы эти слова. Придумывать названия бывает трудно, но это не значит, что вы вообще не должны этим заниматься или наоборот всё зашифровывать.

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

А что насчёт мегаспецифичных имён?

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

Подходите к этому делу с умом.

Говорят, классы это круто?

Классы это круто, и все это знают. Но, как известно, всё хорошо в меру.

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

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

Только чистый CSS, никаких препроцессоров

Вы за чистый CSS, ваш коллега за чистый CSS, все за чистый CSS. Давайте расставим все точки над “i” и разберёмся в сути конфликта.

Определённо, в некоторых случаях нет ничего лучше чистого CSS! Например, если вы не используете CSS-in-JS в своём React-приложении, можно вообще обойтись чистым CSS. Как бы то ни было, если вы пишете крупное приложение с кучей таблиц «ванильного» CSS, использование препроцессора поможет сделать процесс разработки более интересным, а процесс поддержки таблиц стилей — легче.

Опять же, это не значит, что препроцессоры нужно использовать всё время. Просто не отметайте такой вариант!

Тут очень важный стиль

Вы ненавидите CSS, вечно с ним одни проблемы. Что же делать? Использовать кучу !important для каждого стиля, если нужно переопределить любой другой!

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

Какой порядок обучения веб-верстке вы посоветуете?

сейчас прохожу курс на htmlacademy

По вашим словам кажется, что вы понятия не имеете о том, какой инструмент для чего нужен. Так что рекомендую следующий план:

HTML: практика -> Pug или любой другой препроцессор -> понять зачем он нужен -> микроданные -> wai-aria
CSS: практика -> каждый день выкладывать один сверстанный компонент на CodePen -> всякое разное -> изучить внутренности normalize.css -> использовать autoprefixer -> изучать хорошие практики -> написать свою сетку -> познакомиться с БЭМ, RSCSS -> осознать полезность методологий -> препроцессоры (LESS проще, SASS моднее, есть еще много разных) -> PostCSS -> осознать разницу между пре-процессором и пост-процессором
JS: ES6+ -> Babel -> понять смысл инструмента -> писать много велосипедов -> много велосипедов -> больше велосипедов богу велосипедов -> паттерны проектирования -> тестирование
Gulp/Grunt и Webpack/Browserify: осознать разницу -> использовать по мере надобности -> научиться автоматизировать все, что можно автоматизировать
Git, NPM: без комментариев

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

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

Ну и умение задавать вопросы тоже лишним не будет.

10 советов CSS, от мастеров

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

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

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Основы 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 от А до Я

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

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

10 советов CSS, от мастеров

Советы профессионалов CSS

Коллекция советов, которые помогут вам стать лучше в CSS.

Используйте CSS Reset

Сброс CSS помогает обеспечить согласованность стилей между различными браузерами и с чистого листа начать оформление элементов. Вы можете использовать CSS библиотеки сброса такие как Normalize и др., или вы можете использовать более простой способ сброса:

Теперь для всех элементов свойства margin и padding будут равны нулю, а box-sizing: border-box позволяет указывать размеры всему блоку, а не его содержимому.

Примечание: Если вы будете следовать совету Наследуйте box-sizing, то вы можете не включать свойство box-sizing в ваш CSS Reset.

Пусть box-sizing будет унаследован от html :

Так значительно проще изменять box-sizing в плагинах или других компонентах, которые задают иное поведение.

Используйте unset вместо сброса всех свойств

При сбросе свойств элемента нет необходимости сбросить каждое отдельное свойство:

Вы можете указать все свойства элемента, используя сокращенное выражение all . Установка значения unset изменяет свойства элемента на их начальные значения:

Примечание: стенограмма all не поддерживается в IE11 и в настоящее время рассматривается для поддержки в Edge. unset не поддерживается в IE11.

Используйте :not() для добавления / удаления границ в меню навигации

Вместо того, чтобы добавлять границу.

. а затем убирать её с последнего элемента.

. используйте псевдокласс :not() , чтобы добавить только к нужным элементам:

Селектор CSS определяет границу так, как ее описывает человек.

Добавьте line-height в body

Вам вовсе не требуется добавлять свойство line-height к каждому , , и т.д.. по отдельности. Вместо этого добавьте его в body :

Таким образом текстовые элементы легко могут наследовать свойство от body .

Установите :focus для элементов формы

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

Выровнять все по вертикали

Нет, это не черная магия, вы действительно можете расположить элементы по центру по вертикали:

. а также с помощью CSS Grid:

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

Примечание: Будьте осторожны с некоторыми багами flexbox в IE11.

Списки, разделенные запятыми

Сделайте список похожим на настоящий, разделенный запятыми список:

Используйте псевдокласс :not() чтобы не добавлять запятую к последнему пункту.

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

Выбирайте элементы с использованием отрицательных значений в nth-child

Используйте отрицательные значения в nth-child в CSS для выбора элементов с 1 по n.

Или, так как вы уже немного познакомились с :not() , попробуйте:

Что же, это было довольно легко.

Используйте SVG для значков

Нет ни одной причины, чтобы не использовать SVG для значков:

SVG хорошо масштабируется для всех разрешений и поддерживается во всех браузерах включая IE9 и выше. Так выбросите же ваши .png, .jpg или .gif-jif-что-угодно файлы.

Примечание: Если у вас есть кнопки, содержащие только SVG пиктограммы, и SVG не удается загрузить, то это поможет сохранить доступность кнопки:

Используйте селектор «Лоботомированная сова»

Название, безусловно, странное, но используя универсальный селектор ( * ) с соседним селектором ( + ), мы получаем мощное правило CSS:

В этом примере все элементы в потоке документа, которые следуют другие элементы получат margin-top: 1.5em .

Более подробную информацию о селекторе «Лоботомированная сова», можно найти в статье Heydon Pickering на A List Apart.

Используйте max-height для ползунков на чистом CSS

Реализация ползунков на чистом CSS с помощью max-height и overflow hidden :

При наведении элемент расширяется до значения max-height , а всё что не влезло, можно прокрутить.

Ячейки таблицы равной ширины

Иногда работа с таблицами приносит боль, в таких случаях попробуйте задать table-layout: fixed чтобы ячейки были одинаковой ширины:

Даешь макеты таблиц без боли!

Используйте Flexbox вместо margin

При работе с пробелами между колонок вы можете избавиться от псевдоклассов nth, first- и last-child воспользовавшись свойством flexbox space-between :

Теперь пробелы между колонками будут одного размера.

Используйте селектор атрибутов для пустых ссылок

Это очень удобно.

Стиль «по умолчанию» для ссылок

Добавьте для ссылок стиль «по умолчанию»:

Теперь ссылки, вставленные через CMS, которые, как правило, не имеют атрибута class , будут иметь отличительный признак без влияния на каскад.

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

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

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

Блок с собственным отношением сторон

Чтобы создать блок с собственным отношением сторон, все, что вам нужно сделать, это добавить верхний или нижний padding к DIV:

Использование padding 20% делает высоту параллелепипеда равной 20% от его ширины. Независимо от ширины окна, дочерний DIV будет сохранять соотношение сторон (100% / 20% = 5:1).

Задайте стили для поломанныx изображений

Сделайте поломанные изображения эстетически приятнее с CSS:

Теперь добавьте правила псевдо-элементов для отображения сообщения пользователю и URL-ссылки поломаного изображения:

Используйте rem для глобальных размеров; Используйте em для локальных размеров

После установки базового размера шрифта всего проекта ( html < font-size: 100%; >), установите размер шрифта для текстовых элементов через em :

Затем установите размер шрифта для модулей через rem :

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

Отключите автовоспроизведение видео с включенным звуком

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

И снова мы воспользовались помощью псевдокласса :not() .

Используйте :root для шрифтов

Размер шрифта должен подстраиваться под каждый возможный размер экрана. Вы можете рассчитывать размер шрифта, основываясь на высоте и ширине экрана с помощью :root :

Теперь вы можете использовать единицу root em на основе значения, рассчитанного с помощью :root :

Установите font-size для элементов формы, чтобы оптимизировать просмотр на мобильных устройствах

Чтобы избежать масштабирования мобильными браузерами (iOS Safari, и др.) элементов HTML формы, когда раскрывающийся список нажат, добавьте font-size правило селектору:

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

[События указателя] (https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) позволяют указать, как мышь взаимодействует с элементом, который он трогает. Чтобы отключить событие указателя по умолчанию на кнопке, например:

Установите display: none на разрывы строк, используемые как интервалы

Как отметил [Гарри Робертс] (https://twitter.com/csswizardry/status/1170835532584235008), это может помочь пользователям CMS использовать дополнительные разрывы строк для пробелов:

Текущие версии Chrome, Firefox, Safari, Opera, Edge, и IE11.

Добавить комментарий