За последние 24 часа нас посетили 20163 программиста и 1695 роботов. Сейчас ищут 1829 программистов ...

Порядок загрузки CSS

Тема в разделе "HTML и CSS", создана пользователем html-программист, 1 апр 2016.

  1. html-программист

    html-программист Активный пользователь

    С нами с:
    10 фев 2012
    Сообщения:
    831
    Симпатии:
    4
    Адрес:
    Kiev
    Есть, скажем, в head вот такая ерунда:

    <link media="screen" href="styles1.css" type="text/css" rel="stylesheet" />
    <link media="screen" href="styles2.css" type="text/css" rel="stylesheet" />

    В каждом из них описан класс .my_best_class { } с разными зачениями. Какой из этих стилей будет использован?
     
  2. p@R@dox 55RU

    p@R@dox 55RU Зэк
    [ БАН ]

    С нами с:
    21 май 2014
    Сообщения:
    1.358
    Симпатии:
    7
    Адрес:
    с планеты Ялмез
    если не указан important, то последний (:)
     
  3. mahmuzar

    mahmuzar Старожил

    С нами с:
    6 апр 2012
    Сообщения:
    4.631
    Симпатии:
    425
    Адрес:
    РД, г. Махачкала.
    Будут использованы оба, но если свойство color встретится в обоих файлах стилей то актуальным будет значение свойства во втором стиле.
     
  4. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    кто последний - тот и молодец.
    кто точнее описал селектор, тот и молодец.
     
  5. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    Niet, потому что посреди вечеринки пришел атрибут style и сказал что он главный, и ему плевать, кто там был после него и когда. Это тоже нужно учитывать.
     
  6. mahmuzar

    mahmuzar Старожил

    С нами с:
    6 апр 2012
    Сообщения:
    4.631
    Симпатии:
    425
    Адрес:
    РД, г. Махачкала.
    ну тогхда js тоже надо учитывать :)
     
  7. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    Нет, не нужно его учитывать. Он либо меняет классы у элемента, которые влияют только на то, какой именно финальный рассчитанный каскад на него ляжет, либо style, о котором написано выше.
     
  8. mahmuzar

    mahmuzar Старожил

    С нами с:
    6 апр 2012
    Сообщения:
    4.631
    Симпатии:
    425
    Адрес:
    РД, г. Махачкала.
    Ты выше написал что атрибут style а ниже сказал что не надо учитывать js, я запутался.
    Ты про тег html или DOM Object ?

    Вот что я имел в виду:
    Код (PHP):
    1. <style>
    2. #dd{
    3.     color: red;
    4. }
    5.  
    6. </style>
    7. <div id='dd'>
    8.     text text text
    9. </div>
    10.  
    11. <script>
    12.     dd = document.getElementById('dd');
    13.     dd.style.color = 'black';
    14. </script>
    Добавлено спустя 3 минуты 44 секунды:
    Последовательность такая:
    таблица стилей в head.
    html тег <style>
    js

    Получается последний маладес. т.е. js/
     
  9. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    Я говорю о том, о чем говорю. Я про
    Это не тег. Я не путаю эти вещи. Это атрибут, в котором прописываются CSS для тегов. То, что ты дергаешь через DOM - обращение именно к атрибуту style.

    Делают одно и то же, и подчиняются одним и тем же правилам - кто последний, тот и папа. Просто один инлайновый, а другой внешний стиль грузит.
     
  10. mahmuzar

    mahmuzar Старожил

    С нами с:
    6 апр 2012
    Сообщения:
    4.631
    Симпатии:
    425
    Адрес:
    РД, г. Махачкала.
    Я не сомневался что ты не путаешь, запутался я, поэтому уточнил.
    Получается ты говорил все таки о js но почему то скзаал что Js не надо учитывать.

    Спасибо кэп )).
     
  11. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    Я ни слова не говорил о JS.

    Эхехе... Атрибут style - это обыкновенный html-атрибут. Он может быть сгенерирован на стророне сервера как часть тега, как и любой другой html-атрибут. Для работы этого html-атрибута не нужен JS. Потому что это html-атрибут.

    Тот факт, что JS позволяет обращаться к html-атрибутам у html-элементов через DOM-модель, не делает html-атрибуты частью JS, и никоим боком его не притягивает сюда. Лишь по той причине, что JS тут - всего лишь способ манипуляций с html-атрибутом, которые могут быть, а могут и не быть, потому что они не обязательны. Такие же манипуляции ты можешь делать сам через инструменты разработчика браузера, как ни странно. Более того, style - не единственный html-атрибут, к которому можно обращаться через JS. Потому как через JS можно стучаться через свойство DOM-объекта к валидным html-атрибутам, а через getAttribute() даже и к не валидным, пользовательским html-атрибутам. Что тоже не означает, что в их существовании повинен JS и что хоть каким-то кусочком левой пятки может рассматриваться с ними в одном контекстовом потоке.

    Атрибут style внутри тега - НЕ JS. Никогда им не был.
     
  12. mahmuzar

    mahmuzar Старожил

    С нами с:
    6 апр 2012
    Сообщения:
    4.631
    Симпатии:
    425
    Адрес:
    РД, г. Махачкала.
    думаю это никто опровергать не будет.

    Я тоже не говорил о html теге я говорил о свойстве style в js когда говорил что js надо учитывать.

    P. S. То что расписал выше, ознакомился заново, читал не раз, но ничего нового.

    Меня запутало то что ты говоришь о js но потом говоришь js не при чем .
     
  13. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    Ох, блин, как же с тобой тяжело-то :)
    Тебя запутало то, что ты не до конца понимаешь, о чем идет речь и у тебя клиентская часть прихрамывает.
    Нет такого свойства в JS. Оно не существует в JS. Оно не является частью JS. И никогда не было. Это свойство DOM-объекта, которое является отображением атрибута style у HTML_элемента на объектную модель этого элемента, которой оперирует браузер.

    Так уж вышло, что, по доброте душевной и общего блага ради, спецификация современных браузеров допускает обращение к DOM посредством JS. Но это не делает DOM частью JS.

    Когда мы обращаемся через JS к свойству style у объекта в DOM, мы, по сути, меняем содержимое атрибута style у html-элемента. JS тут - всего лишь инструмент, который позволяет работать с DOM.

    DOM - это не JS. DOM появился до JS. DOM работает без JS. Никогда, блин, не путай и не смешивай эти вещи в своем сознании. Никогда в жизни. Тогда и не будешь путать сам себя.
     
  14. mahmuzar

    mahmuzar Старожил

    С нами с:
    6 апр 2012
    Сообщения:
    4.631
    Симпатии:
    425
    Адрес:
    РД, г. Махачкала.
    Порядочно.

    Да, согласен, неправильно говорить что js имеет свойство style. Style - свойство конкретного DOM - объекта.

    Все что ты описал выше, полностью согласен.

    Без языка программирования (в нашем случае js) если не получается переустановить значение свойства style объекта DOM накуй этот DOM?

    Добавлено спустя 2 минуты 15 секунд:
    Маленькими шажками в гору :)

    Добавлено спустя 1 минуту 33 секунды:
    Да и назначение DOM вроде для работы с html документами в языках программирования.
     
  15. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    DOM изначально - это то, как видит браузер присланынй тобой HTML. Сервер шлет текст, HTML, а браузер отображает DOM. В HTML кнопка - это просто строчка текста у которой type=button. А на странице ты видишь полноценную кнопку, которая поддерживает кучу событий, которая реагирует на мышку, которая при клике меняет внешний вид и тж и тп. Кнопка на странице - самая настоящая самделишная кнопка. В этом вот суть DOM.

    Отображая DIV на странице, браузер рисует растровый прямоугольник. Ему нужно посчитать его координаты, его размеры, его цвет и тд. Это невозможно без создания в оперативной памяти некоего объекта, который бы все это хранил. Это и есть проецирование HTML на объекты. DOM - Document Object Model, совокупность спроецированных на объекты сущностей, которыми оперирует браузер в первую очередь.

    Возможность обращаться к DOM через JS, который, в свое время еще не был JavaScipt, а был ActionScript - просто приятный бонус, который однажды пришел в голову умным людям, и который они решили сделать фишкой для продвижения своего NetScape браузера. Но DOM был уже тогда. Без DOM браузер попросту не сможет работать.

    Вот истинное назначение DOM - построение в памяти браузера объектной модели документа, чтобы браузер мог его отображать, скроллить, зумить, рендерить, обрабатывать события и тд.

    О событиях - обрати внимание, что для того же CSS, который не является языком программирования и не связан с JS, события тоже работают. Даже если ты отключил JS на странице, все рано всякие hover'ы для CSS, которые генерятся DOM-объектами, будут работать. Потому что DOM существует на уровне браузера, а не на том же уровне, что и JS-машина. И создан он именно для этого.

    Надеюсь, я подробно ответил на твой вопрос:
     
  16. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    он самый последний прост :D
     
  17. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    Ты про порядок загрузки? Пффф, объяви CSS-ки за </body>, эффект будет тот же. Просто у style в теге максимальный приоритет. Выше - только !important'ы. Хотя, могу и ошибаться, конечно.
     
  18. mahmuzar

    mahmuzar Старожил

    С нами с:
    6 апр 2012
    Сообщения:
    4.631
    Симпатии:
    425
    Адрес:
    РД, г. Махачкала.
    Да, ты разжевал подробнее некуда, но дело в том что это усе я знаю)).

    Я перечитал что такое DOM еще раз, перечитал что такое JS, подумал я что-то не догоняю наверно реально.

    Моя ошибка в терминологии. Когда я говорил style свойство js я подразумевал свойство объекта с id='dd' т.е. свойство DOM объекта.

    Почему путаница, потому, что без JS ты никак не переустановить свойство этого DOM объекта. Так или иначе он при чем.
    Так если за боди его поместить он получается последний, внутри боди тоже он последний и до тоже он последний(head то выше). На самом деле, если поместить <style></style> до подключения стилей из файла все меняется в обратную сторону. Теперь приоритетнее будет css последний из подключенных.

    пример:

    first.css
    Код (PHP):
    1.  .my_best_class {
    2.      color: red;
    3.  } 
    second.css
    Код (PHP):
    1.  .my_best_class { 
    2.      background-color: black;
    3.      color: white;
    4.  } 
    текст будет оранжевый
    Код (PHP):
    1. <html>
    2.     <head>
    3.         <link media="screen" href="/css/first.css" type="text/css" rel="stylesheet" />
    4.         <link media="screen" href="/css/second.css" type="text/css" rel="stylesheet" />
    5.         <style>
    6.             .my_best_class{
    7.                 color: orange;
    8.             }
    9.         </style>
    10.         <title>TODO supply a title</title>
    11.         <meta charset="UTF-8">
    12.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    13.     </head>
    14.     <body class="my_best_class">
    15.         TODO write content
    16.     </body>
    17.  
    18. </html> 
    текст будет белый:
    Код (PHP):
    1. <html>
    2.     <head>
    3.         <style>
    4.             .my_best_class{
    5.                 color: orange;
    6.             }
    7.         </style>
    8.         <link media="screen" href="/css/first.css" type="text/css" rel="stylesheet" />
    9.         <link media="screen" href="/css/second.css" type="text/css" rel="stylesheet" />
    10.         
    11.         <title>TODO supply a title</title>
    12.         <meta charset="UTF-8">
    13.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    14.     </head>
    15.     <body class="my_best_class">
    16.         TODO write content
    17.     </body>
    18.  
    19. </html>
    Текст пурпурный
    Код (PHP):
    1. <html>
    2.     <head>
    3.         
    4.         <link media="screen" href="/css/first.css" type="text/css" rel="stylesheet" />
    5.         <link media="screen" href="/css/second.css" type="text/css" rel="stylesheet" />
    6.         
    7.         <title>TODO supply a title</title>
    8.         <meta charset="UTF-8">
    9.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    10.     </head>
    11.     <body class="my_best_class">
    12.         <style>
    13.             .my_best_class{
    14.                 color: orange;
    15.             }
    16.         </style>
    17.         TODO write content
    18.         <script>
    19.             
    20.             el = document.getElementsByClassName('my_best_class');
    21.             console.log(el);
    22.             el[0].style.color = 'purple';
    23.         </script>
    24.     </body>
    25.     
    26. </html>
     
  19. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    легко
    Зацени.
    Код (PHP):
    1. <div style="text-align:none;">Я сделал это без JS!!11 Я указал style!</div> 
    Добавлено спустя 1 минуту 31 секунду:
    Дык никто не оспаривал, что <style> работает в нормальном режиме с подключением внешних стилей.
     
    TeslaFeo нравится это.
  20. mahmuzar

    mahmuzar Старожил

    С нами с:
    6 апр 2012
    Сообщения:
    4.631
    Симпатии:
    425
    Адрес:
    РД, г. Махачкала.
    Спасибо, я запомню )

    Так я тоже не говорил что не работает с подключением внешних стилей) Фсе работает, только кто последний тот молодец.
     
  21. TeslaFeo

    TeslaFeo Старожил

    С нами с:
    9 мар 2016
    Сообщения:
    2.984
    Симпатии:
    759
    Fell-x27 Восхитительное терпение.
     
  22. mahmuzar

    mahmuzar Старожил

    С нами с:
    6 апр 2012
    Сообщения:
    4.631
    Симпатии:
    425
    Адрес:
    РД, г. Махачкала.
    Какие выводы то?
    --- Добавлено ---
    Мне интересно)
     
  23. TeslaFeo

    TeslaFeo Старожил

    С нами с:
    9 мар 2016
    Сообщения:
    2.984
    Симпатии:
    759
    все выводы описанны выше :)
     
  24. mahmuzar

    mahmuzar Старожил

    С нами с:
    6 апр 2012
    Сообщения:
    4.631
    Симпатии:
    425
    Адрес:
    РД, г. Махачкала.
    Вообще, тут дело не в терпении. Хочет писать пишет, не хочет не пишет.
    Так вот, уважаемый Fell-x27 хотел писать и он писал. И пожалуйста, распиши, почему ты пришел к таким выводам. Или ты решил подлизнуться? :)
     
  25. TeslaFeo

    TeslaFeo Старожил

    С нами с:
    9 мар 2016
    Сообщения:
    2.984
    Симпатии:
    759
    предложение выдает попытку скрыть возникшие негативные эмоции. Лучше продумывай свои сообщения. ":)"
    --- Добавлено ---
    я хотел сказать, что троллинг слишком толстый. ты же на форуме программистов, а не во дворе с чуваками пивка вышел попить. Тоньше нужно...