Вредоносное ПО (malware) - это назойливые или опасные программы,...
Применение атрибута 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 (Черновик спецификации ) - первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- - свойство полностью поддерживается браузером со всеми допустимыми значениями;
- - свойство браузером не воспринимается и игнорируется;
- - при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Утверждается, что в целом подавляющее число пользователей только просматривает материалы интернета, однако не принимает активного участия в обсуждении (на форумах , в интернет-сообществах и пр.).
Определение
Согласно данному правилу, доля интернет-пользователей, создающих содержимое, составляет не более 1% от людей, просто просматривающих это содержимое. Так, например, на одного человека, публикующего сообщение на форуме, приходится 99 человек, просматривающих этот пост , но не реагирующих на него.
Близкие закономерности
Правило одного процента имеет сходство с законом Парето (о соотношении 80:20), согласно которому 20% участников группы выполняют 80% всей работы.
Напишите отзыв о статье "Правило одного процента"
Примечания
Ссылки
Отрывок, характеризующий Правило одного процента
– Посмотри ка, Анисьюшка, что струны то целы что ль, на гитаре то? Давно уж в руки не брал, – чистое дело марш! забросил.Анисья Федоровна охотно пошла своей легкой поступью исполнить поручение своего господина и принесла гитару.
Дядюшка ни на кого не глядя сдунул пыль, костлявыми пальцами стукнул по крышке гитары, настроил и поправился на кресле. Он взял (несколько театральным жестом, отставив локоть левой руки) гитару повыше шейки и подмигнув Анисье Федоровне, начал не Барыню, а взял один звучный, чистый аккорд, и мерно, спокойно, но твердо начал весьма тихим темпом отделывать известную песню: По у ли и ице мостовой. В раз, в такт с тем степенным весельем (тем самым, которым дышало всё существо Анисьи Федоровны), запел в душе у Николая и Наташи мотив песни. Анисья Федоровна закраснелась и закрывшись платочком, смеясь вышла из комнаты. Дядюшка продолжал чисто, старательно и энергически твердо отделывать песню, изменившимся вдохновенным взглядом глядя на то место, с которого ушла Анисья Федоровна. Чуть чуть что то смеялось в его лице с одной стороны под седым усом, особенно смеялось тогда, когда дальше расходилась песня, ускорялся такт и в местах переборов отрывалось что то.
– Прелесть, прелесть, дядюшка; еще, еще, – закричала Наташа, как только он кончил. Она, вскочивши с места, обняла дядюшку и поцеловала его. – Николенька, Николенька! – говорила она, оглядываясь на брата и как бы спрашивая его: что же это такое?
Николаю тоже очень нравилась игра дядюшки. Дядюшка второй раз заиграл песню. Улыбающееся лицо Анисьи Федоровны явилось опять в дверях и из за ней еще другие лица… «За холодной ключевой, кричит: девица постой!» играл дядюшка, сделал опять ловкий перебор, оторвал и шевельнул плечами.
– Ну, ну, голубчик, дядюшка, – таким умоляющим голосом застонала Наташа, как будто жизнь ее зависела от этого. Дядюшка встал и как будто в нем было два человека, – один из них серьезно улыбнулся над весельчаком, а весельчак сделал наивную и аккуратную выходку перед пляской.
– Ну, племянница! – крикнул дядюшка взмахнув к Наташе рукой, оторвавшей аккорд.
Наташа сбросила с себя платок, который был накинут на ней, забежала вперед дядюшки и, подперши руки в боки, сделала движение плечами и стала.
Где, как, когда всосала в себя из того русского воздуха, которым она дышала – эта графинечка, воспитанная эмигранткой француженкой, этот дух, откуда взяла она эти приемы, которые pas de chale давно бы должны были вытеснить? Но дух и приемы эти были те самые, неподражаемые, не изучаемые, русские, которых и ждал от нее дядюшка. Как только она стала, улыбнулась торжественно, гордо и хитро весело, первый страх, который охватил было Николая и всех присутствующих, страх, что она не то сделает, прошел и они уже любовались ею. находится тело таблицы. Тело состоит из строк и столбцов. Таблица заполняется построчно.
Каждый тег
Как сделать таблицу в html
Приведем пример, html код:
Пример таблицы Столбец 1 Столбец 2
Обратите внимание на ячейку
Теперь рассмотрим подробно все атрибуты тега
| или строкам | ||||||||||
| ... | ... |
...
2. Свойство background="URL" - задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения. Пример
Преобразуется на странице в следующее: В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif . Обратите внимание на то, что в теге мы добавили style="color:white;" . Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым. 3. Свойство bgcolor="цвет" - задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов) 4. Свойство border="число" - задает толщину рамки таблицы. В предыдущих примерах мы указывали border="1" , что означает толщина рамки - 1 пиксель. 5. Свойство bordercolor="цвет" - задает цвет рамки. Если border="0" , то рамки не будет и цвет рамки не будет иметь смысла. 6. Свойство cellpadding="число" - отступ от рамки до содержимого ячейки в пикселях. 7. Свойство cellspacing="число" - расстояние между ячейками в пикселях. 8. Свойство cols="число" - число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы. 9. Свойство frame="параметр" - как отображать границы вокруг таблицы. Может принимать следующие значения:
10. Свойство height="число" - задает высоту таблицы: либо в пикселях, либо в процентах. 11. Свойство rules="параметр" - где отображать границы между ячейками. Может принимать следующие значения:
|
