Форум Днепропетровска
Taobao форум СП в Украине
Вернуться   Форум города Днепр (Днепропетровска) > КОМПЬЮТЕРЫ и программы > Онлайн уроки > Сss

Сss Уроки по css

Ответ Добавить объявление Выделить тему
 
Опции темы Опции просмотра
Старый 11.03.2012, 10:32   #1
Strelok
Бессмертный
 
Аватар для Strelok
 
Регистрация: 22.01.2009
Адрес: Ф жДуНгЛяХ
Сообщений: 1,768
cказал Спасибо: 155
сказали Спасибо 639 раз(а) в 348 сообщении
Настроение: Angelic
Вес репутации: 277 Strelok репутация неоспоримаStrelok репутация неоспоримаStrelok репутация неоспоримаStrelok репутация неоспоримаStrelok репутация неоспоримаStrelok репутация неоспоримаStrelok репутация неоспоримаStrelok репутация неоспоримаStrelok репутация неоспоримаStrelok репутация неоспоримаStrelok репутация неоспорима
По умолчанию Отображение текста - Шрифты

Одни из наиболее часто используемых свойств CSS - атрибуты, свзязанные с начертанием текста. Это собственно гарнитура шрифта (имя), начертание (нормальное или курсивное), жирность (вес), размер и приведение. Особенно ничего нового тут нет, поэтому перейдем к рассмотрению свойств.
Font-family

Гарнитура шрифта. Включает себя наименование шрифта или его стиль (семью), или и то, и другое вместе. Записывается этот атрибут так:
body { font-family: "Arial Narrow", Arial, sans-serif}
p { font-family: "Times New Roman", serif}
pre {font-family: Courier}

Здесь "Arial Narrow" - полное наименование шрифта, Arial - укороченный вариант (альтернативный вариант шрифта), sans-serif - его основной стиль. Количество вариантов записи связано в первую очередь с тем, что конкретно этого (указанного в наименовании) шрифта у пользователя может и не быть, в таком случае используется альтернативный вариант, или шрифт, указанный в настройках браузера для данного стиля шрифта. В общем случае:
serif - шрифт типа Times New Roman, пропорциональный, с засечками.
sans-serif - шрифт типа Arial, попрорциональный, рубленый.
cursive - тип Calligraph, имитирующий рукпописный текст, наклонный.
monospace - моноширинный шрифт, как Courier New, например.
fantasy - шрифт наподобие Comic Sans.

Сейчас даже на системах Linux чаще всего стоят шрифты, аналогичные шрифтам Windows (и чаще всего с такими же именами). Но все равно, всегда предпочтительней указывать дополнительно generic-family шрифта.
Font-Style

Начертание шрифта. Вообще говоря, бывает трех типов - normal, italic, oblique. Но разницу между italic и oblique я так и не увидел. Первый (normal) дает нам прямой текст, а два остальных - наклонный (курсивный). Записывается это дело так:
p { font-family: "Times New Roman", serif; font-style:italic}
pre {font-style: normal}
Font-Variant

На мой взгляд, довольно ненужный атрибут, обозначающий приведение текста по высоте - обычный (прописные и строчные буквы) или smallcaps (строчные буквы как малые прописные). Записывается так:
span {font-variant: smallcaps}
span {font-variant: normal}

... а выглядит так:

... Председатель призвал зал к тишине. "А теперь... Выступит заведующий Транспортным отделом"
... Председатель призвал зал к тишине. "А теперь... Выступит заведующий Транспортным отделом"
Font-Weight

Вес (жирность) шрифта. Вообще говоря, может принимать числовые значения от 100 до 800, или же именованные: normal, bold, bolder, lighter. Однако значения, отличные от bold и normal, как правило, внешним видом друг от друга не отличаются (во всяком случае, на экране монитора в окне браузера). Возможно, при использовании CSS для форматирования печатных документов результат будет виден хотя бы на печати. В любом случае лучше индивидуально все это проверять для данного браузера и конкретной программы вывода на печать. Выглядят же различные градации жирности так:

100
sample text - 200
sample text - 300
sample text - 400
sample text - 500
sample text - 600
sample text - 700
sample text - 800
sample text - bold
sample text - bolder
sample text - lighter
sample text - normal
Font-Size

Размер шрифта. Может указываться аж в четырех вариантах - собственно пунктов высоты, процентов относительно высоты элемента HTML по умолчанию, уменьшения-увеличения размера относительно этого же дефолтного размера и именованного размера. И опять, использование именованного размера является скорее всего наиболее предпочтительным из всех этих вариантов. И по той же причине - проблемам совместимости. На самом деле, у пользователя может стоять разрешение 1600 на 1200, при этом шрифт размера 9, выглядящий у Вас (на экране 17" с разрешением 1024x768) очень даже крупно, будет у этого разнесчастного обладателя мощного монитора выглядеть, мягко говоря, мелко. Таким образом имеем обозначения:
xx-small ,x-small ,small ,medium ,large ,x-large ,xx-large
b { font-size:xx-large }

Нотация сильно смахивает на набор одежды для всех весовых категорий, от сверхлайтов до супертяжей, ну да и пусть. Правда, по точности размеров на разных браузерах ситуация сравнима с замечательными размерами изделий китайских рукотворных швейных мастерских. Может подойти любой - от S до XXL. Ну, я отвлекся. Так вот. Другие варианты
h2 {font-size: 150%} /* заголовок в полтора раза выше стандартного размера */
div {font-size: smaller} /* раздел чуть меньше */
div {font-size: larger} /* раздел чуть больше */
li {font-size:12px} /* элемент списка ровно в 12 пикселей */
p {font-size:5ex} /* параграф размером ровно 5 ёкселей */

Пару слов о "ёкселях". Это такой размер, где каждый юнит - высота буквы 'x'. Подробнее о размерах будет рассказано позднее, будут приведены все возможные примеры разнообразных размеров. А пока - как выглядит параграф высотой в пять этих самых exелей.

Просто параграф...

Как видно, один ёксель - не так уж и мало. По сравнению с пикселем.

Настало время нашим изысканиям подвести итог. Рассмотрим последний атрибут и - спать.
Font

Самый что ни на есть общий шрифтовый атрибут. В него (как и в почти все другие классифицируемые свойства CSS) разработчики ухитрились впихнуть все вышерассмотренное. Выглядят же эти сельди в бочке так:
/* font: [ font-style | font-variant | font-weight | font-size font-family] */

span {font: italic small-caps bold x-small "Arial Narrow" arial sans-serif}
i b {font: normal; font-style:normal}
div {font: oblique normal bold}

Первый пример: font: italic small-caps bold x-small "Arial Narrow" Arial sans-serif
Второй пример

Любое из свойств в данном случае указывать необязательно. Главное - соблюдать порядок. В случае неоднозначности (например normal для наклона и normal для веса) лучше использовать отдельные описание. Надежнее так. Надежнее, чем с двумя китайскими парашютами прыгать.




Strelok вне форума   Ответить с цитированием
 
Ответ Добавить объявление Выделить тему


Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
 
Опции темы
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Быстрый переход


Часовой пояс GMT +3, время: 19:15.

 
Работает на vBulletin®.
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
Перевод: zCarot

 
Форумы

Город Днепропетровск
Политика
Новости Днепропетровска
Дом и семья
Кулинария
Наши дети
Доска объявлений
Досуг и развлечения
Музыка
Коллекционирование
Компьютеры и программы
Мобильная связь и интернет
Работа в Днепропетровске
Профессиональные форумы
Он и она...
Беседка
Товары

Каталог цен и товаров
Совместные покупки


Благотворительность

Помощь детям
Услуги

Переводчик текста


Информация

Телепрограмма
Карта Днепропетровска
Доска объявлений
Погода
Сервисы

Фотошоп онлайн
Города Украины
Реклама на сайте
Реклама на форуме
Наверх ↑

форум Днепропетровска
© 2008—2016



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