Лекция css - donntu.orgmasters.donntu.org/ivanitsa/materials/it/2018_lec_8.pdf · 10 Курс...

Лекция 8. Использование CSS

Донецкий национальный технический университет Факультет компьютерных наук и технологий

Кафедра компьютерной инженерии

Иваница Сергей Васильевич, старший преподаватель кафедры компьютерной инженерии

http://masters.donntu.org/ivanitsa

2

1. Как мы усвоили предыдущую лекцию?

2. Базовый синтаксис CSS (особенности).

3. Виды селекторов CSS:

селекторы тегов;

классы;

идентификаторы;

дочерние селекторы;

соседние селекторы;

селекторы атрибутов.

4. Псевдоклассы CSS:

основные понятия;

псевдоклассы для составных элементов.

Курс «Интернет-технологии». Лекция 8. Использование CSS

6. CSS: блочная модель:

общие понятия;

поля;

отступы;

рамка;

позиционирование;

абсолютное позиционирование;

многослойность;

относительное позиционирование.

8. Выравнивание и обтекание в CSS.

9. Литература для самостоятельного изучения CSS.

3

1-е задание: К документу HTML

одновременно подключено два файла — style1.css и style2.css. В style2.css первой строкой импортируется файл style3.css. В файле style1.css цвет текста задается зеленым, в style2.css — красным, а в style3.css — синим. Какой цвет текста будет на странице?

1. Зеленый. 2. Красный. 3. Синий. 4. Черный. 5. Установленный

в браузере по умолчанию.

2-е задание: В какой строке

содержится ошибка?

1. p { text-align: center; color: #000000 } 2. div { color: red; font-size: 11pt; } 3. title { color: #fc0; margin: 10px; } 4. p { color: green; color; } 5. html { float: left; }

3-е задание: Какая

строка корректная?

1. body:color=black 2. body{ color:black } 3. { body;color:black } 4. { body:color=black } 5. body { color=black; }


4

1-е задание: К документу HTML

одновременно подключено два файла — style1.css и style2.css. В style2.css первой строкой импортируется файл style3.css. В файле style1.css цвет текста задается зеленым, в style2.css — красным, а в style3.css — синим. Какой цвет текста будет на странице?

1. Зеленый.

2. Красный. 3. Синий. 4. Черный. 5. Установленный

в браузере по умолчанию.

2-е задание: В какой строке

содержится ошибка?

1. p { text-align: center; color: #000000 } 2. div { color: red; font-size: 11pt; } 3. title { color: #fc0; margin: 10px; }

4. p { color: green; color; } 5. html { float: left; }

3-е задание: Какая

строка корректная?

1. body:color=black

2. body{ color:black } 3. { body;color:black } 4. { body:color=black } 5. body { color=black; }


5 Курс «Интернет-технологии». Лекция 8. Использование CSS

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

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

Разные значения у одного свойства С комментариями

применяется нижнее свойство


Тег { свойство1: значение [; свойство2: значение; …] }

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


Тег.Имя_класса { свойство1: значение [; свойство2: значение; …] }

Классы применяются, когда необходимо определить стиль для конкретного элемента веб-страницы или задать разные стили для одного тега:

Чтобы указать в коде HTML, что тег используется с определенным классом, к тегу добавляется атрибут class = "Имя_класса"

имена классов должны начинаться с латинского символа и

могут содержать в себе символ дефиса и

подчеркивания

сss

html


.Имя_класса { свойство1: значение [; свойство2: значение; …] }

Можно, также, использовать классы и без указания тега:

При такой записи класс можно применять к любому тегу.

сss

html

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

в атрибуте class через пробел.


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


Идентификатор (ID селектор) определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты.

#Имя_идентификатора { свойство1: значение [; свойство2: значение; …] }

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

Обращение к идентификатору происходит аналогично классам, но в качестве

ключевого слова у тега используется атрибут id = "Имя_идентификатора" сss

html


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

Тег#Имя_идентификатора { свойство1: значение [; свойство2: значение; …] }

сss

html


Контекстный селектор состоит из простых селекторов разделенных пробелом:

Тег1 Тег2 { свойство1: значение [; свойство2: значение; …] }

сss

html

В этом случае стиль будет применяться к Тегу2 если он – потомок Тега1.


Дочерний селектор – селектор, который непосредственно находится внутри родительского элемента:

Тег1 > Тег2 { свойство1: значение [; свойство2: значение; …] }

сss

html

В этом случае стиль будет применяться к Тегу2 если Тег1 – его родитель.


Соседние селекторы – селекторы, которые в дереве элементов являются смежными (соседними) элементами.

Тег1 + Тег2 { свойство1: значение [; свойство2: значение; …] }

сss

html

В этом случае стиль будет применяться к Тегу2 только в том случае, если он является смежным для Тега1 и следует сразу после него.


Селекторы атрибутов позволяют установить стиль по присутствию определенного атрибута тега или его значения.

[атрибут] { Описание правил стиля } Селектор[атрибут] { Описание правил стиля }

Простой селектор атрибута устанавливает стиль, если задан специфичный атрибут:

Атрибут со значением устанавливает стиль, если задано определенное значение специфичного атрибута:

[атрибут ="значение"] { Описание правил стиля } Селектор[атрибут ="значение"] { Описание правил стиля }

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

[атрибут ^="значение"] { Описание правил стиля } Селектор[атрибут ^="значение"] { Описание правил стиля }

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

между названием селектора и квадратной скобкой пробел не допускается


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

[атрибут $= "значение"] { Описание правил стиля } Селектор[атрибут $= "значение"] { Описание правил стиля }

Значение атрибута содержит указанный текст:

[атрибут *= "значение"] { Описание правил стиля } Селектор[атрибут *= "значение"] { Описание правил стиля }

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

[атрибут ~= "значение"] { Описание правил стиля } Селектор[атрибут ~= "значение"] { Описание правил стиля }


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

[атрибут |= "значение"] { Описание правил стиля } Селектор[атрибут |= "значение"] { Описание правил стиля }

Комбинирование атрибутов. Все перечисленные методы можно комбинировать между собой, определяя стиль для элементов, которые содержат два и более атрибута. В подобных случаях квадратные скобки идут подряд:

[атрибут1="значение1"][атрибут2="значение2"] { … } Селектор[атрибут1="значение1"][атрибут2="значение2"] { … }


2. Применение стиля (текст зеленого цвета) к заголовку h3, если

одно из имен класса у элемента-предка задано как «block».

1. Применение стиля к ссылкам, в атрибуте href которых

встречается слово «mysite».

3. Применение стиля к внешним ссылкам (ссылки с абсолютной

адресацией):


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

примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении

на неё курсора мыши

Селектор:Псевдокласс { свойство1: значение [; свойство2: значение; …] }

Условно все псевдоклассы можно разделить на три группы:

1. Определяющие состояние элементов;

2. Имеющие отношение к дереву элементов (:first-child – применяется к первому дочернему элементу селектора);

3. Указывающие язык текста (:lang – определяет язык, который используется в документе или его фрагменте).


псевдокласс :hover можно добавлять и к другим элементам документа: например, чтобы в таблице строки меняли свой цвет при наведении на

них курсора мыши

:link – ссылки на непосещенные страницы. a:link { color: blue; }

:visited – ссылки на уже посещенные страницы a:visited { color: #660099;}

:active – используется для активных ссылок. a:active { background-color: #FFFF00; }

:hover – ссылка, над которой находится указатель мыши. a:hover { color: red;}

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


Все структурные элементы в представлении логики CSS является блоками, то есть каждый элемент HTML окружен блоком.

Свойства блока настраиваются с помощью свойств CSS. В соответствии с блочной моделью содержимое (контент) окружено:

• полем (padding);

• рамкой (border);

• отступом (margin).

Поля (padding) задают внутреннее расстояние между рамкой и содержимым элемента.

Поля могут задаваться как отдельно для каждой из сторон (padding-top, padding-right, padding-bottom, padding-left), так и общим единым свойством padding. p { padding-top: 100px;

padding-right: 200px;

padding-bottom: 300px;

padding-left: 400px;

}

p { padding: 100px 200px 300px 400px; }


Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах.


Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах.

Отступы (margin) устанавливают расстояния от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента.

.sample {

margin-top: 100px;

margin-right: 200px;

margin-bottom: 50px;

margin-left: 100px;

}

.sample { margin: 100px 200px 50px 100px; }

Значение может быть как положительным, так и отрицательным числом.


Рамка (border) – обрамляет элемент и может служить как для отделения двух объектов, так и в качестве декоративного элемента.

border-width – толщина рамки, значения thin, medium и thick, или числовое значение в пикселах. border-style – стиль рамки. border-color – цвет рамки.

p { border-width: 1px;

border-style: solid;

border-color: blue;

}

p { border: 1px blue; }


Различают такие способы позиционирования в CSS в зависимости от значения свойства position:

• static – значение по умолчанию; • relative – относительное позиционирование; • absolute – абсолютное позиционирование; • fixed – позиционирование относительно окна браузера.

Основной принцип позиционирования в CSS: любой элемент может быть расположен где угодно!

позиционирование в CSS — это намного проще, чем использовать таблицы, прозрачные

изображения или какие-то другие подходы


Указывает, что элемент абсолютно позиционирован: при этом другие элементы отображаются на веб-странице словно нет абсолютно позиционированного элемента (под элемент не отводится пустое пространство).

position: absolute

Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента: • если у родителя значение position установлено как static или

родителя нет, то отсчет координат ведется от края окна браузера. • если у родителя значение position задано как fixed, relative или

absolute, то отсчет координат ведется от края родительского элемента.


#box1 {

position:absolute;

top: 50px;

left: 50px }

#box2 {

position:absolute;

top: 50px;

right: 50px }

#box3 {

position:absolute;

bottom: 50px;

right: 50px }

#box4 {

position:absolute;

bottom: 50px;

left: 50px }


Использование многослойности обусловлено возможностью «наслоения» элементов с учетом принципов позиционирования в CSS. Порядок перекрытия элементов друг другом реализуется с помощью свойства z-index.

Элемент с большим значением этого свойства перекрывает элемент с меньшим номером.


position: relative

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

Задание параметров left, right, top и bottom указывает на отступы от соседнего (предыдущего) элемента.

Особенности:

1. Относительное позиционирование также допускает использование z-index, чаще в сего – при сочетании абсолютно и относительно расположенных элементов.

2. Все дочерние элементы относительно позиционированного элемента могут быть позиционированы абсолютно.


Родительский элемент имеет относительное

позиционирование, дочерние – абсолютное

Родительский элемент имеет статическое (static)

позиционирование, дочерние – абсолютное.


Элемент может выравниваться вправо или влево с помощью свойства float. Допустимые значения:

• left – выравнивает элемент по левому краю, а все остальные элементы обтекают его по правой стороне.

• right – выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.

• none – обтекание элемента не задается. Фактически, это свойство реализует обтекание элементов.


<div id="column1"> … </div>



#column1 {

float: left;

width: 33%

}

#column2 {

float: left;

width: 33%

}

#column3 {

float: left;

width: 33%

}


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

Это свойство clear, которое может принимать значения left, right, both и none, соответственно задающие стороны, которые блокируются для обтекания.

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





<div id="footer"> … </div>

#column1 {

float: left;

width: 33% }

#column2 {

float: left;

width: 33% }

#column3 {

float: left;

width: 33% }

#footer {

clear: both; }


Ресурсы: http://www.w3schools.com/css/default.asp

http://htmlbook.ru/css http://htmlbook.ru/samcss

Книги:

2011

2005

2012

Лекция css - donntu.orgmasters.donntu.org/ivanitsa/materials/it/2018_lec_8.pdf · 10 Курс...

Documents