Как задать стиль параграфу

CSS: Классы

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

Чтобы задать стиль для класса в CSS используется селектор .название-класса . Обратите внимание на точку — именно так браузер понимает, что данный стиль указывается для класса.

.paragraph < color: #333333; /* Правило color устанавливает цвет текста. В данном случае — это серый цвет со значением #333333 */ >

Так как классов с одинаковым именем на странице может быть много, то это правило сработает для всех элементов, у которых атрибут класс равен paragraph .

Задание

В редакторе добавьте параграф с классом news и укажите для него цвет текста #553333 . Стили подключите с помощью тега .

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

• Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

CSS — Урок 3. Правила и селекторы CSS

CSS, как и любой язык, имеет свой синтаксис. В нем нет ни элементов, ни параметров, ни тегов. В нем есть правила. Правило состоит из селектора и блока объявления стилей, заключенного в фигурные скобки:

Сам блок объявления стилей состоит из свойств и их значений, разделенных точкой с запятой:

Давайте попробуем на практике. Откройте html-страницу и css-страницу, созданные в прошлом уроке. Давайте зададим нашей странице голубой фон. Как вы помните, за это отвечает тег , значит идем на страницу style.css и пишем следующий код:

Откройте вашу html-страницу в браузере и убедитесь, что ее фон стал синим. Теперь, давайте сделаем текст на странице белым цветом:

Обновите html-страницу в браузере (Ctrl+F5) и убедитесь, что теперь весь текст белого цвета. Теперь сделаем цвета заголовков красным (для h1) и желтым (для h2):

body < background: blue; color: white; >h1 < color:red; >h2 < color:yellow; >

Снова обновите страницу в браузере и убедитесь, что все так, как и задумывалось.

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

Селекторы CSS

Селекторы по идентификатору

В нашем примере в качестве селекторов использовались элементы страницы: body, h1, h2. Но что делать, если в нашей html-странице есть несколько одинаковых элементов (например, параграфов), и мы хотим, чтобы текст всех параграфов был черным, а одного из них — розовым цветом. Тогда нам понадобится указать уникальный идентификатор для этого параграфа и создать для него стиль.

В HTML идентификатор элемента задается при помощи параметра id, в качестве значения которого указывается уникальное имя. Например:

Текст параграфа с идентификатором (id).

Имена можно давать любые, кроме зарезервированных слов (к ним относятся имена тегов и параметров элементов HTML и CSS), например, нельзя идентификатору дать имя body. Давайте добавим в нашу html-страницу пару параграфов и одному из них присвоим идентификатор:

Это заголовок первого уровня

Здесь просто текст

Это заголовок второго уровня

Здесь просто текст

Абзац с идентификатором (id)

Внутренние CSS стили в HTML документе

— Ты уже знаешь, как можно добавить CSS стили конкретному HTML элементу, например изменить цвет текста внутри тега

. А что если нам необходимо это сделать это для нескольких HTML тегов одного типа?

— Так это же легко — просто добавляем каждому параграфу атрибут style и указываем нужное свойство.

p style="color: red">Красный текстp> p style="color: red">Еще один красный текстp> 

— Неплохо, но что если таких параграфов будет сто? А если больше? А если кроме цвета надо будет изменить размер шрифта?

Было бы намного удобнее один раз указать стиль, который применился бы ко всем тегам

, чем дублировать атрибут style в каждом из них.

Начнем с простого HTML документа без стилей.

 html> head> title>Внутренние стилиtitle> head> body> h1>Заголовокh1> p>Первый параграфp> p>Второй параграфp> body> html> 

Первая задача — установить размер шрифта внутри всех тегов

— 16px.

Чтобы избежать дублирования стилей, мы добавим парный тег . Внутри него — имя тега, и список свойств стилей которые мы хотим применить.

• начинаем с имени тега
• после него поставили две фигурные скобки
• внутри фигурных скобок — список нужных css свойств

style> p < font-size: 16px; > style> 

— А где мы должны использовать этот тег ?

— Сам тег мы используем внутри тега . Сразу после . Тогда наш HTML-документ будет выглядеть вот так:

 html> head> title>Внутренний стильtitle> style> p < font-size: 16px; > style> head> body> h1>Заголовокh1> p>Первый параграфp> p>Второй параграфp> body> html> 

Теперь размер шрифта внутри каждого параграфа будет 16px.

Вторая задача — сделать задний фон всех параграфов красным.

Для смены цвета заднего фона, мы добавим css свойство background-color . Цвет задается так же, как и цвет шрифта:

style> p < font-size: 16px; background-color: red; > style> 

— А если мы хотим изменить стили заголовка, нам надо добавлять еще один тег ?

— Нет. Внутри тега можно добавить столько тегов, сколько нужно. Давай попробуем изменить высоту заголовка , чтобы выделить его.

Делается это с помощью свойства height .

— Точно, я помню как с помощью атрибута height мы задавали высоту изображения.

style> h1 < height: 40px; > p < font-size: 16px; background-color: red; > style> 

Как видишь, мы просто добавили имя тега h1 и указали стили для него точно так же, как и для параграфа. Кстати, похожим образом можно добавить и ширину. Только теперь нужно использовать свойство width .

Третья задача — установить ширину всех параграфов 500px:

style> h1 < height: 40px; > p < width: 500px; font-size: 16px; background-color: red; > style> 

Если мы добавим еще один параграф на нашу веб-страницу, к нему сразу же применятся все стили описанные внутри .

 html> head> title>Внутренний стильtitle> style> p < font-size: 16px; > style> head> body> h1>Заголовокh1> p>Первый параграфp> p>Второй параграфp> hr> p> Длинный параграф, который мы добавили только что. В нем будут все те же стили, что и в предыдущих двух. Нет дублирования кода, что очень приятно :). p> body> html> 

Как и шрифт, свойства height и width можно не просто задавать в пикселях, но и относительно высоты родительского компонента. На это будет отдельная задача.

CSS: Запись стилей в теге style

Основная проблема использования атрибутов для определения стилей — их перегруженность. Часто разметка HTML содержит очень много элементов, а с добавлением стилей кода становится намного больше, что плохо сказывается на чтении разметки.

Вторая проблема — исправление стилей. Для этого необходимо сначала найти нужный элемент в коде, а потом отредактировать его стили. Таких элементов на странице может быть 10, 20, 100. А для одноимённых тегов придётся записывать стили отдельно для каждого элемента.

Возникает естественное желание иметь все стили в одном месте, где можно было бы их быстро редактировать. Таким решением является использование тега , внутри которого могут располагаться все необходимые стили.

Возьмём пример из прошлого урока:

 
Этот текст будет с размером шрифта 20 пикселей 
Вложенный параграф также будет иметь размер шрифта 20 пикселей
 
 

Чтобы избавиться от атрибутов, добавим тег style и укажем, что для тега используется шрифт размером в 20 пикселей.

 div 
Этот текст будет с размером шрифта 20 пикселей 
Вложенный параграф также будет иметь размер шрифта 20 пикселей
 
 

Таким же образом можно указать, что у параграфа будет размер шрифта 10 пикселей.

 div < font-size: 20px; >p 
Этот текст будет с размером шрифта 20 пикселей 
Вложенный параграф будет иметь размер шрифта 10 пикселей
 
 

Внутри тега использовалась конструкция вида:

имя_тега

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

/* Для всех элементов div будет установлен размер шрифта 20px */ div

Задание

Добавьте в редактор параграф и, используя тег style , установите размер шрифта в 10 пикселей.

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

• Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.