Document

) тегов.

Пример

html> html> head> title>Использование тега <div> title> head> body> h1> Тег <div> h1> div style="background-color:#8ebf42"> p> Мы использовали тег <div>, чтобы сгруппировать два параграфа и добавить фон к тексту, а для того, чтобы изменить цвет span style="color:#1c87c9"> этого слова span> мы использовали тег <span>. p> p> Обратите внимание, что тег <div> является блочным элементом, до и после него добавляется разрыв строки. p> div> body> html>

Результат

Расположение блоков

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

Для корректного отображения блоков на странице необходимо их правильно расположить. Различают несколько способов расположения блоков в зависимости от целей и контента страницы. Давайте рассмотрим несколько из них.

Флексбокс¶

Спецификация CSS Flexible Box успешно пришла на замену верстке float-ами. Flexbox позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.

Пример

html> html> head> title>Заголовок документа title> style> .flex-container < display: flex; align-items: center; /* Подставьте другое значение и посмотрите результат */ width: 90%; height: 300px; background-color: #1c87c9; > .flex-container > div < width: 25%; padding: 5px 0; margin: 5px; background-color: lightgrey; text-align: center; font-size: 35px; > style> head> body> div class="flex-container"> div>1 div> div>2 div> div>3 div> div> body> html>

Результат

CSS свойство float ¶

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

Пример

html> html> head> title>Заголовок страницы title> style> .content < overflow: auto; border: 3px solid #666666; > .content div < padding: 10px; > .content a < color: darkblue; > .blue < float: right; width: 45%; background: #1c87c9; > .green < float: left; width: 35%; background: #8ebf42; > style> head> body> div class="content"> div class="blue"> p>Параграф в блоке div. p> a href="#">Гиперссылка в теге div. a> ul> li>Элемент списка 1 li> li>Элемент списка 2 li> ul> div> div class="green"> p>Параграф в блоке div. p> ol> li>Элемент списка 1 li> li>Элемент списка 1 li> ol> div> div> body> html>

Результат

Отрицательные отступы ¶

Использование отрицательных отступов (negative margins) открывает широкие возможности и позволяет сделать верстку более универсальной.

Пример

html> html> head> title>Заголовок окна веб-страницы title> style> .content div < padding: 2%; > .content a < color: darkblue; > .main-content < width: 30%; margin-left: 32%; > .blue < width: 25%; margin-top: -10%; background: #1c87c9; > .green < width: 20%; margin: -35% auto auto 70%; background: #8ebf42; > style> head> body> div class="content"> div class="main-content"> a href="#">Гиперссылка в теге div. a> div> div class="blue"> p>Параграф в теге div. p> a href="#">Гиперссылка в теге div. a> ul> li>Элемент списка 1 li> li>Элемент списка 2 li> ul> div> div class="green"> p>Параграф в теге div. p> ol> li>Элемент списка 1 li> li>Элемент списка 2 li> ol> div> div> body> html>

Результат

Позиционирование Relative + absolute positioning¶

Комбинация разных типов позиционирования для вложенных элементов — один из удобных и практичных приемов верстки. Если для родительского элемента задать position: relative , а для дочернего position: absolute , то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя.

Пример

html> html> head> title>Заголовок документа title> style> .content < position: relative; height: 400px; border: 1px solid #666666;> .content div < position: absolute; width: 35%; padding: 10px; > .blue < right: 20px; bottom: 0; background: #1c87c9; > .green < top: 10px; left: 15px; background: #8ebf42; > style> head> body> div class="content"> div class="blue"> p>Параграф в теге div. p> div> div class="green"> p>Параграф в теге div. p> div> div> body> html>

Результат

position: relative не влияет на позиционирование элементов в нормальном потоке, если вы не добавляете смещения.

Атрибуты

Как добавить стиль к тегу ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :

• CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
• CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
• CSS свойство font-size задает размер щрифта.
• CSS свойство font-weight устанавливает насыщенность шрифта.
• CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
• CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега :

Стили форматирования текста для тега :

• CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
• CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
• CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
• CSS свойство word-break указывает перенос строки.

Другие свойства для тега :

• CSS свойство text-shadow добавляет тень к тексту.
• CSS свойство text-align-last выравнивает последнюю строку текста.
• CSS свойство line-height устанавливает межстрочный интервал.
• CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
• CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Источник

Решаем задачку по CSS: как сделать один элемент разными цветами (без селектора класса)

Вы спрашивали: «Как окрасить каждый абзац своим цветом не вмешиваясь в HTML?» Мы отвечаем: «Для таких фокусов в CSS есть специальный псевдокласс nth-child». И сейчас мы рассмотрим один из вариантов его использования.

Для начала разберёмся, что такое псевдокласс. Псевдокласс в CSS это ключевое слово, добавленное к селектору, которое определяет его особое состояние. Вы точно видели это в стилях ссылок, :active — это и есть тот самый псевдокласс:

# цвет уже нажатой (кликнутой) ссылки станет красным и без подчеркивания a:active

Псевдокласс :nth-child позволяет находить один или более элементов по порядковому номеру и/или среди группы соседних элементов, чтобы применить к ним нужные стили. Т.е. это куда проще, чем каждому элементы создавать свой класс в стиле

Как это выглядит?

Элементы с нечетными номерами (1,3,5, etc): li :nth-child(odd)

Элементы с четными номерами (2,4,6, etc): li :nth-child(even)

Последний элемент: li :last-child

Второй элемент с конца: li :nth-last-child(2)

Все элементы, кроме первых пяти: li :nth-child(n+6)

Только первые пять элементов: li :nth-child(-n+5)

Еще примеры:

:nth-child(7) # Описывает седьмой элемент. :nth-child(5n) # Описывает элементы с номерами 5, 10, 15, и т. д. :nth-child(3n+4) # Описывает элементы с номерами 4, 7, 10, 13, и т. д. :nth-child(-n+3) # Описывает первые три элемента среди группы соседних элементов. p:nth-child(n) # Описывает каждый элемент 
среди группы соседних элементов. Эквивалентно простому селектору p. p:nth-child(1) или p:nth-child(0n+1) # Описывает каждый элемент 
, являющийся первым среди группы соседних элементов. Эквивалентно селектору :first-child.

Условия задачки

• Выполнить требования ниже НЕ изменяя HTML-код — только через CSS
• Сделать серый фон
• Цвет текста абзаца должен соответствовать тексту (первый зеленый, второй синий, последний розовый и т.д.)
• Скрытый абзац не должен быть виден
• В абзаце «Красный по центру» должен быть белый фон с красным текстом по центру

Итак, ниже наша заготовка в виде HTML. Обратите внимание — во всех абзацах внутри указаны цвета, в которые их нужно «окрасить». Проблема с селекторами .id и .class тут заключается в том, что они меняют либо один, либо все элементы на странице. Здесь нам нужен другой подход

       
Green
 
Blue
 
Red centered
 
 
Yellow
 
Green
 
Hidden
 
Green
 
Green
 
Purple
 
Pink
  

article < background-color: #e2e2e2; >div < display: inline-block; margin: 0 0 0 25%; padding: 0px 50px 0px 50px; background-color: white; >div.hidden < display: none; >p:nth-child(1), p:nth-child(5), p:nth-child(7), p:nth-child(8) < color: green; >p:nth-child(2) < color: blue; >p:nth-child(4) < color: yellow; >p:nth-child(9) < color: purple; >p:nth-child(10) < color: pink; >p:last-child

Сначала мы указываем текст фона (background-color) основного содержимого article. Далее для контейнера div мы прописываем внешние и внутренние отступы. Для div класса hidden — отдельный код. Мы его не прорисовываем (display: none;). Потом идёт в ход псевдокласс nth-child . Мы указываем расположение элемента на странице и задаем ему определенный цвет

Посмотреть пример

Источник

HTML colors, text, background and border

HTML colors are used to give a specific web page design, highlight certain words or paragraphs, a proper contrast, etc.
HTML colors are specified using color name, RGB, HEX, HSL, RGBA and HSLA value.

HTML background color — using inline CSS — examples

All you have to do is search the table with names and color codes in this lesson, choose one you like and write its name or code in the bgcolor attribute.
Let’s have an example: using .

 
 
 
  

 
 
 
HTML background color
 
In this lesson you will have color codes at the end of this page
 
 
 Here we have a strong Paragraph 
 
 Here we have an italic Paragraph 
 
Visit our HTML tutorial - this is a link 
 
 
 

 
 
 
  

 
 
Colored HTML text
 
 
your description here colored in green
 
 
your description here colored in red
 
 
 

 
 
 
  

 
 
Colored HTML text
 
 
your description here RGB colored
 
 
your description here HEX colored
 
 
your description here HSL colored
 
 
your description here colored in red
 
 
 

 
 
 
 
 
 
HTML border color - using inline CS
 
 
your text here red color
 
 
your text here green color