В примерах css я видел правила, определенные начиная с ., а некоторые начиная с # - иногда они смешиваются в одном файле. В чем разница между этими правилами:
h1 { font-size:18pt;}
.new-alerts { font-size:11pt; font-weight:bold;}
#old-alerts { position:relative; font-size:10pt; }
Они ссылаются по-разному на страницу html? Как наследуются свойства?
. относится к классу. <span class="one" /> можно выбрать с помощью .one.
# относится к идентификатору. <span id="one" /> можно выбрать с помощью #one.
Вы должны использовать классы, когда может быть больше одного из данного элемента, и идентификаторы, когда вы знаете, что их будет только один. #navigation-bar будет использовать идентификатор, потому что в вашем макете будет только одна панель навигации, но .navigation-link будет использовать имя класса, потому что у вас будет несколько навигационных ссылок. (Было бы лучше использовать #navigation-bar a:link для получения ссылок на навигацию, но вы получите мою точку зрения.)
Точка . - это селектор классов, хеш/фунт/октоторп # выбирает по идентификатору:
<style>
.foo { ... }
#bar { ... }
</style>
...
<p class='foo'>Foo</p>
<p id='bar' class='baz'>Bar</p>
Идентификаторы должны быть уникальными во всем документе, классы не обязательно должны быть. Это основное отличие. Есть некоторые вещи, которые следует учитывать в отношении сценариев, но они обычно не представляют особого интереса при стилизации.
Кроме того, элемент может принадлежать нескольким классам:
<p class="foo bar baz">
и, как видно выше, классы и идентификаторы не являются взаимоисключающими.
. является классом и может многократно использоваться повторно и для разных элементов
# является идентификатором и должен использоваться только один раз на каждой странице.