in в CSS


Содержание

Таблицы стилей для веба Советы и хитрости по CSS

См. также оглавление со всеми советами.

em , px , pt , cm , in …

Указывать длину в CSS можно в разных единицах. Некоторые из них пришли из типографской традиции, как пункт ( pt ) и пика ( pc ), другие, напр. сантиметр ( cm ) и дюйм ( in ), знакомы нам в повседневном обиходе. Есть и «волшебная» единица, придуманная специально для CSS: px . Значит ли это, что для разных свойств нужны разные единицы?

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

Любые единицы измерения можно использовать где угодно. Свойство со значением в пикселях ( margin: 5px ) также допускает и значения в дюймах или сантиметрах ( margin: 1.2in; margin: 0.5cm ), и наоборот.

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

Ре­ко­мен­ду­ются Мож­но ино­гда Не ре­ко­мен­ду­ются
Экран em, px, % ex pt, cm, mm, in, pc
Печать em, cm, mm, in, pt, pc, % px, ex

Соотношение между абсолютными единицами таково: 1in = 2.54cm = 25.4mm = 72pt = 6pc

Если у вас есть под рукой линейка, можете проверить точность своего устройства. Вот прямоугольник высотой 1 дюйм (2.54cm): ↑
72pt

Так называемые абсолютные единицы ( cm , mm , in , pt и pc ) в CSS означают то же самое, что и везде, но только если у устройства вывода достаточно высокое разрешение. На лазерном принтере 1cm должен быть точно равен 1 сантиметру. Но на устройствах низкого разрешения, вроде компьютерных экранов, CSS этого не требует. И вправду, разные устройства и разные реализации CSS норовят отобразить их по-разному. Лучше оставить эти единицы для устройств высокого разрешения, в частности для печати. На компьютерных экранах и мобильных устройствах может получиться не то, что ожидалось.

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

CSS не уточняет, что именно понимается под «высоким разрешением». Но так как у дешевых принтеров сегодня бывает не менее 300 точек на дюйм, а у хороших экранов порядка 200 точек на дюйм, граница, скорее всего, проходит где-то между этими значениями.

Еще одна причина не использовать абсолютные единицы где-либо, кроме печати: на разные экраны мы смотрим с разного расстояния. 1 сантиметр на экране настольного компьютера выглядит маленьким. Но на мобильном экране прямо перед глазами — это много. Лучше вместо них использовать относительные единицы, напр. em .

Единицы em и ex зависят от размера шрифта и могут быть свои для каждого элемента в документе. Единица em — просто размер шрифта. В элементе, которому задан шрифт в 2in, 1em и означает эти 2in. Указание размеров (напр., для отступов) в em означает, что они задаются относительно шрифта, и какой бы ни был шрифт у пользователя — крупный (напр. на большом экране) или мелкий (напр. на мобильном устройстве), эти размеры останутся пропорциональными. Объявления наподобие text-indent: 1.5em и margin: 1em в CSS крайне популярны.

Единица ex используется нечасто. В ней выражаются размеры, которые должны отсчитываться от x-высоты шрифта. X-высота — это, грубо говоря, высота строчных букв вроде a , c, m, или o. У шрифтов с одинаковым размером (и, соответственно, при одинаковом em ) может быть огромная разбежка в размерах строчных букв, и если важно, чтобы какая-то картинка, например, соответствовала x-высоте, единица ex к вашим услугам.

Единица px в CSS волшебная. Она не связана с текущим шрифтом, но и с физическими сантиметрами или дюймами обычно тоже не связана. Единица px определена как что-то маленькое, но видимое, т.е. горизонтальную линию толщиной 1px можно было отобразить с четкими краями (без сглаживания). Что считается четким, маленьким и видимым, зависит от устройства и способа пользования им: держите ли вы его прямо перед глазами, как мобильный телефон, на расстоянии вытянутой руки, как монитор, или где-то на промежуточном расстоянии, как электронную книгу? Поэтому px по определению не фиксированная длина, а нечто, зависящее от типа устройства и его обычного использования.

Чтобы понять, почему единица px именно такая, представьте ЭЛТ-монитор из 1990-х: наименьшая точка, которую он мог отобразить, была размером примерно в 1/100 дюйма (0,25 мм) или чуть больше. Свое название единица px получила от тех экранных пикселей.

Нынешние устройства в принципе могут отображать и более мелкие четкие точки (хотя их может быть трудно разглядеть без лупы). Но документы из прошлого века, которые использовали px в CSS, независимо от устройства выглядят по-прежнему. Принтеры, в особенности, могут отображать четко отображать линии гораздо тоньше 1px, но даже на принтерах линия в 1px выглядит почти так же, как выглядела бы на мониторе. Устройства меняются, но единица px всегда выглядит одинаково.

На самом деле CSS требует, чтобы 1px был точно равен 1/96 дюйма при любом выводе на печать. В CSS считается, что принтерам, в отличие от экранов, не нужны разные размеры для px , чтобы отображать четкие линии. Поэтому при печати px не только одинаково выглядит независимо от устройства, но и заведомо измеряется одной и той же величиной (совсем как единицы c m , pt , mm , in и pc , как объяснялось выше).

CSS также определяет, что растровые изображения (напр. фотографии) по умолчанию отображаются в масштабе 1 пиксель изображения на 1px. Фотография разрешением 600 на 400 будет 600px шириной и 400px высотой. Тем самым пиксели фотографии привязываются не к пикселям устройства вывода (которые могут быть очень мелкими), а к единицам px . Это позволяет точно совмещать изображения с другими элементами документа, при условии, что вы используете в своих стилях единицы px , а не pt , cm и т.д.

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

Единицы pt (пункт) and pc (пика) CSS получил в наследство от печатного дела. Там традиционно применялись эти и подобные единицы, а не сантиметры или дюймы. В CSS незачем использовать pt , пользуйтесь любой единицей на свой выбор. Но есть хорошая причина не использовать ни pt , ни других абсолютных единиц, а использовать только em и px .

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

0.5pt, 1px, 1pt, 1.5px, 2px

Если первые четыре линии выглядят одинаковыми (либо линия в 0.5pt пропала), скорее всего вы видите это на мониторе, не способном отображать точки мельче 1px. Если линии выглядят возрастающими по толщине, скорее всего вы видите эту страницу на качественном экране или на бумаге. А если 1pt выглядит толще, чем 1.5px, то это скорее всего экран мобильного устройства (похоже, последняя фраза описывает ситуацию до правки 2011 года — прим. перев.).

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

Но размеры шрифтов еще лучше задавать в em . Идея в том, чтобы 1) не задавать размер шрифта для элемента BODY (в HTML), а использовать размер шрифта по умолчанию для устройства, поскольку это наиболее удобный для читателя размер; и 2) указывать размеры шрифта других элементов в em : H1 , чтобы H1 был в 2½ раза крупнее основного шрифта страницы.

Едиственное место, где можно использовать pt (либо cm или in ) для размера шрифтов — стили для печати, если нужно, чтобы напечатанный шрифт был строго определенного размера. Но даже там чаще всего лучше использовать размер шрифта по умолчанию.

Таким образом, единица px избавляет от необходимости знать разрешение устройства. Независимо от разрешения устройства вывода (96 dpi, 100 dpi, 220 dpi или 1800 dpi), длина, указанная в виде целого числа px , всегда выглядит хорошо и везде достаточно похоже. Но что, если мы хотим узнать разрешение устройства, например, чтобы решить, можно ли использовать линию в 0.5px ? Выход — проверить разрешение с помощью медиавыражений. Подробности о медиавыражениях — за рамками этой статьи, но вот небольшой пример:

Новые единицы измерения в CSS

Чтобы было еще проще писать стилевые правила, зависящие только от размера шрифта по умолчанию, с 2013 года в CSS есть новая единица: rem . Один rem (от «root em», т.е. «корневой em» или «em корневого элемента») — это размер шрифта корневого элемента в документе. В отличие от em , который может быть для каждого элемента свой, rem для всего документа один и тот же. Например, чтобы задать элементам P и H1 одинаковый внешний отступ слева, вот для сравнения CSS-код до 2013 года:

Благодаря другим новым единицам стало можно указывать размеры относительно окна пользователя. Это vw и vh . Единица vw — 1/100 ширины окна, а vh — 1/100 его высоты. Еще есть vmin , соответствующая меньшему из vw и vh . И vmax (можете догадаться, что она делает).

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

Created 12 Jan 2010;
Last updated Вт 05 ноя 2020 19:12:56

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

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

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

Единицы измерения: px, em, rem и другие

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

Пиксели: px

Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.

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

Пиксели могут быть дробными, например размер можно задать в 16.5px . Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px , его нужно разделить на три части – волей-неволей появляются 33.333. px . При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.

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

  • Главное достоинство пикселя – чёткость и понятность
  • Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами

Существуют также «производные» от пикселя единицы измерения: mm , cm , pt и pc , но они давно отправились на свалку истории.

Вот, если интересно, их значения:

  • 1mm (мм) = 3.8px
  • 1cm (см) = 38px
  • 1pt (типографский пункт) = 4/3 px
  • 1pc (типографская пика) = 16px

Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.

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

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

Поэтому ни о каком соответствии cm реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.

Относительно шрифта: em

1em – текущий размер шрифта.

Можно брать любые пропорции от текущего шрифта: 2em , 0.5em и т.п.

Размеры в em – относительные, они определяются по текущему контексту.

Например, давайте сравним px с em на таком примере:

24 пикселей – и в Африке 24 пикселей, поэтому размер шрифта в

А вот аналогичный пример с em вместо px :

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

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

Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.

Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.

Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом «хвосты» букв, таких как р , g могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.

В спецификации указаны также единицы ex и ch, которые означают размер символа «x» и размер символа «0» .

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

Эти единицы используются чрезвычайно редко, так как «размер шрифта» em обычно вполне подходит.

Проценты %

Проценты % , как и em – относительные единицы.

Когда мы говорим «процент», то возникает вопрос – «Процент от чего?»

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

Это очень важная особенность процентов, про которую, увы, часто забывают.

Отличный источник информации по этой теме – стандарт, Visual formatting model details.

Вот пример с % , он выглядит в точности так же, как с em :

В примере выше процент берётся от размера шрифта родителя.

А вот примеры-исключения, в которых % берётся не так:

margin-left При установке свойства margin-left в % , процент берётся от ширины родительского блока, а вовсе не от его margin-left . line-height При установке свойства line-height в % , процент берётся от текущего размера шрифта, а вовсе не от line-height родителя. Детали по line-height и размеру шрифта вы также можете найти в статье Свойства font-size и line-height. width/height Для width/height обычно процент от ширины/высоты родителя, но при position:fixed , процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда % требует соблюдения дополнительных условий, за примером – обратитесь к главе Особенности свойства height в %.

Единица rem: смесь px и em

Итак, мы рассмотрели:

  • px – абсолютные, чёткие, понятные, не зависящие ни от чего.
  • em – относительно размера шрифта.
  • % – относительно такого же свойства родителя (а может и не родителя, а может и не такого же – см. примеры выше).

Может быть, пора уже остановиться, может этого достаточно?

Э-э, нет! Не все вещи делаются удобно.

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

Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде Ctrl + + , но они работают слишком тупо – берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?

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

Следующие кандидаты – em и % .

Разницы между ними здесь нет, так как при задании font-size в процентах, эти проценты берутся от font-size родителя, то есть ведут себя так же, как и em .

Вроде бы, использовать можно, однако есть проблема.

Попробуем использовать этот подход для
.

Руководство по CSS

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

Данный справочник по CSS перечисляет все стандартные свойства, псевдоклассы и псевдоэлементы, @-правила, единицы измерения и селекторы CSS в алфавитном порядке. Справочник позволит вам быстро найти подробную информацию о каждом из них. Он не только перечисляет свойства CSS 1 и CSS 2.1, но является и справочником по CSS3 со ссылками на описание каждого стандартизированного или уже стабилизированного свойства CSS3. Также включает в себя краткое руководство DOM-CSS / CSSOM.

Заметьте, что определения CSS-правил полностью (ASCII) тексто-ориентированы, в то время как определения правил DOM-CSS / CSSOM объектно-ориентированы.

Смотрите также Mozilla CSS Extensions для Gecko-специфичных свойств с префиксом -moz ; и WebKit CSS Extensions для WebKit-специфичных свойств. Смотрите Обзор CSS-префиксов для разных браузеров от Peter Beverloo для всех свойств с префиксами.

Базовый синтаксис правил

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

Стили

Примеры

Больше о примерах: #1, #2

@-правила

Так как у них есть много различных структурных форматов, смотрите нужный синтаксис @-правил.

Селекторы в CSS

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

Что такое CSS селекторы и каскадность?

CSS селектор — это часть правила, с помощью которого можно выбирать элемент в HTML/XHTML/XML документе. Выбранный элемент можно оформить с помощью различных свойств (стилей) CSS.

Для начала обусловимся:

Под словом «селектор» подразумевается один CSS селектор: div , #content , :hover ;

  • Под словом «CSS правило» (далее просто «правило») подразумевается комбинация селекторов: #content .text p .
  • Приоритеты и каскадность

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

    При вычислении приоритета в браузере, каждый селектор получает баллы, затем баллы складываются. Так css-правило получает «вес». В итоге, элемент получит стили самого «весомого» правила.

    внутри элемента .text получит стиль color:red; , а не color:blue; , потому что приоритет выше (111, а не 11).

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

    Какой селектор какие баллы получает:

    Тип селектора Описание селектора Баллы
    \* универсальный селектор
    div тег 1
    :first-letter псевдо-элемент 1
    [атрибут=»значение»] селектор атрибута 10
    .text класс 10
    :hover псевдо-класс 10
    #content селектор по id 100
    style=»color:red;» атрибут style 1000
    !important добавка к значению 10000

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

    Приоритеты при медиа запросах

    Медиа запросы, например: @media ( max-width:500px ) < >не участвуют в подсчете приоритета и всегда должны располагаться ниже всех остальных правил, чтобы перебивать предыдущие, когда срабатывает указанное медиа условие.

    Неправильно: потому что так медиа запрос всегда имеет меньший приоритет и вообще не будет работать:

    Все селекторы CSS (коротко)

    Такие селекторы указываются в HTML документе (их можно увидеть в исходном коде страницы).

    Селектор Пример Описание
    * * Все элементы. Кроме псевдо-элементов.
    .class .myclass Элемент с .
    #id #main Элемент с .
    HTML тег span Элемент .
    [атрибут] [title] Элементы с атрибутом title .
    [атрибут = значение] [title=»cost»] Элементы с атрибутом title=»cost» .
    [атрибут

    = значение]

    [title

    =»cost»]

    Элементы с атрибутом title , в значение которого есть cost окруженное или нет пробелом ‘ «’: cost , cost foo , foo cost«
    [атрибут ^= значение] [src^=»http»] Элементы с атрибутом src , значение которого начинается с http .
    [атрибут $= значение] [src$=».png»] Элементы с атрибутом src , значение которого заканчивается на .png .
    [атрибут *= значение] [src*=»kama»] Элементы с атрибутом src , в значении которого присутствует ‘ kama ‘.

    есть еще селектор: [атрибут |= значение] . Пример: [lang |= ru] — элементы с атрибутом lang, значение которого равно ru или начинается с ru-, например «ru-RU». Но он практически не используется и его заменяет комбинация: [lang = ru], [lang ^= ru-] .

    Не указывается в разметке HTML-документа. Иногда динамичны — срабатывают при определенном условии (наведение курсора на элемент). Начинаются с двоеточия ‘ : ‘.

    Псевдо-класс Пример Описание
    :link a:link Выбор всех не посещенных ссылок.
    :visited a:visited Выбор всех посещенных ссылок.
    :active a:active Выбор активной ссылки.
    :hover a:hover Выбор ссылки при наведении курсора мышки. Вместо « может быть любой элемент
    По расположению на одном уровне
    :first-child *:first-child Любой первый элемент в блоке.
    :last-child *:last-child Любой последний элемент в блоке.
    :only-child *:only-child Любой элемент в блоке, если там всего один элемент.
    :nth-child(n)
    *:nth-child(2) Любой второй элемент в блоке.
    *:nth-child(2n) Любые элементы в блоке по счету: 2, 4, 6, … (чётные).
    *:nth-child(even) Любые элементы в блоке по счету: 2, 4, 6, … (чётные).
    *:nth-child(2n+1) Любые элементы в блоке по счету: 1, 3, 5, … (нечётные).
    *:nth-child(odd) Любые элементы в блоке по счету: 1, 3, 5, … (нечётные).
    *:nth-child(3n+2) Элементы номер 2, 5, 8 и так далее.
    Наглядно Посмотреть как это работает →
    :nth-last-child(n) *:nth-last-child(2) Любой второй элемент в блоке с конца.
    По расположению на одном уровне с тем же тегом
    :first-of-type p:first-of-type Выбор первого дочернего элемента

    .

    :last-of-type p:last-of-type Выбор последнего дочернего элемента

    .

    :only-of-type p:only-of-type Выбор дочернего элемента

    , если у родителя элемент

    всего один.

    :nth-of-type(n) p:nth-of-type(2) Выбор второго дочернего элемента

    .

    :nth-last-of-type(n) p:nth-last-of-type(2) Выбор второго дочернего элемента

    с конца.

    Поля форм
    :enabled input:enabled Выбор включенного . Обычно «:enabled« просто не пишется.
    :disabled input:disabled Выбор выключенного .
    :focus input:focus Выбор , который находится в фокусе (в который установлен курсор).
    :checked input:checked Выбранный элемент типа radio или checkbox.
    Остальные
    :root :root Выбор корневого элемента в документе.
    :empty p:empty Пустой элемент

    , в котором нет ни текста ни элементов.

    :lang(язык) p:lang(ru) Выбор элемента

    с атрибутом lang, значение которого начинается с «ru».

    :target :target Выбор активного элемента на странице, который имеет якорную ссылку.
    :not(селектор) :not(p) Выбор всех элементов, кроме

    .

    • Актуальную поддержку браузеров для CSS3 селекторов смотрите по этой ссылке.

    меню

    Элементы, которых реально не существуют в HTML документе. Начинаются с двойного двоеточия :: , но можно и с одинарного : .

    Псевдо-элемент Пример Описание Подд. / CSS
    ::first-letter p::first-letter Выбирает первую букву элемента

    .

    100% / 1
    ::first-line p::first-line Выбирает первую строку элемента

    .

    100% / 1
    ::before p::before Вставляет указанное в content:» содержимое в начало

    .

    100% / 2
    ::after p::after Вставляет указанное в content:» содержимое в конец

    .

    100% / 2
    ::selection p::selection Оформит выделенный (мышкой) текст внутри

    . Для firefox нужен префикс moz ( p::-moz-selection )

    71.41% / 3

    меню

    Для объединения селекторов, используются символы комбинаторы: , > , + ,

    , , . Они устанавливают взаимосвязь между селекторами.

    Комбинатор Пример Описание Подд. / CSS
    правило, правило div a, span i Элемент внутри

    и элемент внутри .

    100% / 1
    селекторСелектор .c1.c2 Элементы одновременно с двумя классами c1 и c2 . 100% / 1
    селектор селектор div span Элемент внутри
    .
    100% / 1
    селектор > селектор div > span Элементы , у которых родитель
    .
    100% / 2
    селектор + селектор div + p Один элемент

    , который находится сразу после

    p

    Все элементы

    , которые находятся сразу после

    Все селекторы CSS (подробно)

    Выбирает абсолютно все элементы на странице: «a, ul, li, div и т.д. Можно использовать для сброса стилей всех элементов. Например, такой код обнуляет внутренние и внешние отступы у всех элементов:

    * можно использовать в связке с другими селекторами. Например, сделаем так чтобы все дочерние элементы #container выделялись сплошной черной рамкой шириной 1px.

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

    Выбирает элемент у которого есть атрибут class с указанным значением: .

    Название класса, может состоять из латинских букв (a-zA-Z), цифр (0-9), символа дефиса и подчеркивания (- _).

    Следующий код устанавливает красный цвет текста для всех элементов с классом error —

    У одного элемента может быть несколько классов (через пробел):

    Выбирает элемент у которого есть атрибут id с указанным значением: .

    Идентификатор может быть присвоен только одному элементу на странице (если присвоить несколько, то мир не рухнет, но так делать не принято).

    Идентификатор должен состоять из латинских букв (a-zA-Z), цифр (0-9), символа дефиса или подчеркивания: — _ . Начинается он только с буквы!

    Следующий код устанавливает ширину и отступ элемента с идентификатором:

    Селектор по ID имеет больший приоритет над селектором по классу (см. начало статьи). Поэтому по возможности получайте элемент по селектору класса, это считается правилом хорошего тона и позволит при необходимости без лишних усилий «перебить» стили.

    Селектор HTML тега. Применяться ко всем указанным элементам в документе. Часто используется для задания цвета, фона, шрифта и др.

    Следующий код задает цвет текста для всех ссылок и отступы для UL списков:

    CSS-правило, выбирает элемент Y, который является дочерним элемента X. Может состоять из нескольких селекторов (X Y Z). Сначала обязательно указывается родитель, а после него дочерние элементы. Их количество может быть любым. Свойства стиле будут применены только к последнему элементу.

    Например, следующий код выбирает любой элемент , являющийся потомком элемента

  • : (
  • текст ):

    Это правило можно сочетать с идентификаторами и классами: body.opera a < color:blue; >.

    a:link, a:visited, a:hover, a:active

    Селекторы псевдоклассов. Задает стиль ссылкам на странице документа в зависимости от их состояния. Псевдокласс :link – устанавливает цвет текста непосещенной ссылке, а псевдокласс :visited – стилизует уже посещенную ссылку. При наведении мыши (под курсором) — a:hover , и в момент нажатия — a:active .

    Все непосещенные ссылки будут красные, а посещенные фиолетовые, а при наведении станут зеленые, а при нажатии на ссылку голубые.

    Выбирает первый элемент Y, который находится после X (не вложен, а рядом). Стили будут применяться только к последнему элементу X.

    Например, следующий код устанавливает красный цвет текста в абзаце p, который расположен сразу после div :

    Выбирает все элементы Y, которые расположены после X на одном уровне. По поведению похож на X + Y. Разница в том, что будут выбраны все следующие элементы, а не только первый.

    Например, в указанном коде будут выбраны все элементы p , которые расположены после div :

    Окрасит «текст 2» и «текст 3»:

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

    Добавит отступ для li первого уровня, т.е. тех который является прямым потомком элемента ul :

    Это правило не коснется

      .

    Селектор атрибутов. Выбирает элементы, которые содержат указанный атрибут.

    Например, следующий код меняет цвет ссылки при наличии в элементе a атрибута title :

    Окрасит только «текст»:

    Селектор атрибутов с точным значением. Выбирает элементы, у которых имеется атрибут с указанным значением.

    Например, следующий код меняет цвета ссылки на сайт «site.ru»:

    Окрасит только «текст»:

    Селектор атрибутов с плавающим значением. В следующем примере, символ «*» говорит селектору о том, что нужное значение может быть в любом месте атрибута href у тега a :

    Окрасит «текст» и «текст 2»:

    Для уточнения выбора можно использовать указатели » ^ » (в начале строки), » & » (в конце строки) или «

    » (точное значение через пробел). См. ниже.

    Это другое применение селектора атрибутов со плавающим значением (см. выше).

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

    А можно все это сократить до одного правила, но для этого у каждого элемента должен быть один и тот же атрибут: data-filetype=»image» . Например все ссылки в HTML имею этот атрибут:

    Тогда все ссылки на картинки можно выбрать так:

    Селектор атрибутов со значением в начале. Выбирает элемент, атрибут которого начинается с указанного значения.

    Следующий код показывает, как выбрать элементы а , ссылки в которых начинаются на « http »:

    Это css-правило установит фоновую картинку только для «текст»:

    Рекомендуется не добавлять к параметру вышеуказанного поиска дополнительных символом, так как искомая ссылка может начинаться с «https».

    Селектор атрибутов со значением в конце. «$» — означает конец строки.

    Например, выделим элементы, которые ссылаются на файлы определенного расширения. Следующий код выберет ссылки a , ссылающиеся на изображения формата .jpg :

    Окрасит только «текст»:

    Селектор атрибутов с одним из значений разделенных пробелом.

    Выбирает элемент у которого в значении атрибута foo есть bar . Он чем-то похож на *= , но если *= ищет указанную строку bar в любом месте значения атрибута, то

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

    Например такой css код:

    Об этом селекторе не многие знают, а ведь он иногда очень удобен.

    Селектор псевдоклассов. Выделяет активный якорь в HTML. Допустим у нас ссылка ссылается на внутренний якорь на странице, тогда при клике по этой ссылке этот селектор выделить элемент имеющий атрибут .

    Селектор псевдоклассов. Стилизует включенные radio или checkbox. Обычно применяется для выделения текста. Может использоваться с input или option или просто без них: input:checked , option:checked или :checked .

    Например, следующий код выделяет сплошной черной рамкой в 1px область возле включенного флажка:

    Селектор псевдоэлементов. Добавляет элемент в начало X (внутрь тега). Работает только совместно со свойством content , которое указывает содержание добавленного элемента. content нужно указывать даже если содержание пустое ( content:» ), т.к. элемент должен хоть что-то содержать.

    Когда-то все браузеры реализовали эти псевдоэлементы с одним двоеточием: :after/:before.
    Стандарт с тех пор изменился и сейчас все, кроме IE8, понимают также современную запись с двумя двоеточиями. А для IE8 нужно по-прежнему одно.

    Например с помощью таких стилей, можно указать значок для LI списка:

    Селектор псевдоэлементов. Добавляет элемент в конец X (внутрь тега). Работать только совместно со свойством content , которое указывает содержание добавленного элемента. content нужно указывать даже если содержание пустое ( content:» ), т.к. элемент должен хоть что-то содержать.

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

    Селектор псевдокласса. Срабатывает только при наведении мышки на элемент, когда курсор над элементом. Может применяться для любых элементов ( div, span ) не только ссылок .

    В следующем примере при наведении мышкой под ссылкой будет появляться черная линия толщиной 1px (замена свойству underline):

    А в следующем коде показано изменение цвета фона при наведении на элемент

    Селектор псевдокласса. Выбирает элементы, которые не содержат указанного селектора. Вместо «selector» может быть любой селектор, кроме псевдоэлементов ( :first-letter ). Двойное отрицание запрещено — :not(:not(. )) .

    Например, следующий код выбирает для стилизации все элементы, кроме элемента p :

    А в этом примере выбираются все элементы li , у которых нет класса .last :

    Выберет «элемент 1» и «элемент 2»:

    Селектор псевдоэлементов. ::first-line стилизует начальную строку.
    ::first-letter стилизует начальную букву. Изменяются только шрифт, цвет текста, фон, а также сильно привязан к множеству параметров: ширина окна браузера, язык, шрифт и т.п.

    С CSS 2.1, для различия, принято псевдоэлементы помечать двойным двоеточием «::», а псевдоклассы одинарным «:».

    Эти селекторы можно записывать с одним двоеточием :first-line , но двойное ::first-line предпочтительнее.

    В следующих примерах показано, как использовать указанные псевдоэлементы:

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

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

    #2 Выбираем первую строку в абзаце

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

    Выбирает каждый «n-ый» элемент Х, который находится на одном уровне с X. Считает все элементы на уровне X, т.е. любой тип, а не только тип X.

    Под типом подразумевается именно тег элемента (div, span, li), а не его класс или что-то еще.

    Особенность: есть такой же селектор :nth-of-type(n) разница между ними в том, что X:nth-child(n) считает все элементы на одном уровне, не важно какой тип указан в Х, а Х:nth-of-type(n) считает только элементы типа Х находящиеся на одном уровне. Например:

    • odd (нечетные),
    • even (четные),
    • число (порядковый номер с 1)
    • и выражение (an+b, a и b целые числа, n — счетчик от 0).
    • смотреть на примере >

    n — odd или even

    Раскрасим четные и нечетные параграфы в разные цвета:

    n — число

    Установит красным цветом второй элемент:

    Окрасит «Второй параграф.»:

    n — выражение

    Формула выражения: an + b , где «a» — число, которое будет умножаться на n, «n» — счетчик от 0-999, «b» — число, отступ.

    в селекторе :nth-child(2) указана только «а».

    :nth-child(odd) можно заменить на :nth-child(2n+1) — 1, 3, 5, 7 .

    :nth-child(even) можно заменить на :nth-child(2n) — 2, 4, 6, 8 .

    :nth-child(3n+4) — 4, 7, 10, 13 .

  • :first-child можно заменить на :nth-child(0n+1) или :nth-child(1)
  • Например: обратимся к каждому третьему элементу на текущем уровне, где расположены p:

    Выбирает начиная с конца. Работает точно также как и предыдущий :nth-child(n) только отсчет идет не сверху, а снизу.

    Также вместо n может быть:

    • odd — нечетные
    • even — четные
    • число — порядковый номер с 1
    • выражение an+b , где a и b целые числа, n — счетчик от 0 до 999).

    Например, следующий код установит красным цветом второй с конца параграф:

    Окрасит «Второй параграф.»:

    Еще примеры смотрите в предыдущем селекторе :nth-child(n) .

    Выбирает элемент по номеру указанному в «n». Начинает отсчет от первого элемента типа X находящегося на одном уровне.

    Под типом подразумевается именно тег элемента (div, span, li), а не его класс.

    Особенность: есть такой же селектор :nth-child(n) разница между ними в том, что X:nth-of-type(n) выберет только элементы типа Х находящиеся на одном уровне, а X:nth-child(n) считает все элементы всех типов на одном уровне, не важно какой тип указан в Х. Например:

    • odd — нечетные
    • even — четные
    • число — порядковый номер с 1
    • выражение an+b , где a и b целые числа, n — счетчик от 0 до 9999.

    #1 n — add или even

    Раскрасим четные и нечетные параграфы в разные цвета. Считает именно параграфы без h1, как это делает :nth-child :

    #2 n — число

    Установит красным цветом второй элемент:

    Окрасит «Второй параграф.»:

    #3 n — выражение

    Формула выражения: an + b , где «a» — число, которое будет умножаться на n, «n» — счетчик от 0-999, «b» — число, отступ.

    в селекторе :nth-of-type(2) указана только «а».

    :nth-of-type(odd) можно заменить на :nth-of-type(2n+1) — 2, 4, 6, 8 .

    :nth-of-type(even) можно заменить на :nth-of-type(2n) — 1, 3, 5, 7 .

    :nth-of-type(3n+4) — 4, 7, 10, 13 .

  • :first-of-type можно заменить на :nth-of-type(0n+1) или просто :nth-of-type(1)
  • Например: обратимся к каждому третьему элементу p на текущем уровне, где расположены p:

    Селектор псевдокласса. Выбирает элемент по номеру указанному в «n». Начинает отсчет от последнего элемента X находящегося на одном уровне.

    Это такой же селектор как и предыдущий :nth-of-type(n) только считает наоборот, с конца.

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

    Еще примеры смотрите в предыдущем селекторе :nth-of-type(n) .

    Селектор псевдокласса. Выбирает первый элемент который находится на одном уровне с Х. Отсчет начинается с любого элемента не обязательно Х.

    X:first-child это тоже самое что X:nth-child(1)

    #1 Пример: обратимся к первому элементу в блоке #container

    А вот так не выделит ничего:

    #2 Обнуление границы

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

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

    Селектор псевдокласса. Выбирает первый с конца элемент который находится на одном уровне с Х. Отсчет начинается с любого элемента не обязательно X.

    X:last-child это тоже самое что X:nth-last-child(1)

    #1 Пример: обратимся к первому с конца элементу в блоке #container

    А вот так ничего не выделит:

    #2 Покрасим последний элемент li в списке ul в зеленый:

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

    X:first-of-type это тоже самое что X:nth-of-type(1)

    #1 Пример: обратимся к первому элементу div в блоке #container

    #2 Обнуление границы

    :first-of-type часто используется для обнуления свойства border на граничных элементах списка:

    X:only-child (если один элемент в блоке)

    Селектор псевдокласса. Выбирает элемент X, который единственный на уровне X. При подсчете элементов название тега X НЕ учитывается.

    Другими словами: выбирает дочерние элементы X только, когда у родителя количество всех дочерних элементов (неважно какой тип) равно 1.

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

    X:not(:only-child) (если больше чем один элемент в блоке)

    Чтобы выбрать все элементы блока, только в том случае, если в этом блоке всего больше чем один элемент, используем :only-child с отрицанием :not() :

    В результате если у нас один элемент он выбран не будет:

    А если больше одного, то будут выбраны все:

    X:only-of-type (если один элемент типа X в блоке)

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

    Другими словами: выбирает дочерние элементы X только, когда у родителя количество всех дочерних элементов типа X равно 1.

    #1 Выберем ul только с одним элементом в списке.

    Другой вариант: можно ul > li:only-child , потому что обычно в списках ul находятся только li теги.

    #1 Сложное выделение

    У нас есть такой код:

    Как обратиться к «Список 2»?

    Решение 1

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

    Решение 2

    Использование соседних селекторов.

    Браузер находит ul, следующий сразу за p, затем находит его последний дочерний элемент.

    Решение 3

    Это решение пожалуй самое правильное, потому что если между ul или li попадут другие теги, этот пример все равно будет выбирать нужный нам li:

    Браузер выбирает первый ul (именно ul), затем находит первый с конца элемент li (именно li).

    Наглядное пособие по селекторам типа :nth-child

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

    Считаем элементы в блоке с помощью nth-child

    Полезная статья на Хабре — количественные CSS селекторы, учит считать элементы с помощью nth-child . Например, нужно выделить первый элемент, только, если в блоке 6 элементов указанного типа. Или, нужно выделить все элементы блока, если в блоке всего 6 элементов.

    Диапазон элементов в селекторе

    Допустим, у вас есть список из 20 элементов и нужно выбрать элементы с 7 по 14 включительно. Это можно сделать вот так:

    Подключение CSS-стилей. Правила записи CSS

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

    Стиль как атрибут элемента

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

    Встраивание тегов на страницу

    Стили также могут быть встроены на страницу. Для этого в блоке head размещают теги style:

    Внимание! Тег style обязательно должен быть закрыт. Иначе вы не увидите текста страницы!

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

    Подключение внешнего файла стилей

    Весь css-код размещают в отдельном css-файле. По сути это обычный текстовый файл, который содержит код в формате css и имеет расширение .css.

    CSS Синтаксис

    CSS Синтаксис

    CSS — правило-набора, состоит из селектора и блока объявления:

    Селектор h1 указывает на элемент HTML

    , у которого устанавливается стиль, какой Вы пожелаете.

    Декларация блока <свойство: значение;>содержит одно или несколько объявлений, разделенных точкой с запятой ; .

    Каждое объявление содержит имя свойства и значения CSS, разделенных двоеточием : .

    Объявление CSS всегда заканчивается точкой с запятой, объявленнные блоки окружены фигурными скобками <. >.

    В следующем примере все элементы

    текста, будут выравнены по центру text-align: center; , красным цветом color: red; :

    Пример

    CSS Селекторы

    CSS селекторы используются для «поиска» (или выбора) элементов HTML на основе имени элемента, индентификатора id , класса class , атрибута и др.

    Элемент селектор

    Элемент селектор выбирает элементы, основаны на имени элемента.

    Вы можете выбрать все параграфы

    на данной странице (в примере, все элементы

    будут выравненны по центру text-align: center; , с красным цветом color: red; текста):

    Пример

    Селектор идентификатор

    Селектор идентификатор использует атрибут id элемента HTML для выбора конкретного элемента.

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

    Чтобы выбрать элемент с определенным идентификатором >#para1 , а затем следовать по идентификатору элемента.

    Ниже в примере применено правило стиля к элементу HTML с :

    Пример

    Примечание: Имя идентификатора не может начинаться с цифры!

    Селектор класса

    Селектор класса выбирает элементы с определенным атрибутом класса.

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

    В приведенном примере ниже все элементы HTML будут иметь красный цвет color: red; и выравнены по центру text-align: center; :

    Пример

    Вы также можете указать, только определенному элементу HTML p , где будет установлен класс .center .

    В примере ниже, только элемент

    с классом будет выравнен по центру text-align: center; :

    Пример

    В HTML элементах, также можно установить, несколько классов.

    В приведенном ниже примере элемент

    будет оформлен согласно классу и для класса :

    Пример

    Этот параграф относится к двум классам.

    Примечание: Имя класса не может начинаться с цифры!

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

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

    h2 <
    text-align: center;
    color: red;
    >

    <
    text-align: center;
    color: red;
    >

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

    При группировке селекторов, селекторы разделяйте запятой.

    В примере ниже мы сгруппировали селекторы:

    Пример

    CSS комментарии

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

    Комментарии игнорируются браузерами.

    В CSS комментарий начинается с /* и заканчивается */ . Комментарии могут занимать несколько строк:

    Пример

    p <
    color: red;
    /* Это однострочный комментарий */
    text-align: center;
    >

    /* Это
    многострочный
    комментарий */

    In в CSS

    20 ноября 2020 года. Опубликовано в разделах: Азбука терминов. 8933

    Дополнительно CSS может использоваться и с другими документами типа XML, наиболее часто используются документы XUL и SVG.

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

    Принцип работы CSS

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

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

    Как и где можно написать CSS

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

    Для чего нужен CSS

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

    Что лучше: простой HTML или HTML с CSS

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

    Когда был создан World Wide Web, разработчики применяли только один язык — HTML. Его использовали как средство вывода структурированного текста. У автора в распоряжении был скудный функционал. Максимум, что можно было сделать – обозначить заголовок, выделить параграф. Тегов тоже было мало.

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

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

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

    Таким образом, пользователи часто натыкались на сообщение: «Чтобы просмотреть страницу, вам необходимо воспользоваться браузером ХХХ».

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

    Использовать HTML с CSS удобнее, чем простой HTML. CSS предоставляет следующие преимущества:

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

    Продвижение сайта с помощью CSS

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

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

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

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

    Основы CSS3. Селекторы

    Введение в стили

    Любой html-документ, сколько бы он элементов не содержал, будет по сути «мертвым» без использования стилей. Стили или лучше сказать каскадные таблицы стилей ( Cascading Style Sheets ) или попросту CSS определяют представление документа, его внешний вид. Рассмотрим вкратце применение стилей в контексте HTML5.

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

    Определение стиля состоит из двух частей: селектор , который указывает на элемент, и блок объявления стиля — набор команд, которые устанавливают правила форматирования. Например:

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

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

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

    background-color представляет свойство, а red — значение. Свойство определяет конкретный стиль. Свойств css существует множество. Например, background-color определяет цвет фона. После двоеточия идет значение для этого свойства. Например, выше указанная команда определяет для свойства background-color значение red . Иными словами, для фона элемента устанавливается цвет «red», то есть красный.

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

    Наборы таких стилей часто называют таблицами стилей или CSS ( Cascading Style Sheets или каскадные таблицы стилей). Существуют различные способы определения стилей.

    Атрибут style

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

    Здесь определены два элемента — заголовок h2 и блок div. У заголовка определен синий цвет текста с помощью свойства color . У блока div определены свойства ширины ( width ), высоты ( height ), а также цвета фона ( background-color ).

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

    Результат в данном случае будет абсолютно тем же, что и в предыдущем случае.

    Часто элемент style определяется внутри элемента head , однако может также использоваться в других частях HTML-документа. Элемент style содержит наборы стилей. У каждого стиля указывается вначале селектор , после чего в фигурных скобках идет все те же определения свойств css и их значения, что были использованы в предыдущем примере.

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

    Создадим в одной папке с html странице текстовый файл, который переименуем в styles.css и определим в нем следующее содержимое:

    Это те же стили, что были внутри элемента style . И также изменим код html-страницы:

    Здесь уже нет элемента style , зато есть элемент link , который подключает выше созданный файл styles.css:

    Таким образом, определяя стили во внешнем файле, мы делаем код html чище, структура страницы отделяется от ее стилизации. При таком определении стили гораздо легче модифицировать, чем если бы они были определены внутри элементов или в элементе style , и такой способ является предпочтительным в HTML5.

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

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

    А в файле style.css определен следующий стиль:

    В данном случае в трех местах для элемента div определено свойство width , причем с разным значением. Какое значение будет применяться к элементу в итоге? Здесь у нас действует следующая система приоритетов:

    Если у элемента определены встроенные стили (inline-стили), то они имеют высший приоритет, то есть в примере выше итоговой шириной будет 120 пикселей

    Далее в порядке приоритета идут стили, которые определены в элементе style

    Наименее приоритетными стилями являются те, которые определены во внешнем файле.

    Атрибуты html и стили css

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

    Введение в CSS, встраивание в HTML

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

    Официальный сайт разработчиков: http://www.w3.org/TR/CSS21/cover.html.

    CSS состоит из правил. Правила представляют из себя название и значение. Разделяются они двоеточием (название правила : значение правила). Никаких кавычек в значениях правил не ставим! Пример:

    Но как CSS связать с HTML? Как прописывать стили оформления документа в html-коде? Для этого есть 3 решения:

    • Вложение(inline).
    • Встраивание(embeding).
    • Связывание(linking).

    Основа документа — html, а к нему уже применяется css. Именно к документу, сам по себе css ничего не значит.

    Метод вложения (inline) CSS

    Используется атрибут style. Его можно поставить в любом визуально отображаемом элементе. В style записываются правила css (название правила : значение правила), несколько правил разделены точкой с запятой (; является окончанием правила в css):

    Метод встраивания (embeding) CSS

    Используется специальный элемент “style”, внутри которого записываются правила css. Внутри style пишем только язык css. Пример:

    В этом примере мы прописали правило для элемента “p” абзац. Во 2-й строке мы прописали селектор (к каким тегам будет применяться правило css). Само правило записано в фигурных скобках “< >”.

    Элемент “style” ставят только в элементе “head”.

    Метод связывания (linking) CSS

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

    Для этого все правила css выносим в отдельный текстовый файл. Обычно этому файлу дают расширение .css. И тогда сразу видно, что в нем прописаны стилевые правила. Ни с чем не перепутаешь.

    Как же тогда связать этот отдельный css-файл с нашим html-документом? Для этого используем следующий код в разделе head:

    Т.е. указываем файл со стилями через гиперссылку на него. Браузер подгружает стилевой файл и применяет правила из него ко всему документу. По сути это работает так же, как и элемент “style”, но только находится в отдельном файле. И мы можем в любом документе поставить ссылку на css-файл. Это очень удобно, т.к. я правлю стили в одном единственном файле; один раз загрузив таблицу стилей, при переходе на следующие страницы браузер больше за этим файлом css не полезет, он достанет его из кэша (типа временного хранилища загруженных файлов). Тем самым я экономлю трафик и ускоряю отображение страницы.

    Внимание! Элемент “link” не сработает с одним атрибутом href. Т.к. эта гиперсылка используется для разных целей. Это служебная гиперссылка, которая может указывать на различные типы файлов, которые могут использоваться для разных целей для ваших страниц. Чтобы дать понять браузеру, что это таблица стилей, используется атрибут rel ( rel=”stylesheet”). В нем указывается тип отношения загружаемого документа и нашего основного документа. Теперь браузер понимает, что загружаемый документ — это таблица стилей.

    Илон Маск рекомендует:  Ссылка на Google
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL