-Всегда под рукой

 -Подписка по e-mail

 

 -Цитатник

прозрачные фоны - (5)

Мои прозрачные фоны Может пригодятся кому-нибудь... &...

Иван Силыч Горюшкин-Сорокопудов 1873-1954 Россия - (2)

Портрет Н.В. Мансыревой На даче Портрет художника Ивана Силыча Горю...

Гарин Евгений - художник-маринист - (2)

Гарин Евгений - художник-маринист Море Черное – большое: Утром серо-голубое...

клипарт-русские красавицы вырезка клипарта Веры Ларионовой - (2)

Единственная-любовь-Шерлока-Холмса Елена-Прекрасная Княгиня-Ольга Леди-Гамильтон Ле...

 -Рубрики

 -Сообщества

Участник сообществ (Всего в списке: 1) Мир_клипарта
Читатель сообществ (Всего в списке: 1) Мир_клипарта

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 20.01.2009
Записей: 9609
Комментариев: 288400
Написано: 320720


HTML & CSS - серия 3

Четверг, 02 Июня 2011 г. 06:59 + в цитатник
HTML & CSS - серия 3

Серия 1

Серия 2



Выравнивание текста в абзаце

На время забудем про style,
который мы использовали при оформлении текста, и вернёмся к "чистому"
HTML. Посмотрим, как можно выровнять текст в абзаце. Сразу же перечислим
все варианты, которых немного.

Выравнивание текста в этом абзаце задаётся при помощи свойства (атрибута) align тега <p>. В данном случае текст выравнивается по ширине абзаца, т.е. как бы "подтягивается" к его краям: <р align="justify">. Добавим сюда ещё предложение для наглядности.

Выравнивание текста в этом абзаце задаётся при помощи свойства (атрибута) align тега <p>. В данном случае текст выравнивается по правому краю: <р align="right">

Выравнивание текста в этом абзаце задаётся при помощи свойства (атрибута) align тега <p>. В данном случае текст выравнивается по центру: <р align="center">

Выравнивание текста в этом абзаце задаётся при помощи свойства (атрибута) align тега <p>. В данном случае текст выравнивается по левому краю: <р align="left">

В последнем случае align="left" можно было бы и не писать, поскольку выравнивание текста по левому краю производится по умолчанию.

Выровнять абзац по центру можно также с помощью парного тега <center>:

Получается такой же результат, что и в приведённом выше примере, но в данном случае используется конструкция <center><p>текст абзаца</p></center>

С помощью тега <center> можно также выравнивать по центру любые другие объекты, например, изображения:

<center><img src="URL_картинки"></center>

URL_картинки (http://...) копируем из адресной строки браузера.

Отступы

Вы ещё не соскучились по style? Сейчас самое время его вспомнить.

В этом абзаце задана "красная строка",то есть отступ первой строки от левого края, который в данном случае равен 20px: <p style="text-indent:20px">текст абзаца</p>

Отступ может быть и отрицательным. В этом случае мы получим "висящую" строку. Однако, если просто написать text-indent:-20px, то мы "потеряем" часть текста:

В этом абзаце задано значение text-indent:-20px, и вот какое безобразие получилось.

Поступим несколько по-другому. Подвинем весь наш абзац на 20px вправо и снова зададим text-indent:-20px:

В этом абзаце используется text-indent:-20px и дополнительно padding:0 0 0 20px: <p style="padding:0 0 0 20px; text-indent:-20px">текст абзаца</p>.

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

В этом абзаце используется text-indent:-20px и дополнительно padding:0 0 0 20px: <p style="padding:0 0 0 20px; text-indent:-20px">текст абзаца</p>.

Возникает вопрос про paddingmargin),
которые необходимы при позиционировании текста и других объектов
(изображений, "встроенных" объектов, блочных элементов и т.д.) Но это -
достаточно большая тема, поэтому расскажу в другой раз. Сейчас только
замечу, что в нашем примере вместо padding:0 0 0 20px можно было бы написать padding-left:20px.


 


Источник Проксима

Рубрики:  Полезности
Уроки
Метки:  

Процитировано 57 раз
Понравилось: 14 пользователям



Давыдов_Владимир   обратиться по имени Четверг, 02 Июня 2011 г. 07:10 (ссылка)
Я, к примеру, НТМL научилcя пользоваться в блогах mail.ru-рекомендую...
Ответить С цитатой В цитатник
bond52   обратиться по имени Четверг, 02 Июня 2011 г. 07:53 (ссылка)

Этот пост уже лучше предыдущих.Так держать Ниночка!Главное наглядных примеров больше.
Ответить С цитатой В цитатник
lusina03   обратиться по имени С добрым утром радость моя Четверг, 02 Июня 2011 г. 08:21 (ссылка)
Спасибо Ниночка забираю урок в коллекцию
Ответить С цитатой В цитатник
Перейти к дневнику
rottam   обратиться по имени Четверг, 02 Июня 2011 г. 08:29 (ссылка)
Ответить С цитатой В цитатник
Перейти к дневнику
Феврония52   обратиться по имени Четверг, 02 Июня 2011 г. 12:08 (ссылка)
СПАСИБО, ДОРОГАЯ!
Ответить С цитатой В цитатник
Перейти к дневнику
татьяна_татуревич   обратиться по имени Четверг, 02 Июня 2011 г. 15:38 (ссылка)
Ответить С цитатой В цитатник
Перейти к дневнику
Nikash   обратиться по имени Четверг, 02 Июня 2011 г. 18:56 (ссылка)
Хоспидя...Когда ж я до всего доберусь)))?
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 03 Июня 2011 г. 22:08ссылка
Nikash, Просто надо немного использовать при работах...
Alla_klass   обратиться по имени Четверг, 02 Июня 2011 г. 21:58 (ссылка)
Ответить С цитатой В цитатник
Перейти к дневнику
ВИ-ТЮ-ША   обратиться по имени Четверг, 02 Июня 2011 г. 23:03 (ссылка)
До меня тоже когда-нибудь дойдёт!
Ответить С цитатой В цитатник
Перейти к дневнику
NikaLive   обратиться по имени Суббота, 04 Июня 2011 г. 13:22 (ссылка)
Спасибо!!!
Ответить С цитатой В цитатник
TEACHER_OF_PHYSICS   обратиться по имени Спасибо за урок! Воскресенье, 05 Июня 2011 г. 08:53 (ссылка)

Ответить С цитатой В цитатник
Le-ly-a   обратиться по имени Суббота, 02 Июля 2011 г. 21:09 (ссылка)
Полезное дело, спасибо!
Ответить С цитатой В цитатник
МОННА   обратиться по имени Понедельник, 15 Августа 2011 г. 22:43 (ссылка)
Ниночка! Спасибо за урок!!!
Ответить С цитатой В цитатник
Комментировать К дневнику Страницы: [1] [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку