ОСНОВЫ CSS. ОБТЕКАНИЕ И ПОЗИЦИЯ

Сентябрь 12, 2022

Главная
Алгебра
ОСНОВЫ CSS. ОБТЕКАНИЕ И ПОЗИЦИЯ

Содержание

2. 2019 ОПРЕДЕЛЕНИЕ CSS (Cascading Style Sheets) — язык таблиц стилей, который позволяет прикреплять стиль (например, шрифты
3. 2019 СПОСОБЫ СВЯЗИ С CSS Прописать в контейнере head тег … . Создать документ *имя*.css и
4. 2019 СЕЛЕКТОРЫ Если выбраны способы 1 и 2, то используются селекторы. Селектор определяет, к какому элементу
5. 2019 ОСТАЛЬНЫЕ СПОСОБЫ НАПИСАНИЯ Пусть у элемента есть элементы , тогда #block p {…} (также работает
6. 2019 СТРУКТУРА ЭЛЕМЕНТА селектор дополнительные теги* { свойство: значение; ------ свойство: значение; } *При написании дополнительных
7. 2019 ОБТЕКАНИЕ float определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать
8. 2019 ОБТЕКАНИЕ clear устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание
9. position устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице. Синтаксис position: absolute
10. absolute указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного
11. 2019 px – устанавливает измерение в пикселях экрана.
12. 2019 bottom устанавливает положение нижнего края содержимого тега без учета толщины рамок и отступов. left устанавливает
14. Скачать презентацию

Слайд 2

2019
ОПРЕДЕЛЕНИЕ
CSS (Cascading Style Sheets) — язык таблиц стилей, который позволяет прикреплять

стиль (например, шрифты и цвет) к структурированным документам (например, документам HTML и приложениям XML).
Файлы *имя*.css применяются для создания веб-сайтов с одинаковым внешним видом. Они также используются для сокращения количества работы и кода HTML, создаваемого при помощи объединения свойств отображения в отдельном файле. Они хранятся в формате простого текста.

Слайд 3

2019
СПОСОБЫ СВЯЗИ С CSS
Прописать в контейнере head тег .
Создать документ имя.css

и связать с HTML документом с помощью тега в контейнере head.
Прописать внутри любого тега в контейнере body в виде атрибута style=“правила описания стилей”.

Слайд 4

2019
СЕЛЕКТОРЫ
Если выбраны способы 1 и 2, то используются селекторы.
Селектор определяет, к

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

Пишут следующие селекторы:
id, то есть

…

⬄ #block {…}
class, то есть

…

⬄ .blocks {…}

Слайд 5

2019
ОСТАЛЬНЫЕ СПОСОБЫ НАПИСАНИЯ
Пусть у элемента
есть элементы
, тогда #block

p {…} (также работает и с классами).
Пусть у элемента

есть элементы

со своими классами, тогда #block p.words1 {…}.
div {…}, тогда все дивы получат данное свойство.
Другие.

Слайд 6

2019
СТРУКТУРА ЭЛЕМЕНТА
селектор дополнительные теги* {
свойство: значение;
------
свойство: значение;
}
*При написании дополнительных тегов или

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

Слайд 7

2019
ОБТЕКАНИЕ
float определяет, по какой стороне будет выравниваться элемент, при этом остальные

элементы будут обтекать его с других сторон.
Синтаксис
float: left | right | none
Значения:
left выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне.
right выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.
none обтекание элемента не задается. (по умолчанию)

Слайд 8

2019
ОБТЕКАНИЕ
clear устанавливает, с какой стороны элемента запрещено его обтекание другими элементами.

Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.
Синтаксис
clear: none | left | right | both
Значения:
left отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
both отменяет обтекание элемента одновременно с правого и левого края.
right отменяет обтекание с правой стороны элемента.
none отменяет действие свойства clear, при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек. (по умолчанию)

Слайд 9

position устанавливает способ позиционирования элемента относительно окна браузера или других объектов

на веб-странице.
Синтаксис
position: absolute | fixed | relative | static | inherit
Значения
relative положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
static элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам. (по умолчанию)

2019

ПОЗИЦИЯ

Слайд 10

absolute указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются

на веб-странице словно абсолютно позиционированного элемента и нет.
Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента.
Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
fixed по своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
Свойство float не работает в тегах со свойствами fixed или absolute.

2019

Слайд 11

2019
px – устанавливает измерение в пикселях экрана.

Слайд 12

2019
bottom устанавливает положение нижнего края содержимого тега без учета толщины рамок

и отступов.
left устанавливает положение левого края содержимого тега.
right устанавливает положение правого края содержимого тега.
top устанавливает положение верхнего края содержимого тега.

Синтаксис
top (left, right, bottom): значение | проценты | auto

auto не изменяет положение тега.

ОСНОВЫ CSS. ОБТЕКАНИЕ И ПОЗИЦИЯ

Содержание

2019ОПРЕДЕЛЕНИЕ CSS (Cascading Style Sheets) — язык таблиц стилей, который позволяет прикреплять

2019СПОСОБЫ СВЯЗИ С CSSПрописать в контейнере head тег ….Создать документ *имя*.css

2019СЕЛЕКТОРЫ Если выбраны способы 1 и 2, то используются селекторы. Селектор определяет, к

2019ОСТАЛЬНЫЕ СПОСОБЫ НАПИСАНИЯПусть у элемента есть элементы , тогда #block

2019СТРУКТУРА ЭЛЕМЕНТАселектор дополнительные теги* { свойство: значение; ------ свойство: значение;}*При написании дополнительных тегов или

2019ОБТЕКАНИЕ float определяет, по какой стороне будет выравниваться элемент, при этом остальные

2019ОБТЕКАНИЕ clear устанавливает, с какой стороны элемента запрещено его обтекание другими элементами.