Разделы презентаций

Компьютерные языки разметки

Содержание

Основы CSS

Слайды и текст этой презентации

Слайд 1Компьютерные языки разметки
Доц. каф. ИСиТ Жиляк Надежда Александровна
311-1

ОИТ
ЭКЗАМЕН
HTML, CSS, JS,

XML, HTML-5

Компьютерные языки разметкиДоц. каф. ИСиТ Жиляк Надежда Александровна311-1ОИТЭКЗАМЕНHTML, CSS, JS, XML, HTML-5

Слайд 2Основы CSS

Основы CSS

Слайд 3 Введение в CSS.
Синтаксис CSS.
Способы

внедрения CSS.
Работа с тегами через CSS.
Селекторы

атрибутов.
Основные свойства стилей.
Вложенность и наследование в CSS.
Приоритеты стилей.
Псевдоклассы и псевдоэлементы.
Введение в CSS. Синтаксис CSS. Способы внедрения CSS. Работа с тегами через

Слайд 4HTML лишь первый этап в процессе обучения созданию сайтов. Следующим

шагом является изучение стилей или CSS . Этот язык отвечает

за внешний вид HTML-страницы. Синтаксис языка достаточно прост: он состоит из селекторов и свойств.

Введение в CSS.

CSS - Cascading Style Sheets

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

HTML лишь первый этап в процессе обучения созданию сайтов. Следующим шагом является изучение стилей или CSS .

Слайд 5Основная идея CSS в том, чтобы отделить дизайн документа от

его содержимого. CSS отвечает за оформление и внешний вид, а

HTML — за содержание и логическую структуру документа.

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

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

Слайд 6Таблицы CSS предлагают логический способ оформления документа. Т.е. в любом

правильно составленном тексте можно отделить такие понятия, как заголовки, параграфы,

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

Слайд 7Главные преимущества CSS:
1.Более чистый код
Этот код легче поддерживать;
Он быстрее загружается;
Он

лучше оптимизирован для поисковых систем.
2.Модульный код
Правила стиля могут применяться ко

множеству страниц;
Единообразный дизайн;
Код легче поддерживать.
3.Точность контроля (позиционирование, размер, поля и др.).
4.Разделение труда
Задача разработчика — разрабатывать, задача дизайнера — создавать дизайн.
5.Лучшая доступность
Теги больше не используются не по назначению ;
Нет необходимости в позиционировании невидимых картинок;
Пользователи могут переписывать стилевые таблицы автора.
Главные преимущества CSS:1.Более чистый кодЭтот код легче поддерживать;Он быстрее загружается;Он лучше оптимизирован для поисковых систем.2.Модульный кодПравила стиля

Слайд 8Синтаксис CSS.
Стилевые правила записываются в своём формате, отличном от HTML.

Основным понятием выступает селектор — это некоторое имя стиля, для

которого добавляются параметры форматирования. В качестве селектора выступают теги, классы и идентификаторы. Общий способ записи имеет следующий вид:
Синтаксис CSS.Стилевые правила записываются в своём формате, отличном от HTML. Основным понятием выступает селектор — это некоторое

Слайд 9Все CSS-правила состоят из селектора и блока объявлений (заключённого в

фигурные скобки). Внутри блока объявлений (внутри фигурных скобок, проще говоря)

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

Слайд 10Примеры правил CSS:

Примеры правил CSS:

Слайд 12Чтобы применить css-оформление к HTML-элементу или множеству элементов, обычно используются

селекторы – специальные указатели на HTML-объекты, к которым мы планируем

применить css-правило.

Три основных вида селекторов:
HTML селекторы;
Селекторы класса;
ID селекторы (или идентификаторы).

Чтобы применить css-оформление к HTML-элементу или множеству элементов, обычно используются селекторы – специальные указатели на HTML-объекты, к

Слайд 13HTML селекторы.
Это простейший случай – в качестве селектора мы используем

имя того html-элемента, который хотим изменить.

HTML селекторы.Это простейший случай – в качестве селектора мы используем имя того html-элемента, который хотим изменить.

Слайд 14Селекторы класса.
«Класс» - это некое имя, строка, которое мы можем

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

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

Слайд 15ID селекторы (или идентификаторы)
Любой идентификатор (ID) – это некое имя,

которое вы, так же, как и в случае с классами,

можете применить к любому HTML-тегу. Основное отличие – ID должен быть уникален в рамках html-документа:
ID селекторы (или идентификаторы)Любой идентификатор (ID) – это некое имя, которое вы, так же, как и в

Слайд 16CSS не чувствителен к регистру, переносу строк, пробелам и символам

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

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

Слайд 17Расширенная форма записи:
Компактная форма записи:

Расширенная форма записи:Компактная форма записи:

Слайд 18Если для селектора вначале задаётся свойство с одним значением, а

затем то же свойство, но уже с другим значением, то

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

В данном примере для селектора p цвет текста вначале установлен зелёным, а затем красным. Поскольку значение red расположено ниже, то оно в итоге и будет применяться к тексту.

Если для селектора вначале задаётся свойство с одним значением, а затем то же свойство, но уже с

Слайд 19Как применить один стиль к нескольким селекторам.
Это делается просто– достаточно

перечислить селекторы через запятую:

Как применить один стиль к нескольким селекторам.Это делается просто– достаточно перечислить селекторы через запятую:

Слайд 20Комментарии.
Комментарии нужны, чтобы делать пояснения по поводу использования того или

иного стилевого свойства, выделять разделы или писать свои заметки. Комментарии

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

Содержимое комментариев, браузеры игнорируют.

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

Слайд 21Примеры:

Примеры:

Слайд 23Для того, чтобы применить таблицу стилей к HTML-документу, мы можем

избрать один из трёх способов, либо комбинировать их:
Внешнее (в файле);
Внутреннее

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

Слайд 24Применение внешних стилей (в виде отдельного текстового .css-файла) с помощью

элемента link
Встретив в HTML-документе этот тег, браузер загрузит с сайта

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

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

Применение внешних стилей (в виде отдельного текстового .css-файла) с помощью элемента linkВстретив в HTML-документе этот тег, браузер

Слайд 25Пример:
Создадим текстовый файл со следующим содержанием, сохраним как file.css (сохраняется

в папке, в которой находится файл .html, но не с

.html расширением, а с .css).
Пример:Создадим текстовый файл со следующим содержанием, сохраним как file.css (сохраняется в папке, в которой находится файл .html,

Слайд 26Пример(продолжение):
Сам html документ:

Пример(продолжение):Сам html документ:

Слайд 27Внедрение стилей непосредственно в HTML-документ (в виде блока css-текста) с

помощью элемента style.
Внутреннее подключение.
Называются так потому, что располагаются непосредственно в

HTML-документе и применяются только к нему. Иногда называются embedded style sheet (встроенный стиль).
CSS-стили и комментарии располагаются между открывающим и закрывающим тегами элемента style:
Внедрение стилей непосредственно в HTML-документ (в виде блока css-текста) с помощью элемента style.Внутреннее подключение.Называются так потому, что

Слайд 28Атрибут со значениями type="text/css" внутри тега сообщает, встроенному в

браузер интерпретатору, что применены стилевые описания, то есть CSS.
Cинтаксис: первым

делом назван селектор (p, body, .forexample, #ident), затем открыта фигурная скобка, прописан атрибут со значением, фигурная скобка закрыта. Атрибуты между собой разделяются точкой с запятой.
Атрибут со значениями type=

Слайд 29Пример:

Пример:

Слайд 30То есть назначение стиля конкретному HTML-элементу непосредственно в документе, с

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

не элементом!):
То есть назначение стиля конкретному HTML-элементу непосредственно в документе, с помощью HTML-атрибута style.Строковое подключение.Воспользуемся атрибутом style (именно

Слайд 31Атрибут style.
Каждый HTML элемент имеет атрибут style, который сообщает браузеру

о том, что к данному элементу будет применено стилевое описание.


Пример использования атрибута style для тега

:

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

Атрибут style.Каждый HTML элемент имеет атрибут style, который сообщает браузеру о том, что к данному элементу будет

Слайд 32Примеры:

Примеры:

Слайд 33 Работа с тегами через CSS.

Работа с тегами через CSS.

Слайд 34Тег
Тег применяется для определения стилей элементов веб-страницы.
Тег

необходимо использовать внутри контейнера .
Можно задавать более чем

один тег