Блог

Есть ли способ поместить немного CSS в основную часть моей html-страницы без использования встроенного CSS? например: я хочу сделать все элементы одной таблицы красными. Недостаток здесь: нужен один и тот же style =»..» для каждого TD.

 <table>
<tr>
<td style="background-color:#f00">RED</td>
<td style="background-color:#f00">RED</td>
</tr>
</table>
  

Если вы хотите, чтобы все элементы ‘td’ одной конкретной таблицы имели определенный стиль css, вам следует использовать этот код:

HTML:

 <table id="tableOne">
    <tr>
        <td>red background</td>
        <td>red background</td>
    </tr>
</table>
<table>
    <tr>
        <td>blank background</td>
        <td>blank background</td>
    </tr>
</table>
  

css:

 #tableOne td{
    background-color: #FF0000;
}
  

 <table class="myClass">
   <tr>
     <td>RED</td>
     <td>RED</td>
</tr>
</table>
  

И ваш класс css MyClass:

 .myClass td
{
   background: #F00;
}
  

Чтобы сохранить весь код в теле, вы могли бы использовать javascript, чтобы сначала найти все TD, а затем применить цвет фона:

 <script>
        var cells = document.getElementsByTagName("td");
        for (var i=0; i<cells.length; i  ) {
            cells[i].style.backgroundColor = '#c0c0c0';
        }
</script>
  

Во встроенной или внешней таблице стилей:

 td { background: #F00; }
  

Вот и все.