Разметка рецепта html academy решение

html academy испытание разметка текста

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 5388968ec89b96e6 • Your IP : 78.85.5.224 • Performance & security by Cloudflare

GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

HtmlAcademy / src / 003-Разметка_текста_с_помощью HTML / 017-Испытание_рецепт.html

Users who have contributed to this file

html >

head >

meta charset = » utf-8 » >

title >Рецепт каши title >

link rel = » stylesheet » type = » text/css » href = » 017-CSS.css » >

head >

body >

h1 > b >Пшенная каша с тыквой b > h1 >

p >

ol >

li >Пшено, 1 стакан li >

li >Вода H sub >2 sub >O или AquaLife sup >® sup >, 2 стакана li >

li >Молоко, del >1,5 стакана del > 2 стакана li >

li >Масло сливочное, 3 ст.л. li >

li >Тыква, около 300г li >

li >Соль, по вкусу li >

li > ins >Сахар демерара, посыпать сверху ins > li >

ol >

p >

hr >

p >

em >Примечания: em > br >

Пшено необходимо перебрать br >

Тыкву нарезать кубиками 1х1 см br >

Кашу перемешивать не надо

p >

body >

html >

• © 2019 GitHub, Inc.
• Terms
• Privacy
• Security
• Status
• Help

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Расчет значения специфичности [15/18]

Вы вдоволь наигрались со специфичностью, а теперь пришло время изучить полные правила её вычисления.

Специфичность селектора разбивается на 4 группы — a, b, c, d:

· если стиль встроенный, т.е. определен как style=». «, то а=1, иначе a=0;

· значение b равно количеству идентификаторов (тех, которые начинаются с #) в селекторе;

· значение c равно количеству классов, псевдоклассов и селекторов атрибутов;

· значение d равно количеству селекторов типов элементов и псевдо-элементов.

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

Посчитаем специфичность в нашем примере:

Селектор	a (style), b(#), c(:hover,.class), d(тэг, псевдо-элемент)	Число
span	0, 0, 0, 1
div .cat-in-box	0, 0, 1, 1
#floor .cat-in-box	0, 1, 1, 0
div span	0, 0, 0, 2
.cat-in-box	0, 0, 1, 0
#floor span	0, 1, 0, 1
.text li.error span <>	0, 0, 2, 2
#wrapper .text #message p a <>	0, 2, 1,2
#main .content a:hover <>	0, 1(#main), 2(pre,.content), 1(a:hover)

Остюда сразу видно, что в нашем примере самым приоритетным является селектор #floor .cat-in-box.

Ещё задачка на порядок кода [16/18]

Здесь все просто.

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

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

Источник

Правильное решение выделено красным.

Расчет значения специфичности [15/18]

Вы вдоволь наигрались со специфичностью, а теперь пришло время изучить полные правила её вычисления.

Специфичность селектора разбивается на 4 группы — a, b, c, d:

· если стиль встроенный, т.е. определен как style=». «, то а=1, иначе a=0;

· значение b равно количеству идентификаторов (тех, которые начинаются с #) в селекторе;

· значение c равно количеству классов, псевдоклассов и селекторов атрибутов;

· значение d равно количеству селекторов типов элементов и псевдо-элементов.

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

Посчитаем специфичность в нашем примере:

Селектор	a (style), b(#), c(:hover,.class), d(тэг, псевдо-элемент)	Число
span	0, 0, 0, 1
div .cat-in-box	0, 0, 1, 1
#floor .cat-in-box	0, 1, 1, 0
div span	0, 0, 0, 2
.cat-in-box	0, 0, 1, 0
#floor span	0, 1, 0, 1
.text li.error span <>	0, 0, 2, 2
#wrapper .text #message p a <>	0, 2, 1,2
#main .content a:hover <>	0, 1(#main), 2(pre,.content), 1(a:hover)

Остюда сразу видно, что в нашем примере самым приоритетным является селектор #floor .cat-in-box.

Ещё задачка на порядок кода [16/18]

Здесь все просто.

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

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

Источник

Начинаем дневник

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

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

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

Давайте отключим «стили проектирования» и вместо них подключим упрощённые стили, которые пока что будут оформлять все страницы. В следующих частях мы изучим стилизацию подробнее и усовершенствуем эти базовые стили.

• index.html Сплит-режим
• style.css Сплит-режим

День первый. Как я забыл покормить кота

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

Взгляд упал на кота. Кот издал настойчивое «Мяу». И я понял — пришло время для первой записи в блог. И покормить кота.

Источник

Конспект «Разметка текста»

Списки

Неупорядоченный список

Тег

(сокращение от «unordered list»). Используется, когда порядок элементов не важен. Например, для разметки перечня ссылок в меню, преимуществ товара, ингредиентов в составе продукта.

Непосредственно в теге

могут находиться только теги
(сокращение от «list item»), которые обозначают элементы или пункты списка:

По умолчанию элементы

отмечаются маркерами такого же цвета, как цвет текста.

• Я пункт списка, могу быть на любом месте
• И я пункт списка, и мне тоже не важен порядок

Упорядоченный список

Тег

(сокращение от «ordered list»). В этом списке действительно важно, в каком порядке идут элементы. Упорядоченные списки подходят для разметки алгоритмов, инструкций, рецептов, результатов соревнований и так далее.

Пункты упорядоченного списка тоже размечаются с помощью тега
. Пример кода:

По умолчанию перед элементами

ставится их порядковый номер.

1. Я первый и только первый пункт
2. Я не я, если я не второй пункт
3. Третий после стольких лет? Всегда!

У

может быть несколько атрибутов: start , reversed и type .

Атрибут start меняет стартовое число нумерации пунктов. Может быть отрицательным.

Атрибут reversed меняет направление нумерации на противоположный. Этот атрибут не требует значения.

С помощью атрибута type можно задавать различные типы маркеров: строчные и заглавные латинские буквы или римские цифры.

Список описаний

Тег (сокращение от «description list»). Список описаний используется для разметки вопросов-ответов, наименований и определений, категорий и тем. Он создаётся с помощью трёх тегов:

• обозначает сам список описаний;
• (сокращение от «description term») обозначает термин;
• (сокращение от «description definition») обозначает описание или определение.

Теги и пишутся внутри . Каждый список может содержать один или несколько терминов и одно или несколько описаний для каждого термина. Пример кода:

По умолчанию браузер добавляет небольшой отступ слева от определений.

Преформатированный текст и код

Тег . Используется для обозначения фрагментов кода.

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

Тег можно вкладывать внутрь тега

Тег может быть самостоятельным и не привязываться к цитате:

Длинные цитаты

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

В браузере контенту тега

обычно добавляется дополнительный отступ слева и справа.

Ум ценится дорого, когда дешевеет сила.

Разметка фрагментов текста

Символы-мнемоники

Это особые строки, которые начинаются с амперсанда (&) и заканчиваются точкой с запятой (;). Например, знак меньше на страницу можно вставить мнемоникой (less than), а знак больше мнемоникой > (greater than):

Некоторые символы в HTML зарезервированы, то есть браузер считает их HTML-кодом. Например, любой текст после знака меньше (
(сокращение от «line break»). Применяется, чтобы вставить в текст перенос строки, не создавая при этом абзац. Например, при разметке стихов или текстов песен.

Верхний и нижний индексы

Теги и _{. Названия образованы от слов «superscript» и «subscript».}

Тег отображает текст в виде верхнего индекса, а _{отображает текст в виде нижнего индекса.}

Их используют для указания единиц измерения или для написания простых формул:

Для создания более сложных формул, эти теги можно использовать внутри друг друга.

Дата и время

Тег . С помощью него можно описывать даты одновременно и для человека, и для машины. Для указания даты в машиночитаемом формате ISO 8601 существует атрибут datetime и выглядит так:

Браузер отображает только содержимое тега, а содержимое datetime не отображается.

Акцентирование внимания

Теги и . Названия образованы от слов «emphasis» и «italic». Предназначены для акцентирования внимания на слово или фразу. Визуально оба тега одинаковы, они выделяют текст курсивом.

Тег определяет текст, на который сделан особый акцент, меняющий смысл предложения.

Тег применяется для обозначения текста, который отличается от окружающего текста, но не является более важным. Например, в можно заключать названия, термины, иностранные слова. Также в этот тег можно обернуть мысли героя. В речи такой текст обычно выделяется интонационно:

Выделение и придание важности

Теги и . Название образовано от слова «bold». Отображаются оба тега одинаково, они выделяют текст жирным.

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

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

Описание изменений

Разделение контента

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

Источник

Html academy испытание рецепт

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 554e07601adac286 • Your IP : 91.146.8.87 • Performance & security by Cloudflare

Please note that GitHub no longer supports your web browser.

We recommend upgrading to the latest Google Chrome or Firefox.

Join GitHub today

GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

HtmlAcademy / src / 003-Разметка_текста_с_помощью HTML / 017-Испытание_рецепт.html

html >

head >

meta charset = » utf-8 » >

title >Рецепт каши title >

link rel = » stylesheet » type = » text/css » href = » 017-CSS.css » >

head >

body >

h1 > b >Пшенная каша с тыквой b > h1 >

p >

ol >

li >Пшено, 1 стакан li >

li >Вода H sub >2 sub >O или AquaLife sup >® sup >, 2 стакана li >

li >Молоко, del >1,5 стакана del > 2 стакана li >

li >Масло сливочное, 3 ст.л. li >

li >Тыква, около 300г li >

li >Соль, по вкусу li >

li > ins >Сахар демерара, посыпать сверху ins > li >

ol >

p >

hr >

p >

em >Примечания: em > br >

Пшено необходимо перебрать br >

Тыкву нарезать кубиками 1х1 см br >

Кашу перемешивать не надо

p >

body >

html >

• © 2020 GitHub, Inc.
• Terms
• Privacy
• Security
• Status
• Help

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Расчет значения специфичности [15/18]

Вы вдоволь наигрались со специфичностью, а теперь пришло время изучить полные правила её вычисления.

Специфичность селектора разбивается на 4 группы — a, b, c, d:

· если стиль встроенный, т.е. определен как style=». «, то а=1, иначе a=0;

· значение b равно количеству идентификаторов (тех, которые начинаются с #) в селекторе;

· значение c равно количеству классов, псевдоклассов и селекторов атрибутов;

· значение d равно количеству селекторов типов элементов и псевдо-элементов.

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

Посчитаем специфичность в нашем примере:

Селектор	a (style), b(#), c(:hover,.class), d(тэг, псевдо-элемент)	Число
span	0, 0, 0, 1
div .cat-in-box	0, 0, 1, 1
#floor .cat-in-box	0, 1, 1, 0
div span	0, 0, 0, 2
.cat-in-box	0, 0, 1, 0
#floor span	0, 1, 0, 1
.text li.error span <>	0, 0, 2, 2
#wrapper .text #message p a <>	0, 2, 1,2
#main .content a:hover <>	0, 1(#main), 2(pre,.content), 1(a:hover)

Остюда сразу видно, что в нашем примере самым приоритетным является селектор #floor .cat-in-box.

Ещё задачка на порядок кода [16/18]

Здесь все просто.

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

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

Источник