css только для пары тегов? - PullRequest
Новая
       13

css только для пары тегов?

2 голосов
/ 31 января 2010

Я пытаюсь понять CSS, и первое, что я попробовал, было следующее: 

<div style="
    height: 100px;
    width: 100px;
    border: 1px solid black"/>

<div style="
    height: 100px;
    width: 100px;
    border: 1px solid red"/>

и 

<div style="
    height: 100px;
    width: 100px;
    border: 1px solid black"></div>

<div style="
    height: 100px;
    width: 100px;
    border: 1px solid red"/>

Кто-нибудь может объяснить, пожалуйста, что происходит? я думал, что не должно быть никакой разницы .. до сих пор я испытывал только чистый XML, так что это немного расстраивает меня ..

и еще один побочный вопрос ... как это работает с отображением всего этого? Сначала я предполагаю, что браузер создает дерево DOM, которое обычно отображается в зависимости от порядка элементов. То же самое с CSS только с небольшим изменением, определяемым стилями? я имею в виду, что правило из таблицы стилей сначала применяется, когда отображается какой-то конкретный элемент, никаких других хитростей в этом нет .. верно?

Ответы [ 6 ]

5 голосов
/ 31 января 2010

Вы, без сомнения, обслуживаете свой XHTML типом содержимого text / html.

Это хакерская программа, разработанная для облегчения перехода с HTML на XHTML, чтобы люди могли начать использовать XHTML до того, как браузеры его поддержат. Спустя десятилетие Internet Explorer все еще не поддерживает его, и я вернулся к HTML.

Поскольку вы используете этот хак, вы должны написать свой XHTML, чтобы он был совместим как с парсерами HTML, так и с парсерами XML. Это означает следование рекомендациям по совместимости HTML , которые включают:

Если элемент разрешает содержимое (например, элемент div), но экземпляр этого элемента не имеет содержимого (например, пустой раздел), НЕ используйте синтаксис тега «свернутый» (например, <div />).

Элементы, которые не разрешают контент, определены как «ПУСТО» и могут быть легко обнаружены в HTML-списке элементов .

1 голос
/ 31 января 2010

Если вам действительно нужны самозакрывающиеся DIV:

  1. Служите вашему контенту как XHTML. Это включает использование правильного типа MIME (application/xhtml+xml), но помните, что вам нужно работать с браузерами, которые все еще не понимают XHTML .

  2. Использовать допустимый тип XHTML и пространство имен,

, например * * 1016 

<!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">

После этого ваши DIV будут отображаться так, как вы ожидаете, но, по моему опыту, обслуживание старого доброго HTML 4 строго намного проще.

1 голос
/ 31 января 2010

Как уже упоминалось, элементу div нужны начальные и конечные теги ... Если только вы не делаете то, что делали в некоторых своих примерах: 

<div />

Или ... 

<div/>

Это самозакрывающийся (пустой) div.

Итак, для ваших тестов CSS вы, вероятно, не хотите использовать <div /> - вместо этого используйте <div>Foo</div>.

1 голос
/ 31 января 2010

<div> должны иметь контент, поэтому они не являются самозакрывающимися тегами. Ваши свойства CSS в порядке, но ваша разметка неверна.

1 голос
/ 31 января 2010

CSS может быть применен к любому «тегу», но вы используете <div> просто неправильно. Для тега div всегда требуется закрывающий тег: 

<div><!-- HTML here --></div>

И что происходит, вы даете div ширину и высоту 100 пикселей и черную рамку шириной 1 пиксель.

Может быть, вы хотите прочитать учебники по CSS .

Вы также можете попробовать 

<img src="path/to/some/image" style="border:5px solid black;" />

чтобы убедиться, что он работает с самозакрывающимися тегами;)

A список допустимых самозакрывающихся тегов в XHTML .

0 голосов
/ 31 января 2010

Я не уверен, что ваша проблема с DIV основана на CSS, я думаю, что это скорее интерпретация браузера. Браузеры ожидают, что в DIVs есть контент, и, возможно, неправильно их отображают. XHTML совместим с XML, но не сам по себе (то есть не соблюдает ВСЕХ правил) XML.

CSS работает для самозакрывающихся тегов - например, IMG или HR.

Ваш второй вопрос кажется правильным. Браузер эффективно кэширует таблицу стилей и применяет стили всякий раз, когда видит соответствующий тег в DOM. Вы никогда не увидите, как все это происходит, потому что это обычно делается до того, как на странице делается какой-либо рисунок. Если вы динамически добавите тег DOM со ссылкой на CSS, он автоматически примет стиль, определенный в вашей таблице стилей.

...