CSS, почему одна вещь работает, а не другая? - PullRequest
1 голос
/ 02 марта 2010

Почему это работает:

 <div style="background-color: #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #000;
    padding: 10px;">testing 10,9,8,7
</div>

А это не так?

<div style="roundedCornerBox">
    testing 10,9,8,7
</div>

Где я создал файл CSS, который говорит:

body {
  background-color: #FFFFFF;
  text-align: center;
}

roundedCornerBox {
   background-color: #ccc;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border: 1px solid #000;
   padding: 10px;
}

Вот мой HTML-код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><title></title>
     <link rel="stylesheet" href="lib/css/style.css" />      
</head>

<body>
<div style="roundedCornerBox">
    testing 10,9,8,7
</div>

<div style="background-color: #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #000;
    padding: 10px;">
        testing 10,9,8,7
 </div>
 </body>
 </html>

Ответы [ 4 ]

8 голосов
/ 02 марта 2010

Вы уверены, что не имеете в виду:

<div class="roundedCornerBox">
    testing 10,9,8,7
</div>

и

.roundedCornerBox {
   background-color: #ccc;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border: 1px solid #000;
   padding: 10px;
}

Вам нужна точка, чтобы идентифицировать класс CSS и чтобы использовать этот класс CSS, вам нужно поместить имя класса в атрибут класса на элементе dom.

3 голосов
/ 02 марта 2010

Занятия начинаются с точки!

.roundedCornerBox {
   background-color: #ccc;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border: 1px solid #000;
   padding: 10px;
}

<div class="roundedCornerBox">

Без точки он ищет элемент <roundedCornerBox /> для стиля. style= также должно быть class=.

0 голосов
/ 02 марта 2010

Тег div неверен во втором примере. Это может быть

<div id="roundedCornerBox">
    testing 10,9,8,7
</div>

и

#roundedCornerBox {
   background-color: #ccc;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border: 1px solid #000;
   padding: 10px;
}
0 голосов
/ 02 марта 2010

Вы хотите class="roundedCornerBox" в разметке и .roundedCornerBox в вашем CSS.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...