как сделать, чтобы цвет текста bg в css занимал весь экран по ширине

#html #css

#HTML #css

Вопрос:

Я начинаю с html и css и хочу знать, как придать строке текста цвет фона. Например :

 #python-heading {
    font-family: 'Arvo', serif;
    position: absolute;
    bottom: 600px;
    left: 600px;
    background-color: #DEE0D9;
}

 <body>
        <header>
            <span><h1 id="python-heading">Python</h1></span>
            <h2 id="python-subheading">Subtitle</h2>
        </header>
</body>

но мой текст не занимает всю область за текстом. я имею в виду, что я хочу, чтобы это было так:

дефис => цвет bg

——————————————-текст———————————————————

но это так:

                                       -text-

что мне нужно изменить / добавить?

1. Уважаемый @Ght007 У вас есть представление о том, чего вы пытаетесь достичь 🙂 Я мог бы получить его полностью… В вашем HTML есть <h1 id=»python-heading»> Python</h1> Python как текст справа, и вы хотите, чтобы тире были такими —— Python —— Почему CSS? Это твой вопрос, друг 🙂

Ответ №1:

Я думаю, вам следует избегать использования h1 inside span и просто h1 следовать изменениям кода. (Если я правильно понял ваш вопрос, это может помочь)

 #python-heading {
    background-color: #DEE0D9;
    text-align:center;
}

 <header>
 <h1 id="python-heading">Python</h1>
 <h2 id="python-subheading">Subtitle</h2>
</header>

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

2. Это поле по умолчанию для элементов заголовка в HTML, вам просто нужно использовать h1, h2{margin-bottom:0;} Обратите внимание, что span — это встроенный элемент, а h1 — элемент уровня блока , не используйте h1 внутри span 🙂 Это не рекомендуется, мой друг

Ответ №2:

Добавить width:100%; и изменить left:600px; на padding-left:600px;

 #python-heading {
    font-family: 'Arvo', serif;
    position: absolute;
    width:100%;
    bottom: 600px;
    left:0;
    padding-left: 600px;
    background-color: #DEE0D9;
}

 <body>
        <header>
            <span><h1 id="python-heading">Python</h1></span>
            <h2 id="python-subheading">Subtitle</h2>
        </header>
</body>