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


201 9 OVERFLOW. DISPLAY. ПСЕВДОЭЛЕМЕНТЫ ИНФОРМАЦИОННО-ТЕХНОЛОГИЧЕСКИЙ

2019OVERFLOW overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров. Синтаксис overflow: auto | hidden | scroll | visible Значения visible отображается все содержание элемента, даже за

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

Слайд 1OVERFLOW. DISPLAY. ПСЕВДОЭЛЕМЕНТЫ

OVERFLOW. DISPLAY. ПСЕВДОЭЛЕМЕНТЫ

Слайд 22019
OVERFLOW
overflow управляет отображением содержания блочного элемента, если оно целиком не

помещается и выходит за область заданных размеров.
Синтаксис
overflow: auto | hidden

| scroll | visible
Значения
visible отображается все содержание элемента, даже за пределами установленной высоты и ширины. (по умолчанию).
hidden отображается только область внутри элемента, остальное будет скрыто.
scroll всегда добавляются полосы прокрутки.
auto полосы прокрутки добавляются только при необходимости.
Варианты: overflow-x, overflow-y.
2019OVERFLOW	overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.	Синтаксис	overflow:

Слайд 32019
DISPLAY
display многоцелевое свойство, которое определяет, как элемент должен быть показан

в документе.
Синтаксис
display: block | inline | inline-block | inline-table |

list-item | none
Значения
Список возможных значений этого свойства, понимаемый разными браузерами очень короткий — block, inline, list-item и none. Все остальные допустимые значения поддерживаются браузерами выборочно.
2019DISPLAY	display многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.	Синтаксис	display: block | inline | inline-block

Слайд 42019
block элемент показывается как блочный. Применение этого значения для встроенных элементов,

например, тега , заставляет его вести подобно блокам — происходит

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

, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
inline-block это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега ). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.
list-item элемент выводится как блочный и добавляется маркер списка.
none временно удаляет элемент из документа. Занимаемое им место не резервируется, и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента.
run-in устанавливает элемент как блочный или встроенный в зависимости от контекста.

2019	block	элемент показывается как блочный. Применение этого значения для встроенных элементов, например, тега , заставляет его вести подобно

Слайд 52019
inline-table определяет, что элемент является таблицей как при использовании тега

, но при этом таблица является встроенным элементом и происходит

ее обтекание другими элементами, например, текстом.
table определяет, что элемент является блочной таблицей подобно использованию тега . table-caption задает заголовок таблицы подобно применению тега .
table-header-group элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега .
table-row-group создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега .
table-row элемент отображается как строка таблицы (тег ).
2019	inline-table определяет, что элемент является таблицей как при использовании тега , но при этом таблица является встроенным

Слайд 6 Текст используется для выделения в тексте цитат. Содержимое контейнера автоматически

отображается в браузере в кавычках.
Синтаксис
Текст

quotes устанавливает тип кавычек, который применяется

в тексте документа.
Синтаксис
quotes: "левая кавычка" "правая кавычка" | none

2019

ДОПОЛНЕНИЕ

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

Слайд 8 Псевдоэлемент в CSS — это ключевое слово, добавляемое к селектору,

которое позволяет стилизовать определённую часть выбранного элемента.
2019
ПСЕВДОЭЛЕМЕНТЫ
Селектор::псевдоэлемент {
свойство: значение;
--------
свойство: значение;
}
Селектор

дополнительные теги::псевдоэлемент {
свойство: значение;
--------
свойство: значение;
}
Псевдоэлемент в CSS — это ключевое слово, добавляемое к селектору, которое позволяет стилизовать определённую часть выбранного элемента.2019ПСЕВДОЭЛЕМЕНТЫСелектор::псевдоэлемент

Слайд 92019
content позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально

в тексте отсутствует. Применяется совместно с псевдоэлементами :after и :before,

они соответственно указывают отображать новое содержимое после или до элемента, к которому добавляются.
Синтаксис
content: строка | attr(параметр) | open-quote | close-quote | no-open-quote | no-close-quote | url | counter | normal | none
Значения
Строка текст, который добавляется на веб-страницу, строка при этом должна браться в двойные или одинарные кавычки. Допускается использовать юникод для вставки спецсимволов. Спецсимволы HTML которые начинаются с амперсанда (§ например), будут отображаться как есть, т.е. простым текстом (§, а не §).
2019	content позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует. Применяется совместно с псевдоэлементами

Слайд 102019
attr(параметр) возвращает строку, которая является значением параметра тега указанного в

скобках. Например, a:after {content:attr(href)} добавит после ссылки её адрес, т.е.

значение атрибута href. Если указанного атрибута нет, вернется пустая строка.
open-quote вставляет открывающую кавычку, тип которой устанавливается с помощью стилевого свойства quotes.
close-quote вставляет закрывающую кавычку.
no-open-quotes отменяет добавление открывающей кавычки.
no-close-quote отменяет добавление закрывающей кавычки.
url абсолютный или относительный адрес вставляемого объекта. Если указанный файл браузер не может отобразить, то значение игнорируется.
none не добавляет никакое содержание.
normal задается как none для псевдоэлементов ::before и ::after.
2019	attr(параметр) возвращает строку, которая является значением параметра тега указанного в скобках. Например, a:after {content:attr(href)} добавит после ссылки

Слайд 112019
::after или :after псевдоэлемент, который используется для вывода желаемого текста

после содержимого элемента, к которому он добавляется. Псевдоэлемент ::after работает

совместно со свойством content.
Для ::after характерны следующие особенности.
При добавлении ::after к блочному элементу, значение свойства display может быть только: block, inline, none, marker. Все остальные значения будут трактоваться как block.
При добавлении ::after к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.
Синтаксис
селектор::after { … } или селектор доп теги::after { … }
2019	::after или :after псевдоэлемент, который используется для вывода желаемого текста после содержимого элемента, к которому он добавляется.

Слайд 122019
::before или :before применяется для отображения желаемого контента до содержимого

элемента, к которому он добавляется. Работает совместно со свойством content.
Для

::before характерны следующие особенности. При добавлении ::before к блочному элементу, значение свойства display может быть только: block, inline, none, marker. Все остальные значения будут трактоваться как block. При добавлении ::before к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline. ::before наследует стиль от элемента, к которому он добавляется.
Синтаксис
селектор::before { … } или селектор доп теги::before { … }
2019	::before или :before применяется для отображения желаемого контента до содержимого элемента, к которому он добавляется. Работает совместно

Слайд 132019
::first-letter или :first-letter определяет стиль первого символа в тексте элемента,

к которому добавляется. К этому псевдоэлементу могут применяться только стилевые

свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.
Синтаксис
селектор::first-letter { ... } или селектор доп теги::first-letter { ... }

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

::selection применяет стиль к выделенному пользователем тексту. В правилах стилей допускается использовать следующие свойства: color, background и background-color.
Синтаксис
селектор::selection { ... } или селектор доп теги::selection { ... }
2019	::first-letter или :first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут

Слайд 142019
Спасибо за внимание!

2019Спасибо за внимание!

Обратная связь

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

Email: Нажмите что бы посмотреть 

Что такое TheSlide.ru?

Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.


Для правообладателей

Яндекс.Метрика
.
table-cell указывает, что элемент представляет собой ячейку таблицы (тег
или ).
table-footer-group используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега