Что имеет приоритет выше, в css...

@Sanu0074 · Регистрация: 14.06.2010

Author24 — интернет-сервис помощи студентам

Например есть элемент, мы задаем ему стиль прям в теге с помощью style="", и к этомуже элементу стиль в файле *.css только с другими параметрами но темиже свойствами что и через style=""; например в теге на странице мы прописали: style="margin-left:20px", а в файле *.css мы прописали margin-left:75px;, какой из них выполнится а какой проигнорируется?

@vasvas7775 · 19.04.2011, 21:38

Вот здесь

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

Связанные стили

HTML5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Стили</title>
  <link rel="stylesheet" type="text/css" href="mysite.css">
  <link rel="stylesheet" type="text/css" href="http://www.htmlbook.ru/main.css">
 </head>
 <body>
   <h1>Заголовок</h1>
   <p>Текст</p>
 </body>
</html>

Глобальные стили

HTML5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Глобальные стили</title>
  <style type="text/css">
   H1 { 
    font-size: 120%; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    color: #333366; 
   }
  </style>
 </head>
 <body>
  <h1>Hello, world!</h1>
 </body>
</html>

Внутренние стили

HTML5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Внутренние стили</title>
 </head>
 <body>
  <p style="font-size: 120%; font-family: monospace; color: #cd66cc">Пример текста</p>
</body>
</html>

Пример 3.5. Сочетание разных методов подключения стилей

HTML5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Подключение стиля</title>
  <style type="text/css">
   H1 { 
    font-size: 120%; 
    font-family: Arial, Helvetica, sans-serif; 
    color: green; 
   }
  </style>
 </head>
 <body>
   <h1 style="font-size: 36px; font-family: Times, serif; color: red">Заголовок 1</h1>
   <h1>Заголовок 2</h1>
 </body>
</html>

Vovan-VE · 20.04.2011, 15:46

Приоритеты стилей считаются в виде четырех чисел (a,b,c,d; a - старшая, d - младшая).
a - равно 1, если стили находятся в атрибуте style="" . Равно 0 в остальных случаях.
b - количество ID в селекторе.
c - количество классов, псевдоклассов, селекторов атритутов и прочих подобных вещей.
d - количество элементов и псевдоэлементов в селекторе. Тут главное не путать псевдоэлементы с псевдоклассами. Универсальный селектор * имеет d=0

Примеры:

CSS

*             {}  /* a=0 b=0 c=0 d=0 -> приоритет = 0,0,0,0 */
li            {}  /* a=0 b=0 c=0 d=1 -> приоритет = 0,0,0,1 */
li:first-line {}  /* a=0 b=0 c=0 d=2 -> приоритет = 0,0,0,2 */
ul li         {}  /* a=0 b=0 c=0 d=2 -> приоритет = 0,0,0,2 */
ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> приоритет = 0,0,0,3 */
h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> приоритет = 0,0,1,1 */
ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> приоритет = 0,0,1,3 */
li.red:hover  {}  /* a=0 b=0 c=2 d=1 -> приоритет = 0,0,2,1 */
#x34y         {}  /* a=0 b=1 c=0 d=0 -> приоритет = 0,1,0,0 */
style=""          /* a=1 b=0 c=0 d=0 -> приоритет = 1,0,0,0 */

Источник

@Sanu0074 59 / 59 / 16 Регистрация: 14.06.2010 Сообщений: 1,190 Записей в блоге: 5
		1
	Что имеет приоритет выше, в css... 19.04.2011, 21:29. Показов 3983. Ответов 2 Метки приоритеты, селекторы (Все метки) Например есть элемент, мы задаем ему стиль прям в теге с помощью style="", и к этомуже элементу стиль в файле .css только с другими параметрами но темиже свойствами что и через style=""; например в теге на странице мы прописали: style="margin-left:20px", а в файле .css мы прописали margin-left:75px;, какой из них выполнится а какой проигнорируется? 0

	20.04.2011, 15:46

Что имеет приоритет выше, в css...

Решение