Единицы размеров (пиксели, Em и Ex) и наследование правил в CSS. Пиксели, Em, Ex и проценты — относительные размеры в CSS
Утверждается, что в целом подавляющее число пользователей только просматривает материалы интернета, однако не принимает активного участия в обсуждении (на форумах , в интернет-сообществах и пр.).
Определение
Согласно данному правилу, доля интернет-пользователей, создающих содержимое, составляет не более 1% от людей, просто просматривающих это содержимое. Так, например, на одного человека, публикующего сообщение на форуме, приходится 99 человек, просматривающих этот пост , но не реагирующих на него.
Близкие закономерности
Правило одного процента имеет сходство с законом Парето (о соотношении 80:20), согласно которому 20% участников группы выполняют 80% всей работы.
Напишите отзыв о статье "Правило одного процента"
Примечания
Ссылки
Отрывок, характеризующий Правило одного процента
– Посмотри ка, Анисьюшка, что струны то целы что ль, на гитаре то? Давно уж в руки не брал, – чистое дело марш! забросил.Анисья Федоровна охотно пошла своей легкой поступью исполнить поручение своего господина и принесла гитару.
Дядюшка ни на кого не глядя сдунул пыль, костлявыми пальцами стукнул по крышке гитары, настроил и поправился на кресле. Он взял (несколько театральным жестом, отставив локоть левой руки) гитару повыше шейки и подмигнув Анисье Федоровне, начал не Барыню, а взял один звучный, чистый аккорд, и мерно, спокойно, но твердо начал весьма тихим темпом отделывать известную песню: По у ли и ице мостовой. В раз, в такт с тем степенным весельем (тем самым, которым дышало всё существо Анисьи Федоровны), запел в душе у Николая и Наташи мотив песни. Анисья Федоровна закраснелась и закрывшись платочком, смеясь вышла из комнаты. Дядюшка продолжал чисто, старательно и энергически твердо отделывать песню, изменившимся вдохновенным взглядом глядя на то место, с которого ушла Анисья Федоровна. Чуть чуть что то смеялось в его лице с одной стороны под седым усом, особенно смеялось тогда, когда дальше расходилась песня, ускорялся такт и в местах переборов отрывалось что то.
– Прелесть, прелесть, дядюшка; еще, еще, – закричала Наташа, как только он кончил. Она, вскочивши с места, обняла дядюшку и поцеловала его. – Николенька, Николенька! – говорила она, оглядываясь на брата и как бы спрашивая его: что же это такое?
Николаю тоже очень нравилась игра дядюшки. Дядюшка второй раз заиграл песню. Улыбающееся лицо Анисьи Федоровны явилось опять в дверях и из за ней еще другие лица… «За холодной ключевой, кричит: девица постой!» играл дядюшка, сделал опять ловкий перебор, оторвал и шевельнул плечами.
– Ну, ну, голубчик, дядюшка, – таким умоляющим голосом застонала Наташа, как будто жизнь ее зависела от этого. Дядюшка встал и как будто в нем было два человека, – один из них серьезно улыбнулся над весельчаком, а весельчак сделал наивную и аккуратную выходку перед пляской.
– Ну, племянница! – крикнул дядюшка взмахнув к Наташе рукой, оторвавшей аккорд.
Наташа сбросила с себя платок, который был накинут на ней, забежала вперед дядюшки и, подперши руки в боки, сделала движение плечами и стала.
Где, как, когда всосала в себя из того русского воздуха, которым она дышала – эта графинечка, воспитанная эмигранткой француженкой, этот дух, откуда взяла она эти приемы, которые pas de chale давно бы должны были вытеснить? Но дух и приемы эти были те самые, неподражаемые, не изучаемые, русские, которых и ждал от нее дядюшка. Как только она стала, улыбнулась торжественно, гордо и хитро весело, первый страх, который охватил было Николая и всех присутствующих, страх, что она не то сделает, прошел и они уже любовались ею.
Здравствуйте, уважаемые читатели блога сайт. Сегодня мы продолжим разговор про таблицы каскадных стилей (материалы на эту тему вы сможете найти в ). Без этой технологии сейчас уже не обходится практически ни один сайт в интернете, поэтому изучение языка стилевой разметки так же обязательно, как и штудирование ).
Без понимания основ этой технологии вы не сможете вносить даже небольшие изменения в шаблон вашего сайта и вынуждены будете либо мириться с этим, либо нанимать сторонних специалистов. Если, например, PHP выучить сложно, то ХТМЛ и CSS освоить на пользовательском уровне не составит труда. Во всяком случае попробовать стоит, а там глядишь и само пойдет.
Значения для правил в CSS — цвета, функционалы и размеры
В прошлой статье мы говорили о том, (Style и Link). Сегодня мы продолжим начатую тему и поговорим про наследование в стилевом оформлении и про задание размеров шрифтов (пиксель, пункт, проценты и т.п.).
В общем-то ничего сложного и объемного сегодня не будет, но вот в следующий статье мы уже начнем рассматривать селекторы — тему довольно объемную и, наверное, сложноватую в освоении.
Итак, давайте посмотрим, а где мы можем почерпнуть информацию о таблицах каскадных стилей? Наверное, логично ее будет поискать все на том же сайте , ну, или сразу же перейти на страницу с текущей спецификации CSS . Для просмотра всех имеющихся в этой спецификации правил достаточно перейти по ссылке из верхнего меню под названием "properties " .
В качестве значений для этих правил могут выступать какие-нибудь слова (например, left, right, center, justify и т.п.), которые заранее известны и оговорены в таблице из этой спецификации (см. рисунок выше — столбец «Values»). В качестве значений могут выступать и просто цифры, не имеющие размерности (например, в ) или обозначения (например, #fff8dc).
Чуток поподробнее остановимся на задании цветов в CSS и как это можно претворять в жизнь:
Возможно использование в качестве значений для правил CSS и так называемых функционалов . Ярким примером функционала является Url и заключенный в круглые скобки — url (images/navtabr.png). Таким образом очень часто задают в стилях фоновое изображение:
Ну, и еще в CSS в качестве значений очень часто используются размеры шрифтов и других вещей. Если вы помните, то в они задавались просто цифрами от 1 до 7. А, например, размеры изображений в атрибутах задавались просто числами без обозначения размерности, хотя эти числа подразумевали пиксели.
Стилевая разметка изначально предназначалась для различных устройств вывода — не только для мониторов, но и, например, для оформления информации предназначенной для печати. Поэтому размеры шрифтов или, например, отступы всегда указываются в CSS с единицами размерности . Причем, синтаксис подразумевает слитное написание цифр и единиц размерности (без добавления между ними пробелов).
При этом могут использовать как относительные, так и абсолютные единицы. Абсолютные связаны с физическим миром и для их указания можно будет использовать следующие единицы:
Абсолютные размеры в CSS могут использоваться все для той же печати. Сантиметры (cm) и миллиметры (mm) являются основополагающими единицами метрической системы, а дюймы (in) являются базовой единицей, от которой образуются очень часто используемые в полиграфии пункты (pt) и пики (pc).
Дюйм (in), соответственно, составляет 25,4 миллиметра (mm), а пункт (pt) образуется делением одного дюйма (in) на 72 части. Т.о. один пункт (pt) будет равен примерно одной трети миллиметра (mm). Ну, а одна пика (pc) имеет размер равный 12 пунктам (pt). Тут, думаю, все и так понятно.
Пиксели, Em, Ex и проценты — относительные размеры в CSS
Итак, все абсолютные единицы используются исключительно для печати. А вот для отображения информации на мониторах нужно использовать размеры в относительных единицах. Все дело в том, что физический размер точек, образующих изображения на мониторе (их еще называют пикселями), может быть разным в зависимости от типа и физического размера этого самого монитора.
Кроме того, на любом мониторе можно установить разрешение отличное от физического (когда пиксель будет настолько мал, что не различим) и возможен вариант, когда при большой диагонали монитора и малом разрешение один пиксель будет различим невооруженным глазом. Т.е. пиксель монитора — это величина сугубо относительная и поэтому следует делать упор на задание размеров именно в относительных величинах.
Относительные размеры в CSS могут задаваться с помощью следующих единиц:
Итак, давайте начнем с пикселов (pixels) , о которых мы уже, собственно, все сказали. Они являются относительной величиной по той простой причине, что нет такой физической меры. Пиксель получается на экране монитора в результате обработки видеокартой каких-то там сигналов, и его размер будет варьироваться в зависимости от используемого монитора и в зависимости от установленных настроек (разрешения экрана).
Далее следуют более хитрые относительные единицы размеров шрифтов, которые используются в CSS — Em и Ex . Первое — это высота шрифта используемого на компьютере пользователя по умолчанию, а Ex — высота прописной буквы «x» в используемом по умолчанию шрифте. Наверное, немного не понятно. Давайте рассмотрим это чуть поподробнее.
Многие браузеры принимают значение Ex равным половине значения Em (например, IE). У любого шрифта есть базовая линия, есть заглавные буквы и некоторые особенные строчные буквы, которые выступают за базовую линию (например, «y»). Есть еще буквы с диакритическими знаками, например, «ё» и «й» в русском языке или какие-нибудь умляуты и т.п. Поэтому размер шрифта (Em) определяется выносными элементами.
Ну, а Ex — это, как я уже говорил — высота прописной (маленькой) буквы «x» (икс) в латинской раскладке. Понятно, что в зависимости от соотношения строчных и прописных букв в шрифте, эти значения Em и Ex могут относиться к друг другу по разному, а не просто как Ex=Em/2.
Единицу относительных размеров Ex используют в CSS довольно редко, в основном применяют Em (не беря в расчет пикселы, которые используют для указания размера еще чаще). Но есть еще один способ задания относительных размеров — проценты , т.е. он должен будет высчитываться относительно чего-либо.
Далеко не все правила CSS могут задаваться с процентами. Даже в списке консорциума W3C это выделено в отдельную колонку:
Если напротив правила в колонке «Percentages» ничего не написано, то значит использование процентов для этого правила не доступно. Для тех же стилевых правил, которым разрешено использовать размеры в процентах, в этой колонке будет приведено объяснение для чего это можно будет использовать.
Наследование в CSS согласно спецификации
Все возможные значения правил и все их допустимые значения описаны в этой спецификации и заранее известны. Но тут есть одно очень большое отличие от Html. Все имеющиеся теги языка гипертекстовой разметки во всех браузерах поддерживают и интерпретируются одинаково, чего нельзя сказать о CSS.
Некоторые стилевые свойства могут поддерживаться и интерпретироваться различными браузерами по разному. Причем, это зависит как от браузера, так и от его версии.
Давайте рассмотрим наследование в CSS на примерах для закрепления, так сказать, материала. Для этого создадим своеобразную матрешку из трех контейнеров Div вложенных друг в друга и посмотрим на этом примере, как осуществляется наследование для одних правил и не осуществляется для других:
Итак, мы помним, что для правила color наследование разрешено, а для правила background — нет. В соответствии с этим мы имеем следующую картину:
В первом элементе (внешнем контейнере) мы задаем с помощью атрибута Style правило «color:red», которое предписывает окрасить текст заключенный в этом контейнере в красный цвет. Т.к. правило «color» поддерживает наследование, то это означает, что и во всех вложенных во внешний контейнер элементах текст тоже должен будет окраситься в красный цвет.
Собственно, так и происходит, за исключением самого внутреннего контейнера Div, для которого прописано свое собственное «color:blue». Естественно, что правило, написанное непосредственно для этого Html тега, будет иметь приоритет над тем, которое было прописано во внешнем элементе. Поэтому текст во внутреннем контейнере получится синего цвета.
Хотя правило «background» по спецификации CSS и не поддерживает наследование, но т.к. третий контейнер Div расположен внутри второго, то получается иллюзия наследования фоновой заливки. Но это не так. Если попробовать гипотетически вынести внутренний контейнер за пределы второго, то фона у него уже не будет.
В следующей статье мы уже приступим к такому базовому понятию в .
Удачи вам! До скорых встреч на страницах блога сайт
посмотреть еще ролики можно перейдя на");">
Вам может быть интересно
List style (type, image, position) - Css правила для настройки внешнего вида списков в Html коде
Background в CSS (color, position, image, repeat, attachment) - все для задания цвета фона или фоновой картинки Html элементов
Приоритеты в Css и их повышение за счет Important, комбинация и группировка селекторов, пользовательские и авторские стили
Padding, Margin и Border - задаем в CSS внутренние и внешние отступы, а так же рамкидля все сторон (top, bottom, left, right)
Height, width и overflow - CSS правила для описания области контента при блочной верстке
Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка
Применение атрибута font-size для масштабирования текста является одним из самых сложных аспектов стилевого оформления в CSS. CSS предлагает четыре единицы для измерения размера текста, отображаемого в веб-браузере. Какая из этих четырех единиц наиболее подходит для веб-документов? Этот вопрос вызвал множество обсуждений и споров. Дать однозначный ответ на такой вопрос сложно.
Знакомимся с единицами
- Проценты (% ): Процент во многом похож на em , за исключением нескольких принципиальных различий. Во-первых, текущий размер шрифта равняется 100% (т.е. 12pt = 100%). Использование единицы Процент позволяет вам увеличивать/уменьшать свой текст для удобства чтения.
Эм (em ): em это масштабируемая единица, которая используется для веб-документов. Один em равняется текущему размеру шрифта. Например, если размер шрифта документа 12pt , то 1em равняется 12pt . Поскольку em масштабируется, то 2em равняется 24pt , .5em равняется 6pt и т.д. Благодаря своей масштабируемости и высокой совместимости с мобильными устройствами, em все чаще используется в веб-документах.
Пиксели (px ): Пиксели это единицы фиксированного размера, которые используются для всего, что читается на компьютерном экране. Один пиксель равняется одной точке на компьютерном экране (это наименьшее деление разрешения вашего экрана). Многие веб-дизайнеры используют в веб-документах пиксели, чтобы при отображении в браузере вебсайт выглядел идеально с точки зрения пикселей. Единственная проблема заключается в том, что пиксели нельзя увеличить для удобства читателей со слабым зрением или уменьшить для удобства чтения на мобильных устройствах.
Точки (pt ): Точки традиционно используются в печатных изданиях (т.е. для всего, что печатается на бумаге). Одна точка равняется 1/72 дюйма. Точки очень похожи на пиксели тем, что они имеют фиксированный размер и их нельзя увеличить/уменьшить.
В чем же различие?
Разницу между этими единицами легко понять на конкретных примерах. Вот как они соотносятся друг с другом: 1em = 12pt = 16px = 100%. Давайте посмотрим, что произойдет, когда мы увеличим основной размер шрифта (используя CSS-селектор body) с 100% до 120%.
Как видите, Эм и Процент увеличиваются по мере увеличения основного размера шрифта, а Пиксели и Точки – нет. Легко использовать абсолютный размер для вашего текста, но намного легче использовать масштабируемый текст, который отображается на любом устройстве. Поэтому для текста веб-документа предпочтительнее использовать единицы Эм и Проценты.
EM или Процент?
Мы выяснили что Точка и Пиксель не лучшие единицы для веб-документов. Итак, у нас остались Эм и Процент. Теоретически, Эм и Процент – одинаковые единицы, но на практике между ними есть мелкие различия, которые нельзя не учитывать.
В приведенном выше примере мы использовали единицу Процент в качестве базового размера шрифта (для тэга body). Если вы измените базовый размер шрифта с Процентов на Эм (т.е. body { font-size: 1em; }), то разницы вы, скорее всего, не заметите. Давайте посмотрим, что произойдет, когда размером шрифта для body является 1em , и когда клиент меняет в браузере настройку «Размер текста» (такая настройка доступна в некоторых браузерах, например в Internet Explorer).
Когда размер текста в браузере клиента установлен на «средний» (medium), между Эм и Процентом различий не наблюдается. Но если эту настройку изменить, то разница станет вполне заметной. При настройке «Самый мелкий» (Smallest) Эм оказываются намного мельче, чем Проценты. А при настройке «Самый крупный» (Largest) все наоборот – Эм намного больше, чем Проценты. Можно сказать, что единицы Эм масштабируются, как им и положено делать, но на практике такой текст масштабируется слишком резко, и на некоторых устройствах самый мелкий текст становится нечитаемым.
Вывод
В теории единица Эм является новым стандартом для размеров шрифтов веб-документов, но на практике оказывается, что единица Процент более удобна для пользователей. При изменении клиентских настроек текст, для которого используется единица Процент, масштабируется должным образом, позволяя дизайнерам поддерживать читаемость, доступность и визуальный дизайн.
Победитель: процент (%).
Обычно когда я создаю новый дизайн, то для элемента body я использую проценты (body { font-size: 62.5%; }), а затем использую em для дальнейшего масштабирования. Пока в настройках для body используется единица Процент, вы можете использовать либо Процент, или Эм для любых других правил и селекторов CSS и при этом пользоваться преимуществами, которые дает использование Процента в качестве основного размера шрифта.
За последние несколько лет такая практика стала очень распространенной в веб-дизайне.
Пиксели сейчас используются в качестве допустимых единиц размера шрифта (для чтения мелкого текста пользователи могут использовать функцию браузера «зум»). Однако использование пикселей становится проблематичным из-за мобильных устройств с экранами с очень высокой плотностью пикселей (некоторые устройства Android и iPhone имеют плотность в 200-300 пикселей на дюйм, в связи с чем шрифты в 11 и 12-пикселей становятся плохо различимыми). Итак, я продолжаю использовать Процент в качестве основного размера шрифта для веб-документов.
Процентная запись обычно применяется в тех случаях, когда надо изменить значение относительно родительского элемента или когда размеры зависят от внешних условий. Так, ширина таблицы 100% означает, что она будет подстраиваться под размеры окна браузера и меняться вместе с шириной окна.
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| Группирует значения. | [ crop || cross ] | |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Пример
| Содержимое таблицы |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) - первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- - свойство полностью поддерживается браузером со всеми допустимыми значениями;
- - свойство браузером не воспринимается и игнорируется;
- - при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.