2010-06-18 4 views
6

Я заметил, что есть несколько подобных вопросов и ответов на SO уже, но позвольте мне прояснить мой конкретный вопрос здесь первым:Порядок приоритетов CSS? Мои лекционные слайды верны или нет?

Я получил лекционные слайды, которые такие государства, как это:

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

Откровенно говоря, я не слышал это правило CSS старшинства себя, и я гугле найти что-то с аналогичной темой, но не совсем так: here

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

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

  • импортирована таблица стилей? я делаю это неправильно? Я не вижу его эффекта, используя FireBug
  • . Он говорит, что встроенная таблица стилей имеет более высокий приоритет по отношению к связанным/импортированным таблицам стилей, однако она не работает, если я поместил связанный/импортированный тег ПОСЛЕ того.
  • встроенный стиль vs 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 на стороне сервера) Вложенные стили находятся в разделе заголовка веб-страницы «(что, черт возьми, мне не разрешено вставлять в тег тела?)

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

+0

@Nick Yuck, вы не хотите прикасаться к этому слайду, то ... Возможно, вы имели в виду: * amok *? '';) – deceze

+5

Это изображение в формате JPEG 933 КБ с черным текстом на желтом фоне? Вы определенно должны использовать [PNG] (http://en.wikipedia.org/wiki/Portable_Network_Graphics#Comparison_with_JPEG) для этого! –

+0

Ваш слайд определенно нуждается в настройке, стиль CSS, определяющий ваш цвет фона, запустил макет *, орфография ускользает от меня еще :( –

ответ

2

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

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

Обновление: Немного googling в результате:

т.д.

+0

Спасибо за ссылки, безусловно, полезно –

+0

значит вы можете сказать, что что на слайде не подходит? –

+0

Я всегда забываю поставить + среди ключевых слов :(Спасибо за ссылки, теперь я могу сказать, почему слайд получит такое странное заявление :) Я надеюсь, что на экзамене это не слишком сильно повлияет на эту сложную тему. –

2
  • Свойства по <style></style> переназначаются путем выбора r в linked.css.
  • Нет элемента с id="div" для imported.css.
+0

извините, моя ошибка. Но я рад видеть, что это не меняет окончательный вид страницы. Да, я думаю, что «приоритет» на самом деле зависит от того, что наступает «последнее». Но ... это не на слайде :( –