04.04.2014, 13:54
|
|
Аспирант
|
|
Регистрация: 19.08.2012
Сообщений: 33
|
|
|
по основам CSS вопрос
Здравствуйте!
Поясните пожалуйста, не совсем улавливаю связь между каскадом и вариантом подключения CSS. Тип подключения CSS имеет также свою иерархию. Если у нас стили для тега <p> определены глобально в html файле внутри тега <style>, а также есть стили для <p> в файле css, который присоединяется с помощью тега link, то у нас применятся стили из html правильно ведь, они ведь приоритетней?
Одновременно про каскад написано, это механизм, определяющий какие стили должны быть применены к данному элементу, основываясь на правилах, полученных из различных источников.
http://css-live.ru/articles/css-kask...ledovanie.html
Каскад в вышеупомянутом случае вообще отрабатываться не будет что ли, он так я понимаю для стилей, которые подключены одинаковым способом? Хочу связать все это воедино. Буду благодарен если поясните с примерами.
Спасибо. |
|
04.04.2014, 14:14
|
|
Новичок на форуме
|
|
Регистрация: 03.04.2014
Сообщений: 2
|
|
Вот самый простой пример:
<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 приоритетнее. |
|
04.04.2014, 14:30
|
 |
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
Elitemaster, а если поменять местами теги <style> и <link> ?
__________________
В личку только с интересными предложениями 
|
|
04.04.2014, 14:35
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
|
|
04.04.2014, 14:36
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
Сообщение от danik.js
|
|
Elitemaster, а если поменять местами теги <style> и <link> ?
|
 |
|
04.04.2014, 18:43
|
|
Аспирант
|
|
Регистрация: 19.08.2012
Сообщений: 33
|
|
Да, если менять местами теги <style> и <link> цвета меняются. То есть в этом случае нет приоритетов получается. Последний побеждает.
А если прописать style в элементе, то он побеждает в любом случае.
http://learn.javascript.ru/play/Bjgw3b |
|
04.04.2014, 19:11
|
|
Аспирант
|
|
Регистрация: 19.08.2012
Сообщений: 33
|
|
|
У меня почему-то отложилось после прочтения некоторой литературы, что внутренние и внешние таблицы стилей обладают также приоритетом. Сейчас просмотрел "Большую книгу CSS" МакФарланда, там написано что приоритет имеет только стиль прописанный внутри тэга. Ну это и правильно. Внешние и внутренние таблицы вроде как равнозначны получаются. Видимо не то читал.
|
|
04.04.2014, 23:43
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,588
|
|
|
Самый приоритетный приоритет: style="css:value !important". =)
__________________
29375, 35
|
|
07.04.2014, 08:43
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,225
|
|
Вот описано как "по бальной системе" вычисляется приоретет css-свойств
|
Цитата:
|
Приоритеты стилей в зависимости от типа селектора
Да, селекторы CSS также влияют на стилевые приоритеты, причем в расчет берутся не только простые селекторы (классы, селекторы тегов, атрибуты и т.д.), но и составные (дочерние, соседние, селекторы потомков и т.д.).
Чтобы вычислить уровень приоритета (специфичности) какого-либо селектора браузеры используют определенный алгоритм, где каждому типу начисляется определенное количество баллов, определяющее вес селектора. Стили того селектора, который наберет больший вес, в конечном итоге и будут применены к элементу. Если же получится так, что какие-то селекторы, которые воздействуют на один и тот же HTML-элемент наберут одинаковое число баллов, то будут использованы стилевые свойства того, который находится в коде ниже.
А теперь давайте рассмотрим, каким же образом браузеры считают эти баллы.
Универсальный селектор — количество начисляемых баллов равно нулю (0).
Селекторы тегов и псевдоэлементы — по одному (1) баллу за каждый.
Селекторы атрибутов, классы и псевдоклассы — по десять (10) баллов за каждый.
Идентификаторы — по сто (100) баллов за каждый идентификатор находящийся в селекторе.
Атрибут style — встроенные стили не используют селекторов, а указываются непосредственно внутри тегов элементов, но при этом они имеют самый высокий приоритет исчисляемый тысячей (1000) баллов.
|
http://seodon.ru/css/prioritety-stilej.php
Последний раз редактировалось ksa, 07.04.2014 в 08:45.
|
|
08.04.2014, 23:08
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,588
|
|
Врут)
<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>
__________________
29375, 35
|
|
|
|
