HTML5 и CSS - пользовательские теги?

Question

Я работаю над веб-сайтом HTML 5 для обучения.

Прежде чем мой CSS может выглядеть так:

div.BoxHouse {
  margin-left: 72px;
  margin-right: 20px;
}

#content {
  width: 90%;
  background: url(transwhite.png);
  border: 1px solid #3F4933;
  margin-left: 72px;
  margin-right: 20px;
  margin-top: 20px;
  padding: 5px;
  z-index: 1;
  margin-bottom: 40px;
  overflow:auto;
  top: 10em;
  padding-top: 10px;
  }

Я думал, что с HTML5 я мог бы просто сделать это в коде:

<header>  
<hgroup>
    <content>
    <BoxHouse>
        <h1>HTML 5</h1>  
        <h2>The mark-up language for fun and profit</h2>
    </BoxHouse>
    </content>
</hgroup>  

Учитывая это как новый CSS:

BoxHouse {
  margin-left: 72px;
  margin-right: 20px;
}

content {
  width: 90%;
  background-image: url('../transwhite.png');
  border: 1px solid #3F4933;
  margin-left: 72px;
  margin-right: 20px;
  margin-top: 20px;
  padding: 5px;
  z-index: 1;
  margin-bottom: 40px;
  overflow:auto;
  top: 10em;
  padding-top: 10px;
  }

Но это явно не работает. Что я делаю не так?

Answer 1

Вы не можете использовать пользовательские теги в HTML5. Вы должны либо выбрать h1, h2 и т. Д. Непосредственно в своем CSS, либо использовать классы для них.

<header class="content">  
<hgroup class="BoxHouse">
    <h1>HTML 5</h1>  
    <h2>The mark-up language for fun and profit</h2>
</hgroup>

Кроме того, является ли изображение background-image: url(transwhite.png); полупрозрачным белым фоном? Если это так, вы можете использовать цвета RGBA в CSS3. Это для альфы. Таким образом, вы можете использовать background-color: rgba(255,255,255,0.5); для 50% прозрачной белой коробки. Преимущество этого по сравнению с использованием непрозрачности в том, что текст не прозрачен, он все еще ясен и сплошен.

Answer 2

То, что вы пытаетесь сделать, имеет смысл. Но это не то, как работает CSS.

Вы можете похитить унаследованные теги, такие как и , чтобы сохранить краткость HTML, но вы не можете создавать новые. Вместо этого используйте удобный для пользователя ...