Почему не делает название магазина более жирным?

Question

Илья @Sinastra

HTML
CSS

Почему не делает название магазина более жирным?

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

Вопрос задан более двух лет назад
76 просмотров

8 комментариев

Подписаться 1 Простой 8 комментариев

Ankhena @Ankhena Куратор тега CSS

Хорошо было бы начать с правил сервиса.
Они запрещают выкладывать код скринами.
Т.е. либо кодом в спойлере либо в песочницу на codepen.io (так быстрее можно разобраться в чем дело).

Какой прекрасный селектор использует автор видео section header .logo {}. Не смотрите его больше.

Написано более двух лет назад
Антон @Eridani

calss="logo"
Внимательно погляди

Написано более двух лет назад
v3shin @v3shin

Вставьте код текстом.

Написано более двух лет назад

Илья @Sinastra Автор вопроса

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Art Case Store</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <section>
        <header>
            <div class="circle"></div>
            <div class="circles"></div>
            <a href="#" calss="logo">Art<span>Case</span><span>Store</span></a>
            <ul>
                <li><a href="#">Главная</a></li>
                <li><a href="#">Товары</a></li>
                <li><a href="#">Категории</a></li>
                <li><a href="#">Новости</a></li>
                <li><a href="#">Контакты</a></li>
            </ul>
            <p>Войти</p>
        </header>
    </section>
    
</body>
</html>

Написано более двух лет назад

Илья @Sinastra Автор вопроса

v3shin,

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

section{
    width: 100%;
    height: 100vh;
}

section header{
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);    
}

section header .logo{
    font-size: 30px;
    color: black;
    text-decoration: none;
    font-weight: bold;
    margin: 15px 0;
}

Написано более двух лет назад

Илья @Sinastra Автор вопроса

Ankhena, оставил код снизу

Написано более двух лет назад
v3shin @v3shin

Sinastra, ну так в вопрос его добавьте вместо картинок.
А по теме: ага, вы опечатались в слове "calss".

Написано более двух лет назад
Илья @Sinastra Автор вопроса

v3shin, благодарю)

Написано более двух лет назад

Решения вопроса 1

Комментировать

Пригласить эксперта

Ответы на вопрос 1

3 комментария

Ivan Gavrilich @joseffie

Очень ужасное решение.

Во-первых, семантически неверно размещать блочный тег внутри строчного и для каждого пункта меню прописывать тег "h1", ибо на странице он может быть всего один.

Во-вторых, у тегов заголовков вполне можно очень просто отключить жирное начетание случайно/намеренно, из-за чего "font-weight: 700' у элементов благополучно пропадёт.

Написано более двух лет назад
bacon_off @bacon_off

Ivan Gavrilich, ну, я по его же аналогии описал) а почему бы под h1 не сделать название сайта?
я лишь предложил вариант, не ругайся :D

Написано более двух лет назад
Ankhena @Ankhena Куратор тега CSS

Ivan Gavrilich,
Во-первых, семантически неверно размещать блочный тег внутри строчного

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

для каждого пункта меню прописывать тег "h1", ибо на странице он может быть всего один.

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

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

Написано более двух лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 5 часов назад
- 28 просмотров
1

ответ
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 8 часов назад
- 23 просмотра
0

ответов
HTML

Простой
Как на html реализовать блоки «Внимание / Важно»?
- 1 подписчик
- 8 часов назад
- 82 просмотра
0

ответов
HTML

+1 ещё

Простой
Как разместить елементы с разных блоков чтобы они перекрывали друг друга?
- 1 подписчик
- 11 часов назад
- 41 просмотр
1

ответ
CSS

Простой
Как сделать border со смещением?
- 1 подписчик
- вчера
- 94 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- вчера
- 71 просмотр
1

ответ
HTML

+1 ещё

Простой
Flex и position: sticky, почему не работает?
- 1 подписчик
- 19 нояб.
- 67 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как построить код, чтобы гугл таблица на сайте выдавала только значение из конкретной ячейки?
- 1 подписчик
- 19 нояб.
- 39 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Как выделить мышкой область на странице и присвоить класс элементам попавшим в эту область?
- 1 подписчик
- 19 нояб.
- 101 просмотр
1

ответ
JavaScript

+3 ещё

Средний
Как сделать слайдер на swiper, в котором активный слайд всегда крайний слева?
- 1 подписчик
- 19 нояб.
- 109 просмотров
1

ответ
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Разработка алгоритма на python (Data engineering)

21 нояб. 2024, в 23:30

300000 руб./за проект

Верстка Flutter + API

21 нояб. 2024, в 22:21

3000 руб./в час

Разработать Custom Speech-to-text Operator на Apache Flink

21 нояб. 2024, в 21:42

100000 руб./за проект

Хорошо было бы начать с правил сервиса.
Они запрещают выкладывать код скринами.
Т.е. либо кодом в спойлере либо в песочницу на codepen.io (так быстрее можно разобраться в чем дело).

Какой прекрасный селектор использует автор видео section header .logo {}. Не смотрите его больше.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Art Case Store</title> <link rel="stylesheet" href="style.css"> </head> <body> <section> <header> <div class="circle"></div> <div class="circles"></div> <a href="#" calss="logo">Art<span>Case</span><span>Store</span></a> <ul> <li><a href="#">Главная</a></li> <li><a href="#">Товары</a></li> <li><a href="#">Категории</a></li> <li><a href="#">Новости</a></li> <li><a href="#">Контакты</a></li> </ul> <p>Войти</p> </header> </section> </body> </html>
v3shin,
*{ margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; } section{ width: 100%; height: 100vh; } section header{ display: flex; align-items: center; justify-content: space-around; box-shadow: 0 0 20px rgba(0,0,0,0.3); } section header .logo{ font-size: 30px; color: black; text-decoration: none; font-weight: bold; margin: 15px 0; }
Sinastra, ну так в вопрос его добавьте вместо картинок.
А по теме: ага, вы опечатались в слове "calss".

Answer 1 · 2022-11-09 16:41:06

Стили не применяются, потому что вы неправильно написали атрибут "class" (у вас это "calss") у лого.

Просто исправьте

<a href="#" calss="logo">Art<span>Case</span><span>Store</span></a>

на

<a href="#" class="logo">Art<span>Case</span><span>Store</span></a>

И в следующий раз внимательнее проверяйте свой код, прежде чем написать вопрос.

Answer 2 · 2022-11-09 13:03:35

bacon_off @bacon_off

<a href='#' class logo><h1>ArtCaseStore</h1></a>

попробуй так оформить, у h1-h6 уже имеется жирное начертание

Ответ написан более двух лет назад

3 комментария

Почему не делает название магазина более жирным?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт