4338

CSS – каскадные таблицы стилей

Лекция

Информатика, кибернетика и программирование

CSS – каскадные таблицы стилей CSS – CascadingStyleSheets (каскадные таблицы стилей). Стили определяют отображение элементов HTML HTML – для логической разметки документа (заголовки, параграфы, списки). Браузеры стали ввод...

Русский

2012-11-16

50.5 KB

40 чел.

CSS – каскадные таблицы стилей

CSS – Cascading Style Sheets (каскадные таблицы стилей).

Стили определяют отображение элементов HTML

HTML – для логической разметки документа (заголовки, параграфы, списки). Браузеры стали вводить новые тэги и атрибуты для отображения сложных композиций. Для стандартизации этих возможностей и уменьшения несовместимости W3C разработал сначала HTML 3.2, введя ряд тегов визуальной разметки, потом удалил их в HTML 4 и разработал отдельную спецификацию CSS. Все основные браузеры поддерживают CSS.

Стили ускоряют и упрощают верстку

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

В этом файле вы можете определить стиль отображения любого HTML элемента и применить его к любым страницам, каким вам необходимо.

Несколько стилей объединяются в один

Стили могут храниться в разных местах: внутри HTML элемента с помощью атрибута STYLE, внутри тэга HEAD или во внешнем CSS-файле (или даже в нескольких файлах). Для одного HTML элемента стиль может оказаться в нескольких местах и они «каскадно» объединяются в один в соответствии со следующими приоритетами (начиная с младшего):

  •  установки браузера по умолчанию
  •  внешний CSS
  •  встроенный CSS (внутри тэга HEAD)
  •  CSS, встроенная в html-элемент (атрибут STYLE)

Синтаксис

Синтаксис стиля следующий:

селектор {свойство: значение}

В простейшем случае селектор – это HTML-тэг. Например:

 body {background-color: yellow} — задает желтый фон страницы

p {color: blue} — синий цвет текста внутри абзацев

Несколько свойств указывается через точку с запятой, селекторы также можно объединять:

h1, h2, h3, h4, h5, h6 {

color: brown;

font-family:Arial;

}

— заголовки будут отображаться коричневым цветом шрифтом Arial.

Пробелы и регистр не важен.

Селекторы-классы

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

a {text-decoration:underline} — все ссылки подчеркнуты

a.menu {text-decoration:none} — но ссылки класса menu не подчеркнуты

В HTML, чтобы указать класс элемента используется атрибут CLASS:

<a href="about.html" class="menu">О сайте</a>

Можно объявлять селектор-класс без привязки к конкретному элементу, тогда его можно использовать для любых элементов, например:

.important {font-weight: bold}

ID-селектор

Можно объявить стиль для элемента по его идентификатору (задается в HTML атрибутом ID):

#logo {margin: 10px}

В HTML этот элемент оформляется так:

 <img src=”logo.gif” id=”logo”>

Контекстные селекторы

Можно объявить стиль для селектора, при условии, что находится внутри другого селектора, например:

 p em {background: yellow}

– все выделения тэгом em внутри абзацев будут выделяться желтым фоном.

Комментарии

/* абзацы текст выровнены по обоим сторонам */

P {text-align:justify}

Псевдо-классы

Псевдо-классы используются для специальных эффектов с некоторыми селекторами. Основное применение – настройка отображения ссылок:

a:link {color: #FF0000}     /* непосещенная */

a:visited {color: #00FF00}  /* посещенная */

a:hover {color: #FF00FF}   /* с мышью над ссылкой */

Есть и некоторые другие псевдо-классы, которые используются намного реже.

Вставка стилей

Внешний файл:

<head>

…

<link rel="stylesheet" type="text/css" href="mystyle.css">

…

</head>

Внутренняя таблица стилей:

<head>

<style type="text/css">

body {background-image: url("images/bg.gif")}

</style>

</head>

Внедренный стиль:

<p style="color: orange; margin-left: 20px">Абзац…</p>

– не рекомендуется.  Лучше всего использовать первый вариант, иногда, в комбинации со вторым (например, если на некоторой странице необходимы особые стили).

Основные свойства

Фон элемента:

background-color: #ff0000

background-image: url(bg.jpg)

Цвет текста:

 color: blue

color: #FF00CC

Выравнивание текста в элементе:

 text-align: left | right | center | justify

Подчеркивание:

 text-decoration: none | underline | overline | line-through

Красная строка:

 text-indent: 5px <!-- в пикселях -->

text-indent: 5pt <!-- в пунктах -->

 text-indent: 2em <!-- высота шрифта -->

Переводы строк:

 white-space: normal <-- обычным образом -->

white-space: nowrap <-- всё в одну строку -->

white-space: pre <-- предформатированый текст -->

Шрифт:

 font-family: serif | Times | sanf-serif | Arial | monospace | Courier

 font-size: large | 13pt | 150%

font-weight: normal | bold

Отступы вокруг элемента:

margin: top right bottom left <!—например: margin:5px 7px 5px 7px -->

margin-left: 5px

Рамка:

 border: 2px solid red

Отступ от содержимого до рамки:

padding: top right bottom left

padding-top: 5px

Стиль списка и/или его элементов:

 list-style-type: disc | circle | decimal | upper-roman

list-style-image: url(li.png)

Габариты:

 width: 200px

height: 20pt

Стиль отображения:

 display: none | inline | block

Примечание: Селекторы-классы часто используется в сочетании с тэгами div и span. Эти тэги по умолчанию особым образом не выделяются и используются там, где нет подходящих HTML-тэгов. С помощью стилей они могут быть отображены особым образом. div является блоковым элементом (display:block), т.е. после него делается перевод строки, а span – внутри-текстовым элементом (inline). Например:

 <div class="menu"><a href="about.html">О сайте</a>…</div>

 

И пример стиля:

 .menu a {margin:1em; text-decoration:none}

Позиция:

left: -100px

top: 50px

position: static | relative | absolute

 static: позиция не меняется с помощью left  и top (значение по умолчанию)

 relative: позиция (свойства left и top) задается относительно его исходного места,

absolute: позиция задается относительно всего окна документа и он не показывается в обычном потоке документа (наслаивается сверху); однако если у родительского элемента position:relative, то позиция указывается относительного родительского.

 


 

А также другие работы, которые могут Вас заинтересовать

41744. Лицензионные и свободно распространяемые программные продукты. Организация обновления программного обеспечения с использованием сети Интернет 154.25 KB
  Теоретические сведения к лабораторной работе Классификация программ по их правовому статусу Программы по их правовому статусу можно разделить на три большие группы: лицензионные условно бесплатные и свободно распространяемые. Лицензионные программы. В соответствии с лицензионным соглашением разработчики программы гарантируют её нормальное функционирование в определенной операционной системе и несут за это ответственность. Лицензионные программы разработчики обычно продают в коробочных дистрибутивов.
41745. ИССЛЕДОВАНИЕ РЕЖИМА ВНЕЗАПНОГО ТРЕХФАЗНОГО КОРОТКОГО ЗАМЫКАНИЯ НА ШИНАХ СИНХРОННОГО ГЕНЕРАТОРА 473.1 KB
  угла 0 между плоскостью фазной обмотки статора и продольной осью ротора в начальный момент КЗ t=0 на величину тока в этой фазе и характер его изменения. После чего необходимо сохранить или перерисовать осциллограмму переходного процесса тока в фазе âаâ i=ft. Поясните письменно какое влияние оказывает положение ротора по отношению к фазе âаâ в начальный момент КЗ на характер переходного процесса и величину тока в данной фазе для ответа пользуйтесь теоретическим материалом. Определение величины ударного тока и...
41747. Приемы работы с большими документами в Word 130.18 KB
  Логическая структура основной памяти Статический тип памяти обладает существенно более высоким быстродействием но значительно дороже динамического Для регистровой памяти МПП и КЭШ память используются SRM а ОЗУ основной памяти строится на базе DRMмикросхем. Найти фразу ЭВМ имеют четыре иерархических уровня памяти и организовать в конце абзаца сноску на текст: Быстродействие МПП КЭШпамяти и ОП измеряется временем обращения tобр к ним сумма времени поиска считывания и записи информации. Регистры КЭШпамяти недоступны для...
41748. Рекурсия. Вычислить сумму N членов рекуррентной последовательности 65.54 KB
  Вычислить функцию Бесселя 8го порядка с аргументом x: Вычислить биномиальные коэффициенты для b вводятся пользователем. Определить Nый член рекуррентной последовательности: Дана функция Вычислить корень уравнения на отрезке 1 3 методом деления отрезка пополам с погрешностью Дана последовательность Определить сумму элементов данного массива. Вычислить S1S2 где S1 сумма нечетных целых чисел от до b S2 сумма четных чисел от c до d.
41749. Определение скорости полета пули по методу Поля 49.49 KB
  Определить угловую скорость вращения вала с бумажными дисками.1 с двумя бумажными дисками закрепленными на общем валу на расстоянии l друг от друга. Расстояние между дисками l. Если произвести выстрел вдоль оси вращения бумажных дисков то считая движение пули между дисками равномерным и прямолинейным ее скорость можно определить по формуле: 1 где l расстояние между бумажными дисками время пролета пули между дисками...
41750. Дискретное (цифровое) представление текстовой, графической, звуковой информации и видеоинформации 24.99 KB
  Способы кодирования и декодирования информации в компьютере, в первую очередь, зависит от вида информации, а именно, что должно кодироваться: числа, текст, графические изображения или звук. Дискретное представление информации: кодирование цветного изображения в компьютере (растровый подход). Представление и обработка звука и видеоизображения.
41751. Исследование транзистора по схеме с общим эмиттером 118.56 KB
  Цель работы: Снятие характеристик биполярного транзистора. Снять входные характеристики транзистора для двух значений выходного напряжения: Uкэ=0; Uкэ= 5В. Снять выходные характеристики транзистора.
41752. Построение графиков функций в системах координат 220.26 KB
  Функция одной переменной для шагового аргумента. Построить таблицу значений функции для аргумента x изменяющегося от 0 до 15 с шагом 01.1 Вариант Функция Интервал изменения аргумента Шаг изменения аргумента Вычислить таблицу значений функции для аргумента изменяющегося с данным шагом в заданном интервале и построить ее график Пример 2.