- •Поскребышев а.А. Информационно – компьютерный практикум Компьютерные бизнес технологии
- •Оглавление
- •Введение
- •Web средства поддержки бизнеса
- •Тема 1: Создание web форм и элементов управления в html документе
- •Использование css при создании web страниц
- •Свойства шрифта
- •Свойства текста
- •Свойства фон и цвет
- •Контейнерный Web-дизайн
- •Inline- ("инлайн"-) элементы
- •Отступы в элементах
- •Литература
Inline- ("инлайн"-) элементы
Имеют ширину как у своего содержимого. Это означает, что два и более inline-элемента могут располагаться последовательно на одной линии. Например, тег < a > - это inline-элемент. Он может находиться прямо в тексте, окруженный текстом с двух сторон.
Отступы в элементах
Свойство margin добавляет пустое пространство за пределами элемента.
Такой внешний отступ можно задавать независимо с каждой стороны:
margin-top: 1em; это сколько ?
margin-right: 2em;
margin-bottom: 0.5em;
margin-left: 3em;
То же самое можно записать в сокращенной форме:
margin: 1em 2em 0.5em 3em;
Если отступы со всех сторон одинаковы, можно использовать следующее простое правило:
margin: 1em;
В результате его применения отступ между границей элемента и другими элементами составит 1em.
блочного элемента после добавления к нему
внешних отступов. Код документа таков:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>Margins</title>
<meta http-equiv=”content-type”
content=”text/html; charset=utf-8” />
<style type=”text/css”>
p {
background-color: #CFEAFA;
border: 2px solid #6CB5DF;
}
p.margintest {
margin: 40px;
}
</style>
</head>
<body>
<p>This paragraph should be displayed in the default …</p>
<p>This is another paragraph that has the default …</p>
<p class=”margintest”>This paragraph has a 40-pixel …</p>
</body>
</html>
Это пример нужно реализовать самим студентам ? или ….?
Свойство padding добавляет отступы внутри элемента – между его границей и дочерними элементами. Внутренние отступы можно задавать по отдельности с каждой стороны:
padding-top: 1em;
padding-right: 1.5em;
padding-bottom: 0.5em;
padding-left: 2em;
То же самое можно записать в сокращенной форме:
padding: 1em 1.5em 0.5em 2em;
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>Padding</title>
<meta http-equiv=”content-type”
content=”text/html; charset=utf-8” />
<style type=”text/css”>
p {
border: 2px solid #AAAAAA;
background-color: #EEEEEE;
}
p.paddingtest {
padding: 40px;
}
</style>
</head>
<body>
<p>This paragraph should be displayed in the default …</p>
<p>This is another paragraph that has the default …</p>
<p class=”paddingtest”>This paragraph has 40 pixels …</p>
</body>
</html>
Позиционирование элемента на странице с помощью CSS
С помощью CSS можно указать точное расположение элемента на странице.
Задание элементу свойства position со значением absolute полностью удаляет его из основного потока элементов страницы. К примеру, при добавлении нескольких абзацев текста в рассмотренный выше документ два блока будут отображаться поверх него ???
Центрирование блока на странице
Для центрирования блока с фиксированной шириной можно задать для него внешний отступ по бокам с помощью CSS-свойства margin со значением auto:
При задании свойству margin значения auto браузер создаст одинаковые
отступы для блока как справа, так и слева, так что он будет расположен
в центре.
Создание блока с закругленными краями
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>Rounded Corners</title>
<meta http-equiv=”content-type”
content=”text/html; charset=utf-8” />
<link rel=”stylesheet” type=”text/css” href=”corners1.css” />
</head>
<body>
<div class=”curvebox”>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p>
</div>
</body>
</html>
.curvebox {
width: 250px;
padding: 1em;
background-color: #B0C4DE;
color: #33527B;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}
img {
display: block;
background: #3872ef;
padding: 0;
margin: 0;
}
img {
display: block;
background: #3872ef;
padding: 0;
margin: -30px;
}
img {
display: block;
background: #3872ef;
padding: 30px;
margin: -30px;
}
img {
display: block;
background: #3872ef;
padding: 0;
margin: 30px;
}
padding раздвигает div, увеличивает его ширину и высоту. А если это не нужно?
существует свойство CSS box-sizing
div {
width: 80%;
height: 80%;
background: #3872ef;
border: 10px solid #ffff00;
box-sizing: padding-box;
}
div {
width: 80%;
height: 80%;
background: #3872ef;
box-sizing: content-box;
}
Чем отличаются padding и margin для блочных и встроенных элементов
span {
background: rgba(56, 114, 239, 0.7);
}
span {
display: block;
background: rgba(56, 114, 239, 0.7);
}
Значение auto у margin
размещает по центру или прижимает к правому краю элемент в горизонтальной плоскости. Работает только для блочных тегов, для встроенных существует его аналог - text-align.