Перейти к содержимому



Расшифруйте css код

#1 LadyRi
LadyRi
  • Неактивные
  • 15 сообщений
  • Репутация: 0
0

Обновлено 29 марта 2013 - 08:50  Отправлено 09 февраля 2013 - 17:35

.head .Menu>.BG>i>b{display:block;padding-top:59px;height:0;overflow:hidden;font-size:0;background:url(../images/menu.png) 0 -118px repeat-x;}

в css немножко разбираюсь, но почему вначале два id и head и menu, что значит за ними знак больше и точка, что значат следующие знаки больше.

 

 

  • 0

#2 yury
yury
  • Пользователь
  • 648 сообщений
  • Репутация: 195

Отправлено 09 февраля 2013 - 20:54

.head .Menu>.BG>i>b{display:block;padding-top:59px;height:0;overflow:hidden;font-size:0;background:url(../images/menu.png) 0 -118px repeat-x;}

1) у вас не id: имя с точкой описывает класс. id описывается именем с решеткой:
#head{background: #ccc;}

2) последовательная запись селекторов (через пробел) означает контекстный селектор, т.е.
.head .Menu{background: #ccc;}
означает, что серый фон будет у всех блоков с классом "Menu" вложенных в блоки с классом "head" (причем любого уровня вложенности):
Пример (у первых двух блоков с классом "Menu" фон будет серым, а у последнего нет)
<style>
body{background: #fff;}
.head .Menu{background: #ccc;}
</style>
<body>
<div class="head">head
  <div class="Menu">Menu</div>
  <div>
   <div class="Menu">Menu</div>
  </div>
</div>
<div class="Menu">Menu</div>
</body>

3) запись селекторов через знак ">" обозначает дочерний селектор, т.е.
.Menu>.BG{background: #ccc;}
означает, что серый фон будет у всех блоков с классом "BG", вложенных в блоки с классом "Menu" (причем только на первом уровне вложенности).
Пример (серый фон будет только у первого блока с классом "BG")
<style>
body{background: #fff;}
.Menu>.BG{background: #ccc;}
</style>
<body>
<div class="Menu">Menu
  <div class="BG">BG</div>
  <div>
   <div class="BG">BG</div>
  </div>
</div>
<div class="BG">BG</div>
</body>

Дальше сами расшифруете?
  • 2

#3 LadyRi
LadyRi
    Topic Starter
  • Неактивные
  • 15 сообщений
  • Репутация: 0

Отправлено 16 февраля 2013 - 08:34

Спасибо! дальше да. и это удобно, да? не проще все отдельно расписать..)
  • 0

#4 WebMaster
WebMaster
  • Неактивные
  • 97 сообщений
  • Репутация: 3

Отправлено 29 марта 2013 - 08:50

А как отдельно?) И может во имя оптимизации CSS файла и уменьшения веса было принято решение верстать именно так. Можно конечно использовать и :last-child и :first-child, но в каких то случаях проще использовать и символы ">". На самом деле, все зависит от того, как человек верстает, от его стиля. Я всегда использую :last-child и :first-child. Мне так удобно.
  • 0



Похожие темы
  Название темы Автор Статистика Последнее сообщение

Пользователь месяца
Megoydagi Megoydagi 1-й за Август
Очков активности: 30 4 темы, 8 сообщений, 1 балл репутации
Сайт: bank.net.ru
ТОП самых активных за этот месяц
  • Фотография Vmir
    #1

    Vmir
    Очков активности: 22.5 3 темы, 6 сообщений, 1 балл репутации

  • Фотография BLIK
    #2

    BLIK
    Очков активности: 18 Вне конкурса за определение пользователя месяца

  • Фотография kuztoday
    #3

    kuztoday
    Очков активности: 10.5 1 тема, 4 сообщения, 1 балл репутации

  • Фотография SergiuS85
    #4

    SergiuS85
    Очков активности: 10.5 2 темы, 1 сообщение, 1 балл репутации

  • Фотография mkreine
    #5

    mkreine (analiz-krovi.net)
    Очков активности: 9 1 тема, 3 сообщения, 1 балл репутации

  • Фотография kolver
    #6

    kolver
    Очков активности: 9 1 тема, 3 сообщения, 1 балл репутации

  • Фотография Megoydagi
    #7

    Megoydagi (bank.net.ru)
    Очков активности: 9 Вне конкурса за определение пользователя месяца

  • Фотография Totti
    #8

    Totti
    Очков активности: 7.5 0 тем, 5 сообщений, 1 балл репутации

  • Фотография fedornabilkin
    #9

    fedornabilkin (plohoneponyal.ru)
    Очков активности: 7.5 1 тема, 2 сообщения, 1 балл репутации

  • Фотография wp01
    #10

    wp01
    Очков активности: 7.5 0 тем, 5 сообщений, 1 балл репутации

  • Показать весь ТОП 10

Поддержите форум! =)
Топ 5 участников по репутации

Оформление форума – IPBSkins.ru