Выравнивание абзаца с помощью атрибута Style

Set width and height for paragraph in HTML and CSS

The following code shows how to set width and height for paragraph.

Example

 html> head> !-- w w w . j av a 2 s. c o m--> style type='text/css'> p < border: thin solid black; text-align: justify; width: 150px; height: 150px; >  body> p> Peter Piper picked a peck of pickled peppers. Did Peter Piper pick a peck of pickled peppers? If Peter Piper picked a peck of pickled peppers, where's the peck of pickled peppers Peter Piper picked?   

The code above generates the following result.

Источник

Как форматировать абзац в HTML?

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

Тег

в HTML позволяет задать абзацы, а атрибут align выравнивает их по левому краю, по правому краю, по центру или по ширине. Помимо них мы будем использовать глобальный атрибут style .

Как выровнять текст в HTML

Можно выровнять абзац, используя атрибут align со следующими значениями:

text-align: left|right|center|justify|initial|inherit;

Скопируйте следующий код в файл .html .

  
Этот абзац выровнен по центру
 
Этот абзац выровнен по правому краю
 
Этот абзац выводится в окне браузера, выровненным по ширине. Распределенный по ширине абзац выравнивается по правому и по левому краю за счет добавления дополнительных пробелов. Вы можете видеть, что края выровненного по ширине абзаца соответствуют краям абзацев, выровненных по левому и по правому краю. В выровненном по левому краю абзаце левый край является ровным, а в абзаце, выровненном по правому краю - правый. Вы видите, что у этого абзаца оба края являются ровными? Это достигается благодаря стилю text-align:justify.
 

В окне браузера HTML код абзаца выглядит следующим образом.

Как реализовать межстрочный интервал HTML

Вы можете управлять междустрочным интервалом абзаца с помощью style=line-height . Используйте атрибут style со следующими значениями:

line-height: normal|number|length|initial|inherit;

Ниже приведен пример HTML-кода , который выводит абзацы с различными междустрочными интервалами:

 
В этом параграфе используются два значения для атрибута style. Первый line-height:1.5 определяет полуторный междустрочный интервал для абзаца, а второе значение text-align:justify определяет, что текст абзаца должен распределяться по ширине.
 
Этот абзац имеет двойной междустрочный интервал и выровнен по ширине. line-height:2 определяет двойной интервал. Атрибут style не обязательно должен иметь два значения. Но если вам нужно задать два значения, вы можете сделать это, разделив их точкой с запятой.
  

Ниже приведено несколько различных способов использования значения line-height для атрибута style :

: Устанавливает межстрочный интервал 13 пикселей;

: Устанавливает в HTML расстояние между абзацами в 200% относительно текущего размера шрифта;

: Устанавливает высоту строки 14 пикселей.

Отступы

Я использовал термин » отступы «, чтобы его было проще понять. Но в HTML мы используем промежутки, чтобы создать вокруг объекта пустое пространство. Можно использовать атрибут style со значением padding , чтобы задать для абзаца отступ слева или справа.

Ниже приводится пример абзацев с отступом слева и справа:

   
Этот абзац не имеет отступа, он просто выровнен по ширине. Посмотрите на атрибут style элемента P для этого абзаца.
 
Для этого абзаца я задал отступ слева в 30 пикселей с помощью стиля padding-left:30px. Также этот абзац выровнен по ширине с помощью стиля text-align:justify. Как вы уже знаете, мы можем использовать несколько значений для атрибута Style, разделяя их точкой с запятой.
 
А этот абзац имеет отступ справа в 30 пикселей, но не имеет отступа слева. Он также выровнен по ширине. Значение ‘padding-right’ атрибута style задает отступ справа. Если вы не видите эффекта, уменьшите ширину окна браузера, чтобы абзац HTML, выровненный по ширине, отображался надлежащим образом.
 

Отступы между абзацами (отступ перед и отступ после абзаца)

В HTML или CSS нам это не нужно. Мы можем просто указать стиль padding для элемента

. padding-top и padding-bottom задают пустое пространство до и после абзаца, которое работает, как отступ сверху или снизу. Посмотрите на приведенный ниже пример тега

. Я установил для первого абзаца HTML отступ 10 пикселей перед вторым и 50 пикселей после второго абзаца:

   
Для этого абзаца не заданы отступы до или после. Это обычный абзац, выровненный по ширине. Как вы уже знаете, мы можем выровнять абзац по ширине с помощью кода style=”text-align:justify” внутри тега.
 
Этот абзац выронен по ширине. Он также имеет отступ в 10 пикселей перед абзацем и 50 пикселей после. Внутри тега я задал 3 стиля.
 
Это обычный абзац без отступов и с выравниванием по умолчанию.
 

Что следует помнить

• Абзац HTML может быть выровнен с помощью атрибута align или стиля text-align ;
• HTML будет отображаться по-разному в зависимости от размеров экрана, размеров окна браузера;
• Добавление дополнительных пробелов или пустых строк в HTML-код не влияет на вывод. Браузер удаляет все лишние пробелы;
• Теги задают, что должно отображаться, а стили определяют, как это должно выводиться;
• Стили могут быть заданы тремя различными способами — встроенные ( внутри тегов ), внутренние ( внутри того же HTML-файла с помощью элемента ) и внешние ( в отдельном файле );
• Лучшей практикой при разработке веб-сайтов считается использование внешнего файла CSS . Таким образом, мы можем разделить контент и представление;
• Style является глобальным атрибутом, поэтому его можно использовать с любыми другими элементами, а не только с элементом

  ;

• Стиль text-align выравнивает абзац по левому краю, по центру, по правому краю или по ширине;
• Междустрочный интервал для абзаца можно задать с помощью стиля line-height . Он может принимать различные значения;
• Вы можете указать для line-height кратные значения ( 1 для одинарного междустрочного интервала, 1,5 для полуторного, 2 для двойного, 3 для тройного и так далее ), а также пиксели, проценты и т.д.;
• Отступ для абзаца в HTML можно задать с помощью стиля padding-left или padding-right . Может принимать значения в пикселях, процентах и т.д.;
• Интервалы между абзацами в HTML можно задать с помощью стилей padding-top или padding-bottom . Для этого также допустимы значения в пикселях, процентах и т.д.

Источник

Значения и единицы измерения CSS

Как я уже говорил, каждое свойство CSS имеет свой набор возможных значений, которые делятся на несколько типов: ключевые слова, числа, размеры, проценты, текстовые строки, адреса файлов (URL), цвета, значения по умолчанию. Некоторые виды значений указываются в определенных единицах измерения. Определенные свойства CSS позволяют указывать для них сразу несколько значений, разделяя их символами пробела или запятыми. Обо всем этом мы и поговорим в данном уроке.

Ключевые слова CSS

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

Пример использования ключевых слов в CSS

       
Параграф 1
 
Параграф 2
  

Числовые значения CSS

Значениями свойств в данном случае могут быть целые или дробные числа, состоящие из арабских цифр (0-9). Если число дробное — оно записывается с точкой, а не с запятой. Кроме этого числа могут быть положительными или отрицательными, в случае отрицательных значений перед числом ставится знак минус (-). Далеко не все свойства CSS могут иметь отрицательные или дробные значения.

Пример использования чисел в качестве значений

       
Параграф.
  

Размеры CSS

Размеры CSS — отрицательные или положительные целые или дробные числа, после которых обязательно указываются единицы измерения (исключение составляет ноль (0), для него единицы измерения указывать не обязательно). Единицы измерения, а, соответственно, и размеры могут быть относительными или абсолютными. Относительные размеры всегда зависят от каких-то дополнительных факторов, например разрешения экрана монитора пользователя. Абсолютные размеры не зависят ни от чего и всегда неизменны.

Относительные размеры CSS

Единицы измерения	Описание	Пример
em	Исчисляется в размерах шрифта данного элемента (font-size), где 1em как раз и соответствует размеру шрифта.	margin: -7em;
ex	Высота строчной буквы «x» шрифта данного элемента.	padding: 1.3ex;
px	Пиксели. Измеряется в пикселях монитора компьютера или другого визуального устройства. Пиксель — это самая маленькая точка на мониторе высчитываемая исходя его разрешения.	left: -150px;

Абсолютные размеры CSS

Единицы измерения	Описание	Пример
cm	Сантиметры.	width: 9.5cm;
mm	Миллиметры.	height: 223mm;
in	Дюймы. 1 дюйм равен 2.54 сантиметра.	bottom: -2in;
pt	Пункты. 1 пункт равен 1/72 дюйма.	font-size: 18pt;
pc	Пики. 1 пика равна 12 пунктам.	min-width: 2.7pc;

Пример указания размеров в CSS

Помните и никогда не забывайте о том, что размеры в CSS (в отличие от HTML) всегда пишутся с указанием единиц измерения, как показано в примере. Ошибки, когда например вместо 150px пишут просто 150 являются самыми распространенными среди новичков, поэтому давайте-ка не будем пополнять их ряды, хорошо? 🙂

Проценты

Процентные значения в CSS записываются также, как в HTML — это целые или дробные положительные или отрицательные числа со знаком процента (%) на конце. Проценты тоже являются относительными единицами измерения, так как всегда зависят от какого-то другого значения, которое приравнивается к 100%.

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

       
Ширина этого параграфа равна половине ширины элемента BODY, а именно 200px.
  

Ширина этого параграфа равна половине ширины элемента BODY, а именно 200px.

Текстовые строки

Текст в CSS должен быть обязательно заключен в служебные двойные (» «) или одинарные (‘ ‘) кавычки, причем, если внутри текста используются двойные кавычки, то служебные должны быть одинарными и наоборот (‘Агентство «ВИА» сообщает’).

Если же вы все-таки хотите указать внутри текста такие же кавычки, как и служебные — вам поможет символ обратного слеша (\). Дело в том, что если обратный слеш ставится перед кавычкой, то он отменяет ее действие в качестве служебной (‘Агентство \’ВИА\’ сообщает’). Причем, обратный слеш в таком случае не будет отображен на странице, а будут выведены только сами кавычки.

Адреса файлов (URL)

URL — это уникальный адрес каждого документа в интернете. Как вы знаете из HTML, адреса могут быть относительными или абсолютными, в CSS используются они же. Для добавления адреса применяется конструкция url(адрес) . Сам адрес можно брать в двойные или одинарные кавычки, хотя и не обязательно.

Ожидается, что в будущем появится еще один определитель ресурса — URN , который в соединении с URL получит название URI .

Пример указания адресов в CSS

Цвета в CSS

Цвет в CSS можно указывать несколькими способами: по имени цвета, по HEX-коду, в формате RGB.

• Имя цвета — Многие цвета имеют имена, которые браузеры понимают, например: red, green, blue.
• HEX-код цвета — Шестнадцатеричное значение цвета, перед которым ставится знак решетка (#). Каждый HEX-код состоит из трех пар: первая пара отвечает за красный цвет, вторая — за зеленый, третья — за синий, например: #CC9966 или #996699.
• Цвет в формате RGB — Цвет в десятичном формате, он начинается с аббревиатуры RGB, после которой в скобках, через запятую, указываются три значения. Здесь тоже первое число отвечает за красный цвет, второе — за зеленый, третье — за синий, например: RGB(153, 204, 51).

Пример указания цвета в CSS

      
Параграф 1
 
Параграф 2
 
Параграф 3
  

Значения по умолчанию

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

• Введение
• Что такое CSS?
• Синтаксис CSS
• Подключение CSS
• Типы устройств
• Базовый синтаксис
• Значения и единицы измерения CSS
• Комментарии в CSS
• Селекторы CSS
• Селекторы тегов
• Селекторы атрибутов
• Универсальный селектор
• Классы
• Идентификаторы
• Селекторы потомков
• Дочерние селекторы
• Соседние селекторы
• Псевдоклассы
• Псевдоэлементы
• Обработка CSS
• Наследование
• Приоритеты стилей

Copyright © 2010-2015 seodon.ru Все права защищены.

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

Источник