Лекция 8. Использование CSS Донецкий национальный технический университет Факультет компьютерных наук и технологий Кафедра компьютерной инженерии Иваница Сергей Васильевич, старший преподаватель кафедры компьютерной инженерии http://masters.donntu.org/ivanitsa
35
Embed
Лекция CSS - donntu.orgmasters.donntu.org/ivanitsa/materials/it/2018_lec_8.pdf · 10 Курс «Интернет-технологии». Лекция 8. Использование
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Лекция 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 — синим. Какой цвет текста будет на странице?
Курс «Интернет-технологии». Лекция 8. Использование CSS
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; }
В этом случае стиль будет применяться к Тегу2 только в том случае, если он является смежным для Тега1 и следует сразу после него.
15 Курс «Интернет-технологии». Лекция 8. Использование CSS
Селекторы атрибутов позволяют установить стиль по присутствию определенного атрибута тега или его значения.
[атрибут] { Описание правил стиля } Селектор[атрибут] { Описание правил стиля }
Простой селектор атрибута устанавливает стиль, если задан специфичный атрибут:
Атрибут со значением устанавливает стиль, если задано определенное значение специфичного атрибута:
[атрибут ="значение"] { Описание правил стиля } Селектор[атрибут ="значение"] { Описание правил стиля }
Значение атрибута начинается с определенного текста. Устанавливает стиль для элемента, если значение атрибута тега начинается с указанного текста.
[атрибут ^="значение"] { Описание правил стиля } Селектор[атрибут ^="значение"] { Описание правил стиля }
cтиль применяется к тем тегам, внутри которых добавлен указанный атрибут
между названием селектора и квадратной скобкой пробел не допускается
16 Курс «Интернет-технологии». Лекция 8. Использование CSS
Значение атрибута оканчивается определенным текстом. Устанавливает стиль для элемента в том случае, если значение атрибута оканчивается указанным текстом.
[атрибут $= "значение"] { Описание правил стиля } Селектор[атрибут $= "значение"] { Описание правил стиля }
Значение атрибута содержит указанный текст:
[атрибут *= "значение"] { Описание правил стиля } Селектор[атрибут *= "значение"] { Описание правил стиля }
Одно из нескольких значений атрибута. Стиль применяется в том случае, если у атрибута имеется указанное значение или оно входит в список значений, разделяемых пробелом.
[атрибут ~= "значение"] { Описание правил стиля } Селектор[атрибут ~= "значение"] { Описание правил стиля }
17 Курс «Интернет-технологии». Лекция 8. Использование CSS
Дефис в значении атрибута. Стиль применяется к элементам, у которых атрибут начинается с указанного значения или с фрагмента значения, после которого стоит дефис.
[атрибут |= "значение"] { Описание правил стиля } Селектор[атрибут |= "значение"] { Описание правил стиля }
Комбинирование атрибутов. Все перечисленные методы можно комбинировать между собой, определяя стиль для элементов, которые содержат два и более атрибута. В подобных случаях квадратные скобки идут подряд:
18 Курс «Интернет-технологии». Лекция 8. Использование CSS
2. Применение стиля (текст зеленого цвета) к заголовку h3, если
одно из имен класса у элемента-предка задано как «block».
1. Применение стиля к ссылкам, в атрибуте href которых
встречается слово «mysite».
3. Применение стиля к внешним ссылкам (ссылки с абсолютной
адресацией):
19 Курс «Интернет-технологии». Лекция 8. Использование CSS
Псевдоклассы определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя. При использовании псевдоклассов браузер не перегружает текущий документ, поэтому с помощью псевдоклассов можно получить разные динамические эффекты на странице.
примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении
на неё курсора мыши
Селектор:Псевдокласс { свойство1: значение [; свойство2: значение; …] }
Условно все псевдоклассы можно разделить на три группы:
1. Определяющие состояние элементов;
2. Имеющие отношение к дереву элементов (:first-child – применяется к первому дочернему элементу селектора);
3. Указывающие язык текста (:lang – определяет язык, который используется в документе или его фрагменте).
20 Курс «Интернет-технологии». Лекция 8. Использование CSS
псевдокласс :hover можно добавлять и к другим элементам документа: например, чтобы в таблице строки меняли свой цвет при наведении на
:visited – ссылки на уже посещенные страницы a:visited { color: #660099;}
:active – используется для активных ссылок. a:active { background-color: #FFFF00; }
:hover – ссылка, над которой находится указатель мыши. a:hover { color: red;}
Псевдоклассы, определяющие состояния элементов, наиболее часто используются для установки разных стилей ссылок:
21 Курс «Интернет-технологии». Лекция 8. Использование CSS
Все структурные элементы в представлении логики 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; }
22 Курс «Интернет-технологии». Лекция 8. Использование CSS
Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах.
23 Курс «Интернет-технологии». Лекция 8. Использование CSS
Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах.
Отступы (margin) устанавливают расстояния от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента.
.sample {
margin-top: 100px;
margin-right: 200px;
margin-bottom: 50px;
margin-left: 100px;
}
.sample { margin: 100px 200px 50px 100px; }
Значение может быть как положительным, так и отрицательным числом.
24 Курс «Интернет-технологии». Лекция 8. Использование CSS
Рамка (border) – обрамляет элемент и может служить как для отделения двух объектов, так и в качестве декоративного элемента.
border-width – толщина рамки, значения thin, medium и thick, или числовое значение в пикселах. border-style – стиль рамки. border-color – цвет рамки.
p { border-width: 1px;
border-style: solid;
border-color: blue;
}
p { border: 1px blue; }
25 Курс «Интернет-технологии». Лекция 8. Использование CSS
Различают такие способы позиционирования в CSS в зависимости от значения свойства position:
• static – значение по умолчанию; • relative – относительное позиционирование; • absolute – абсолютное позиционирование; • fixed – позиционирование относительно окна браузера.
Основной принцип позиционирования в CSS: любой элемент может быть расположен где угодно!
позиционирование в CSS — это намного проще, чем использовать таблицы, прозрачные
изображения или какие-то другие подходы
26 Курс «Интернет-технологии». Лекция 8. Использование CSS
Указывает, что элемент абсолютно позиционирован: при этом другие элементы отображаются на веб-странице словно нет абсолютно позиционированного элемента (под элемент не отводится пустое пространство).
position: absolute
Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента: • если у родителя значение position установлено как static или
родителя нет, то отсчет координат ведется от края окна браузера. • если у родителя значение position задано как fixed, relative или
absolute, то отсчет координат ведется от края родительского элемента.
27 Курс «Интернет-технологии». Лекция 8. Использование CSS
#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 }
28 Курс «Интернет-технологии». Лекция 8. Использование CSS
Использование многослойности обусловлено возможностью «наслоения» элементов с учетом принципов позиционирования в CSS. Порядок перекрытия элементов друг другом реализуется с помощью свойства z-index.
Элемент с большим значением этого свойства перекрывает элемент с меньшим номером.
29 Курс «Интернет-технологии». Лекция 8. Использование CSS
position: relative
Позиция элемента, размещаемого относительно, рассчитывается относительно его оригинальной позиции в документе.
Задание параметров left, right, top и bottom указывает на отступы от соседнего (предыдущего) элемента.
Особенности:
1. Относительное позиционирование также допускает использование z-index, чаще в сего – при сочетании абсолютно и относительно расположенных элементов.
2. Все дочерние элементы относительно позиционированного элемента могут быть позиционированы абсолютно.
30 Курс «Интернет-технологии». Лекция 8. Использование CSS
Родительский элемент имеет относительное
позиционирование, дочерние – абсолютное
Родительский элемент имеет статическое (static)
позиционирование, дочерние – абсолютное.
31 Курс «Интернет-технологии». Лекция 8. Использование CSS
Элемент может выравниваться вправо или влево с помощью свойства float. Допустимые значения:
• left – выравнивает элемент по левому краю, а все остальные элементы обтекают его по правой стороне.
• right – выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.
• none – обтекание элемента не задается. Фактически, это свойство реализует обтекание элементов.
32 Курс «Интернет-технологии». Лекция 8. Использование CSS
<div id="column1"> … </div>
<div id="column2"> … </div>
<div id="column3"> … </div>
#column1 {
float: left;
width: 33%
}
#column2 {
float: left;
width: 33%
}
#column3 {
float: left;
width: 33%
}
33 Курс «Интернет-технологии». Лекция 8. Использование CSS
Поскольку есть свойство, задающее обтекание элемента, то должно быть и свойство его запрещающее.
Это свойство clear, которое может принимать значения left, right, both и none, соответственно задающие стороны, которые блокируются для обтекания.
Свойство clear задается для элемента, который следует непосредственно после того элемента, который уже не нужно огибать.
34 Курс «Интернет-технологии». Лекция 8. Использование CSS
<div id="column1"> … </div>
<div id="column2"> … </div>
<div id="column3"> … </div>
<div id="footer"> … </div>
#column1 {
float: left;
width: 33% }
#column2 {
float: left;
width: 33% }
#column3 {
float: left;
width: 33% }
#footer {
clear: both; }
35 Курс «Интернет-технологии». Лекция 8. Использование CSS