Вторник, 25.06.2019, 19:41
Приветствую Вас Гость | RSS
Форма входа
Категории раздела
Книги [15]
Описание и ссылки на книги
Тесты [2]
конспекти лекций [3]
Word,Excel,Access,Csss
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Если Вам понравился сайт, поддержите его копеечкой :)




E853043424077

R162738894553

U425591953736

Z874355839447

B120410501392
Дружим в соцсетях
Поиск
Друзья сайта

Учись, чтобы учить других!

Книги, тесты, онлайн ТВ

Главная » 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-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: 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 (не повторювати (зображення з'явиться тільки один раз), забрукувати всю площу, повторювати тільки по горизонталі, повторювати тільки по вертикалі).
Приклад: background-repeat: no-repeat;

2. Визначення властивостей шрифту:

font-family-гарнітура; значення: назви шрифтів. Для забезпечення сумісності варто завершувати список можливих гарнітур родовою назвою групи шрифтів (serif, sans-serif або monospace), наприклад: font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
або "Times New Roman", Times, serif; або "Courier New", Courier, monospace;

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;

 

Категория: конспекти лекций | Просмотров: 812 | Добавил: sergqy | Теги: каскадные таблицы стилей, css | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *:
Copyright Цокол Сергей Александрович © 2019 Конструктор сайтов - uCoz