Блог

Главная - Вопросы по программированию - как изменить цвет 2-го заголовка в html

как изменить цвет 2-го заголовка в html

#html

#HTML

Вопрос:

У меня есть HTML-страница, которая начинается с заголовка, за которым следует таблица, и второго заголовка, за которым следует вторая таблица. Первый заголовок красного цвета, я хочу получить второй заголовок, скажем, зеленого цвета. Я пытаюсь использовать тот же текст / css, который задает красный цвет, но, похоже, работает не так, как я настраиваю. Выделение другого стиля зеленым цветом непосредственно перед вторым заголовком также делает первый заголовок зеленым. Пожалуйста, помогите.

 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<meta name="generator" content="SQL*Plus 19.7.0">
<TITLE>GG - Missing Index</TITLE>  <STYLE type='text/css'>

BODY{
  background:white;
  text-align:Left;
  font-family:calibri;
  font-size:20px;
  border:1px solid black;
  font-weight:bold;
  color:red;
  }


TH{
  background: gold;
  color:black;
  font-family:calibri;
  font-size:11px;
  border:1px solid black;
  }


TD {background: white;color:#000000;font-family:calibri;font-size:11px;border:1px solid lightgrey;text-align:justify;} -->  <!-- TR {valign:top;} -->  <!-- P {background: white;color:RED} -->


#Red_Header{
color: red;

}

  </STYLE>
</head>
<body color='white'>
<br>
<br>
Heading 1
<br>
<br>
<table BORDER='1' cellspacing='1' cellpadding='1' width='50%' >
<table> <tr><th scope="col">PDB</th><th scope="col">SCHEMA_NAME</th><th scope="col">TABLE_NAME</th><th scope="col">INDEX</th></tr></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr> </table></table>
 <STYLE type='text/css'>  <!-- BODY {background:white;text-align:Left;font-family:calibri;font-size:20px;border:1px solid black;font-weight:bold;color:green} -->  <!-- TH {background: gold;color:black;font-family:calibri;font-size:11px;border:1px solid black;} -->  <!-- TD {background: white;color:#000000;font-family:calibri;font-size:11px;border:1px solid lightgrey;text-align:justify;} -->  <!-- TR {valign:top;} -->  <!-- P {background: white;color:GREEN} -->  </STYLE>


<br><br>Heading 2<br><br><table BORDER='1' cellspacing='1' cellpadding='1' width='50%' ><table> <tr><th scope=col>PDB</th><th scope=col>SCHEMA_NAME</th><th scope=col>TABLE_NAME</th><th scope=col>INDEX - COLS</th></tr></tr><tr><td>A</td><td>B</td><td>C</td><td>D</td></tr></table></table>

Я пытаюсь выделить заголовок 2 зеленым цветом, а заголовок 1 — красным.

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

1. он уже имеет зеленый цвет

2. Весь текст зеленого цвета, как вы хотели? в чем ваша проблема, можете ли вы опубликовать изображение с фрагментом, чтобы показать нам проблему.

3. @ahmad dalao Прикрепил изображение и обновил HTML-код, чтобы отразить изображение.

4. @vinod, пожалуйста, ознакомьтесь с обновлением.

5. ММ, где скриншот, я его не вижу.

Ответ №1:

Просто добавьте конкретный заголовок в <div> тег и дайте ему имя класса. Также оформите класс цветом.
В вашем коде —
Добавьте следующие фрагменты внутри <style> тега..

 <style>
   .head1{
      color:red;
    }
   .head2{
      color:green;
    }
</style>

Измените заголовки, чтобы они были внутри <div> тега следующим образом..

 <div class="head1">Heading 1</div>
<div class="head2">Heading 2</div>

Если вам нужен полный код или какая-либо помощь, просто прокомментируйте 🙂