Javascript-форум - по основам CSS вопрос

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - по основам CSS вопрос (https://javascript.ru/forum/xhtml-html-css/46287-po-osnovam-css-vopros.html)

по основам CSS вопрос

Здравствуйте!

Поясните пожалуйста, не совсем улавливаю связь между каскадом и вариантом подключения CSS. Тип подключения CSS имеет также свою иерархию. Если у нас стили для тега <p> определены глобально в html файле внутри тега <style>, а также есть стили для <p> в файле css, который присоединяется с помощью тега link, то у нас применятся стили из html правильно ведь, они ведь приоритетней?

Одновременно про каскад написано, это механизм, определяющий какие стили должны быть применены к данному элементу, основываясь на правилах, полученных из различных источников.
http://css-live.ru/articles/css-kask...ledovanie.html

Каскад в вышеупомянутом случае вообще отрабатываться не будет что ли, он так я понимаю для стилей, которые подключены одинаковым способом? Хочу связать все это воедино. Буду благодарен если поясните с примерами.
Спасибо.

Вот самый простой пример:

<html>
<head>
<link rel="stylesheet" src="mystyle.css">
<style>
.myDiv{
width: 50px;
height: 50px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="myDiv"></div>
</body>
</html>

и CSS mystyle.css:

.myDiv {
width: 10px;
height: 10px;
border: 1px splid red;
}

На странице будет нарисован квадрат 50x50 синего цвета. Так что стиль html приоритетнее.

Elitemaster, а если поменять местами теги <style> и <link> ?

Цитата:

Сообщение от danik.js

Elitemaster, а если поменять местами теги <style> и <link> ?

:yes:

Да, если менять местами теги <style> и <link> цвета меняются. То есть в этом случае нет приоритетов получается. Последний побеждает.
А если прописать style в элементе, то он побеждает в любом случае.
http://learn.javascript.ru/play/Bjgw3b

У меня почему-то отложилось после прочтения некоторой литературы, что внутренние и внешние таблицы стилей обладают также приоритетом. Сейчас просмотрел "Большую книгу CSS" МакФарланда, там написано что приоритет имеет только стиль прописанный внутри тэга. Ну это и правильно. Внешние и внутренние таблицы вроде как равнозначны получаются. Видимо не то читал.

Самый приоритетный приоритет: style="css:value !important". =)

Вот описано как "по бальной системе" вычисляется приоретет css-свойств

Цитата:

Приоритеты стилей в зависимости от типа селектора

Да, селекторы CSS также влияют на стилевые приоритеты, причем в расчет берутся не только простые селекторы (классы, селекторы тегов, атрибуты и т.д.), но и составные (дочерние, соседние, селекторы потомков и т.д.).

Чтобы вычислить уровень приоритета (специфичности) какого-либо селектора браузеры используют определенный алгоритм, где каждому типу начисляется определенное количество баллов, определяющее вес селектора. Стили того селектора, который наберет больший вес, в конечном итоге и будут применены к элементу. Если же получится так, что какие-то селекторы, которые воздействуют на один и тот же HTML-элемент наберут одинаковое число баллов, то будут использованы стилевые свойства того, который находится в коде ниже.

А теперь давайте рассмотрим, каким же образом браузеры считают эти баллы.

Универсальный селектор — количество начисляемых баллов равно нулю (0).
Селекторы тегов и псевдоэлементы — по одному (1) баллу за каждый.
Селекторы атрибутов, классы и псевдоклассы — по десять (10) баллов за каждый.
Идентификаторы — по сто (100) баллов за каждый идентификатор находящийся в селекторе.
Атрибут style — встроенные стили не используют селекторов, а указываются непосредственно внутри тегов элементов, но при этом они имеют самый высокий приоритет исчисляемый тысячей (1000) баллов.

http://seodon.ru/css/prioritety-stilej.php

Врут)

<style>
#id1 #id2 #id3 #id4 #id5 #id6 #id7 #id8 #id9 #id10 #id11 #id12 {background-color:green}   
</style>
<div id="id1">
<div id="id2">
<div id="id3">
<div id="id4">
<div id="id5">
<div id="id6">
<div id="id7">
<div id="id8">
<div id="id9">
<div id="id10">
<div id="id11">
<div id="id12" style="background-color:red">
test
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>