4338
CSS – каскадные таблицы стилей
Лекция
Информатика, кибернетика и программирование
CSS – каскадные таблицы стилей CSS – CascadingStyleSheets (каскадные таблицы стилей). Стили определяют отображение элементов HTML HTML – для логической разметки документа (заголовки, параграфы, списки). Браузеры стали ввод...
Русский
2012-11-16
50.5 KB
40 чел.
CSS Cascading Style Sheets (каскадные таблицы стилей).
Стили определяют отображение элементов HTML
HTML для логической разметки документа (заголовки, параграфы, списки). Браузеры стали вводить новые тэги и атрибуты для отображения сложных композиций. Для стандартизации этих возможностей и уменьшения несовместимости W3C разработал сначала HTML 3.2, введя ряд тегов визуальной разметки, потом удалил их в HTML 4 и разработал отдельную спецификацию CSS. Все основные браузеры поддерживают CSS.
Стили ускоряют и упрощают верстку
Стили обычно хранятся в отдельном файле с расширением CSS. Внешний CSS-файл позволяет полностью изменить дизайн и компоновку всех веб-страниц сайта, изменением лишь одного этого файла.
В этом файле вы можете определить стиль отображения любого HTML элемента и применить его к любым страницам, каким вам необходимо.
Несколько стилей объединяются в один
Стили могут храниться в разных местах: внутри HTML элемента с помощью атрибута STYLE, внутри тэга HEAD или во внешнем CSS-файле (или даже в нескольких файлах). Для одного HTML элемента стиль может оказаться в нескольких местах и они «каскадно» объединяются в один в соответствии со следующими приоритетами (начиная с младшего):
Синтаксис стиля следующий:
селектор {свойство: значение}
В простейшем случае селектор это 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}
Можно объявить стиль для элемента по его идентификатору (задается в 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, то позиция указывается относительного родительского.
А также другие работы, которые могут Вас заинтересовать | |||
40526. | Стилистическое расслоение словарного состава я:зыка | 20.5 KB | |
Все слова языка можно разделить на: нейтральные межстилевые в любом стиле литературного языка. | |||
40527. | Структура языка, его системность. Основные единицы языка, их функции | 38.5 KB | |
Уровень Единица Функция Пример Фонетикофонологический Фонема звук перцептивная восприятия Сигнификативная смыслоразличительная Том дом Угол уголь Морфемноморфологический Морфема Семасиологическая выражение значения Приставка с Суффикс щик Лексикосемантический Слово лексема слово с точки зрения его значения Номинативная назывная Окно Синтаксический Предложение Коммуникативная Мама мыла раму Системность уровня Единицы внутри уровня взаимосвязаны изменение одной единицы приводит к перегруппировке всего уровня. ... | |||
40528. | Типы лексических значений слова. Многозначность и пути ее развития | 33 KB | |
Типы лексических значений слова. Предметная отнесенность слова денотативный компонент значения. Обычно слово предмет действие или признак номинативная функция знаменательные слова. Числительные междометия служебные слова не имею денотативного компонента. | |||
40529. | Язык как особая знаковая система. Язык и мышление | 33 KB | |
Язык как особая знаковая система. Язык и мышление. Язык как особая знаковая система. Язык знаковая система естественно возникшая закономерно развивающаяся социально предназначенная. | |||
40530. | Омонимия, ее виды, источники и роль в языке. Разграничение омонимии и полисемии | 21 KB | |
Омонимия разные слова с одинаковым звуковым составом. Типы омонимов: лексические омонимы слова относящиеся к одному грамматическому разряду имеют одинаковое звучание и написание: лук. омоформы слова у которых совпадают определенные грамматические формы. омофоны слова которые одинаково звучат но пишутся поразному. | |||
40531. | Графика | 15.24 KB | |
Состоят из: Правила чтения напр. u может быть ju ʌ или u Правила написания напр. Правила орфографии правила написания значащих языковых единиц морфем и слов Правила орфоэпии правила озвучивания при чтении значащих языковых единиц морфем и слов Правила орфографии строятся на базе правил графики и нужны ТОЛЬКО если по правилам графики есть вариант напр. | |||
40532. | Части речи как основные грамматические категории. Принципы выделения частей речи | 31.5 KB | |
Части речи как основные грамматические категории. Принципы выделения частей речи. Части речи: можно назвать грамматическими категориями но они более широкие общие лексикограмматические классы слов.: части речи части слова. | |||
40533. | Слово как единица и предмет лексикологии. Признаки слова. Аспекты его изучения. Структура лексикологии как науки | 23.5 KB | |
Признаки слова. Признаки слова: фонетическая оформленность фонетически непроницаемо для других слов. Обычно у слова есть номинативная функция. Слово не равно: Словоформе грамматическая разновидность слова. | |||
40534. | Способы выражения синтаксических отношений в языках мира. Языки номинативного и эргативного строя. Виды синтаксических связей | 21 KB | |
Языки номинативного и эргативного строя. Грамматические способы: аффиксация особенно флексия способ служебных слов способ порядка слов способ интонации способ ударения Языки номинативного и эргативного строя. По характеру выражения субъектнообъектных отношений все языки мира делятся на языки: номинативного строя Субъект действия выражен номинативом. эргативного строя Оформление субъекта зависит от свойств глагола если глагол: переходный то существительное стоит в эргативном падеже обозначает реально действующее лицо. | |||