Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ

Лабораторная работа №2. Использование каскадных таблиц стилей CSS

⇐ ПредыдущаяСтр 2 из 7Следующая ⇒

Назначение CSS

CSS (англ. Cascading Style Sheets – каскадные таблицы стилей) – формальный язык описания внешнего вида документа HTML или XHTML. CSS является базовой технологией в современном WEB.

Основная идея CSS в том, чтобы отделить дизайн документа от его содержимого. Содержимое (контент) и логическая структура документа хранится в HTML, а все что относится к внешнему виду документа - шрифт, цвет текста, фон, отступы и т.д. описывается в CSS. Использование CSS дает очень существенные преимущества:

· управление отображением множества документов с помощью одной таблицы стилей;

· более точный контроль над внешним видом страниц;

· различные представления для разных носителей информации (экран, печать, и т. д.);

· сложная и проработанная техника дизайна.

Включение CSS в документ HTML

Для того, чтобы применить таблицу стилей к HTML-документу, мы можем избрать один из трёх способов, либо комбинировать их:

1. применить внешние стили (в виде отдельного текстового .css -файла) с помощью элемента link;

2. встроить стили непосредственно в HTML-документ (в виде блока css-текста) с помощью элемента style;

3. применить inline-стиль, то есть назначить стиль конкретному HTML-элементу непосредственно в документе, с помощью HTML-атрибута style.

Внешние стили (external style sheets)

Применяются с помощью элемента <link>, который должен располагаться внутри элемента <head> и нигде более:

<link rel=”stylesheet” type=”text/css” href=”mystyle.css” media=”all” />

Встретив в HTML-документе этот тег, браузер загрузит с сайта CSS-файл и применит к документу содержащиеся в нём стили. CSS-файл может содержать только инструкции CSS. Внешний файл со стилями удобен тем, что одни и те же стили можно применять ко множеству документов на сайте — в каждом из них достаточно лишь вписать одну строку с элементом link.

Таблицы стилей документа (document style sheets)

Стили документа располагаются непосредственно в HTML-документе и применяются только к нему. Иногда называются embedded style sheet (встроенный стиль).

CSS-стили и комментарии располагаются между открывающим и закрывающим тегами элемента style:

<style type=”text/css”>

...

</style>

Сам тег style (в отличие от link) может находиться в любой части документа, но обычно его размещают внутри элемента <head>.

Стили, встроенные в элемент (inline styles)

Иногда нужно назначить стиль отдельному элементу на странице, не применяя внешних стилей и элемента style. Типичный случай — элемент встречается единожды в документе или на сайте, но требует особого оформления. Это можно сделать при помощи атрибута style:

<p style=”color: red”>Абзац, выделенный красным цветом</p>

Атрибут style есть почти у всех HTML-элементов. Внутри атрибута style можно написать несколько CSS объявлений, разделённых точкой с запятой, фигурные скобки не используются.

Inline-стили, по возможности, не стоит использовать, т.к они смешивают содержимое документа и его дизайн, в то время как идеологически более правильно отделять содержимое документа и информацию о его оформлении.

Синтаксис CSS

Все CSS-правила состоят из селектора и блока объявлений (заключённого в фигурные скобки). Внутри блока объявлений (внутри фигурных скобок, проще говоря) может находиться одно или несколько объявлений, разделённых точкой с запятой. Объявление – это строка, составленная из css-свойства и его значения.

Селектор является указателем на те HTML-элементы к которым следует применить css-правило. Объявление содержит собственно правила оформления элемента.

Виды селекторов

HTML селекторы

Простейший вид селекторов, когда в качестве селектора используется имя того html-элемента, внешний вид которого необходимо изменить. Пример использования html-селектора в стиле документа:

<html>

<head>

<title>Пример использования CSS</title>

p {text-align: center; color: red; background: yellow;

font-weight: bold; font-family: Courier}

</style>

</head>

<body>

<p>Параграф, отформатированный с помощью HTML-селектора</p>

</body>

</html>

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

Класс - это некое имя, которое может применяться к любым HTML-тегам, чтобы впоследствии ссылаться на них по имени класса. В качестве имени класса можно использовать любой текстовый идентификатор. Удобство таких селекторов в том, что можно присвоить одно имя класса множеству html-тегов в документе и затем управлять их внешним видом, обращаясь к ним по имени класса. При описании селектора перед именем класса ставится точка:

<html>

<head>

<title>Пример использования CSS</title>

.myclass {text-align: left; color: #D02090; background: #00FFFF;

font-weight: bold; font-family: Verdana; font-size: 120%}

</style>

</head>

<body>

<p class="myclass">Параграф, отформатированный с помощью селектора класса</p>

</body>

</html>

⇐ Предыдущая 123 4 5 6 7 Следующая ⇒

Читайте также:

Как правильно слушать собеседника

Типичные ошибки при выполнении бросков в баскетболе

Принятие христианства на Руси и его значение

Средства массовой информации США

Последнее изменение этой страницы: 2016-09-13; просмотров: 815; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.139.86.56 (0.009 с.)