Отправляет email-рассылки с помощью сервиса Sendsay

Tutos-web: обучение веб-технологиям. Шаг за шагом

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Апрель 2009   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
VelRoss

Статистика

462 подписчиков
-3 за неделю
←   Все выпуски   →

Tutos-web: обучение веб-технологиям. Шаг за шагом: Выпуск #37 : Урок 9. Отступы в CSS


Вместе с Вами данную рассылку читают 890 (-4) подписчиков*

Добро пожаловать в рассылку

Tutos-web !

 HTML {CSS} 26 апреля 2009 
Выпуск No

37

email: velross@list.ru
website : Tutos-web.Net.Ru
Ведёт рассылку : Velross

 

 

Тема выпуска : Урок 9. Отступы в CSS

Сегодня в выпуске:

  1. Предисловие к уроку  >>>
  2. Примеры  >>>
  3. Свойства отступов в CSS  >>>

 
 

На сайте также: этот урок с действующими примерами + мини-подкаст цитаты.

1. Предисловие к уроку

Свойства отступов Margin используются в CSS, чтобы установить интервалы вокруг элементов.


1 | 2 | 3 | Наверх

2. Примеры

Все свойства отступов в одной записи
Этот пример демонстрирует как использовать сокращённую запись для установки всех свойств отступов в одной записи.

 <html>
 <head>
 <style type="text/css">
 p.margin {margin: 2cm 4cm 3cm 4cm}
 </style>
 </head>

 <body>
 <p>Это параграф без указанных отступов</p>
 <p class="margin">Это параграф с указанными отступами</p>
 <p>Это параграф без указанных отступов</p>
 </body>

 </html>

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

 <html>
 <head>
 <style type="text/css">
 p.topmargin {margin-top: 5cm}
 </style>
 </head>

 <body>
 <p>Это параграф без указанного отступа</p>
 <p class="topmargin">Это параграф с указанным отступом от верхнего  края элемента</p>
 </body>
 </html>

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

 <html>
 <head>
 <style type="text/css">
 p.bottommargin
 {
 margin-bottom: 25%
 }
 </style>
 </head>
 <body>

 <p>Это параграф без указанного отступа</p>
 <p class="bottommargin">Это параграф с указанным отступом от нижнего  края элемента.</p>
 <p>Это параграф без указанного отступа</p>

 </body>
 </html>

 

1 | 2 | 3 | Наверх

3. Свойства отступов в CSS

Свойства отступа в CSS определяют интервалы вокруг элементов. Вы также можете использовать отрицательные значения, чтобы наложить содержание одного элемента на содержание другого. Отступы сверху, справа, снизу и слева вы можете изменять независимо друг от друга, используя отдельные свойства. А сокращённую запись Вы можете использовать для изменения всех свойств сразу.

Примечание: Netscape и IE для тэга <body> используют, по умолчанию, значения margin в 8px, но Opera этого не делает! Вместо этого, Opera использует,по умолчанию, значения padding в 8px. Поэтому, если вы хотите определять отступы для всей страницы и сделать так, чтобы она отображалась правильно в Opere, то для тэга <body> определяйте оба свойства и margin и padding!

Поддержка браузеров: IE: Internet Explorer, F: Firefox. Число - номер версии браузера, с которого осуществляется поддержка свойства.

W3C: число в столбце "W3C" указывает в какой рекомендации CSS (CSS1 или CSS2) было определено данное свойство.

Свойство Описание Значения IE F W3C
margin Сокращенная запись всех свойств отступа в одной строке margin-top
margin-right
margin-bottom
margin-left		 4 1 1
margin-bottom Устанавливает величину отступа от нижнего края элемента auto
length
%		 4 1 1
margin-left Устанавливает величину отступа от левого края элемента auto
length
%		 3 1 1
margin-right Устанавливает величину отступа от правого края элемента auto
length
%		 3 1 1
margin-top Устанавливает величину отступа от верхнего края элемента auto
length
%		 3 1 1


1 | 2 | 3 | Наверх

Второй способ управлять своим временем -
ВЫРАБОТАЙТЕ ЯСНЫЕ ЦЕЛИ И ЗАДАЧИ!
Вот упражнение, которое поможет добиться перемен:
1. Возьмите лист бумаги и напишите 10 целей на предстоящий год
2. Записывайте цели в настоящем времени
3. Начинайте всегда со слова Я
4. Выберите главную из них
5. Обведите выбранную цель кружочком, затем запишите её на новом листе бумаги
6. Установите крайний срок
7. Подготовьте список необходимых действий
8. Превратите его в план
9. И начинайте работать по плану каждый день, пока цель не будет достигнута.

Брайан Трейси , "21 способ управлять временем".

+мини-подкаст на сайте

*Общее количество на 2-х рассылочных сервисах (Content.Mail.Ru и Subscribe.ru). 		 
  

tutos-web © 2008-2009

В избранное