Изображения друг под другом без промежутков

creaturee · August 24, 2011

Подскажите пожалуйста разницу между CSS стилями когда мы хотим чтобы изображение было друг под другом без промежутков. Автор данного сайта использует следующий код:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> 
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Изображения по вертикали</title>  
  <style type="text/css">   
    DIV.img IMG { display: block; }
  </style>
</head> 
<body>  
  <div class="img">
    <img src="images/ecctitle.png" alt="Название" width="640" height="158" />   
    <img src="images/navigate.png" alt="Навигация" width="640" height="30" />
  </div>
</body>
</html>

Я не очень хорошо понимаю назначение именно этой строки: DIV.img IMG { display: block; }. Это же можно написать проще через


  <style type="text/css">  
      IMG { display: block; }
  </style>
<body>  
  <div>
      <img src="images/ecctitle.png" alt="Название" width="640" height="158" />   
      <img src="images/navigate.png" alt="Навигация" width="640" height="30" />
  </div>
</body>

или так, если в документе еще ??будут встречаться другие картинки:


  <style type="text/css">   
    .top { display: block; }
  </style>
</head> 
<body>
  <div>  
    <img class="top" src="images/ecctitle.png" alt="Название" width="640" height="158" />   
    <img class="top" src="images/navigate.png" alt="Навигация" width="640" height="30" />
  </div>
</body>

Во всех трех вариантах результат одинаковый - изображения друг под другом, без промежутков. Вариант автора: DIV.img IMG { display: block; } - Зачем для тега DIV задавать те же свойства что и для тега IMG + еще дополнительный класс .img вписывать? Кто знает объясните пожалуйста?

Vlad · August 24, 2011

Это для универсальности сделано. На странице может быть несколько тегов <div> и чтобы выделить конкретный, для него добавляется определённый класс img. Правило IMG { display: block; } действует на все изображения и включение новой картинки на страницу нарушит вёрстку.

Сейчас две основные манеры написания стилей практикуется:

1. использование контекстных селекторов;

2. добавление классов ко всем тегам, для которых нужно стилевое оформление.

Так что самыми правильными будут

DIV.img IMG { display: block; } или просто .img img

.top { display: block; }

creaturee · August 24, 2011

Огромное спасибо за ответ и ваше время! Таких как я наверное здесь тысячи и вы все равно находите время для каждого, спасибо!

Sign In

Изображения друг под другом без промежутков

Question

creaturee

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

creaturee

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information