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, то позиция указывается относительного родительского.
А также другие работы, которые могут Вас заинтересовать | |||
| 23027. | Псевдоінверсні методи моделювання задач керування лінійними динамічними системами | 652 KB | |
| Інтегральні моделі динаміки лінійних систем і можливості по їх використанню в розвязанні обернених задач.13 були успішно розвязані в попередніх лекціях. Задачі були розвязані точно якщо це можливо або з деяким наближенням якщо точний розвязок задачі не можливий. Цим самим були дані розвязки або найкраще середньоквадратичне наближення до них для задач моделювання зовнішньодинамічної обстановки в якій функціонує система та прямих задач динаміки таких систем. | |||
| 23028. | Задачі ідентифікації динаміки систем з розподіленими параметрами | 276.5 KB | |
| Псевдоінверсні методи [2227] обернення алгебраїчних інтегральних та функціональних перетворень дозволяють виконати таку заміну побудувати моделюючі функції в неперервному або дискретному вигляді тільки при відомій функції матриці Гріна в необмеженій просторовочасовій області. Викладена ж в лекції 2 методика побудови функції дозволяє виконати це для систем динаміка яких описана вже диференціальним рівнянням вигляду 1.7 зведеться до знаходження перетворюючої функції функції Гріна в нашому розумінні такої що 15.4 побудови... | |||
| 23029. | Задачі ідентифікації лінійних алгебраїчних, інтегральних та функціональних перетворень | 487 KB | |
| Постановка та план розвязання задачі. Далі розвязки ідентифікаційних задач 16.3 отримаємо із розвязку допоміжних задач 16. Розглянемо розвязок задачі 16. | |||
| 23030. | Проблеми моделювання динаміки систем з розподіленими параметрами | 1.64 MB | |
| 4 і модель ця адекватно описує динаміку фізикотехнічного обєкту процесу то можна ставити і розвязувати: Прямі задачі динаміки визначення векторфункції стану ys при заданих зовнішньодинамічних факторах ; Обернені задачі динаміки визначення векторфункцій які б згідно певного критерію дозволяли отримувати задану картину змін векторфункції ys або наближатися до неї.4 побудовані апробовані практикою а відповідні математичні теорії дозволяють розвязувати як прямі так і обернені задачі динаміки таких систем.... | |||
| 23031. | Побудова матричної функції Гріна та інтегральної моделі динаміки систем з розподіленими параметрами в необмеженій просторово-часовій області | 249.5 KB | |
| Функція Гріна динаміки систем з розподіленими параметрами в необмежених просторовочасових областях.10 а також з того що шукана матрична функція Gss' є розвязком рівняння 1.1 де визначені вище матричні диференціальні оператори та матрична функція одиничного джерела. А це означає що матрична функція відповідає фізичному змісту задачі а розвязок її дійсно представляється співвідношенням 1. | |||
| 23032. | Дискретний варіант побудови та дослідження загального розв’язку задачі моделювання динаміки систем з розподіленими параметрами | 586 KB | |
| Псевдообернені матриці та проблеми побудови загального розвязку системи лінійних алгебраїчних рівнянь. З цією метою виділимо в матриці C r лінійно незалежних стовпців. Враховуючи що всякий стовпець матриці C може бути розкладений за системою векторів як за базисом матрицю C подамо у вигляді де вектор коефіцієнтів розкладу стовпця матриці С за базисом .10 ранг основної матриці дорівнює рангу розширеної. | |||
| 23033. | Моделювання дискретизованих початково-крайових | 244 KB | |
| Постановка задачі та проблеми її розвязання.4 в розвязку 1.23 вектора векторфункції та матричної функції проблему розвязання задачі 4.6 в залежності від співвідношень між та може мати точний розвязок або визначене згідно 4. | |||
| 23034. | Моделювання неперервної початково-крайової задачі динаміки систем з розподіленими параметрами | 355.5 KB | |
| Моделювання неперервної початковокрайової задачі динаміки систем з розподіленими параметрами 5. Постановка задачі та проблеми її розвязання. Розглянутий вище варіант постановки та розвязання проблеми моделювання початковокрайової задачі динаміки системи 1.5 Для того щоб методику розвязання дискретизованої задачі моделювання динаміки розглядуваної системи розвинуту в рамках лекції 3 успішно узагальнену далі лекція 4 на задачі моделювання дискретизованих початковокрайових умов неперервними функціями та поширити на задачу 5. | |||
| 23035. | Моделювання динамічних систем з розподіленими параметрами при наявності спостережень за ними | 563 KB | |
| Відомі функції невідомі 6. Відомі функції невідомі 6. Відомі функції невідомі 6. Відомі функції невідомі 6. | |||
