4338

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

Лекция

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

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

Русский

2012-11-16

50.5 KB

40 чел.

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

CSSCascading 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, то позиция указывается относительного родительского.

 


 

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

54809. «Учнівський парламент» - форма організації учнівського самоврядування в школі 189.5 KB
  Активну роль у підготовці сьогоднішніх школярів до реального суспільного самоврядування і формування в них готовності виконувати свій громадянський обовязок покликане відіграти учнівське самоврядування загальноосвітньої середньої школи. Однак сформована на сьогодні система організації діяльності учнівського самоврядування в школі відсутність відповідного соціального замовлення на практичну діяльність учнів законодавства в державному масштабі про трудову діяльність підлітків і учнівської молоді призвели до того що по суті учнівське...
54810. Універсальна модернізована одномісна учнівська парта 4.39 MB
  Стосовно запропонованої учнівської парти то вона має ряд переваг над стандартною. Буде методично правильно коли коли при вивченні графічної грамоти на уроках трудового навчання чи при виконанні графічних робіт на уроках креслення дані завдання виконувати не при горизонтальному положенні столика парти а при вертикальному. Щоб зробити вертикальне положення столика парти достатньо лівою рукою дістатися важіля в передній частині опустити його вниз і столик набуває...
54811. Holidays and traditions in Ukraine and English-speaking countries 1.3 MB
  Dear pupils. I am glad to see you again. The theme of our lesson is “Holidays and traditions in Ukraine and English-speaking countries.” Today we are going to read the text about traditions in English speaking countries and Ukraine, we’ll listen to the text about Thanksgiving Day in Canada and of course you’ll speak English and present your projects. Let’s start.
54812. Parties and Holidays 78.5 KB
  Objectives: to practice pupils’ listening and speaking skills; to enrich the pupils’ vocabulary; to train the usage of the lexical material in practice; to widen students’ knowledge about the celebration of different parties and holidays in Ukraine and English-speaking countries; to develop their critical thinking; to enrich their outlook;
54814. FOOD AND COOKERY 90 KB
  It is not a secret that Ukrainian people are big eaters. Our women cook very much and they cook tasty. But our men like to eat what our women cook and they are thankful for tasty dishes.
54815. Турнір знавців Паскаля 255 KB
  Алгоритмізація та програмування для учнів є більш складними розділами інформатики. Тому варто зробити декілька уроків трішки цікавішими, навіть розважальними. Це може бути, наприклад, узагальнюючий урок напередодні тематичного оцінювання, підсумковий урок теми.
54816. Святкова церемонія вручення паспорта громадянина України 47.5 KB
  Буклети Паспорт головний документ громадянина України Конституція України. Виховувати громадянина патріота країни любов гордість і повагу до України. Ми раді вітати вас на церемонії вручення паспортів громадянина України.
54817. Патріотичне виховання майбутніх соціальних працівників у процесі вивчення соціології (з особистого досвіду) 197 KB
  Тому одним із завдань гуманітаризації та гуманізації вищої освіти стає орієнтація і на загальнолюдські культурні цінності залучення студентів до національних джерел духовності формування у них патріотичних якостей. Проте результати аналізу досліджень вищеназваних учених свідчать що питаниям патріотичного виховання студентів вищих навчальних закладів освіти узагальненню досвіду формування патріотичних якостей студентів не приділялося належної уваги. Патріотичне виховання студентів це організований планомірний та цілеспрямований процес...