Автор работы: Пользователь скрыл имя, 17 Декабря 2010 в 20:36, курс лекций
Работа содержит лекции в виде уроков по предмету "Информатика".
<style type="text/css">
<!--
.krasota {text-indent: 20px; background-color: aqua; color: purple;}
-->
</style>
Точку перед названием надо ставить обязательно! В примере я назвал стиль "krasota", вы же, естественно, можете обозвать его как угодно, хоть "vasja" или "MySuperStyle". Теперь в тексте достаточно указать название своего стиля (уже без точки), и он будет применен:
<P CLASS="krasota">
И напоследок. Можно
определить стиль для всего сайта! Для
этого создается текстовый документ, где
перечисляются все стили, используемые
на страницах сайта (заголовки и т.п. не
требуются) и сохраняется с расширением
.css (например, "stili.css"). Потом достаточно
с каждой страницы сайта, где используются
эти стили, сделать ссылку на этот файл.
Ссылка размещается в заголовке страницы
(в секции HEAD) и имеет такой вид:
<LINK REL=stylesheet HREF="stili.css" TYPE="text/css">
Теперь достаточно
сделать изменения в одном
файле - в "stili.css" (или как вы там его
назовете) - чтобы изменился стиль всего
сайта, пусть даже он состоит из 200 или
300 страниц!
Если на какой-то странице сайта определены свои стили, которые перекрывают стили, описанные в .css файле, то на ней будут применены ее стили (т.е. определенные в заголовке этой страницы). В свою очередь, если на странице в заголовке определены какие-то стили, и существует стиль, указанный в тэге (например, <P STYLE= ".......">), то к данному тэгу будет применяться второй стиль.
Урок 12
Тема: вкратце о CSS.
Что такое CSS и
для чего это нужно? CSS - Cascading Style Sheets,
что означает дословно "каскадные
таблицы стилей". Смысл - описывается
стиль всего документа или
сайта в целом, либо отдельных
его элементов. Т.е. вы можете один раз
определить, что, например, на всех страницах
вашего сайта все заголовки будут красного
цвета, абзацы выровнены по центру, а ссылки
останутся неподчеркнутыми (то-то посетители
помучаются, пока найдут их!). И к тому же
вы сможете изменить стиль вашей страницы
или даже всего сайта, подправив в тексте
лишь пару строк!
Чтобы сразу
объяснить суть таблиц стилей, рассмотрим
пример. Допустим, у вас есть такая
страница:
<HTML>
<HEAD>
<TITLE>Изучим таблицы стилей!</TITLE>
</HEAD>
<BODY>
<H1>Большой заголовок</H1>
<H2>Заголовок поменьше</H2>
<P>А это уже абзац - самый обычный абзац.</P>
</BODY>
</HTML>
А теперь где-нибудь
в заголовке страницы (т.е. в секции
HEAD) разместим тэг <STYLE>:
<STYLE TYPE="text/css">
<!--
H1 { font-size: 40px; background: red; text-align: right;
font-family: helvetica, arial, sans-serif }
H2 { font-size: 20px; font-style: italic; font-family: helvetica,
arial, sans-serif }
P { background: silver; text-align: center; font-family: courier, fixed,
monospace }
-->
</STYLE>
Можете набрать
этот пример в каком-либо текстовом
редакторе и сохранить затем с расширением
htm или html (хорошая практика!), а можете
сразу посмотреть этот пример в действии.
Теперь разберем
этот пример подробнее. Аттрибут TYPE="text/css"
и информация в комментарии (между
"<!--" и "-->") как раз и определяют
стиль нашей страницы. Метки комментария
здесь используются для совместимости
со старыми версиями браузеров - они просто
проигнорируют незнакомый тэг <STYLE>
и содержимое комментария, и ваша страница
будет показана как самая обычная HTML-страница.
Строка H1 указывает браузеру, что всякий
текст, находящийся между метками <H1>
и </H1>, должен отображаться шрифтом
helvetica, arial или sans-serif высотой в 40 пикселов
на красном фоне и быть выровнен вправо.
Строка H2 определяет, что шрифт в заголовках
<H2> должен быть наклонным и высотой
в 20 пикселов из семейства helvetica. И, наконец,
строка P определяет поведение всех абзацев
на странице: на сером фоне, выровнены
по центру, шрифт - courier, fixed или monospace.
Вот и все. Как
говорится, просто и со вкусом. Таким образом
вы можете управлять проактически всем,
что появляется на вашей странице. Т.е.
практически любому тегу можно придать
новые свойства. А теперь подробнее.
Font-family - шрифт,
используемый для отображения
данного элемента. В идеале, конечно,
было бы неплохо, если бы у всех ваших посетителей
были одинаковые наборы шрифтов. На практике
же такого не бывает. Поэтому указывайте
список шрифтов. Браузер просматривает
этот список пока не встретит имеющийся
в наличии шрифт. Например, компьютер с
ОС Windows как правило имеет шрифт Arial, в компьютерах
Macintosh наиболее похож на него шрифт Helvetica.
В конце списка желательно иметь один
из следующих: serif, sans-serif, monospace, fantasy или
cursive. Пример: "P { font-family: arial, helvetica, sans-serif
}"
Font-size - размер
шрифта. Может указываться в точках
(pt), пикселах (px).
Font-style: italic - курсив
(наклонный шрифт).
Font-weight: bold - жирный
шрифт. Значение может быть
также числовым, только различные
браузеры реагируют на это по-разному.
Text-transform - преобразование
текста: допустимые значения: uppercase
(все буквы будут заглавные), lowercase
(все буквы будут строчные), capitalize
(каждое слово будет
Text-decoration - выделение
текста, допустимые значения: underline (подчеркнутый),
line-through (перечеркнутый), blink (мигающий)
и none(ничего). Например, чтобы ссылки в
тексте не выделялись подчеркиванием,
можно включить в заголовок документа
следующий текст:
<STYLE TYPE="text/css">
<!--
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:active {text-decoration: none}
-->
</STYLE>
Color - изменение
цвета текста, линий, рамок. Скажем,
в предыдущем примере мы
body {color: black}
a:link {color: black; text-decoration: none}
a:visited {color: black; text-decoration: none}
Т.е. цвет текста
на странице - черный (1-я строчка), ссылки
(обычно голубого цвета) - неподчеркнутые
черного цвета (2-я строчка), посещенные
ссылки (обычно фиолетовые) - также черного
цвета и неподчеркнутые (3-я строчка).
Background-color - определяет
цвет фона для какого-либо элемента. Например:
strong {background-color: yellow}
Текст между
метками <STRONG> и </STRONG> будет показан
на желтом фоне.
Background-image - позволяет
сделать фон в виде рисунка.
Пример:
blockquote {background-image: url(../pictures/million.jpg)}
В результате цитаты
(т.е. текст между метками <BLOCKQUOTE>
и </BLOCKQUOTE>) будет размещен на фоне
рисунка "million.jpg". Примером служит
данный абзац.
Text-align - выравнивание
текста. Применяется только в
абзацах, заголовках и списках. А также
для выравнивания картинок на страничке
(несмотря на слово "text"). Например:
IMG {text-align: center}
Text-indent - позволяет
делать отступ в первой строке
абзаца (красная строка - как мы
привыкли видеть в книгах). Ширина
отступа измеряется в пикселах (px) или
точках (pt). Может быть также величиной
отрицательной, тогда первая строка будет
выступать влево от остального текста.
Пример (он же и применен к этому абзацу):
p {text-indent: 10pt}
Margin - устанавливает
отступ текста. Пример использования:
body {margin-left: 10pt; margin-right: 15pt}
В результате текст
на странице будет отступать слева
на 10 точек от края страницы, справа
- на 15 точек. Также возможны варианты:
margin-top (отступ сверху) и margin-bottom (отступ
снизу).
Рамки. Каждый элемент
может заключен в рамку. Рамка
может иметь следующие
border-width - ширина рамки. Значение числовое (в пикселах или точках) или одно из зарезервированных слов - thin (тонкая), medium (средняя), thick (толстая).;
border-color - цвет рамки. Числовое или текстовое значение цвета. Также может принимать значение transparent (прозрачная);
border-style - стиль рамки. Может иметь следующие значения: Значение Описание Вид рамки (в вашем браузере!)
dashed пунктирная - в виде черточек dashed
dotted пунктирная - в виде точек dotted
double двойная линия double
inset с эффектом вдавленности inset
outset с эффектом выпуклости outset
ridge выпуклая рамка ridge
groove врезанная рамка groove
solid непрерывная
линия solid
Можно определить каждую сторону рамки отдельно. Для ширины рамки это выглядит так: border-top-width (ширина верхней стороны), border-right-width (правая сторона), border-bottom-width (нижняя сторона) и border-left-width (левая сторона). Для определения цвета и стиля достаточно просто перечислить свойства в таком порядке: верх-право-низ-лево. Пример:
blockquote {border-top-width:
3px; border-right-width: 5px; border-bottom-width: 3px; border-left-width:
5px; border-color: red green navy green; border-style: double double
solid double }
Здесь определена
рамка со следующими границами: верхняя
- красная двойная в 3 пиксела шириной,
правая и левая - зеленые двойные
в 5 пикселов шириной, нижняя - синяя
сплошная шириной в 3 пиксела.
А что, если захочется
изменить стиль только одного абзаца?
Или каждому абзацу определить свой стиль?
Можно! В таком случае надо использовать
аттрибут STYLE с необходимыми свойствами.
Например:
<P STYLE="text-indent: 15pt; color: red; background-color: white">
или
<H3 STYLE="background-color: silver; border-width: 3px; border-style: groove;
border-color: #F0F0F0; text-align:
center">
Теперь представим
такую ситуацию: у вас на странице
25 абзацев, из них 15 вы хотите выдержать
в каком-то определенном стиле. Чтобы
не писать аттрибут STYLE каждый раз, можно
поступить следующим образом: определить
в заголовке документа в тэге STYLE необходимый
стиль и дать ему название, например:
<style type="text/css">
<!--
.krasota {text-indent: 20px; background-color: aqua; color: purple;}
-->
</style>
Точку перед названием надо ставить обязательно! В примере я назвал стиль "krasota", вы же, естественно, можете обозвать его как угодно, хоть "vasja" или "MySuperStyle". Теперь в тексте достаточно указать название своего стиля (уже без точки), и он будет применен:
<P CLASS="krasota">
И напоследок. Можно
определить стиль для всего сайта!
Для этого создается текстовый
документ, где перечисляются все
стили, используемые на страницах сайта
(заголовки и т.п. не требуются) и
сохраняется с расширением .css
(например, "stili.css"). Потом достаточно
с каждой страницы сайта, где используются
эти стили, сделать ссылку на этот файл.
Ссылка размещается в заголовке страницы
(в секции HEAD) и имеет такой вид:
<LINK REL=stylesheet HREF="stili.css" TYPE="text/css">
Теперь достаточно
сделать изменения в одном
файле - в "stili.css" (или как вы
там его назовете) - чтобы изменился
стиль всего сайта, пусть даже
он состоит из 200 или 300 страниц!
Если на какой-то
странице сайта определены свои стили,
которые перекрывают стили, описанные
в .css файле, то на ней будут применены ее
стили (т.е. определенные в заголовке этой
страницы). В свою очередь, если на странице
в заголовке определены какие-то стили,
и существует стиль, указанный в тэге (например,
<P STYLE= ".......">), то к данному тэгу
будет применяться второй стиль.
Урок 12
Тема: фреймы.
Объяснить, что
такое фреймы и для чего они
нужны, лучше всего на примере. Страница,
которую вы сейчас читаете, состоит
из двух фреймов: левого, в нем перечислены
все уроки, и правого с собственно
самими уроками. Вы можете прокручивать
содержимое правого фрейма, в то время
как левый остается неподвижным. Это позволяет
вам в любой момент легко перейти на любой
урок, не разыскивая ссылку внизу или вверху
страницы. Словом, разумное использование
фреймов позволяет существенно упростить
навигацию по сайту и улучшить его дизайн.