2009-11-10 4 views
1

Я хочу определить стиль Div на основе CSS-файла. Код CSS, который я написал:Определить стиль тега Div

.body 
{ 
    text-align: center; 
    padding: 1px; 
    margin: 1px; 
    color: black; 
    background-color:lightgrey; 
} 

Я хочу, чтобы фон каждой секции Div был светло-серым. Что не так с вышеуказанным кодом?

Отредактировано:

Это мой HTML-код. Я изменил класс Div, как предлагается ниже, но он не работает. Также проверьте, правильно ли указан тег Link. Файл CSS находится в папке Lib, выше уровня один.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
     <title>Add/Update Political Party</title> 
     <link rel="stylesheet" href=".\Lib\entryformstyle.css" type="text/css"/> 
    </head> 
    <body> 
     <div id="sectionEntryForm" class="div"> 
      <table id="tblEntryForm" cols="2"> 
       <tr> 
        <td colspan="2" align="center">Add/Update Political Party</td> 
       </tr> 
       <tr> 
        <td>Party full name:</td> 
        <td><input id="inPartyFullName" name="inPartyFullName" accept="text/plain" maxlength="80" class="inputBoxStyle"></td> 
       </tr> 
       <tr> 
        <td>Party short name (initials):</td> 
        <td><input id="inPartyShortName" name="inPartyShortName" accept="text/plain" maxlength="80" class="inputBoxStyle"></td> 
       </tr> 
      </table> 
     </div> 
    </body> 
</html> 
+0

Ссылка Тег неправильно. См. Мой ответ. – Franz

+0

совет: для ссылок внутри html use/not \ :) –

ответ

2

ВСЕХ DIVs:

div 
{ 
    text-align: center; 
    padding: 1px; 
    margin: 1px; 
    color: black; 
    background-color:lightgrey; 
} 

дива с классом "телом":

div.body 
{ 
    text-align: center; 
    padding: 1px; 
    margin: 1px; 
    color: black; 
    background-color:lightgrey; 
} 
1

попытка удаления периода до «тела»

редактирования: это также, вероятно, стоит иметь быстрый прочитанный из this post

объясняет разницу между (.) «» и '#' при определении стилей.

+0

В этом случае было бы лучше заменить '.body' на' div'. –

+0

@JT: CSS работал, когда я удалял период, но он не распознает имя класса. Кроме того, могу ли я определить собственное имя класса? – RKh

+1

yep! вы можете, однако вам нужно будет добавить ссылку на него с периодом (.) и новым именем класса; ie .myClass {background-color: lightgrey;} – SpaghettiMonster

1

Это работает только на классе «тело», то есть

<div class="body"> 

Если вы хотите, чтобы работать на любом дивы, селектор («.body» в примере кода) должен быть div.

4

Ничего, вам просто нужно использовать <div class="body">, чтобы сделать DIV забрать его.

0

Для этого стиля работы, ваш DIV должен быть написан так:

<div class="body">Your text here</div> 

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

0

Попробуйте изменить:

background-color:lightgrey; 

в

background-color:silver; 

или

background-color:#CCC; 

Это при условии, что ваш ДИВ применил тело класса:

<div class="body"></div> 
+0

'lightgrey' разрешенное значение: http://www.w3.org/TR/css3-color/ # svg-color –

+0

Ах спасибо - я сделал быструю проверку, но явно недостаточно полную! –

2

Если ваш файл CSS является на один уровень вверх, вы должны включить его, как это:

<link rel="stylesheet" href="../lib/entryformstyle.css" type="text/css"/> 
+0

@Franz: Он работал, но он выравнивается по центру в IE, но не в FireFox? – RKh

+0

Попробуйте использовать '.div, .div * {' в качестве селектора. – Franz

0

Либо использовать

div 
{ 
    text-align: center; 
    padding: 1px; 
    margin: 1px; 
    color: black; 
    background-color:lightgrey;/*#CCC*/ 
} 

установить цвет фона всего Див

Или используйте

div.body 
{ 
    text-align: center; 
    padding: 1px; 
    margin: 1px; 
    color: black; 
    background-color:lightgrey; 
} 

и установить <div class="body"></div> для каждого дел.

Вы можете использовать встроенный в таблицу стилей:

<div style="background-color:lightgrey;"></div> 
Смежные вопросы