Объявления стилей CSS часть 2

Объявления стилей CSS - часть 2

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

border-radius

Лично мне всегда нравились элементы со скругленными углами, и я всегда пытался каким-то образом добиться этого эффекта. Таких способов много, в том числе использование таблицы 3 × 3, которая на самом деле довольно семантическая с точки зрения семантического кода. Есть разные способы и уловки для создания закругленных углов, но на данный момент наиболее правильным является использование CSS3..

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

div {широкий радиус: 10 пикселей; }

Шрифт содержимого можно редактировать с помощью следующих операторов стиля

цвет

color — определяет цвет текста. Значение задается в шестнадцатеричном коде или стандартном названии цвета. Полный список этих стандартных имен доступен на http://www.w3schools.com/colors/colors_names.asp.

font-weight

font-weight — устанавливает толщину шрифта. Поддерживаются следующие значения: нормальный, полужирный, жирный, светлый, 100, 200, 300, 400, 500, 600, 700, 800 и 900. Числовые значения (от 100 до 900) используются для шрифтов с несколько вариаций толщины. normal равно 400. Меньшие числовые значения предназначены для светлых шрифтов. жирный шрифт равен 700. Значения жирнее и светлее являются относительными и устанавливают текущую толщину на один уровень жирнее или светлее (логично)..

Читать также:  Deep Linking Часть 3 Исправление для IE7

размер шрифта

font-size — определяет размер шрифта. Могут использоваться любые единицы измерения, упомянутые в предыдущем уроке — пиксели, em,% и т. Д..

семейство шрифтов

font-family — определяет сам шрифт — Arial, Times New Roman, Georgia, Verdana и т. д. Шрифты, названия которых состоят из нескольких слов, необходимо заключать в кавычки. Установив значение, вы можете перечислить несколько шрифтов, разделенных запятыми. Затем браузеры попытаются представить контент первым шрифтом, и в случае, если посетитель сайта не установил его на своем компьютере, браузер перейдет к следующему шрифту. Очень часто на сайтах используются так называемые веб-шрифты. Это означает, что они установлены по умолчанию на всех компьютерах. Вот несколько наиболее распространенных групп шрифтов, которые широко используются:

p.verdana {семейство шрифтов: Verdana, Arial, Helvetica, sans-serif; } p.tahoma {семейство шрифтов: Tahoma, "Trebuchet MS", Arial, Helvetica, sans-serif; } p.times {font-family: "Times New Roman", Times, serif; } p.georgia {семейство шрифтов: Georgia, Times, serif; } p.monospace {font-family: "Lucida Console", "Courier New", Courier, моноширинный; } p.cursive {font-family: "Comic Sans", курсив; } p.fantasy {font-family: Воздействие, фантазия; }

Arial и Helvetica на самом деле не являются веб-безопасными, поскольку Helvetica по умолчанию отсутствует в Windows, а Arial отсутствует на Macintosh. Но если вы всегда будете писать второй, когда используете один, у вас не будет никаких проблем. Сами шрифты выглядят практически одинаково и взаимозаменяемы в обеих операционных системах..

Читать также:  Запросы AJAX с кешированием

Типы шрифтов

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

засечки

Засечки — это шрифты с небольшими углами по краям букв. Говорят, что их легче воспринимать при печати текста..

без засечек

Без засечек — это шрифты, у которых нет таких углов. Говорят, что они больше подходят для мониторов. Это связано с тем, что эти мелкие углы не всегда достаточно хорошо отображаются на больших пикселях мониторов. Однако это может быть не так с экранами HiDPI / retina..

моноширинный

У моноширинных шрифтов одинаковая ширина букв. В свое время писатели использовали такие шрифты.

курсив

Cursive — это шрифты, которые более или менее напоминают рукописный текст. Их не нужно сильно перекручивать. Однако они ближе к тому, как люди пишут, чем печатные шрифты..

фантазия

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

стиль шрифта

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

вариант шрифта

font-option — принимает обычные или прописные значения. В строчных заглавных буквах все буквы должны быть заглавными. Но те, которые не представлены как таковые, представлены в меньшем размере. Оттуда «капители».

Читать также:  Начало работы с JavaScript События

font-stretch

font-stretch — очень немногие шрифты поддерживают этот стиль, поэтому вы вряд ли когда-нибудь будете его использовать. Однако уточним, что шрифты, поддерживающие этот стиль, могут быть представлены как более сжатые или растянутые. Просто чтобы уточнить, что речь идет о представлении самих букв, а не только о расстоянии между буквами..

Много хороших примеров семейств шрифтов и их стилей можно найти здесь по адресу http://www.w3.org/Style/Examples/007/fonts.en.html..

Межбуквенное расстояние

letter-spacing — это уже используется для определения расстояния между отдельными буквами шрифта. Поддерживает положительные и отрицательные значения. В первом варианте буквы будут разделяться на большем расстоянии. Во втором они будут сложены друг в друга.

межсловный интервал

word-spacing — аналогично letter-spacing, только о расстоянии между отдельными словами.

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

text-transform — поддерживает значения none, capitalize, uppercase, lowercase. С помощью этого стиля вы можете изменить способ представления строчных и прописных букв. none является значением по умолчанию и представляет буквы по мере их ввода. Capitalize делает первые буквы всех слов заглавными. верхний регистр делает все буквы заглавными, а строчный делает все буквы строчными.

текстовое оформление

text-decoration — используется для добавления строк ниже, выше или поперек текста. Значения подчеркиваются, подчеркиваются и проходят через линию..

отступ текста

text-indent — удобно, когда вы хотите, чтобы слова из первой строки нового абзаца проходили немного глубже, а следующие строки начинались нормально. Также как дети учатся в школе. Установите числовое значение в некоторых единицах, например 15 пикселей..

Что ж, у вас уже есть знания, как применять довольно большой набор стилей для форматирования текстового содержимого на HTML-странице..

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?