2015-05-10
160
Внешние и внутренние листы стилей. Стилевые свойства СSS
Цель: получить первичные сведения о листах стилей и СSS правила, овладеть основными принципами построения листов стилей. Выучить основные стилевые свойства и их значения, научиться использовать стилевые свойства при создании HTM1- документов.
Методические указания
1. При изучении конструкций языка HTM1 можно использовать любой текстовый редактор. Для получения HTM1 файла, сохраняйте свои изменения как текстовые, для файла используйте расширение *.htm или *.htm1.
2. Создаваемые файлы необходимо тестировать в основных браузерах Internet Exp1оrer, Mazi11a Firefоx, Оpera.
3. Отлаженные файлы необходимо сохранять в отдельном каталоге.
4. По окончанию работы сохраните все созданные файлы на своих носителях.
Теоретические сведения
В настоящее время язык CSS насчитывает довольно большое количество свойств элементов HTML, которыми он может управлять. В то же время, применяя «безопасные», т. е. совместимые с максимальным количеством броузеров элементы CSS, вы можете сильно облегчить себе жизнь и сделать ваши Web-странички более привлекательными в плане шрифтового оформления, а пользователи, путешествующие по Internet с помощью устаревших броузеров, просто этого не увидят, но также они не увидят и тех кошмаров, которые появляются при использовании CSS для верстки страниц.
|
|
|
| СВОЙСТВА ШРИФТА | |
| font-family | Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент. P {font-family: Times New Roman, sans-serif;} |
| font-weight | Определяет степень жирности шрифта с помощью трех параметров: lighter, bold, bolder B {font-weight: bolder;} |
| font-size | Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры) H1 {font-size: 200%;} H2 {font-size: 150px;} H3 {font-size: 400pt;} |
| font-size | Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры) H1 {font-size: 200%;} H2 {font-size: 150px;} H3 {font-size: 400pt;} |
| ЦВЕТ ЭЛЕМЕНТА И ЦВЕТ ФОНА | |
| color | Определяет цвет элемента I {color: yellow;} |
| background-color | Устанавливает цвет фона для элемента – именно для элемента, а не для странички. Обратите внимание, что броузеры отображают это свойство по-разному: Microsoft IE отводит под фон элемента всю доступную ширину страницы, а Netscape Navigator – лишь ширину, занимаемую этим элементом. Посмотрите пример (рис. 3, 4), вот его исходный код: |
<HTML>
<HEAD>
<TITLE>Пример использования CSS</TITLE>
<STYLE type="text/css">
H1 {font-size: 300%;}
</STYLE>
</HEAD>
<body bgcolor=white>
<center><BR>
<H1 style="background-color: teal; color: white;">Cascading</H1>
<H1 style="background-color: navy; color: yellow;">Style</H1>
|
|
|
<H1 style="background-color: gold; color: brown;">Sheets</H1>
</BODY>
</HTML>
В этом примере в разделе <STYLE> всем элементам <Н1> на этой страничке был установлен размер 300 % от нормы. Затем каждому из элементов <H1> были присвоены собственные значения цвета фона и цвета символов.
| СВОЙСТВА ТЕКСТА | |
| text-decoration | Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркнутый текст H4 {text-decoration: underline;} A {text-decoration: none;} .wrong {text-decoration: line-through;} |
| text-align | Определяет выравнивание элемента. P {text-align: justify} H1 {text-align: center} |
| text-indent | Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой. P {text-indent: 50pt;} |
| line-height | Управляет интервалами между строками текста. P {line-height: 50 %} |
| СВОЙСТВА ГРАНИЦ | |
| margin-left | Устанавливают значения отступов вокруг элемента. IMG { margin-right: 20pt} P { margin-left: 2cm} |
| margin-right margin-right margin-top | Устанавливают значения отступов вокруг элемента. IMG { margin-right: 20pt} P { margin-left: 2cm} |
| ЕДИНИЦЫ ИЗМЕРЕНИЯ | |
| px | Пикселы |
| cm | Сантиметры |
| mm | Миллиметры |
| pt | Пункты (типограф.) |
| % | Проценты |
Описание свойств элементов в CSS состоит из названия свойства с последующим присвоением ему определенного значения. Название свойства и его значение разделены двоеточием.
