Обучение HTML, Excel, Word. Как сделать свой сайт бесплатно

Microsoft Office

Сайтостроение

HTML

Программинг

Компьютер

Графика

Разное
· Основы Word
· Основы Excel
· Основы VBA
 · Как сделать сайт
· Свой сайт от А до Я
· Оптимизация сайта
· Шаблоны для сайта
· Обзор CMS
 · Основы HTML
· HTML-теги
· Основы CSS
 · Основы PHP
· Основы JavaScript
· Софт для сайта
 · Что внутри ПК
· ПК для чайников
· Все о BIOS
 · Web-графика
· САПР: AutoCAD
 · Статьи
· Форум
· SEO-новости
Главная страница Карта сайта

HTML, Excel, Word, SEO   Основы CSS Шрифт
Основы CSS
Смотреть книги»
· Справочник атрибутов CSS
· Что такое CSS?
· Структура html-страницы
· Шрифт: размер и гарнитура
· Выравнивание и пробелы
· Начертание шрифта
· Оформление ссылок
· Форматирование списков
· Классы
· Изображения

Шрифт: размер и гарнитура

Когда таблиц стилей еще не существовало, для задания размера и гарнитуры шрифта применялся тег font. Однако, в данный момент использование данного тега не рекомендуется. Ниже приведены примеры использования данного тега:


Как выглядит HTML-код
Минимальный размер текста
Максимальный размер текста
Helvetica
Arial
Красный


Гораздо удобнее и правильнее для этих целей воспользоваться листом стилей. Во всяком случае, вы будете уверены, что ваш сайт будет правильно отображаться во всех браузерах.


Поскольку, файл CSS является текстовым документом, то, при отсутствии специализированных программ, можно его написать в простом текстовом редакторе, например, в Блокноте.


Создадим файл с названием 03.css и разместим его в том же каталоге, что и наш файл примера (поскольку, примеров будет много, то, каждому файлу примера будет соответствовать свой лист стилей). В таблице стилей определим размер, цвет и гарнитуру шрифта для всей HTML-страницы - в теге BODY

Как выглядит страница без CSS: Пример №2
Как выглядит страница с CSS: Пример №3

Фрагмент измененного HTML-кода страницы (добавлен только МЕТА-тег, подключающий файл таблицы стилей; в саму же страницу изменения не вносились):




Содержание файла CSS:



Как говорится, почувствуйте разницу! Всего одна строчка файла таблицы стилей мигом изменила весь вид HTML-страницы (если бы сайт содержал десятки, сотни, тысячи страниц, то, все равно, изменения бы отобразились на всех страницах сайта).



Разберем подробнее строку CSS-файла:

  • BODY - указывает браузеру, что форматирование относится ко всему телу HTML-страницы (т.е., все, что находится между тегами <BODY> и </BODY>);
  • {} (фигурные скобки) - все атрибуты форматирования стиля описываются внутри фигурных скобок и разделяются между собой точкой с запятой (;);
  • font-family: - задает гарнитуру шрифта (названия шрифтов перечисляются после двоеточия через запятые). При этом браузер пытается отобразить первый шрифт (Verdana), если такого шрифта нет на компьютере пользователя, то браузер пытается отобразить следующий шрифт (Tahoma) и т.д.;
  • color: - указывает цвет шрифта (при этом возможны различные варианты написания: gray; #808080);
  • font-size: - указывает размер шрифта (также возможны различные варианты: pt, px, pc, mm...);

"Поиграйте" с различными параметрами значений и посмотрите как мгновенно преображается ваша страница.


При помощи стилей можно делать небольшие "фокусы", которые будут видны пользователям, посещающим ваш сайт, но "незаметны" поисковым системам (по крайней мере, на время написания данного материала). Как известно, поисковики довольно высоко ранжируют текст, заключенный в заголовок первого уровня (тег <H1>). Но, текст, заключенный в этот тег выглядит не всегда приемлемо - он очень крупный и жирный. Это можно изменить, например, при помощи атрибута style:

Форматирование заголовка первого уровня: Пример №4 - первый заголовок отображается "по умолчанию", второй, отформатирован при помощи атрибута style.

HTML-код страницы:




Тот же эффект, но с применением внешнего листа стилей (в вышеприведенный код страницы никаких изменений не вносилось; менялся CSS-файл) Пример №5
Содержание файла CSS:



Нетрудно понять, что лист стилей задал заголовку первого уровня зеленый цвет и установил размер шрифта 130% от основного размера, который был задан в 8pt.

С помощью атрибута font-size (размер шрифта) можно задавать размер шрифта в следующих единицах:

  • % (в процентах, относительная величина);
  • cm (в сантиметрах, абсолютная величина);
  • em (высота символа данного шрифта, отн. в-на);
  • ex (высота символа "х" данного шрифта, отн. в-на);
  • in (дюйм, абс. в-на);
  • mm (миллиметр, абс. в-на);
  • pc (цицеро, абс. в-на);
  • pt (точка, абс. в-на);
  • px (пиксел, абс. в-на)

У вебмастеров "ходу" последние два варианта. Обратите внимание, что при задании нецелого значения необходимо в качестве разделительно знака ставить точку, а не запятую - 2.2 mm.

При задании гарнитуры шрифтов (атрибут font-family:), можно задавать любые шрифты, но для подстраховки (на случай, если на компьютере пользователя не окажется нужного шрифта) рекомендуют включать стандартные типы гарнитур:

  • cursive (курсив);
  • fantasy (экстравагантная гарнитура);
  • monospace (стандартная гарнитура пишущей машинки);
  • sans-serif (гарнитура с засечками);
  • serif (гарнитура без засечек).

Цвет шрифта (атрибут color:) можно задавать в шестнадцатиричном виде (#FCD34F), либо английским названием стандартного цвета (red). Следует аккуратно подходить к заданию цвета в шестнадцатиричном виде, т.к. далеко не каждый цвет, заданный подобным образом, будет отображаться одинаково на разных мониторах. Гораздо предпочтительнее пользоваться безопасной палитрой цветов, которая одинаково отображается на всех мониторах.

16 цветов стандарта VGA:

  • Black (черный) - #000000
  • Maroon (темно-красный) - #800000
  • Green (зеленый) - #008000
  • Olive (оливковый) - #808000
  • Navy (темно-синий) - #000080
  • Purple (фиолетовый) - #800080
  • Teal (сине-зеленый) - #008080
  • Gray (серый) - #808080
  • Silver (серебряный) - #C0C0C0
  • Red (красный) - #FF0000
  • Lime (лайм) - #00FF00
  • Yellow (желтый) - #FFFF00
  • Blue (голубой) - #0000FF
  • Fuchsia (фукция) - #FF00FF
  • Aqua (морская вода) - #00FFFF
  • White (белый) - #FFFFFF

top




 

Спасибо, что заглянули на сайт. Надеюсь, Вам понравилось. Заходите еще. Здесь всегда рады вам :)
При копировании материалов, размещенных на сайте, ссылка на первоисточник обязательна.
Если понравился этот сайт..

© 2005-2011
Юрий Кордык All Rights Reserved

  

E-mail:
admin@on-line-teaching.com