русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

CSS стили | Уроки CSS

ОГЛАВЛЕНИЕ

Введение
1 Формат CSS
1.1 Свойства задания полей документа
1.2 Свойства текста
1.2.1 Свойство text-align
1.2.2 Свойство text-indent
1.2.3 Свойство text-decoration
1.2.4 Свойство word-spacing
1.2.5 Свойство letter-spacing
1.2.6 Свойство writing-mode
1.3 Свойство задания цвета
1.4 Свойства задания параметров шрифтов
1.4.1 Свойство font-style
1.4.2 Свойство font-weight
1.4.3 Свойство font-variant
1.4.4 Свойство font-size
1.4.5 Свойство font-family
1.5 Свойство вертикального выравнивания
2 Способы задания CSS в HTML-документе
2.1 Внешнее задание CSS
2.2 Внутренее задание CSS
2.3 Встроеное задание CSS
Пример №1

Оглавление

Введение

На данной уроке мы познакомимся с CSS стилями. Каскадные листы (таблицы) стилей CSS (Cascading Style Sheets) также, как и язык HTML, разработаны консорциумом W3C и тоже служат целям представления документов на Web-страницах. CSS стили не являются частью HTML, не используються самостоятельно, но имеется возможность их подключения в HTML-документу для совместного применения.

Каскадные листы стилей, не выполняя всех функций языка HTML, обладают расширенными возможностями при форматировании текста. Поэтому одним из современных требований на разработку Web-сайтов является рекомендация использования CSS стилей вместо тэгов HTML везде, где это возможно.

Оглавление

1 Формат CSS стилей

Каскадные листы стилей имеют следующий формат:

CSS-идентификатор {свойство: значение; свойство: значение; . . . }

В качестве CSS-идентификатора могут быть использованы:

  • HTML-тэги (например, BODY, H1, P, ...);
  • HTML-тэги с указанием класса (например, P.small - для параграфа с маленькими буквами);
  • классы без указания HTML-тэга (например, .green_it - для любого тэга, с зелеными наклонными символами);
  • идентификаторы (например, #zz).

Ниже приведены свойства каскадных листов стилей и их возможные значения.

Оглавление

1.1 Свойства задания полей документа

Поля HTML-документа могут быть заданы с помощью следующих свойств CSS, которые указывают размер :

  •  margin-left       - левого поля;
  •  margin-right     - правого поля;
  •  margin-top       - верхнего поля;
  •  margin-bottom - нижнего поля.

Размер всех полей может быть задан с помощью одной из следующих единиц измерения (если единица измерения не задана, то предполагается, что она задана в пикселях):

 

  •  pt - в пунктах (1/72 дюйма);
  •  px - в пикселях;
  •  mm - в мм;
  •  cm - в см;
  •  in - в дюймах;
  •  % - в процентах размера родителя.

Например, CSS

P{margin-left:2сm}

задает размер левого поля всех параграфов текста равным 2 см.
Отметим, что в случае, когда для одного и того же свойства тэга с помощью HTML и CSS стилей задаются разные значения, приоритет отдается CSS. Например, при следующем задании верхнего поля документа:

<BODY STYLE="margin-top:50" TOPMARGIN=100>

верхнее поле будет иметь размер 50 пикселей.

Оглавление

1.2 Свойства текста

Для задания параметров текста на Web-страницах используются следующие свойства CSS:

  •  text-align - задание горизонтального выравнивания шрифта;
  •  text-indent - задание отступа первой строки параграфа;
  •  text-decoration - задание декоративного выделения текста;
  •  word-spacing - задание расстояния между словами в тексте;
  •  letter-spacing - задание расстояния между символами в слове;
  •  writing-mode - задание направления строк текста: горизонтальное или вертикальное.

1.2.1 Свойство text-align

Горизонтальное выравнивание текста на Web-страницах осуществляется с помощью свойства text-align, которе имеет следующие значения:

  •  left - по левому краю экрана (значение по умолчанию);
  •  right - по правому краю экрана;
  •  justify: текст выравнен по обеим краям (если длина текста больше длины строки экрана);
  •  center - по центру экрана.

1.2.2 Свойство text-indent

С помощью свойства text-indent задается величина отступа первой строки параграфа (единицы измерения - см. пункт 1.1). Значение по умолчанию 0.

Оглавление

1.2.3 Свойство text-decoration

Помимо указания цвета и параметров шрифта для выделения фрагментов текста может быть также использовано свойство text-decoration , которое может принимать следующие значения:

  •  none - декоративное выделение текста не используется (значение по умолчанию);
  •  underline - подчеркивание (линия снизу);
  •  overline - надчеркивание(линия сверху);
  •  line-through - перечеркивание.

1.2.4 Свойство word-spacing

Свойство word-spacing указывает расстояние между словами в тексте и может иметь следующие значения:

  • normal - стандартное расстояние (значение по умолчанию);
  • величина, указывающая дополнительное расстояние (единицы измерения - см. пункт 1.1).

1.2.5 Свойство letter-spacing

Свойство letter-spacing указывает расстояние между символами в слове и может иметь следующие значения:

  •  normal - стандартное расстояние (значение по умолчанию);
  •  величина, указывающая дополнительное расстояние (единицы измерения - см. пункт 1.1).

Например, CSS

.big_space{letter-spacing:5mm}

задает для всех тэгов класс текста "big_space" с увеличенным на 5 мм расстоянием между буквами.

Оглавление

1.2.6 Свойство writing-mode

Свойство writing-mode задает направление строк текста: горизонтальное или вертикальное и может иметь следующие значения:

  •   lr-tb - обычное горизонтальное расположение строк текста; текст пишется слева направо и сверху вниз (значение по умолчанию);
  •  tb-rl - поворачивает текст на 90° по часовой стрелке; при этом он будет писаться сверху вниз и справа налево.
Оглавление

1.3. Свойство задания цвета

Для задания цвета на Web-страницах используется свойство color . Имеется три возможности задания значения цвета (первые две такие же, как в HTML - см п. 2.1 - Форматирование HTML):

  •  с помощью английских названий;
  •  с помощью значения #RrGgBb;
  •  с помощью значения #RGB.

Третий вариант задания цвета отличается тем, что значения компонентов цветов изменяются в пределах от 0 до 16.

Оглавление

1.4. Свойства задания параметров шрифтов

Для задания параметров шрифтов на Web-страницах используются следующие свойства CSS:

  •  font-style - задание стиля шрифта;
  •  font-weight - задание жирности шрифта;
  •  font-variant - задание вида строчных букв;
  •  font-size - задание размера шрифта;
  •  font-family - задание семейства шрифтов.

1.4.1 Свойство font-style

Свойство стиля шрифта font-style имеет следующие значения:

  •  normal - обычный (значение по умолчанию);
  •  italic - наклонный (курсив).

1.4.2 Свойство font-weight

Свойство жирности шрифта font-weight имеет следующие значения:

  •  normal - обычный (значение по умолчанию);
  •  bold - полужирный.
Оглавление

1.4.3 Свойство font-variant

Свойство вида строчных букв font-variant имеет следующие значения:

  •  normal - обычный (значение по умолчанию);
  •  small-caps - делает строчные буквы заглавными, но меньшего размера.

1.4.4 Свойство font-size

Размер шрифта с помощью свойства font-size может задаваться:

  •  в физических единицах: pt, px, mm, cm, in, % (см. пункт 1.1);
  •  в условных единицах: xx-small, x-small, small, medium, large, x-large,xx-large;
  •  в относительных единицах:smaller, larger.

1.4.5 Свойство font-family

Свойство семейства шрифтов font-family задает типы шрифтов по их наименованию также, как это делается в HTML с помощью параметра FACE тэга <FONT> (см. пункт 2.5 - Форматирование HTML):

P{font-family:"Arial Cyr, Arial, HelvDL"}

По умолчанию задается семейство шрифтов Times.

Оглавление

1.5. Свойство вертикального выравнивания

Для вертикаьного выравнивания текста используется свойство vertical-align, которое может иметь следующие значения:

  •  baseline - выравнивание базовой линии элемента по базовой линии родителя (используется по умолчанию);
  •  sub - превращает текст в нижний индекс;
  •  super - превращает текст в верхний индекс;
  •  top - выравнивание верха элемента по верху родителя;
  •  text-top - выравнивание верха текста элемента по верху текста родителя;
  •  middle - выравнивание центра элемента по центру родителя;
  •  bottom - выравнивание низа элемента по низу родителя;
  •  text-bottom - выравнивание низа текста элемента по низу текста родителя.
Оглавление

2. Способы задания CSS в HTML-документе

CSS не только расширяет возможности HTML, но и делает форматирование текста единообразным как для отдельно взятого документа, так и для группы документов, имеющих общее назначение. В зависимости от того, насколько общим будет использование тех или иных каскадных листов стилей, применяется один из трех возможных способов использования CSS стилей в HTML-документе:

  •  внешнее задание CSS;
  •  внутреннее задание CSS;
  •  встроенное задание CSS.
Оглавление

2.1 Внешнее задание CSS

При внешнем задании каскадные листы стилей формируются в соответствии с описанными выше правилами в виде отдельного файла, так же как и HTML-документ, с помощью простого текстового редактора. В качестве расширения файла для удобства пользователей лучше указать .css, хотя можно задавать и другие расширения.
Например, следующий файл с именем my.css

H1{text-align:center; color:#D0D; font: italic small-caps 0.7in tahoma}
P{text-indent:1.5cm; color:#000080;font-size:large}

содержит два каскадных листа стилей, которые задают:

  • параметры заголовка первого уровня (его выравнивание, цвет и вид шрифта);
  • параметры параграфа, которые являются общими для HTML-документов (размер абзаца, цвет и размер шрифта);

Отметим, что при описании параметров заголовка использована сокращенная форма задания свойств шрифта font: italic small-caps 0.5in tahoma вместо обычной font-style:italic; font-variant:small-caps; font-size:0.5in; font-family: tahoma. В этом случае необходимо придерживаться заданного порядка указания значений свойств.
Подключение созданного файла CSS к HTML-документу осуществляется с помощью одиночного тэга <LINK>, который размещается в области заголовка HTML-документа, т.е. между тэгами <HEAD> и </HEAD>. Тэг <LINK> содержит следующие параметры:

  •  REL;
  •  TYPE;
  •  HREF.

Поскольку к HTML-документу подключается файл с каскадными листами стилей, то в качестве значения параметра REL необходимо указать STYLESHEET, а в качестве значения параметра TYPE - "text/css". Так как это значение берется браузером по умолчанию, параметр TYPE в тэге <LINK> можно не приводить. В качестве значения параметра HREF необходимо указать путь к файлу, содержащему CSS.
В примере №1 приведен HTML-документ, в котором, наряду с другими способами, показано внешнее задание CSS в HTML-документе. В этом примере в качестве внешнего файла, содержащего CSS, используется описанный выше файл my.css.

Оглавление

2.2 Внутренее задание CSS

При внутреннем задании каскадные листы стилей описываются так же, как и при внешнем, но оформляются не в виде внешнего файла, а задаются непосредственно в области заголовка HTML-документа внутри тэга-контейнера <STYLE> . . . </STYLE>.
В примере №1 показано внутреннее задание трех каскадных листов стилей:
Первый CSS описывает класс зеленного подчеркнутого текста для тэга P ("P.green_decor").
Второй CSS описывает класс с вертикальным расположением текста без указания тэга (".vert"), который, поэтому, можно использовать для любых тэгов. В этом случае удобно применить тэг-контейнер <SPAN>. . . </SPAN>, который с помощью параметра CLASS может быть использован для указания диапазона действия заданного класса.
Третий CSS описывает класс текста с увеличенным на 2.5 мм расстоянием между буквами, заданный для тэга с указанныи идентификатором "#razr". Идентификатор может быть задан для любого тэга с помощью параметра ID.
Если в качестве CSS-идентификатора задан HTML-идентификатор с классом или только класс, то в тэге, который использует данный класс, необходимо указывать параметр CLASS, задающий имя класса, например:

<P CLASS="green_decor">

Отметим, что для тэга с указанием класса наследуются все свойства тэга кроме тех, что описаны в свойствах класса. В вышеприведенном примере наследуется такое свойство параграфа, как отступ, но изменяются такие свойства, как цвет, размер шрифта и декоративное выделение текста (по умолчанию текст не выделяется).

Оглавление

2.3 Встроеное задание CSS

При встроенном задании свойства каскадных листов стилей указываются прямо в тэге после параметра STYLE. Единственное отличие в синтаксисе описания CSS заключается в том, что свойства CSS и их значения берутся не в фигурные скобки, а в двойные кавычки.
В примере (№1) приведен HTML-документ, в котором показано три способа задания CSS в HTML-документе: внешнего, внутреннего и встроенного.

Пример 1

<HTML>
<HEAD>
<TITLE> Использование CSS стилей в HTML-документе </TITLE>
<LINK REL= STYLESHEET HREF="my.css">
<STYLE>
P.green_decor{color:green; font:16pt; text-decoration:underline}
.vert{color:#006060; font:large; writing-mode:tb-rl}
#razr{letter-spacing:2.5mm}

</STYLE>
</HEAD>
<BODY>
<H1> Параметры заголовка заданы внешним СSS </H1>
<P CLASS="green_decor"> Параметры этого параграфа заданы с помощью внутреннего использования CSS (класс "green_decor" тэга P).
<P> Свойства абзаца, цвета и размера шрифта этого параграфа наследуются из внешнего CSS.
<CENTER>
<SPAN CLASS="vert "> Вертикальный текст: класс vert. </SPAN>
</CENTER>
<P ID="razr">
< SPAN STYLE="color: red; font-size:1cm "> В </SPAN> строенное и внутреннее задание CSS.
</BODY>
</HTML>

 

Оглавление

Просмотров: 18889

Вы можете --> заказать сайт - полноценный или в качестве обучения для студентов.

Вернуться воглавление


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Полезен материал? Поделись:

Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.