Оформление текста часть 1 испытание рецепт на css: рецепт на CSS [16/16] · GitHub

Leave a Comment / Css / By /

Оформление текста CSS

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, как задать размер шрифта в CSS. В данной статье я бы хотел рассказать, как задать стиль и насыщенность (по-другому называют жирность) для шрифта в CSS. В данной статье мы изучили некоторые теги, с помощью которых можно задавать стиль и насыщенность для текста на html-странице. Но это неправильно, html должен задавать только структуру сайта, всё оформление должно быть сделано с помощью CSS. Курсив мы задавали с помощью тега <i>. В CSS за это отвечает свойство font-style со значением italic. Давайте создадим тестовую html-страницу:


<html>
<head>
	<meta charset="utf-8"/>
	<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p>Первый абзац данного текста</p>
<p>Второй абзац данного текста</p>
</body>
</html>

Для абзацев в файле стилей style. css зададим стиль шрифта:


p {
font-style:italic;
}

После обновления страницы вы увидите, что шрифт стал курсивным. Другие значения для свойства font-style:
normal — стандартное начертание текста
oblique — наклонное начертание текста (не то же самое, что курсивное). Разницу можно будет заметить не для всех шрифтов.

Я всегда использовал только значение italic, других никогда нигде не использовал.

Давайте теперь зададим насыщенность или жирность для нашего текста. Делается это с помощью свойства font-weight (weight с англ «вес», так сказать вес шрифта) со значением bold:


p {
font-weight:bold;
}

Если вы запустите данную страницу, то увидите, что текст стал полужирным. Значение для насыщенности можно задавать равным от 100 до 900 с шагом 100. 100 — это самое светлое начертание, которое способен отобразить браузер, 900 — самое темное. Стандартный шрифт соответствует значению 400, полужирный (тот, который получается при значении bold — 700).

Задание насыщенности в числах как-то не прижилось, и не все браузеры это отобразят (я сам тестировал в некоторых браузерах, но так и не заметил разницы между 100 и 600). Стандартную насыщенность можно задать с помощью свойства normal, что иногда требуется:


p {
font-weight:normal;
}

Следующее свойство, которое служит для оформления текста — это text-decoration. Оно служит для того, чтобы мы могли сделать текст, например, подчеркнутым (значение underline). В html для этого служит тег <u>. С помощью этого свойства мы можем также подчеркнуть текст сверху (overline) и перечеркнуть текст (line-through). Убрать декорацию текста можно с помощью значения none. Давайте создадим тестовую html-страницу и применим на ней inline-стиль для каждого абзаца:


<html>
<head>
	<meta charset="utf-8"/>
</head>
<body>
<p>Подчеркнутый абзац данного текста</p>
<p>Надчеркнутый абзац данного текста</p>
<p>Перечеркнутый абзац данного текста</p>
<p>Простой абзац данного текста</p>
</body>
</html>

Запустите данную страницу и убедитесь, что всё работает, как нужно.

Домашнее задание: в данной статье мы рассмотрено 3 свойства и у данных свойств много значений. Запомнить их все трудно, но если практиковаться, то будет намного проще. Поэтому создайте свою html-страницу и примените к ней все те свойства, которые вы изучили в данной статье.

В данной статье вы узнали как оформлять текст с помощью свойств

font-style, font-weight, text-decoration.

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.


Опубликовано от Алексей Гулынин Оставить комментарий

Следующая статья >

Комментарии:

Текст | WebReference

По умолчанию размер шрифта основного текста установлен как 14px, а межстрочное расстояние (значение свойства line-height) — 1. 428. Между абзацами текста (элемент <p>) введено дополнительное расстояние в 10 пикселей.

Заголовки

Для заголовков применяются знакомые из HTML элементы с <h2> по <h6>. Их стиль немного отличается от исходного (рис. 1).

Рис. 1. Вид заголовков текста

Заголовки допустимо немного уменьшить самостоятельно, если внутрь вставить элемент <small>, получится такая комбинация.

<h2><small>Заголовок первого уровня</small></h2>

Такого типа заголовки по виду несколько иные и предназначены для других разделов сайта, например, боковой панели (рис. 2).

Рис. 2. Уменьшенные заголовки

Лид

Лидом в журналистике называют первый абзац статьи привлекающий внимание и дающий краткое представление о содержании статьи. Обычно он по своему виду немного отличается от основного текста. Чтобы указать лид достаточно к абзацу или колонке добавить класс lead, как показано в примере 1.

Пример 1. Создание лида

<p>Дорогой друг! Я расскажу тебе удивительную историю
 про маленького червячка, который жил в яблоке,
 о его путешествии в волшебную страну Нортландия, о том,
 какие опасности подстерегали его на пути, кого он повстречал
 по дороге, какие приключения и испытания прошёл,
 и что он рассказал по возвращению домой.</p>
<p>Итак, сказка про маленького червячка, который жил в яблоке,
 о его путешествии в волшебную страну Нортландия, о том,
 какие опасности подстерегали его на пути, кого он повстречал
 по дороге, какие приключения и испытания прошёл,
 и что он рассказал по возвращению домой.</p>

Результат данного примера показан на рис. 3.

Рис. 3. Вид лида в браузере

Аббревиатура

Аббревиатура это сложносокращённое слово (колхоз) или слово, полученное из первых букв слов предложения (КГБ). Для обозначения аббревиатур в тексте применяется элемент <abbr>, а для расшифровки внутрь него добавляется атрибут title (пример 2).

Пример 2. Аббревиатура

<p><abbr title="Cascading Style Sheets, Каскадные таблицы стилей">CSS</abbr> —
  набор параметров форматирования, который применяется к элементам
  документа, чтобы изменить их внешний вид. </p>

Аббревиатура обозначается точечным подчёркиванием, при наведении на слово курсора мыши он меняет свой вид на подсказывающий и появляется всплывающая подсказка, если она есть.

При добавлении класса initialism к элементу <abbr> для него устанавливается свойство font-size со значением 90%, тем самым аббревиатура выводится уменьшенного размера.

<abbr title="Cascading Style Sheets, каскадные таблицы стилей">CSS</abbr>

Цитаты

Для оформления больших цитат в HTML применяется элемент <blockquote>, но Bootstrap немного меняет его оформление (рис. 4). Слева от цитаты отображается серая вертикальная линия, а имя автора или источник цитаты выводится уменьшенным размером и серого цвета.

Рис. 4. Вид цитаты в браузере

Если сама цитата делается весьма традиционно, то подпись к ней добавляется с помощью элемента <small> или <footer>, как показано в примере 3.

Пример 3. Добавление цитаты

<blockquote>
 <p>Нельзя сказать человеку: «Ты можешь творить. 
  Так давай, твори». Гораздо вернее подождать, пока он 
  сам не скажет: «Я могу творить, и я буду творить, хотите 
  вы этого или нет».</p>
 <p><small>Айзек Азимов</small></p>
</blockquote>

Цитату можно инвертировать, тогда линия будет справа, а текст выравниваться также по правому краю (рис. 5).

Рис. 5. Цитата, выравненная по правому краю

Просто добавьте класс pull-right к <blockquote>.

<blockquote>...</blockquote>

Листинг

Нам часто приходится выкладывать листинги программ и указывать переменные. В HTML для этого есть несколько готовых элементов — <var> обозначает отдельные переменные, <code> — строчный фрагмент кода, а <pre> используется для многострочного кода (пример 4).

Пример 4. Вывод программы

<p>Функция <code>checkParent()</code> вызывается 
  с параметрами <var>src</var> и <var>dest</var>.</p>
<pre>function checkParent (src, dest) {
  while (src != null) {
    if (src.tagName == dest) 
      src = src.parentElement
    }
  return null
}</pre>

Результат данного примера показан на рис. 6.

Рис. 6. Вид кода программы в браузере

Элемент <pre> занимает высоту равную его содержимому, что для больших листингов может быть неудобно. Чтобы ограничить высоту достаточно добавить класс pre-scrollable, тогда высота будет равна 350 пикселей и появится вертикальная полоса прокрутки.

Автор: Влад Мержевич

Последнее изменение: 15.06.2017

Набор тестов CSS1: 5.4.3 text-decoration

Набор тестов CSS1: 5.4.3 text-decoration

Объявления стилей, которые применяются к приведенному ниже тексту:

 .one {украшение текста: подчеркивание;}
. two {украшение текста: надчеркивание;}
.three {украшение текста: сквозной;}
.four {украшение текста: мигание;}
B.five {украшение текста: нет;}
.six {украшение текста: подчеркивание над чертой;}
.seven {украшение текста: подчеркивание, сквозная линия;}

Это предложение следует подчеркнуть.

Это предложение должно быть зачеркнуто.

В этом предложении должен быть зачеркнут текст (перечеркнутый).

Этот элемент должен мигать. (Однако не обязательно, чтобы UA поддерживали такое поведение.)

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

Это предложение следует подчеркнуть и зачеркнуть.

Это предложение должно быть подчеркнуто, зачеркнуто и вычеркнуто.

Между этим предложением и предыдущим не должно быть ничего видимого (есть пустой элемент абзаца с классом семь).

Оформление текста применяется только к тексту элемента, поэтому изображение в конце этого предложения должно быть зачеркнуто , а не : . Однако подчеркивание родительского элемента должно сохраняться под изображением, поскольку text-decoration «охватывает» дочерние элементы.

Подчеркивание в этом предложении должно быть зеленым, независимо от цвета текста.

Цвета подчеркивания в этом предложении должны быть такими же, как и у исходного текста (то есть первое слово в предложении должно быть черным).

ТАБЛИЦА Испытательная секция
 

Это предложение следует подчеркнуть.

Это предложение должно быть зачеркнуто.

В этом предложении должен быть зачеркнут текст (перечеркнутый).

Этот элемент должен мигать. (Однако не обязательно, чтобы UA поддерживали такое поведение. )

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

Это предложение следует подчеркнуть и зачеркнуть.

Это предложение должно быть подчеркнуто, зачеркнуто и вычеркнуто.

Между этим предложением и предыдущим не должно быть ничего видимого (есть пустой элемент абзаца с классом семь).

Оформление текста применяется только к тексту элемента, поэтому изображение в конце этого предложения должно быть зачеркнуто , а не : . Однако подчеркивание родительского элемента должно сохраняться под изображением, поскольку text-decoration «охватывает» дочерние элементы.

Подчеркивание в этом предложении должно быть зеленым, независимо от цвета текста.

Цвета подчеркивания в этом предложении должны быть такими же, как и у исходного текста (то есть первое слово в предложении должно быть черным).

Как использовать CSS для создания расписания рецептов

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

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

Мы будем использовать поля и отступы, чтобы правильно расставить интервалы внутри нашей мини-таблицы. Однако мы будем использовать некоторые новые свойства CSS, такие как вертикальное выравнивание и размер окна. Если вам нужно просмотреть эти свойства, вы можете вернуться к этому сообщению, чтобы узнать больше о том, как эти свойства работают в CSS, и посмотреть примеры.

Теперь откройте текстовый редактор и откройте файл style.css. Не забудьте также открыть файл index.html и руководство по стилю, чтобы вы могли обращаться к ним в этом посте. Студенты Skillcrush могут оставить файл style-guide.md открытым в текстовом редакторе, если хотите, или вы можете использовать документацию в HTML-файле «Как настроить карты рецептов».

Задача 1: Стиль заголовка рецепта

1. Давайте начнем с добавления стиля для всех названий рецептов. В файле style.css создайте новый селектор. Мы хотим выбрать элемент h3 в классе recipe, поэтому вы хотите, чтобы ваш селектор был .recipe h3.

2. Внутри селектора .recipe h3 мы добавим три свойства. Этими свойствами являются цвет, размер шрифта и семейство шрифтов. Установите эти значения с теми, которые перечислены в Skillcrush в документации руководства по стилю.

3. Давайте сделаем заголовок h3 полужирным и заглавным. Добавьте свойства text-transform и font-weight внутри селектора .recipe h3. Установите толщину шрифта жирным шрифтом. Свойство text-transform должно быть установлено в верхний регистр.

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

 .рецепт h3 {
    поле сверху: 0;
    семейство шрифтов: 'Montserrat', без засечек;
    размер шрифта: 24px;
    вес шрифта: полужирный;
    преобразование текста: верхний регистр;
    высота строки: 29px;
    цвет: #F16059;
}
Войти в полноэкранный режимВыйти из полноэкранного режима

Задача 2: Создать расписание

1. Мы начнем создавать мини-таблицу, в которой будет информация о времени. Для этого мы добавим стили в div с классом времени . В файле style.css создайте новый селектор. Назовите этот новый селектор .time, чтобы мы могли выбрать класс времени.

2. Теперь мы можем начать добавлять свойства CSS. Внутри селектора . time добавьте свойство margin-bottom. Мы хотим добавить небольшое поле внизу таблицы, поэтому установите значение свойства margin-bottom на 20px.

3. Добавим рамку мини-таблице. Skillcrush хочет, чтобы вокруг информации о времени была тонкая темно-серая рамка. Внутри вашего селектора .time вы захотите добавить свойства границы, которые вам понадобятся. Вы можете найти шестнадцатеричный код цвета границы в руководстве по стилю, в то время как Skillcrush хочет, чтобы ширина границы была установлена ​​​​на 1 пиксель и имела сплошной стиль границы.

Есть два способа добавить рамку на веб-сайт, поэтому выберите один из этих способов для использования на своем сайте. Во-первых, вы можете индивидуально установить каждое из свойств границы внутри вашего селектора .time. В коде решения Skillcrush они предлагают учащимся устанавливать стили границ, используя свойства border-width, border-style и border-color. Если вы хотите использовать этот метод, добавьте эти свойства в свой селектор . time.

 .время {
    нижняя граница: 20px;
    ширина границы: 1px;
    стиль границы: сплошной;
    цвет границы: #3B3B3B;
}
Войти в полноэкранный режимВыйти из полноэкранного режима

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

 .время {
   граница: 1px сплошная #3B3B3B;
}
Войти в полноэкранный режимВыйти из полноэкранного режима

4. Последнее, что нам нужно сделать, это очистить все плавающие элементы, которые в конечном итоге появятся в расписании. Внутри вашего селектора .time вы хотите добавить свойство переполнения. Установите для свойства переполнения значение auto.

5. Сохраните файл и дважды проверьте свой веб-сайт в браузере. Поле времени теперь будет иметь серую рамку вокруг элементов времени.

 .время {
    нижняя граница: 20px;
    ширина границы: 1px;
    стиль границы: сплошной;
    цвет границы: #3B3B3B;
    переполнение: авто;
}
Войти в полноэкранный режимВыйти из полноэкранного режима

Задача 3: Выделить и оформить все элементы div в классе time

1. Теперь мы собираемся обратить внимание на теги div внутри класса time. Внутри файла style.css создайте новый селектор с именем .time div. Мы собираемся начать добавлять свойства CSS.

Внутри селектора div .time добавьте свойства padding-left, width и float. Установите для свойства float значение left. Чтобы получить некоторое расстояние слева от наших div, мы собираемся установить padding-left на 6px. Наконец, мы установим свойство ширины на 33,3333%.

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

Внутри файла style.css добавьте свойство box-sizing в селектор div .time. Установите для этого свойства значение border-box.

3. Нам нужно добавить еще одно свойство в селектор .time div. Последнее свойство, которое вам понадобится, это свойство text-transform. Добавьте это свойство в свой селектор div .time. Установите значение в верхний регистр.

4. Сохраните файл style.css и дважды проверьте свой веб-сайт в браузере.

 .время дел {
    плыть налево;
    отступ слева: 6px;
    ширина: 33,3333%;
    box-sizing: граница-коробка;
    преобразование текста: верхний регистр;
}
Войти в полноэкранный режимВыйти из полноэкранного режима

Задача 4: Добавить стили в блок повара

1. Мы начнем добавлять стили в блок повара в центре нашего расписания. Внутри вашего style.css создайте новый селектор с именем .time .cook. Это выберет блок повара внутри блока времени. Вы также можете вызвать div повара, просто используя . cook в качестве селектора.

2. Здесь нам нужно добавить границу вокруг блока повара, чтобы он выглядел как таблица. Внутри селектора .time .cook добавьте свойства border-width, border-style и border-color. Здесь вы можете установить отдельные свойства границы или установить свойство границы со всеми значениями границы.

Skillcrush требует тот же стиль границы, который вы использовали для селектора .time. Поэтому скопируйте и вставьте свои значения границ из класса .time, который вы создали ранее, и поместите их в свой селектор .time .cook.

 .время .повар {
    ширина границы: 0 1px;
    стиль границы: сплошной;
    цвет границы: #3B3B3B;
}
Войти в полноэкранный режимВыйти из полноэкранного режима

Задача 5: Добавить стили к значкам

1. Обратим внимание на значки, которые находятся рядом с нашим текстом времени. Создайте новый селектор с именем .time img. Это выберет изображения в классе времени.

Если вы используете Font Awesome, вы захотите использовать i вместо изображений. Таким образом, ваш селектор будет .time i вместо .time img.

2. Войдите в свой новый селектор. Здесь мы собираемся добавить несколько свойств CSS. Начнем с ширины и высоты.

Добавьте свойство ширины и установите его на 15 пикселей. Затем добавьте свойство высоты. Установите для этого свойства значение auto. Auto позволяет браузеру регулировать высоту в соответствии с изображениями.

3. Сохраните файл style.css и проверьте веб-сайт карточек рецептов в браузере. Теперь у вас будут границы внутри и снаружи времени рецепта. Ваши изображения также изменятся, чтобы соответствовать браузеру.

 .время изображения {
    поле справа: 5px;
    вертикальное выравнивание: посередине;
    ширина: 15 пикселей;
    высота: авто;
}
Войти в полноэкранный режимВыйти из полноэкранного режима

Задача 6: Добавить стили для текста времени

1. Теперь, когда значки готовы, последнее, что нам нужно сделать, это настроить текст так, чтобы он находился на одной линии со значками. Создайте новый селектор с именем .time-details.

2. Внутри нового селектора добавьте свойство отображения. Установите для свойства display значение inline-block. Inline-block не только поместит значки и текст в одну строку, но и добавит нам поля и отступы.

3. Мы собираемся сделать небольшой перерыв в селекторе .time-details, чтобы добавить больше стилей к нашим иконкам. Внутри вашего селектора .time img (или .time i, если вы используете Font Awesome) добавьте margin-right. Установите для свойства margin-right значение 5px.

Затем добавьте свойство вертикального выравнивания. Установите для свойства vertical-align значение middle.

 .время изображения {
    поле справа: 5px;
    вертикальное выравнивание: посередине;
    ширина: 15 пикселей;
    высота: авто;
}
.время-детали {
    отображение: встроенный блок;
}
Войти в полноэкранный режимВыйти из полноэкранного режима

4. Создать новый селектор с именем .time strong. Это будет нацелено на сильные теги внутри класса времени. Внутри этого селектора добавьте свойство font-family.

Задайте для свойства font-family акцентный шрифт, рекомендованный в руководстве по стилю. Это изменит текст внутри сильных тегов на акцентный шрифт без изменения шрифтов другого текста.

 .time сильный {
    семейство шрифтов: 'Montserrat', без засечек;
}
Войти в полноэкранный режимВыйти из полноэкранного режима

5. Последнее, что нужно сделать, это добавить отступы над и под заголовком. Skillcrush хочет, чтобы учащиеся использовали свойства line-height и margin-top для создания этого интервала на сайте. Вернитесь к селектору .recipe h3.

Внутри селектора добавьте свойство margin-top. Установите для этого свойства значение 0px. Добавьте под ним свойство line-height. Установите для свойства line-height значение 29 пикселей.

6. Сохраните файл style.css, а затем проверьте веб-сайт карты рецептов в браузере. Теперь ваш сайт должен выглядеть так, как показано на изображении в начале этого поста.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *