Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
html / CSS 1.pptx
Скачиваний:
127
Добавлен:
14.04.2015
Размер:
598.34 Кб
Скачать

CSS

Cascading Style Sheets, каскадные таблицы стилей

CSS

Cascading Style Sheets (каскадные таблицы стилей) – это набор параметров форматирования, который применяется к элементам, атрибутам и/или частям HTML- документа для изменения его внешнего вида.

Оформление HTML-документа

Табличная верстка – устарела;

Блочная верстка (верстка с помощью слоев) – HTML 4 <div>;

Блочная верстка (верстка с помощью слоев) – HTML5 <div>, <article>, <header>, <footer>, <section>, <aside>, <nav>.

Оформление HTML-документа

Основные особенности блочной верстки

Разделение содержания (логики) HTML- документа и его оформления;

Расширенные по сравнению с HTML возможности оформления документа;

Применение таблиц только для представления данных в табличной форме;

Разное оформление для разных устройств;

Единое стилевое оформление множества документов;

Ускорение загрузки сайта.

Типы стилей

Стиль браузера – оформление, применяемое к HTML- документу по умолчанию браузером.

Стиль разработчика (автора) – оформление, добавленное автором сайта при верстке.

Стиль пользователя – настройки стиля в конкретном браузере пользователем.

Способы применения CSS в HTML

Вложение (inline);Встраивание (embeding);Связывание (linking);Импорт (import), IE.

Вложение

Для определения стиля используется атрибут style, а его значением выступает набор стилевых правил. Сам атрибут style расширяет описываемый HTML-элемент.

<body>

<p style="font-size: 120%; ">Данные</p>

</body>

Встраивание

Cвойства CSS описываются в самом HTML- документе и располагаются в заголовке веб-страницы внутри тэга <style>.

<head>

<style> H1 {

font-size:3em;

}

</style>

</head>

Связывание

При использовании связанных свойства CSS располагается в отдельном файле (.css); для связывания HTML-документа с этим файлом применяется тег <link>, располагающийся в <head>.

<head>

<link rel = “stylesheet” type = “text/css” href = “file.css”> </head>

Основы CSS-синтаксиса

CSS состоит из набора стилевых правил, которые описываются в виде отличного от HTML-синтаксиса.

Базовым понятием CSS является селектор – т.е. имя стиля, для которого добавляются элементы форматирования. Общий вид записи:

Тег { свойство1: значение;

свойство2: значение;

...

}

Группировка селекторов

Соседние файлы в папке html