Порядок приоритета CSS? Мои слайды лекций верны или нет? - PullRequest
6 голосов
/ 18 июня 2010

Я заметил, что в SO уже есть пара похожих вопросов и ответов, но позвольте мне сначала уточнить мой конкретный вопрос здесь:

У меня есть слайды с лекциями, которые гласят:

http://mindinscription.net/webapp/csstest/precedence.PNG

Если честно, я сам не слышал об этом правиле css, и я погуглил, чтобы найти что-то с похожей темой, но не совсем так: здесь

Чтобы провести тест самостоятельно, я создал тестовую страницу на своем собственном сервере здесь

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

  • импортированная таблица стилей? я делаю это неправильно? Я не вижу его эффекта, используя FireBug
  • это говорит о том, что встроенная таблица стилей имеет более высокий приоритет по сравнению со связанными / импортированными таблицами стилей, однако она не работает, если я добавлю связанный / импортированный тег ПОСЛЕ того.
  • встроенный стиль против атрибутов HTML? У меня есть изображение, где я сначала устанавливаю его встроенный стиль для управления шириной и высотой, а затем использую прямые html-атрибуты width / height, чтобы попытаться изменить это, но не удалось ...

Ниже приведен исходный код:

<html>
<head>
    <style type="text/css">
        #target
        {
            border : 2px solid green;
            color  : green;
        }
    </style>
    <link rel="stylesheet" href="./linked.css" type="text/css" media="screen" />
</head>
<body>
    <div id="target">A targeted div tag on page.</div>

    <img src="cat.jpg" alt="" style="width : 102px; height : 110px;" width="204px" height="220px" />
</body>
</html>

Могут ли какие-нибудь опытные парни из CSS помочь мне понять, правильный слайд или нет?

Честно говоря, я озадачен собой, так как я могу ясно видеть некоторые другие «неправильные» утверждения здесь и там среди слайдов, такие как JavaScript на стороне клиента (как насчет серверного JavaScript?) И «Встроенные стили» находятся в разделе заголовка веб-страницы "(какого черта? Мне не разрешено помещать его в тег body?)

Извините за этот глупый вопрос, экзамен на ЗАВТРА, и теперь я вижу много вещей для размышлений:)

Ответы [ 2 ]

2 голосов
/ 18 июня 2010

Во-первых, для импортированных таблиц стилей они означают таблицы стилей, внедренные с использованием правила @import .

Во-вторых, на несколько строк ниже этого объяснения в спецификации CSS 2.1 есть объяснение каскадный порядок .Другие части спецификации также могут быть полезны для вашего экзамена.Удачи.

Обновление: Немного поиск в Google привело к:

и т. Д.

2 голосов
/ 18 июня 2010
  • Свойства <style></style> переназначаются селектором в linked.css.
  • Нет элемента с id="div" для imported.css.
...