Основы_CSS_D74VJtP

Содержание

Слайд 2

КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ

ПОНЯТИЕ И ПРИМЕНЕНИЕ

КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ ПОНЯТИЕ И ПРИМЕНЕНИЕ

Слайд 3

CSS (CASCADING STYLE SHEETS)

Каскадные таблицы стилей - это свод стилевых описаний HTML-тегов,

CSS (CASCADING STYLE SHEETS) Каскадные таблицы стилей - это свод стилевых описаний
который может быть применён как к отдельному тегу - элементу, так и одновременно ко всем идентичным элементам на всех страницах сайта. CSS является дополнением HTML и значительно расширяет его возможности.

Слайд 4

ПРИМЕНЕНИЕ CSS

При помощи CSS можно изменить:
вид, размер и цвет текстовых элементов
фоновые цвета

ПРИМЕНЕНИЕ CSS При помощи CSS можно изменить: вид, размер и цвет текстовых
и изображения
позицию отдельных элементов по отношению к другим
отступы внутри блоков и между ними
наличие и внешний вид обводки элементов
видимость или невидимость определённых фрагментов на странице

Слайд 5

ВНЕДРЕНИЕ CSS В HTML ДОКУМЕНТ

Встроенные стили (стилевое описание непосредственно в самом элементе)
Таблицы

ВНЕДРЕНИЕ CSS В HTML ДОКУМЕНТ Встроенные стили (стилевое описание непосредственно в самом
стилей (стилевое описание для всех идентичных элементов HTML документа)
Внешние таблицы стилей (стилевое описание элементов HTML в отдельном файле)
Определение стилей для элементов определённого класса

Слайд 6

ПОНЯТИЕ КАСКАДНОСТИ

Назначенные стили применяются ко всем элементам. Отменить действие параметров форматирования нельзя,

ПОНЯТИЕ КАСКАДНОСТИ Назначенные стили применяются ко всем элементам. Отменить действие параметров форматирования
но можно их переназначить для отдельных элементов. В этом заключается понятие каскадности.
Самый низкий приоритет при подключении внешнего CSS-файла. Самый высокий приоритет у параметров форматирования, заданных при помощи свойства style конкретному элементу на странице.
Это означает, что сначала будут применены параметры форматирования, заданные во внешнем CSS-файле. Затем прописанные в заголовке документа. В последнюю очередь форматирование будет дополнено или изменено в соответствии с параметрами, объявленными непосредственно в тегах.

Слайд 7

ВСТРОЕННЫЕ СТИЛИ

Это простейший способ применения стиля к тегу. Для этого используется атрибут

ВСТРОЕННЫЕ СТИЛИ Это простейший способ применения стиля к тегу. Для этого используется
style:


Заголовок синий курсив


Этот стиль действует только для этого тега

Слайд 8

ТАБЛИЦЫ СТИЛЕЙ

Задаются на уровне документа с помощью тега

Слайд 9

ВНЕШНИЕ ТАБЛИЦЫ СТИЛЕЙ

Это отдельные файлы с расширением .css, в которых записаны правила

ВНЕШНИЕ ТАБЛИЦЫ СТИЛЕЙ Это отдельные файлы с расширением .css, в которых записаны
оформления тегов:
h1
{color: red}
/*заголовок красного цвета*/
body
{background: black; font-family: Verdana}
/*черный цвет фона, шрифт Verdana */
В файле .css могут быть только правила и комментарии

Слайд 10

ТАБЛИЦЫ СТИЛЕЙ

Синтаксис объявление стилей внутри тега и в css-файле:

Если в

ТАБЛИЦЫ СТИЛЕЙ Синтаксис объявление стилей внутри тега и в css-файле: Если в
блоке объявления стилей указывается несколько свойств элемента, то они между собой разделяются точкой с запятой.

Слайд 11

ПРИСОЕДИНЕНИЕ ТАБЛИЦ СТИЛЕЙ

В заголовок HTML-документа помещается тег с обязательными атрибутами:
href –

ПРИСОЕДИНЕНИЕ ТАБЛИЦ СТИЛЕЙ В заголовок HTML-документа помещается тег с обязательными атрибутами: href
ссылка на css-файл
href = "my_styles.css"
rel = stylesheet – отвечает за установку взаимосвязи html-документа и css-таблицы
type = text/css – описывает тип данных в таблице стилей

Слайд 12

ПРИСОЕДИНЕНИЕ ТАБЛИЦ СТИЛЕЙ

В одном html-документе можно подключать несколько таблиц стилей с

ПРИСОЕДИНЕНИЕ ТАБЛИЦ СТИЛЕЙ В одном html-документе можно подключать несколько таблиц стилей с
обязательными атрибутами:

Заголовок страницы



В этом случае браузер загрузит обе таблицы, комбинируя их правила

Слайд 13

ПОЛЕЗНЫЕ СОВЕТЫ

Используйте атрибут style для какого либо элемента если этот элемент с

ПОЛЕЗНЫЕ СОВЕТЫ Используйте атрибут style для какого либо элемента если этот элемент
отличным от других элементов стилем один единственный на всём сайте.
Используйте тег