Делаем красивые HTML таблицы[html]<a name="22"></a>[/html]
Как вы уже могли понять, CSS позволяет до неузнаваемости преображать коды. Все, что для такого преображения нужно - это указать имя объекта, а дальше оперировать с его именем с помощью свойств CSS.
Эту операцию хотелось бы научить вас производить не только с отдельными контейнерами, но и с таблицами (на данный момент ни одна ролевая не обходится без таблички с важной информацией).
[html]<a href="#ogl">К оглавлению</a>[/html]
Создание таблицы[html]<a name="23"></a>[/html]
Для примера таблицы, вернемся к макету и нарисуем любую невероятной красоты штуку для информации.
При создании таблиц, конечно нужно исходить не из неземной красоты, а из функционала, который табличка должна в себя включать:
Для начала нужно составить HTML-код полученного макета. Попытаемся прочертить визуальные границы:
Составляем HTML-код таблицы. Подробно о том, как составлять HTML код таблицы, написано здесь: Таблицы в HTML.
подготовка
чтобы табличка отображалась так, как на макете, пришлось еще дополнить стиль (убрать фон объявления, передвинуть слово "оъявление" и т.п.)
теперь будем постепенно эту таблицу разукрашивать через стиль.
Сделаем фон. Для этого зададим табличке идентификатор my_table.
Теперь создадим контейнер. Чтобы меньше использовать картинок (что позволит табличке быстрее грузиться), используем CSS3.
[html]<a href="#ogl">К оглавлению</a>[/html]
CSS3: меньше картинок, больше кодов[html]<a name="24"></a>[/html]
Что такое css 3 и откуда он взялся? Жили-были люди, которые хотели быстро и просто раскрасить интернет без использования HTML, и придумали они каскадные таблицы стилей CSS. Разработчики браузеров сказали "ух ты! какая полезная штука. добавим мы ваши коды в браузеры, чтобы они отображались у пользователей". С тех пор мы можем менять дизайн сайта через CSS, а браузеры "понимают" этот код и выдают пользователю картинку.
Но разработчики не стояли на месте, а сели и подумали над новой версией CSS-кодов. Зачем? Затем, что не все действия можно выполнить с помощью css-кодов. Закругленные контейнеры приходилось делать картинками, светящиеся буковки - тоже картинками... Слишком много картинок.
Так появился CSS3 - новые коды для дизайна.
Плюсы и минусы CSS3
Плюс в том, что все ваши дизайнерские навороты можно выполнить с помощью простых кодов, а не делать много-много картинок. Код грузится значительно быстрее картинки, а следовательно, дизайн будет "легче".
Проблема в том, что разработчики браузеров не спешили "учить" браузеры понимать эти коды, поэтому в старых версиях CSS3 не отображается (например, Internet Explorer 9 знает css3, а все предыдущие версии не отображают CSS3).
Так что, использовать CSS надо на всякий пожарный так, чтобы страница была читабельна как с этими кодами, так и без них.
CSS3 кроссбраузерность
Еще одна проблема - каждый браузер по-своему "понимает" коды CSS3. Например, свечение текста в Mozilla и в Opera выглядит по-разному. Еще один пример - закругление границ, некоторые версии некоторых браузеров "требуют" писать css-код для них отдельно:
Так что, при использовании CSS3 требуется тщательная проверка на кроссбраузерность.
В любом случае, повозиться с CSS3 стоит, т.к. экономия трафика значительна.
здесь и далее использовались материалы сайта http://www.wisdomweb.ru
Что умеет CSS3
Свойств CSS3 настолько много, что все их перечислять на наглядном примере в этой статье не имеет смысла - глава растянется на очень большое количество символов, скриншотов и пояснительного текста. Имеет смысл обращаться в Каталог CSS кодов с просьбами сделать урок по интересующим свойствам.
Здесь будут перечислены все свойства, а ниже будут разбираться подробнее те, которые используются в примере дизайна (border-radius, box-shadow и text-shadow).
background-image - модернизировано и позволяет вставлять сразу несколько фоновых изображений для элемента;
background-size - задает размер фонового изображения;
background-origin - позволяет установить, как должно вычисляться положение элемента относительно границ его родительского элемента;
background:linear-gradient и background:radial-gradient - позволяет создавать градиентный фон (линейный и радиальный);
border-radius - создает элемент с закругленными (сглаженными) углами;
box-shadow - делает тень или свечение у элемента;
border-colors - позволяет регулировать цвет каждого пикселя границы;
border-image - осуществляет вставку изображений в качестве границы;
@font-face - позволяет импортировать любые шрифты;
text-shadow - делает тень или свечение у текста;
text-overflow - позволяет указать, что должно случиться с текстом, вышедшем за пределы границ элемента;
word-wrap - заставляет длинные слова, выходящие за пределы границ элемента, разделяться и переноситься на новую строку;
opacity - создает полупрозрачные элементы;
transform - позволяет трансформировать элементы с помощью разных значений, например, поворачивать, смещать, растягивать и т.п.;
transition - одно из свойств, позволяющее анимировать элементы, создает эффекты перехода;
@keyframes - создает анимацию;
column-count - позволяет легко и быстро разбить текст на столбцы;
column-gap - устанавливает величину отступа между столбцами текста;
column-rule - задает ширину, цвет и стиль оформления пространства между столбцами;
column-width - позволяет указывать ширину столбцов текста;
BORDER-RADIUS[html]<a name="24-1"></a>[/html]
С помощью нового CSS3 свойства border-radius Вы можете делать углы элементов сглаженными.
[html]<div style="background:#ccc;height:200px;overflow:auto"><style type="text/css">#el1,#el2,#el3,#el4 {float:left;border:2px #000000 solid;padding:10px;width:300px;height:100px;margin:20px;background-color:#85004B;color:#FFF;font-weight:bold;}#el1 {border-radius:5px;}#el2 {border-radius:10px;}#el3 {border-radius:20px;}#el4 {border-radius:15px;}</style><p id="el1">Я первый элемент со сглаженными углами
<span style="text-decoration:underline">border-radius:5px</span></p><p id="el2">Я второй элемент со сглаженными углами<span style="text-decoration:underline">border-radius:10px</span></p><p id="el3">Я третий элемент со сглаженными углами<span style="text-decoration:underline">border-radius:20px</span></p><p id="el4">Я четвертый элемент со сглаженными углами<span style="text-decoration:underline">border-radius:15px</span></p></div>[/html]
Данное свойство может применяться не ко всем углам элемента, а только к определенным:
border-top-left-radius делает сглаженным только верхний правый угол элемента;
border-top-right-radius делает сглаженным только верхний левый угол элемента;
border-bottom-left-radius делает сглаженным только нижний правый угол элемента;
border-bottom-right-radius делает сглаженным только нижний левый угол элемента.
Можно не использовать эти свойства, а записывать закругление границ одним кодом:
[html]<div style="background:#ccc;height:200px;overflow:auto"><style type="text/css">#el5,#el6,#el7,#el8 {float:left;border:2px #000000 solid;padding:10px;width:300px;height:100px;margin:20px;background-color:#85004B;color:#FFF;font-weight:bold;}#el5 {border-radius:5px 5px 15px 15px;}#el6 {border-radius: 0 0 10px 10px;}#el7 {border-radius:40px 0 40px 0;}#el8 {border-radius:0px 20px 20px 20px;}</style><p id="el5">Я первый элемент со сглаженными углами <span style="text-decoration:underline">border-radius:5px 5px 15px 15px;</span></p><p id="el6">Я второй элемент со сглаженными углами<span style="text-decoration:underline">border-radius: 0 0 10px 10px;</span></p><p id="el7">Я третий элемент со сглаженными углами<span style="text-decoration:underline">border-radius:40px 0 40px 0;</span></p><p id="el8">Я четвертый элемент со сглаженными углами<span style="text-decoration:underline">border-radius:0px 20px 20px 20px;</span></p></div>[/html]
Чтобы border-radius отображалось корректно во всех браузерах, лучше записывать свойство для каждого браузера (значение при этом должно быть одно и то же):
BOX-SHADOW[html]<a name="24-2"></a>[/html]
С помощью свойства box-shadow Вы можете добавлять к элементам страницы тени.
Тень может быть внешней и внутренней. Внешние тени создают эффект приподнятости элемента над остальным содержимым, а внутренние создают эффект вдавленности элемента.
[html]<div style="background:#ccc;height:200px;overflow:auto"><style type="text/css">#el10,#el11,#el9 {float:left;border:2px #000000 solid;padding:10px;width:300px;height:100px;margin:20px;background-color:#85004B;color:#FFF;font-weight:bold;}#el9 {box-shadow:4px 4px black;}#el10 {box-shadow:6px 6px 6px 2px black;}#el11 {box-shadow:0px 0px 6px 2px black inset;}</style><p id="el9">1. Первые два значения свойства<i>box-shadow </i>задают величину смещения тени по горизонтали и вертикали в пикселях, а третее значение задает цвет тени.<br>
<span style="text-decoration:underline;">box-shadow:4px 4px black;</span></p><p id="el10">2. Также данное свойство может иметь значения указывающие радиус разброса тени (третее значение) и размер тени (четвертое значение).<br><span style="text-decoration:underline;">box-shadow:6px 6px 6px 2px black;</span></p><p id="el11">3. С помощью значения inset Вы можете указать, что тень должна быть не внешней, а внутренней. Элементы с внутренними тенями кажутся 'вдавленными'.<br><span style="text-decoration:underline;">box-shadow:0px 0px 6px 2px black inset;</span></p></div>[/html]
Чтобы box-shadow отображалось корректно во всех браузерах, лучше записывать свойство для каждого браузера (значение при этом должно быть одно и то же):
TEXT-SHADOW[html]<a name="24-3"></a>[/html]
С помощью нового CSS3 свойства text-shadow Вы можете добавлять к тексту элементов тени (к тексту одного элемента может быть добавлено одновременно несколько теней).
При задании тени для текста, необходимо указать величину смещения тени от текста по горизонтали и вертикали (может быть отрицательной), а также радиус размытия и цвет тени.
[html]<div style="background:#ccc;height:200px;overflow:auto"><style type="text/css">#shadow1,#shadow2,#shadow3 {font-size:2.5em;font-family:Arial;}#shadow1 {text-shadow:3px 2px #FFAE00;}#shadow2 {text-shadow:1px 1px 10px #FFAE00;}#shadow3 {text-shadow:2px 2px 2px #FFAE00, 2px 2px 15px #1435AD;}</style><p id="shadow1">Пример простой тени</p><p id="shadow2">Пример тени с размытием</p><p id="shadow3">Несколько теней одновременно</p></div>[/html]
[html]<a href="#ogl">К оглавлению</a>[/html]
CSS3 на примере таблицы[html]<a name="25"></a>[/html]
Теперь с помощью CSS3 и предыдущих приемов сверстаем таблицу.
В общем и целом верстка таблицы осуществляется так же, как и верстка дизайна. В случае начинающих (да и достаточно опытных) дизайнеров все сводится к методу проб и ошибок - подставляем разные размеры и свойства CSS, смотрим, что получится, поправляем, если что не так.
Для создания контейнера, назовем ячейку с контейнером "box-td" и вставим в ячейку контейнер "my_box"
HTML
Через стиль ограничиваем размер ячейки (чтоб ничто никуда не вылезало):
А контейнеру задаем размер, отступы (ведь справа к нему надо будет "прилепить" фею) и CSS3 свойства (закругление и тень)
Теперь расположим поверх него фею, делаем так же, как и с контейнерами для элементов дизайна (см. выше): создаем DIV-блок для картинки, а в CSS прописываем ширину, высоту и позиционирование:
Добавляем текст (с отступом от феи), и готово:
[html]<a href="#ogl">К оглавлению</a>[/html]
Свойство DISPLAY: задаем отображение элементов[html]<a name="26"></a>[/html]
При создании каких-либо нестандартных элементов, вам понадобится внимательно изучить CSS-свойство display.
Чем оно так необходимо и полезно? Дело в том, что по правилам HTML, теги влияют на положения элементов: например, если текст вставлен через параграф (<p>текст1</p> <p>текст2</p>), то он обязательно будет переноситься на следующую строку. С помощью свойства display можно менять эти правила, влиять на положение элементов.
Значения свойства display
(точные определения, взяты с HTML-book, ниже будут более понятные примеры и расшифровки)
block - Элемент показывается как блочный. Применение этого значения для встроенных элементов, например, тега <span>, заставляет его вести себя подобно блокам — происходит перенос строк в начале и в конце содержимого.
inline - Элемент отображается, как встроенный. Использование блочных тегов, таких как <div> и <p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
inline-block - Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.
inline-table - Определяет, что элемент является таблицей, как при использовании тега <table>, но при этом таблица является встроенным элементом, и происходит ее обтекание другими элементами, например, текстом.
list-item - Элемент выводится, как блочный, и добавляется маркер списка.
none - Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента.
run-in - Устанавливает элемент, как блочный или встроенный, в зависимости от контекста.
table - Определяет, что элемент является блочной таблицей подобно использованию тега <table>.
table-caption - Задает заголовок таблицы подобно применению тега <caption>.
table-cell - Указывает, что элемент представляет собой ячейку таблицы (тег <td> или <th>).
table-column - Назначает элемент колонкой таблицы, словно был добавлен тег <col>.
table-column-group - Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега <colgroup>.
table-footer-group - Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега <tfoot>.
table-header-group - Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега <thead>.
table-row - Элемент отображается, как строка таблицы (тег <tr>).
table-row-group - Создает структурный блок, состоящий из нескольких строк таблицы, аналогично действию тега <tbody>.
Наглядные примеры и наиболее популярные применения свойства Display [html]<a name="26-1"></a>[/html]
#элемент {display: none;}
вот он, вот он - ответ на ваши бесконечные вопросы "как убрать вот это? как убрать вот то?" 
если у вас нет доступа к шаблону сайта/форума, элемент можно заставить "исчезнуть" - находим нужный селектор и убираем его через CSS.
Было (.tab {background: url("http://uploads.ru/i/q/g/n/qgnZQ.png") no-repeat scroll 0 0 transparent;}) | Стало (.tab {background: url("http://uploads.ru/i/q/g/n/qgnZQ.png") no-repeat scroll 0 0 transparent; display: none;}) |
| 
|
#элемент {display: block;}
этот тег заставляет элемент вести себя как контейнер: все элементы, которые стоят рядом, переносятся на следующую строчку; блочному элементу всегда можно задать ширину, высоту и тому подобные характеристики.
Было (#pun-ulinks li a {text-decoration: none; text-align: center; width: 300px;}) | Стало (#pun-ulinks li a {display: block; text-decoration: none; text-align: center; width: 300px;}) |
| 
|
#элемент {display: inline;}
это свойство заставляет элемент(ы) отображаться в строчку; чаще всего употребляется в горизонтальных меню:
Было (#pun-navlinks li {display: block;}) | Стало (#pun-navlinks li {display: inline;}}) |
| 
|
#элемент {display: inline-block;}
Что делать, если нам нужно, чтоб элемент вел себя, как контейнер (ему можно было бы задать ширину, высоту), но при этом, чтоб элемент не переносил на другие строчки своих соседей? Тут нас спасает значение inline-block
Было (#pun-ulinks li a {display: block; text-decoration: none; text-align: center; width: 300px;}) | Стало (#pun-ulinks li a {display: inline-block; text-decoration: none; text-align: center; width: 200px;}) |
| 
|
значения table
Эти значения могут позволить превратить в табличку все то, что таблицей не является.
Было (убраны все свойства display) | Стало (#pun-ulinks {display: table;}
#pun-ulinks .container {display: table-row;}
#pun-ulinks li, #pun-ulinks li a {display: table-cell;}) |
| 
|
Применение свойства DISPLAY на примере таблицы [html]<a name="26-2"></a>[/html]
В соседней от CSS3 контейнера ячейке нам нужно разместить красивые контейнеры для каких-нибудь важных ссылок:
сначала назначаем ячейки ID и задаем ее размеры
Теперь сделаем каждую ссылку в отдельном div-контейнере:
попробуем их стилизовать:
добавим ширину и высоту, чтоб они не растягивались:
получается беда: ссылки все равно идут друг под другом (потому что мы поместили их в div-блоки)
заставим их стоять в ряд, добавив display:inline;
опять не то. как видно на скрине, перестали работать ширина и высота.
значит, нам нужно заставить элементы быть одновременно блочными, но при этом стоять в линию. Поправляем inline на inline-block
это именно то, что и было на макете. осталось только подвинуть элемент с помощью свойства margin
[html]<a href="#ogl">К оглавлению</a>[/html]
Красивые заголовки и шрифты[html]<a name="27"></a>[/html]
-> 
Все администраторы ролевых форумов (да и не только ролевых) обожают вставлять в таблицы красивые надписи-заголовки. Поэтому тут настало времени поговорить о шрифтах, о том, как они работают и, наконец, о том, как сделать шрифт не только красивым, но и читабельным.
Как работают шрифты в CSS (свойство FONT) [html]<a name="27-1"></a>[/html]
Названия разных шрифтов в CSS вставляются с помощью свойства font-family:
#селектор {font-family: Georgia, 'Times New Roman', Times, serif;}
Список шрифтов может включать одно или несколько названий, разделенных запятой.
Если в названии шрифта есть пробелы, то согласно правилам CSS, он записывается в одинарных кавычках (обратите внимание на написание шрифта Times New Roman в коде).
Как это работает.
Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере.
Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.
Внимание! Когда вы пытаетесь установить на форум какой-то неимоверно красивый шрифт, поставленный на ваш компьютер, это не значит, что у ваших пользователей он будет отображаться. Он может отображаться ТОЛЬКО у тех, кто скачают его и установят на компьютер.
Картинки-заголовки [html]<a name="27-2"></a>[/html]
Из-за несовершенства CSS-кодов, связанных с шрифтами, администраторы форумов начали делать картинки-заголовки для таблиц и названий категорий. У этой идеи есть свои плюсы и минусы: плюс в том, что картинка-заголовок отображается везде и у всех одинаково. Однако лишние картинки - это лишняя графика, дизайн становится в разы "тяжелее" (особенно когда каждую категорию пытаются сделать картинкой, да еще и в формате PNG). Еще один недостаток - невозможно быстро исправить опечатки или просто заменить название заголовка - приходится сначала лезть в фотошоп и делать новую картинку.
Особенно странно выглядит мода делать надписи-заголовки на английском (которая изначально пошла от того, что ассортимент латинских шрифтов всегда разнообразней) - это вызывает и спеллинговые ошибки, и грамматические.
Ну и самое главное: эти заголовки не пощупать, не выделить, не скопировать. Куда приятней, когда шрифт является шрифтом, а не картинкой.
Красивые заголовки с помощью Google Web Fonts [html]<a name="27-3"></a>[/html]
Несмотря на многочисленные недостатки картинок-заголовков, здравый смысл все равно будет повержен одним простым аргументом: "хочу, чтобы было красиво". Поэтому стоит предложить альтернативу.
Существует возможность импортировать шрифты с внешних ресурсов. Таким образом, грузиться они будут не с компьютера пользователя, а с какого-либо сайта. Один из таких ресурсов - Google Web Fonts
Выбираем язык шрифта:
Выбираем шрифт и нажимаем кнопку Quick-use:
Под предпросмотром шрифта надо еще раз отметить использование Кириллицы:
Вставляем код себе на сайт/форум:
Ниже отображается CSS свойство и значение, которое нужно задать селекторам, к которым необходимо применить этот шрифт:
На примере названия форума:
в HTML-вверх код Google Web Fonts
В CSS стиль заголовка:
Внимание! Недостатки Google Web Fonts:
Во-первых, на данный момент, не работает в Opera.
Во-вторых, хоть шрифт и грузится быстрее тонны картинок, но все равно грузится.
Ничего легче и приятней шрифтов, которые грузятся с компьютера пользователя, быть не может.
В-третьих, не вздумайте использовать такой сервис для шрифта текста! И глаза сломаются, и грузиться будет до бесконечности. Это подходит только для заголовков.
Также лучше не смешивать сразу несколько типов необычных шрифтов. Необычный шрифт и без того нелегко подобрать так, чтоб пользователь не сломал глаза, а уж смешение сразу нескольких шрифтов превращает дизайн в редкую безвкусицу.
Код таблицы с заголовками
Так как в таблице дальше не используется ничего из того, о чем еще не говорилось выше, стоит сразу привести ее код в качестве примера использования Google Web Fonts
Безопасные шрифты [html]<a name="27-4"></a>[/html]
На самом деле самые красивые шрифты - самые простые, которые есть у пользователя по умолчанию и грузятся быстро и просто. Использование всех наворотов связано зачастую с тем, что пользователи в глаза не видели всего разнообразия самых обычных и доступных видов шрифтов.
шрифты
[html]<div style="background:#ccc;height:200px;overflow:auto;padding:10px;font-size:1.4em;"><p style='font-family:Arial;'>Демонстрация шрифта Arial.</p> <p style='font-family:"Arial Black";'>Демонстрация шрифта Arial Black.</p> <p style='font-family:"Comic Sans MS";'>Демонстрация шрифта Comic Sans MS.</p> <p style='font-family:"Courier New";'>Демонстрация шрифта Courier New.</p><p style='font-family:Georgia;'>Демонстрация шрифта Georgia.</p><p style='font-family:Impact;'> Демонстрация шрифта Impact.</p><p style='font-family:"Times New Roman";'>Демонстрация шрифта Times New Roman.</p><p style='font-family:"Trebuchet MS";'>Демонстрация шрифта Trebuchet MS.</p><p style='font-family:Verdana;'>Демонстрация шрифта Verdana.</p></div>[/html]
font-style:italic;
[html]<div style="background:#ccc;height:200px;overflow:auto;padding:10px;font-size:1.4em;"><p style='font-family:Arial;font-style:italic;'>Демонстрация шрифта Arial.</p> <p style='font-family:"Arial Black";font-style:italic;'>Демонстрация шрифта Arial Black.</p> <p style='font-family:"Comic Sans MS";font-style:italic;'>Демонстрация шрифта Comic Sans MS.</p> <p style='font-family:"Courier New";font-style:italic;'>Демонстрация шрифта Courier New.</p><p style='font-family:Georgia;font-style:italic;'>Демонстрация шрифта Georgia.</p><p style='font-family:Impact;font-style:italic;'> Демонстрация шрифта Impact.</p><p style='font-family:"Times New Roman";font-style:italic;'>Демонстрация шрифта Times New Roman.</p><p style='font-family:"Trebuchet MS";font-style:italic;'>Демонстрация шрифта Trebuchet MS.</p><p style='font-family:Verdana;font-style:italic;'>Демонстрация шрифта Verdana.</p></div>[/html]
font-weight:bold;
[html]<div style="background:#ccc;height:200px;overflow:auto;padding:10px;font-size:1.4em;"><p style='font-family:Arial;font-weight:bold;'>Демонстрация шрифта Arial.</p> <p style='font-family:"Arial Black";font-weight:bold;'>Демонстрация шрифта Arial Black.</p> <p style='font-family:"Comic Sans MS";font-weight:bold;'>Демонстрация шрифта Comic Sans MS.</p> <p style='font-family:"Courier New";font-weight:bold;'>Демонстрация шрифта Courier New.</p><p style='font-family:Georgia;font-weight:bold;'>Демонстрация шрифта Georgia.</p><p style='font-family:Impact;font-weight:bold;'> Демонстрация шрифта Impact.</p><p style='font-family:"Times New Roman";font-weight:bold;'>Демонстрация шрифта Times New Roman.</p><p style='font-family:"Trebuchet MS";font-weight:bold;'>Демонстрация шрифта Trebuchet MS.</p><p style='font-family:Verdana;font-weight:bold;'>Демонстрация шрифта Verdana.</p></div>[/html]
font-style:italic; font-weight:bold;
[html]<div style="background:#ccc;height:200px;overflow:auto;padding:10px;font-size:1.4em;"><p style='font-family:Arial;font-style:italic;font-weight:bold;'>Демонстрация шрифта Arial.</p> <p style='font-family:"Arial Black";font-style:italic;font-weight:bold;'>Демонстрация шрифта Arial Black.</p> <p style='font-family:"Comic Sans MS";font-style:italic;font-weight:bold;'>Демонстрация шрифта Comic Sans MS.</p> <p style='font-family:"Courier New";font-style:italic;font-weight:bold;'>Демонстрация шрифта Courier New.</p><p style='font-family:Georgia;font-style:italic;font-weight:bold;'>Демонстрация шрифта Georgia.</p><p style='font-family:Impact;font-style:italic;font-weight:bold;'> Демонстрация шрифта Impact.</p><p style='font-family:"Times New Roman";font-style:italic;font-weight:bold;'>Демонстрация шрифта Times New Roman.</p><p style='font-family:"Trebuchet MS";font-style:italic;font-weight:bold;'>Демонстрация шрифта Trebuchet MS.</p><p style='font-family:Verdana;font-style:italic;font-weight:bold;'>Демонстрация шрифта Verdana.</p></div>[/html]
Как видно, если поэкспериментировать со стандартными безопасными шрифтами, вполне может получиться оригинальное начертание.
Например, можно сделать достаточно оригинальные заголовки и кнопки меню с использованием шрифта Impact для техно-дизайна (кибер-панк, техно-фентези, компьютерные форумы и т.п.):
[html]<a href="#ogl">К оглавлению</a>[/html]
Эта ролевая на тему продолжения 
и 
можно управлять областью замены (отмечено 
и запомнить сочетания клавиш:
Image Ready
