1000
участников
участников
5500 читателей
line-height
Регулирует интервалы между строками текста.
Свойства границ
margin-left
Вокруг элемента определяет значения отступов.
margin-left
Вокруг элемента определяет значения отступов.
margin-right
margin-right
margin-top
Вокруг элемента определяет значения отступов
margin-right
margin-top
Вокруг элемента определяет значения отступов
Единицы измерения
cm - сантиметры;
mm - миллиметры;
px - пиксели;
pt - пункты (типограф.);
% - проценты.
Давайте теперь перейдем к изучению безопасных элементов CSS. В CSS описание свойств элементов содержит название свойства с последующим ему присвоением определенного значения. Значение свойства и его название разделены двоеточием.
Указывая не относительные, а абсолютные размеры шрифтов, Вы фактически лишаете посетителей, которые просматривают Ваши страницы, возможности уменьшать или увеличивать размеры шрифтов при помощи специальной кнопки в веб-браузере в соответствии с их разрешением на экране монитора и зрением. В таком случае шрифты будут отображаться непосредственно такого размера, который был указан Вами при написании страницы.
Существует еще одна полезная возможность. Это способ спрятать описания стилей, находящихся в тэге <style>, внутри раздела<head>, от устаревших браузеров. Поскольку браузер был создан давно - тогда еще и не было разговора о CSS - он не поймет, что это написано внутри <style>…</style>. Вот поэтому все описания стилей этот браузер покажет, как обычный текст, то есть на страницу. Чтобы такого не произошло, следует описания стилей заключить в тэг комментариев.
cm - сантиметры;
mm - миллиметры;
px - пиксели;
pt - пункты (типограф.);
% - проценты.
Давайте теперь перейдем к изучению безопасных элементов CSS. В CSS описание свойств элементов содержит название свойства с последующим ему присвоением определенного значения. Значение свойства и его название разделены двоеточием.
Указывая не относительные, а абсолютные размеры шрифтов, Вы фактически лишаете посетителей, которые просматривают Ваши страницы, возможности уменьшать или увеличивать размеры шрифтов при помощи специальной кнопки в веб-браузере в соответствии с их разрешением на экране монитора и зрением. В таком случае шрифты будут отображаться непосредственно такого размера, который был указан Вами при написании страницы.
Существует еще одна полезная возможность. Это способ спрятать описания стилей, находящихся в тэге <style>, внутри раздела<head>, от устаревших браузеров. Поскольку браузер был создан давно - тогда еще и не было разговора о CSS - он не поймет, что это написано внутри <style>…</style>. Вот поэтому все описания стилей этот браузер покажет, как обычный текст, то есть на страницу. Чтобы такого не произошло, следует описания стилей заключить в тэг комментариев.
где
<!--- тэг, открывающий комментарий, а
> - закрывающий.
Все, что заключено между тэгами комментариев, устаревшие браузеры сочтут не отображенной информацией. Современные же браузеры смогут определить описание стилей, и их задействуют.
С помощью CSS вокруг объектов можно указывать значения отступов - как отрицательные величины. Это дает возможность один слой текста накладывать на другой.
Добиться данного эффекта не сложно, давайте создадим страницу с заголовком, который бы выглядел трехмерным, но без использования графики.
Давайте создадим новый html-файл, а так же составим описание стилей для 3 объектов:
<!--- тэг, открывающий комментарий, а
> - закрывающий.
Все, что заключено между тэгами комментариев, устаревшие браузеры сочтут не отображенной информацией. Современные же браузеры смогут определить описание стилей, и их задействуют.
С помощью CSS вокруг объектов можно указывать значения отступов - как отрицательные величины. Это дает возможность один слой текста накладывать на другой.
Добиться данного эффекта не сложно, давайте создадим страницу с заголовком, который бы выглядел трехмерным, но без использования графики.
Давайте создадим новый html-файл, а так же составим описание стилей для 3 объектов:
В данном описании мы присвоили <body> (но это мог бы быть фактически любой другой тэг) шрифт, начертание и размер - в таком стиле все элементы Web-страницы и будут отображаться. Но сделано это только для уменьшения размера файла страницы, вместо этого можно дважды описать данные параметры: каждого из классов z. Дальше идет описание двух стилей, которые отличаются размером и цветом отступов вокруг них: стиль z1 описывает нижний слой, а z2 - верхний. Подбирая нужное значение, а так же, если использовать отрицательные значения отступов, возможно добиться, чтобы верхний слой как будто наползает на предыдущий...
Обратимся к WEB-редактору Notepad. Здесь будем формировать файл, название которого, к примеру: styles.css (название может быть любое). В данном файле опишем стиль параграфа <p>. Используем его на всех страницах сайта:
P
{
font-family: Arial, serif;
color: #000000;
margin-left: 20%;
margin-right: 25%;
margin-top: 1.5pt;
margin-bottom: 2pt;
text-indent: 3cm;
text-align: justify;
}
P
{
font-family: Arial, serif;
color: #000000;
margin-left: 20%;
margin-right: 25%;
margin-top: 1.5pt;
margin-bottom: 2pt;
text-indent: 3cm;
text-align: justify;
}
Чтобы было проще форматировать, в середине описания стиля можно применить любое число переносов строк и пробелов. Браузер, в процессе чтения стиля, отбросит все излишние пробелы.
Параграфы <p> на страницах с данным описанием изображаются шрифтом Times New Roman. В случае, когда на машине этот шрифт не установлен, можно использовать другой, но обязательно из того же семейства - serif. Выравнивание - по обеим сторонам (полное). Шрифт - черный.
Для параграфа установлено несколько значений отступов. Это необходимо, ведь параграф в HTML по умолчанию отображается практически равным 95 % страницы. Интервалы между параграфами - 180 % межстрочного интервала. Интервалы чрезвычайно велики, как и ширина параграфа. Такие параграфы для чтения неудобны. Текст лучше читается, когда он сверстан в колонки. В созданном стиле параграфа установлены вертикальные отступы - в один пункт, а боковые - в 15 % ширины окна. Этот текст будет читать легче.
Давайте создадим стиль для заголовков статей:
h2
{
font-family: Verdana, Arial Cyr, Time New Roman;
font-weight: strong;
font-size: 21pt;
color: black;
margin-left: 25%;
margin-top: 2cm;
text-align: left;
}
Параграфы <p> на страницах с данным описанием изображаются шрифтом Times New Roman. В случае, когда на машине этот шрифт не установлен, можно использовать другой, но обязательно из того же семейства - serif. Выравнивание - по обеим сторонам (полное). Шрифт - черный.
Для параграфа установлено несколько значений отступов. Это необходимо, ведь параграф в HTML по умолчанию отображается практически равным 95 % страницы. Интервалы между параграфами - 180 % межстрочного интервала. Интервалы чрезвычайно велики, как и ширина параграфа. Такие параграфы для чтения неудобны. Текст лучше читается, когда он сверстан в колонки. В созданном стиле параграфа установлены вертикальные отступы - в один пункт, а боковые - в 15 % ширины окна. Этот текст будет читать легче.
Давайте создадим стиль для заголовков статей:
h2
{
font-family: Verdana, Arial Cyr, Time New Roman;
font-weight: strong;
font-size: 21pt;
color: black;
margin-left: 25%;
margin-top: 2cm;
text-align: left;
}
Заголовки созданных страниц оформлены тэгом <h2>. Значит, они будут изображаться шрифтом
(жирным) Verdana. Если данный шрифт не установлен, то тогда применяется шрифт Arial. 14 пунктов -
размер заголовка. Отступ сверху - один сантиметр, отступ слева - 20 % ширины страницы, а цвет -
черный. Заголовок выравнивается по левому краю страницы.
Поскольку боковые отступы параграфа и заголовка установлены от ширины окна браузера в
процентах. Если просматривать эти страницы на мониторах с разным разрешением, расположение
главного текста, отступов, заголовка, а также пропорции будут сохранены.
Чтобы «привязать» стили, которые были созданы, к страницам, необходимо в разделе <head> во
все html-файлы, поместить строку, которая содержит ссылку на файл стилей, с указанием на
использование CSS:
Исходя из того, что файл со стилями будет располагаться на сервере в одном каталоге с остальными страницами, параметр href="URL" в данном случае будет непосредственно именем файла стилей (styles.css).
Свойства элементов, которые управляются CSS
Используя CSS элементы, которые совместимы с большим числом браузеров (безопасные), можно
сделать ваши WEB-страницы интереснее в шрифтовом оформлении. Те же, пользователи, которые
путешествуют по просторам интернета при помощи браузеров более ранних версий, этого не увидят.
Свойства шрифта
ont-family
Применяется как указатель для шрифтового семейства или шрифта, которым элемент будет
отображаться.
P {font-family: Courier New, sans-serif;}
font-size
Обозначает размер шрифта. Параметр указывается, как абсолютной (пиксели, сантиметры пункты),
так и в относительной величине (проценты).
h1 {font-size: 200%;}
h2 {font-size: 150px;}
h3 {font-size: 400pt;}
font-weight
С помощью трех параметров: lighter, bold, bolder - указывает уровень жирности шрифта.
B {font-weight: bolder;}
Цвет фона и элемента
color
Обозначает цвет элемента
I {color: yellow;}
background-color
Для элемента обозначает цвет фона. Заметьте: не для страницы, а для элемента! Внимание: это свойство браузеры изображают неодинаково, например: Microsoft IE всю доступную ширину страницы отводит под фон элемента; а другие браузеры только ширину, которую занимает данный элемент.
color
Обозначает цвет элемента
I {color: yellow;}
background-color
Для элемента обозначает цвет фона. Заметьте: не для страницы, а для элемента! Внимание: это свойство браузеры изображают неодинаково, например: Microsoft IE всю доступную ширину страницы отводит под фон элемента; а другие браузеры только ширину, которую занимает данный элемент.
Свойства текста
text-decoration
Определяет, эффекты для оформления шрифта, к примеру: используя зачеркнутый текст или просто подчеркивание.
text-decoration
Определяет, эффекты для оформления шрифта, к примеру: используя зачеркнутый текст или просто подчеркивание.
text-align
Устанавливает выравнивание элемента.
Устанавливает выравнивание элемента.
text-indent
Определяет отступ первой строки текста. Боле всего применяется для образования параграфов с табулированной первой строкой.
Определяет отступ первой строки текста. Боле всего применяется для образования параграфов с табулированной первой строкой.
Развитие и монетизация сайта
Информация
Бесплатно создаем сайт
®
Copyright © 2012 Все права защищены. Любое - полное или частичное копирование материалов запрещено, при перепечатки ссылка на источник обязательна.
