Книги, тесты, онлайн ТВ
Главная » 2013 » Декабрь » 7 » CSS каскадные таблицы стилей15:23 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 (каждое слово будет начинаться с
заглавной буквы) и none (т.е. никаких действий). 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 - изменение цвета текста,
линий, рамок. Скажем, в предыдущем примере мы сделали так, что ссылки на
странице не подчеркиваются. Чтобы они не выделялись еще и цветом, сделаем
одинаковым цвет ссылок и текста (для краткости здесь и далее метки STYLE
TYPE...будут опускаться): 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-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 } А что, если захочется изменить стиль только одного абзаца? Или
каждому абзацу определить свой стиль? Можно! В таком случае надо использовать
атрибут STYLE с необходимыми свойствами. Например: <P
STYLE="text-indent: 15pt; color: red; background-color: white"> Теперь представим такую ситуацию: у вас на странице 25
абзацев, из них 15 вы хотите выдержать в каком-то определенном стиле. Чтобы не
писать атрибут STYLE каждый раз, можно поступить следующим образом: определить
в заголовке документа в тэге STYLE необходимый стиль и дать ему название,
например: <style type="text/css"><!-- .krasota {text-indent: 20px; background-color: aqua; color: red;}--></style>
Точку перед названием надо ставить обязательно! В примере я
назвал стиль "krasota", вы же, естественно, можете обозвать его как
угодно, хоть "vasja" или "MySuperStyle". Теперь в тексте
достаточно указать название своего стиля (уже без точки), и он будет применен: <P CLASS="krasota"> Cтиль для всего сайта Можно определить стиль для всего сайта! Для
этого создается текстовый документ, где перечисляются все стили, используемые
на страницах сайта (заголовки и т.п. не требуются) и сохраняется с расширением
.css (например, "stili.css"). Потом достаточно с каждой страницы
сайта, где используются эти стили, сделать ссылку на этот файл. Ссылка
размещается в заголовке страницы (в секции HEAD) и имеет такой вид: <LINK
REL=stylesheet HREF="stili.css" TYPE="text/css"> или <LINK HREF=style.css REL=stylesheet TYPE=text/css> Теперь достаточно сделать изменения в одном файле - в "stili.css" (или как вы там его назовете style.css) - чтобы изменился стиль всего сайта, пусть даже он состоит из 200 или 300 страниц! Если на какой-то странице сайта определены свои стили, которые
перекрывают стили, описанные в .css файле, то на ней будут применены ее стили
(т.е. определенные в заголовке этой страницы). В свою очередь, если на странице
в заголовке определены какие-то стили, и существует стиль, указанный в тэге
(например, <P STYLE= ".......">), то к данному тэгу будет
применяться второй стиль.
Команди CSS(українська)1. Визначення коліру елементів і властивостей фону:color-колір тексту в межах даного елемента; значення:
колір. Приклад: color: #f00; background-color-колір тла в межах даного елемента;
значення: колір. Приклад: background-color: #ffc; background-image-фонове зображення в межах даного
елемента; значення: bgr.gif. Приклад:
background-image: url(../bgr.gif); background-repeat-повторення фонового зображення в межах
даного елемента; значення: no-repeat, repeat, repeat-x, repeat-y (не
повторювати (зображення з'явиться тільки один раз), забрукувати всю площу,
повторювати тільки по горизонталі, повторювати тільки по вертикалі). 2. Визначення властивостей шрифту:font-family-гарнітура; значення: назви шрифтів. Для
забезпечення сумісності варто завершувати список можливих гарнітур родовою
назвою групи шрифтів (serif, sans-serif або monospace), наприклад: font-family:
Verdana, Geneva, Arial, Helvetica, sans-serif; font-size-кегль; значення: відносний розмір у відсотках
або абсолютний розмір у пикселях або пунктах. Для стабільного відтворення
відносного розміру шрифтів різних елементів документа необхідно (1) визначити
розміри шрифту для всіх елементів,
(2) визначити їх одноманітно. Приклад: font-size: 16pt font-style—"стиль" шрифту; значення: italic
(похилий або курсив) або normal Приклад: font-style: normal font-weight-жирність; значення: bold (напівжирний) або
normal Приклад: font-style: normal 3. Визначення властивостей
відображення тексту:text-align-вирівнювання; значення: left, right, center
або justify (по лівому, по правому краї, по центрі, по обох краях). Приклад:
text-align: center text-decoration-підкреслення; значення: underline або
none Приклад: text-decoration: underline text-indent-абзацний відступ; значення: відносний розмір
у відсотках або в частках ширини літер m
або x даного шрифту або абсолютний
розмір у пикселях або пунктах. Приклад: text-indent: 1em; 4. Визначення властивостей текстового
боксу:margin-top, margin-bottom, margin-left,
margin-right-відступ від країв вікна. Значення: відносний розмір у відсотках
або в частках ширини літер m або x даного шрифту або абсолютний розмір у
пикселях або пунктах. Приклад: margin-left: 40px; padding-top, padding-bottom, padding-left,
padding-right-відступ від зони рамки текстового блоку (самої рамки може й не
бути). Значення: відносний розмір у відсотках або в частках ширини літер m або x даного шрифту або абсолютний розмір у пикселях або пунктах.
Приклад: padding-left: 3px; border-width-ширина
рамки. Значення абсолютний розмір у пикселях або пунктах. Приклад:
border-width: 1px; border-color-колір рамки. Значення: колір. Приклад:
border-color: #f00; border-style-стиль рамки. Відображається досить
неоднозначно, тут приводяться тільки що однозначно відображаються значення.
Значення: none, solid, double (ні, цільна, подвійна). double працює коли
border-width не менш 3px. Приклад: border-style: double; border-top, border-bottom, border-left,
border-right-рамка зверху, знизу, ліворуч, праворуч. Використовується разом з
–width, -color, -style для визначення властивостей різних частин рамки
текстового боксу. Значення описані вище. Приклад: border-left-style: none;
float-розташування
елементів. Значення: left, right, none (пригорнути вліво, пригорнути вправо, за
замовчуванням). Зручний, наприклад, для верстки тексту в трохи колонок без
застосування таблиці: всі <div> шириною менш екрана, у яких виставлений
float:left, будуть заповнювати екран один за одним, починаючи ліворуч.
Використовується також для присохлого картинок. Приклад: float: left;
| |||||||||||||||||||||||||||
|
|
| Всего комментариев: 1 | ||
| ||
