Css каскадные таблицы стилей реферат

Обновлено: 05.07.2024

Для учеников 1-11 классов и дошкольников
Бесплатные сертификаты учителям и участникам

Блок 1 Основы сайтостроение Лекция 3 Каскадные таблицы стилей CSS

Каскадные таблицы стилей CSS

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

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

Благодаря CSS вы сможете производить изменения, относящиеся ко всем страницам Вашего сайта, редактируя при этом лишь один единственный файл таблицы стилей. Интересно? Тогда продолжаем.

Что такое стиль

Стиль в CSS устанавливает внешний вид какого-либо элемента или элементов страницы. Другими словами это команда, которая сообщает браузеру как ему необходимо отформатировать тот, или иной элемент и после этого вывести результат изменения на страницу.

Определение стиля состоит из двух элементов:

Элемент веб страницы, который непосредственно подлежит форматированию браузером называется селектор .

Форматирующие команды называются блоком объявлений (описаний) .

Первые статьи этого учебника будут в основном посвящены селекторам , благодаря которым вы научитесь выбирать различные элементы страницы, будь то заголовки, абзацы, изображения и так далее. Блоки объявлений предоставляют нам возможность создавать уникальные элементы на странице, стилизуя их по своему усмотрению с использованием множества различных CSS свойств, которые мы постараемся рассмотреть и изучить как можно больше.

Рис. 0 Пример блока описаний.

Давайте с вами разберем, что значит запись сделанная на изображении.

Селектор h1 сообщает браузеру, что все теги

необходимо форматировать, используя объявления (описания), указанные в последующем блоке объявлений (описаний). Этот вид селекторов называется "селектор типа" . Селекторы типа будут подробно рассмотрены в статье с оригинальным названием " Селекторы. Часть 1 ".

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

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

Свойство - свойство представляет собой слово или несколько слов написанных через дефис. Большинство свойств имеют простые для понимания названия, такие как color (цвет текста), background-color (цвет заднего фона), text-align (горизонтальное выравнивание текста) и так далее. Мы уже сталкивались с этими свойствами при изучении HTML 5 .

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

При изучении CSS для удобства, лучшего восприятия и понимания таблиц стилей, мы будем разбивать объявления на строки (любой браузер к этому относится лояльно, так как они игнорируют пробелы и переносы):

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

Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.

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

Что такое CSS?¶

Каскадные таблицы стилей (Cascading Style Sheets, CSS) — это стандарт, определяющий представление данных в браузере. Если HTML предоставляет информацию о структуре документа, то таблицы стилей сообщают как он должен выглядеть.

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

Таблица стилей — это совокупность стилей, применимых к гипертекстовому документу.

Каскадирование — это порядок применения различных стилей к веб-странице. Браузер, поддерживающий таблицы стилей, будет последовательно применять их в соответствии с приоритетом: сначала связанные, затем внедренные и, наконец, встроенные стили. Другой аспект каскадирования — наследование (inheritance), — означает, что если не указано иное, то конкретный стиль будет применен ко всем дочерним элементами гипертекстового документа. Например, если вы примените определенный цвет текста в теге

Использование каскадных таблиц дает возможность разделить содержимое и его представление и гибко управлять отображением гипертекстовых документов путем изменения стилей.

Общий синтаксис таблиц стилей¶

Таблицы стилей строятся в соответствии с определенным порядком (синтаксисом), в противном случае они не могут нормально работать. Таблицы стилей составляются из определенных частей (рис. 1):

Рис. 1. Синтаксис описания стиля CSS

Селектор (Selector). Селектор — это элемент, к которому будут применяться назначаемые стили. Это может быть тег, класс или идентификатор объекта гипертекстового документа.
Свойство (Property). Свойство определяет одну или несколько характеристик селектора. Свойства задают формат отображения селектора: отступы, шрифты, выравнивание, размеры и т.д.
Значение (Value). Значения — это фактические числовые или строковые константы, определяющие свойство селектора.
Описание (Declaration). Совокупность свойств и их значений.
Правило (Rule). Полное описание стиля (селектор + описание).

Таким образом, таблица стилей — это набор правил, задающих значения свойств селекторов, перечисленных в этой таблице. Общий синтаксис описания правила выглядит так:

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

Правила CSS¶

Итак, каскадная таблица стилей — это набор правил форматирования тегов HTML. Приведем несколько примеров написания таких правил:

Cascading Style Sheets (Таблицы Каскадных Стилей) – это язык, содержащий набор свойств для описания внешнего вида любых HTML документов. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента Web-страницы, что проще и гораздо функциональнее использования обычного набора HTML тегов.

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

Слово Cascading в названии системы CSS служит напоминанием о том, что в действительности на вывод каждого тега в документе могут оказывать влияние сразу несколько стилевых спецификаций, образующих иерархическую систему: например, поверх спецификаций, относящихся к конкретному документу, может действовать стилевой файл, общий для всех документов на сервере. Кроме того, пользователь браузера, поддерживающего CSS, может указать свои собственные параметры вывода для тех или иных тегов. Конфликты, которые при этом возникают, разрешаются в пользу более частных, узких спецификаций: то, что указано для конкретного документа, берет верх над спецификациями для всего сервера, а параметры вывода тега в данном контексте имеют преимущество перед параметрами для того же тега без учета контекста. В случае же конфликта спецификаций, заданных пользователем, с установками автора страницы побеждают последние, хотя пользователь может при желании изменить эту ситуацию.

Можно предположить, что CSS – это почти идеальное средство, созданное для того, чтобы избавить HTML от недостатков и перевести его развитие на принципиально новый уровень. [10]

Приведем пример: нам нужно создать жирный черный подчеркнутый текст определенного размера и шрифта.

Для того, чтобы данный стиль использовать при создании документа несколько раз и не повторять указанные команды, необходимо воспользоваться языком СSS. В HTML команды назывались тегами, в CSS – селекторами. Свойства селектора определяют стиль элемента, для которого он определен.

Пример с использованием CSS:

font-family: Times New Roman;

Псевдоклассы и псевдоэлементы – это особые классы и элементы, присущие CSS и автоматически определяемые поддерживающими CSS браузерами. Псевдоклассы различают разные типы одного элемента, создавая при определении собственные стили для каждого из них. Псевдоэлементы являются частями других элементов, задавая этим частям отличный от элемента в целом стиль. [9]

Часто сталкиваюсь с тем, что дети не верят в то, что могут учиться и научиться, считают, что учиться очень трудно.

Лекция 15. Каскадные таблицы стилей (CSS)

СSS - Cascading Style Sheets (Таблицы Каскадных Стилей) - это язык, содержащий набор свойств для описания внешнего вида любых HTML документов.

С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента веб-страницы, что проще и гораздо функциональнее использования обычного набора HTML тегов. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходилось каждый раз описывать эти свойства, даже если на одной страничке должны располагаться 10 или 110 таких элементов, ничуть не отличающихся один от другого. Вы должны были десять или сто десять раз вставить один и тот же кусок HTML-кода в страничку, увеличивая размер файла и время загрузки на компьютер просматривающего ее пользователя.

CSS действует более удобным и экономичным способом. Для присвоения какому-либо элементу определенных характеристик вы должны один раз описать этот элемент и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами.

Более того, вы можете сохранить описание стиля не в тексте вашей странички, а в отдельном файле – это позволит использовать описание стиля на любом количестве Web-страниц, а также изменить оформление любого количества страниц, исправив лишь описание стиля в одном (отдельном) файле.

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

Существует три вида таблиц стилей:

Внутренние таблицы стилей - (Inline Style Sheets) при помощи специального атрибута помещаются прямо в HTML теги.

Глобальные таблицы стилей - (Global Style Sheets) определяют стиль элементов во всем документе.

Связанные таблицы стилей - (Linked Style Sheets) могут быть использованы для нескольких документов сразу и хранятся во внешнем файле.

Основным понятием CSS является стиль – т. е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы.

Практическое освоение CSS

Существует четыре способа связывания документа и таблицы стилей:

Связывание - позволяет использовать одну таблицу стилей для форматирования многих страниц HTML
Внедрение - позволяет задавать все правила таблицы стилей непосредственно в самом документе
Встраивание в теги документа - позволяет изменять форматирование конкретных элементов страницы
Импортирование - позволяет встраивать в документ таблицу стилей, расположенную на сервере

Остановимся на каждом из этих способов более подробно.

1. Связывание

Как вам уже известно, информация о стилях может располагаться либо в отдельном файле, либо непосредственно в коде Web-странички. Расположение описания стилей в отдельном файле имеет смысл в случае, если вы планируете применять эти стили к большему, чем одна, количеству страниц. Для этого нужно создать обычный текстовый файл, описать с помощью языка CSS необходимые стили, разместить этот файл на Web-сервере, а в коде Web-страниц, которые будут использовать стили из этого файла, нужно будет сделать ссылку на него. Делается это с помощью тега LINK, располагающегося внутри тега HEAD ваших страниц:

Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить браузеру, что на этой страничке будет использоваться CSS.

2. Внедрение

Второй вариант, при котором описание стилей располагается в коде Web-странички, внутри тега HEAD, в теге STYLE type="text/css">. . В этом случае вы можете использовать эти стили для элементов, располагающихся в пределах странички. Параметр type="text/css" является обязательным и служит для указания браузеру использовать CSS.

3. Встраивание в теги документа

Третий вариант, когда описание стиля располагается непосредственно внутри тега элемента, который вы описываете. Это делается с помощью параметра STYLE, используемого при применении CSS с большинством стандартных тегов HTML. Этот метод нежелателен, он приводит к потере одного из основных преимуществ CSS – возможности отделения информации от описания оформления информации. Впрочем, если необходимо описать лишь один элемент, этот вариант расположения описания стилей также вполне применим.

4. Импортирование

В тексте документа ссылка на соответствующий класс задаётся в параметре CLASS:

Красный шрифт

Красный шрифт на синем фоне

В приведённом примере классы задавались для разного отображения элементов одного типа. Если класс должен применяться ко всем элементам документа, то в селекторе задаётся имя класса с лидирующей точкой без указания конкретного элемента, т.е. классы могут быть описаны без явного привязывания их к определенным элементам.

Синтаксис: .класс (перед именем класса ставится точка)

ПРИМЕР: .green

В данном случае все элементы с атрибутом станут зелеными.

ПРИМЕР:

Теперь два класса red и blue можно применять к любым элементам документа:

Красный шрифт на синем фоне

Первый абзац отразится красным шрифтом, а второй - красным шрифтом на синем фоне.

Идентификаторы. ID селекторы.

Присвоение стилей с помощью идентификаторов применяется в случае, если данному идентификатору соответствует только один элемент на странице. Если элементов, которым необходимо присвоить такой стиль, несколько – это уже класс.

Параметр ID, как и параметр CLASS, не влияет на отображение браузером элемента HTML, но задаёт уникальное имя элемента, которое используется для ссылок на него в сценариях и таблицах стилей. Параметр ID можно применять к любому элементу документа.

ID - индивидуально именованный стиль. C его помощью можно создавать стилистические исключения cреди элементов одного класса.

Разрежённые слова в абзаце

Чёрный заголовок

Индификаторы используются в основном для придания одному или нескольким элементам одного класса индивидуальных свойств. Скажем, Вы создали класс blue - синий курсив. Но Вам понадобился жирный подчеркнутый текст синим курсивом. Конечно, можно создать новый класс, но зачем? Проще описать ID. Например "boldunderline". И все элементы класса blue с значением ID "boldunderline" станут жирным подчеркнутым синим курсивом. Произойдет как бы синтез свойств класса blue и идентификатора boldunderline.

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