Презентация по информатике на тему Каскадные таблицы стилей CSS
Каскадные таблицы стилей CSSCSS – это язык, содержащий набор свойств для определения внешнего вида документа. Cпецификация CSS определяет свойства и описательный язык для установления связи с HTML-элементами.CSS – абстракция, в которой внешний вид Web-документа определяется отдельно от его содержания.
Четыре способа подключение CSS стилей к html:Четыре способа подключение CSS стилей к html:1. Подключение отдельного CSS-файла 2. Прописываем стили непосредственно в самом html файле (первый способ)3. Прописываем стили непосредственно в сама html файле (второй способ)4. Ссылка на CSS-файл внутри файла этого же типа
Подключение отдельного CSS-файлаДля добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. При использовании таблицы связанных стилей описание селекторов и их свойств располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <LINK>. Данный тег помещается в контейнер<HEAD>Пример Подключение таблицы связанных стилей <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Стили</title> <link rel="stylesheet" type="text/css" href="mysite.css"> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <h1>Заголовок</h1> <p>Текст</p> </body> </html>
Подключение отдельного CSS-файлаЗначения параметров тега <LINK> — rel и type остаются неизменными, как приведено в данном примере. Содержимое файла mysite.css подключаемого посредством тега <LINK> Пример Файл со стилемH1 { color: blue; font-size: 200%; font-family: Arial, Verdana, sans-serif; text-align: center; } P { padding-left: 20px; } Если у padding'а задано только одно значение, то оно устанавливает отступ со всех сторон элемента - сверху, справа, снизу и слева.
Прописываем стили непосредственно в самом html файле (первый способ)<!DOCTYPE html><html><head> <title> Самый лучший Блог </title></head> <body><p style="color:red;">Тут пример: отображение CSS-стилей в документе HTML </p></body></html>
Прописываем стили непосредственно в сама html файле (второй способ)<!DOCTYPE html><html><head><title> CSS</title></head><body><style>.p{color: red;}</style><p>пример отображения CSS-стилей в документе HTML </p></body></html>
Ссылка на CSS-файл внутри файла этого же типаМы создаем несколько файлов с CSS-стилями. Пусть их названия будут style-1.css и style-2.css. Размещаем, как и в способе номер один, в одной папке с HTML-файлом.И далее выполняем следующие действия:<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="style-1.css"><link rel="stylesheet" type="text/css" href="style-2.css"><meta charset="utf-8"><title> Стили CSS </title></head><body><p>Тут пример: отображение CSS-стилей в документе HTML </p></body></html>
Правило CSSПравило CSS - это структурная единица таблицы стилей, которая содержит описание стилей для определенного элемента. Правило состоит из селектора, который всегда располагается слева, и блока объявления стилей, который заключается в фигурные скобки и следует непосредственно за селектором (рисунок). Каждое объявление в свою очередь состоит из свойства и его значения. Именно свойство и определяет вид стиля, который будет применяться к элементу.
Правило стиляВ общем случае правило стиля можно задать так:селектор[,селектор,]... { свойство1: значение; свойство2: значение; ...}, гдеселектор (указатель), селектор,... - перечень имен тегов, классов, идентификаторов, для которых определяется стиль, разделенных запятыми;- свойство1: значение; ... - список задаваемых свойств и присваиваемых им значений, разделенных точками с запятой и заключенных в {...}. Напримерh3 {font-family: arial; font-size: 10pt; text-align: center; color: green; background: white; },
Описание примерашрифт заголовка - Arial, размер шрифта - 10 пунктов (один пункт=1/72дюйма), выравнивание заголовка выполняется по центру окна или ячейки таблицы, где он размещен, цвет - зеленый, фон, на котором он будет отображен – белый<h3> Для заголовка третьего уровня задано правило стиля в CSS </h3>, в браузере увидим:Для заголовка третьего уровня задано правило стиля в CSS
Таким образом, все заголовки страницы (а если вы сохранили это правило в отдельном файле стилей и сделали ссылки на него в других страницах, то и у них) будут оформлены одинаково (указанным стилем). Аналогично можно и для других элементов веб-документов задать описание правил стилей (<p>, <a> и т.д.).А если нужно, чтобы таким же стилем были оформлены и некоторые другие элементы страницы (разных типов), не все на странице, а выборочно. Вариант вставки указанного стиля, непосредственно в тег каждого элемента, исключаем. Для решения этой проблемы применяются следующие атрибуты:class="имя_класса";id="имя_идентификатора".class означает, что многим элементам страницы присваивается определенный стиль, своего рода, целому классу. id (идентификатор) - используется тогда, когда только один элемент на странице соответствует этому стилю, например id="header", id="main", id="bottom", т.е по одному идентификатору для "шапки", основной и заключительной части страницы.
Селекторы классов.prim {font-weight: bold; text-alight: center; color:"#cccccc";},здесь текст выделяется полужирным шрифтом и выравнивается по центру окна документа или ячейки таблицы, цвет текста - серый. Точка перед названием класса обязательна. Наберем html-код:<table width="100%"> <tr> <td class=“prim"> Данная ячейка оформлена стилем класса “prim" </td>, </tr></table><p class=“prim"> Текст этого абзаца оформлен стилем класса “prim" </p>
Селекторы идентификаторов#prim_id { font-weight: bold; font-size: 12pt; font-style: italic; text-align: center; color: "#0000FF"; } ,шрифт - полужирный, размер - 12 пунктов, начертание шрифта - курсив, текст выравнивается по центру, цвет - синий. Знак # перед именем идентификатора является обязательным и обозначает, что данный селектор есть идентификатор. Применим описанный идентификатор к одному из абзацев веб-страницы:<p id="prim_id"> Стиль текста этого абзаца описан идентификатором "prim_id" </p>.В результате получим следующее:Стиль текста этого абзаца описан идентификатором "prim_id"
Один стиль для нескольких селекторовПрименяя одно описание стиля для нескольких селекторов, перечисленных через запятую, мы определяем для них один стиль..prim, a, h5 {font-weight: bold; text-alight: left; color="#660000"}Для класса prim, элементов а и h5 задан один стиль, определенный значениями свойств элементов, заключенных в фигурные скобки.Селекторы наследованияВ CSS применим механизм наследования. Задавая в правиле стиля селекторы через пробел, мы получаем вложение одних в другие. В приведенном ниже правиле,p a {font-weight: bold; color: green;},все ссылки, находящиеся внутри абзацев будут выделены полужирным шрифтом зеленого цвета.
Блочная модель браузеровПрактически все элементы языка HTML воспринимаются браузерами как прямоугольные области. Схематически это можно изобразить так, как показано на рисунке ниже.
Прямоугольная область состоит из:содержимого (контента) веб-элемента;- внутреннего отступа от содержимого до бордюра (границы) ("padding");- бордюра (границы) элемента ("border");- внешнего поля вокруг элемента ("margin").Свойства элементов языка HTML