Использование css при создании web страниц
Cascading Style Sheets (Каскадные таблицы стилей - CSS) - это специальный язык описания стилей, который обладает гораздо более богатым и функциональным, по сравнению с просто HTML, набором средств форматирования и управления стилями элементов документа. Это позволяет использовать оформление страниц отдельно от его содержимого
Преимущества CSS в создании и ведении сайта таковы.
Простота использования.
Каскадная таблица стилей (CSS) позволит быстро изменить стиль вашего сайта, так, как все стили пишутся в одном .css файле (иногда таких файлов бывает несколько), которые можно повторно использовать для нескольких страниц одновременно. Например, чтобы изменить размер или цвет всех Заглавий на всех ваших страницах, вам не придется лезть в каждую страницу по отдельности, выискивать там код и изменять его, вам будет достаточно лишь добавить в свою запись, и данное свойство будет работать для всех страниц, к которым подключена CSS.
Уменьшение размера файлов.
Отделение контента от визуального оформления позволяет уменьшить размер HTML-файла. Также следует отметить, что после загрузки CSS-файла они используются для всех следующих страниц сайта, на которых используются те же таблицы стилей.
Дополнительные возможности стилизации.
Например, с помощью стилей можно сделать так, чтобы один блок текста, обтекал другой текст (например, это подойдет для меню), а можно сделать и так, чтобы меню было зафиксировано и оставалось на месте при прокрутке сайта.
Без табличная структура макета.
До появления CSS использовались таблицы для позиционирования элементов на странице, что замедляло загрузку страницы, делало код громоздким, и было неверно с точки зрения семантики. С помощью CSS можно разместить любой элемент именно там, где вы хотите его видеть.
К сожалению, у CSS есть и свои недостатки, недостатком CSS является ее кроссбраузерность (разное отображение в разных браузерах).
Таким образом, для эффективного создания представления Web-страниц предназначена технология каскадных таблиц стилей (Cascading Style Sheets, CSS), или просто таблиц стилей.
Таблица стилей содержит набор правил (стилей), описывающих оформление самой Web- страницы и отдельных ее фрагментов. Эти правила определяют цвет текста и выравнивание абзаца, отступы между графическим изображением и обтекающим его текстом, наличие и параметры рамки у таблицы, цвет фона Web-страницы и многое другое.
Каждый стиль должен быть привязан к соответствующему элементу Web-страницы (или самой Web-странице). После привязки, описываемые выбранным стилем параметры начинают применяться к данному элементу. Привязка может быть явная, когда мы сами указываем, какой стиль к какому элементу Web-страницы привязан, или неявная, когда стиль автоматически привязывается ко всем элементам Web-страницы, созданным с помощью определенного тега.
Таблица стилей может быть применена к HTML с использованием трёх методов: связывание, внедрение и встраивание.
Во встроенном методе CSS хранится непосредственно в атрибуте стиля HTML тега.
Это встроенные стили:
Задание 1:
Открыть созданную на предыдущем занятии форму. Добавить несколько текстовых абзацев с пояснениями к формам. Создать встроенный стиль фона для тега body синего цвета. Для одного из абзацев установить в качестве цвет шрифта белый (атрибут color), а для другого – красный.
<body style=”background-color:blue;”>
<p style =”color:white”>
Сохранить результаты.
Во внедрённом методе CSS хранится как часть HTML-страницы в теге <style> между тегами <head> .
Это внедрённые (или внутренние) стили:
Задание 2:
Повторить задание 1 используя внедренный метод.
Это может выглядеть так
Body {background-color:blue;}
P {color:white}
Сохранить результаты.
В связанном методе таблица стилей создаётся и хранится в отдельном файле с расширением css. Это связанные (или внешние) стили.
Для ссылки на этот файл с HTML-страницы используется тег <link> между тегами <head>, как показано в следующем примере, который предполагает, что таблица стилей хранится в файле с именем "style.css".
link элемент в примере состоит из трех атрибутов.
Первый, rel, сообщает браузеру тип и цель ссылки.
Второй, type, сообщает браузеру, какой тип стилей.
И третий, href, сообщает браузеру URL, чтобы найти таблицу стилей. В этом примере URL является относительным, но он также может быть абсолютным.
Предпочтительнее использовать связанный метод, но и остальные тоже подходят, и не требуют создания отдельного файла для стилей.
Задание 3:
Создать в блокноте файл style.css. В нем прописать стили, созданные в предыдущем задании. В файле html создать ссылку на данный файл. Аналогично показанному примеру (href=”style.css”)
Сохранить результаты.
Формат CSS
Синтаксис формата определения стиля CSS выглядит так:
<селектор> {
<атрибут стиля 1>: <значение 1>;
<атрибут стиля 2>: <значение 2>;
……
<атрибут стиля n-1>: <значение n-1>;
<атрибут стиля n>: <значение n>
}
Основные правила создания стиля.
Определение стиля включает селектор и список атрибутов стиля с их значениями.
Селектор используется для привязки стиля к элементу Web-страницы, на который он должен распространять свое действие. Фактически селектор однозначно идентифицирует данный стиль.
За селектором, через пробел, указывают список атрибутов стиля и их значений, заключенный в фигурные скобки.
Атрибут стиля (не путать с атрибутом тега!) представляет один из параметров элемента Web-страницы: цвет шрифта, выравнивание текста, величину отступа, толщину рамки и др. Значение атрибута стиля указывают через символ - : (двоеточие). В некоторых случаях значение атрибута стиля заключают в кавычки.
Пары <атрибут стиля>:<значение> отделяют друг от друга символом -; (точка с запятой).
Между последней парой <атрибут стиля>:<значение> и закрывающей фигурной скобкой символ ; не ставят, иначе некоторые Web-обозреватели могут неправильно обработать определение стиля.
Определения различных стилей разделяют пробелами или переводами строк.
Внутри селекторов и имен стилей не должны присутствовать пробелы и переводы строки. Что касается пробелов и переводов строк, поставленных в других местах определения стиля, то Web-обозреватель их игнорирует. Поэтому можно форматировать CSS-код для удобства его чтения, как проделывали это с HTML-кодом.
Пример:
P { color: #0000FF }
Здесь:
P — это селектор. Он представляет собой имя тега <P>.
color — это атрибут стиля. Он задает цвет текста.
#0000FF — это значение атрибута стиля color.
В данном случае этот стиль называется стилем переопределения тега
Пример переопределения стиля:
BODY { background-color: #000000; color: #FFFFFF }
Он задает для всей Web-страницы белый цвет текста (RGB-код #FFFFFF) и черный цвет фона (RGB-код #000000). Атрибут стиля background-color задает цвет фона.
Задание 4:
Создать в документе, созданном на предыдущем шаге web формы таблицу стилей и в ней задать цвет фона документа серым и цвет текста синим.
В правилах CSS также используется понятие класса. Класс элемента задается следующим образом:
Селектор.Класс { свойство CSS: значение }
стилевой класс. может быть привязан к любому тегу. В качестве селектора здесь указывают имя стилевого класса, которое его однозначно идентифицирует. Имя стилевого класса должно состоять из букв латинского алфавита, цифр и дефисов, причем начинаться должно с буквы. В определении стилевого класса его имя обязательно предваряется символом точки — это признак того, что определяется именно стилевой класс.
Стилевой класс требует явной привязки к тегу. Для этого служит атрибут CLASS, поддерживаемый практически всеми тегами. В качестве значения этого атрибута указывают имя нужного стилевого класса без символа точки:
Пример:
.demo { color: red; }
<p class="demo"> содержимое </p>
Задание 5:
Создать класс, который будет задавать цвет зеленый, и применить его к некоторым тегам <p> для текстовых полей, создать второй класс, который будет задавать другой цвет, и применить его к тегам <p> для других текстовых полей.
Именованный стиль во многом похож на стилевой класс. Селектором этого стиля также является имя, которое его однозначно идентифицирует, и привязывается он к тегу также явно. А дальше начинаются отличия.
— В определении именованного стиля перед его именем ставят символ # ("решетка"). Он сообщает Web-обозревателю, что перед ним именованный стиль.
— Привязку именованного стиля к тегу реализуют через атрибут ID, также поддерживаемый практически всеми тегами. В качестве значения этого атрибута указывают имя нужного именованного стиля, уже без символа #.
— Значение атрибута тега ID должно быть уникальным в пределах Web-страницы.
Говоря другими словами, в HTML-коде Web-страницы может присутствовать только один тег с заданным значением атрибута ID. Поэтому именованные стили используют, если какой-либо стиль следует привязать к одному единственному элементу Web-страницы.
Пример:
#demoID { color: blue; }
<p id="demoID"> содержимое </p>
Задание 6:
Создать именованный класс, который будет задавать цвет серый, и применить его к тегу input для одной из кнопок.
Также CSS позволяет создавать стили с несколькими селекторами — так называемые комбинированные стили. Такие стили служат для привязки к тегам, удовлетворяющим сразу нескольким условиям. Так, мы можем указать, что комбинированный стиль должен быть привязан к тегу, вложенному в другой тег, или к тегу, для которого указан определенный стилевой класс.
Правила, которые установлены стандартом CSS при написании селекторов в комбинированном стиле:
— Селекторами могут выступать имена тегов, имена стилевых классов и имена именованных стилей.
— Селекторы перечисляют слева направо и обозначают уровень вложенности соответствующих тегов, который увеличивается при движении слева направо: теги, указанные правее, должны быть вложены в теги, что стоят левее.
— Если имя тега скомбинировано с именем стилевого класса или именованного стиля, значит, для данного тега должно быть указано это имя стилевого класса или именованного стиля.
— Селекторы разделяют пробелами.
— Стиль привязывают к тегу, обозначенному самым правым селектором.
Например:
.demo { color: red; }
p.demo { color: red; }
Первый ведёт к изменению в любых тегах, помеченных классом demo
<div class="demo"> содержимое </div>
<p class="demo"> содержимое </p>
Второе правило будет применёно только к тегу p с class="demo"
<div class="demo"> содержимое </div>
<p class="demo"> содержимое </p>
.demo p { color: red; }
p.demo { color: red; }
В первом случае только теги p, содержащиеся в контейнере с классом demo, будут иметь красный цвет
<div class="demo">
<p> красная палитра </p>
<span> любого другого цвета </span>
<p> красная палитра </p>
</div>
Во втором для любого тега p с данным классом