ID: 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 этот элемент оформляется так:

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

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

p em {background: yellow}

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

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

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

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

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

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

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

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

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

<head>

…

…

</head>

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

<head>

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

А также другие работы, которые могут Вас заинтересовать
80334.	Лекция	Основні фонди та оборотні засоби сільськогосподарського підприємства	148 KB
	Амортизація основних фондів підприємства. Показники використання основних виробничих фондів підприємства. При цьому засоби праці знаходять своє вираження в основних фондах підприємства а предмети праці в оборотних фондах. До основних виробничих фондів належать такі фонди які беруть безпосередню участь у процесі виробництва і формуванні собівартості продукції.
80335.	Лекция	Персонал підприємства, продуктивність і оплата праці в сільському господарстві	144 KB
	Продуктивність праці і методика її визначення. Оплата праці персоналу підприємства. Із розвитком продуктивних сил чисельність працівників аграрного сектора економіки зменшується.
80336.	Лекция	Витрати виробництва і собівартість продукції	146.5 KB
	Вони й утворюють витрати підприємства. Тому витрати операційної діяльності виправдано трактувати як грошовий вираз ресурсів використаних виробничоспожитих у процесі виробництва і збуту продукції надання послуг виконання робіт та організації управління ним на всіх його ієрархічних рівнях. У даному випадку йдеться про поточні операційні витрати які підприємства здійснюють постійно для забезпечення безперервності виробництва.
80337.	Лекция	Економіка рослинництва. Економіка виробництва картоплі, овочів, плодів та ягід	66.5 KB
	Вирішальне значення для розвитку всіх галузей сільського господарства має нарощування виробництва зерна. На корм використовується і побічна продукція зернових солома полова відходи переробки зерна. Валове виробництво зерна у 2011 році 56747 тис тонн що порівняно із 1990 роком більше на 112 .
80338.	Лекция	Економіка тваринництва	85.5 KB
	Показниками ефективності галузі скотарства є: Технологічна ефективність: середньорічний надій молока від однієї корови; середньодобовий та річний приріст живої ваги ВРХ; затрати кормів на 1 ц молока та на 1 ц приросту живої ваги ВРХ. Економічна ефективність: трудомісткість виробництва 1ц молока та 1 ц приросту живої ваги ВРХ. собівартість виробництва 1 ц молока 1 ц приросту живої ваги ВРХ та 1 ц живої ваги ВРХ. середня ціна реалізації 1 ц молока 1 ц живої ваги ВРХ.
80339.	Курсовая	Проектирование редуктора привода агрегатов средств наземного обслуживания	692 KB
	Основными недостатками передачи являются: большие габариты, что заставляет использовать ее исключительно для малонагруженных и высокооборотных передач; малая долговечность ремней, составляющая в среднем 1000 – 5000 часов; наличие скольжения, приводящего к непостоянству передаточного отношения.
80340.	Лекция	Обстеження публічно-недоступних місць, житла чи іншого володіння особи як негласна слідча (розшукова) дія	49.06 KB
	Обстеження публічнонедоступних місць житла чи іншого володіння особи як негласна слідча розшукова дія. Поняття суть мета правова основа та принципи обстеження публічнонедоступних місць житла чи іншого володіння особи. Саме тому єдиним джерелом доказової інформації є матеріали негласних слідчих розшукових дій зокрема обстеження публічнонедоступних місць житла чи іншого володіння особи. Це обумовлює необхідність детального вивчення правової основи вимог та принципів обстеження публічнонедоступних місць житла чи іншого володіння...
80341.	Лекция	Комунікації в команді	84.5 KB
	Дуже важливо, щоб кожен член команди знав або хоча б мав при бажанні можливість дізнатися про проект не менше, ніж його менеджер. І не варто нічого приховувати, ні проблем з замовником, ні розбіжностей з керівництвом. Важко очікувати самостійні, нестандартні та ефективні рішення від людини, яка бачить проблему тільки з одного боку.
80342.	Лекция	Спостереження за особою, річчю або місцем	32.9 KB
	Спостереження – один з основних способів пізнання світу. За його допомогою людина вивчає навколишню місцевість, розташовані на ній обєкти і предмети, визначає зміни, які на ній відбуваються, та на основі своїх спостережень вчиняє певні дії.