<MyRusakov.ru />

Создание Интернет-магазина на PHP и MySQL

Создание Интернет-магазина на PHP и MySQL

Видеокурс "Создание Интернет-магазина на PHP и MySQL" - это уникальный курс по созданию Интернет-магазина с нуля. Особенностью данного курса является то, что создание идёт с самого начала, то есть от идеи. Далее создаётся дизайн всех необходимых страниц, после делается их вёрстка. Затем создаётся движок на PHP и MySQL, после делается Admin-панель и, наконец, готовый сайт размещается в Интернете.

Адрес созданного в этом курсе сайта: http://storedvd.ru

Всё создание сайта будет происходить на Ваших глазах, поэтому Вы легко сможете повторить весь процесс создания сложного функционального сайта уже при разработке своего портала.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Приоритет и наследование в СSS на практике

Приоритет и наследование в СSS на практике

По просьбам читателей сегодня я попытаюсь раскрыть такую важную тему в CSS, как приоритет и наследование. А так же вы узнаете о незаменимом помощнике в контексте сегодняшней темы, как для верстальщика, так и для front-end разработчика – веб-инспекторе.

О наследовании в CSS

Что нужно знать о наследовании в CSS при верстке сайтов? Рассмотрим это на примере фрагмента макета.

Приоритет и наследование в СSS на практике

Верстальщик должен стремится не плодить лишний код, ведь для этого и существует принцип наследования. Верстка любой страницы начинается с тега body. Это значит, что мы прописываем цвет фона страницы и все атрибуты основного шрифта заранее в тег body (предок). То есть, все теги (p, div), что находятся внутри body, являются его потомками, они так же унаследуют белый фон и заданный шрифт, если мы не перебьем их другими свойствами.

Если для тега h1 зададим другие значения цвета и шрифта, в таком случае тег h1 уже не потомок body.

Здесь надо уточнить, что по наследству передаются главным образом цвет фона и все шрифтовые атрибуты. Нельзя унаследовать атрибуты ссылок, размеры отступов, полей, блоков.

О приоритетах в CSS

Приоритетность таблиц стилей в порядке возрастания для верстальщика:

  1. таблицы стилей самого браузера
  2. внешний css файл, подключаемый к странице через <link>
  3. таблицы стилей написанные на самой странице между тегами <style>..</style>
  4. таблицы стилей внутри атрибута style="..."
  5. самый высокий приоритет у стилей с пометкой на конце important!

Независимо от количества страниц, всегда надо стили выносить в отдельный файл, который будет применятся ко всем страницам, пока его не перебьет новый стиль, записанный внутри страницы между тегами <style>..</style>, ближайший к стилизуемому тегу.

В каких случаях надо писать стили внутри страницы? Если, эта страница уникальна по дизайну, отличается от остальных.

Это была теория, на практике же все выглядит куда понятнее. Очень часто верстальщику приходится разбираться в чужом коде. Например стоит такая задача – изменить цветовую гамму страницы или всего сайта. Если этот условный сайт сверстан вручную и достаточно грамотно, то найти какие из стилей применены к тому или иному тегу, легко. Просто следуя тем существующим правилам приоритета и наследования. Смотрите какие стили на странице расположены ниже или специфичнее (#id против .class) и совсем уже явно – это !important, те и будут главнее.

Сущий ад начинается, если сайт работает например на Wordpress-е. Там столько всего намешано: несколько CSS внешних файлов (wp темы, bootstrap-а, плагинов woocommerce, jetpack, виджетов, шорткодов) и это не считая styles внутри страниц. Как же в такой каше разобраться?

Волшебный веб-инспектор

Открываете искомую страницу в браузере Google Chrome --> Дополнительный инструменты --> Инструменты разработчика

Прямо на ваших глазах я поменяю цвет заголовка h1 с черного на сиреневый. Разумеется, что эта замена произошла виртуально, только в вашем браузере. После обновления браузера, будет как раньше. Вот таким быстрым способом, можно не открывая фотошоп, подобрать цветовую гамму, затем скопировать прямо из веб-инспектора новый код и вставить в файл CSS стилей. Вопрос только в какой, если их там целая куча?

Давайте разбираться пошагово:

  1. Нажать на стрелочку
  2. Выделить заголовок на сайте
  3. На DOM дереве выделится h1
  4. В правой части появится в самом верху селектор h1 с атрибутом color #111;
  5. Правее h1 вы увидите файл style.css, при наведении на который, появится путь до него

В нашем примере, это style.css темы WordPress-а. Это подтвердилось, тем, что мы щёлкнув по черному квадратику рядом с атрибутом color, выбрали другой цвет. Цвет изменился, значит файл стилей выбран верно.

Приоритет и наследование в СSS на практике
 Приоритет и наследование в СSS на практике

Вся правая часть вкладки Styles описывает только тег h1.

<h1 class="product_title entry-title">The Red Baron – Dog Hat and Scarf Set</h1>
  • inherit from - история наследования
  • зачеркнутые строчки – переопределенные стили
  • injected stylesheet – внутренние стили внутри тега <style>
  • user agent stylesheet – дефолтные стили браузера
 Приоритет и наследование в СSS на практике

В Styles отображаются все изменения, которые происходили с тегом h1. А вкладка Computed показывает – что в итоге осталось, окончательный вариант.

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (3):

romas_s romas_s 09.02.2018 18:11:03

Спасибо за статью - новичкам она будет очень полезна. ID имеет самый высокий приоритет который перебивает весь описанный вами список приоритетов - даже локальные стили.!!!! даже если и не перебил - указываем вложенность элементов, покуда стиль не будет перебит. так же упустили что один и тот же блок может иметь до 20 классов. в этом случае - самый высокий приоритет у класса который присвоен последним. important! - работает только в том случае, если перебиваем слили аналогичными полностью по вложенности и по названиям классов. Во всех остальных случаях он игнорится, потому что мах приоритет имеют вложенные стили с мах приоритетами (последний класс блока) либо ID если имеется. От себя добавлю - для тестов создайте 3 блок вложенных друг в друга, каждому блоку назначить свой фоновый цвет и перебивать фоновый цвет по схеме: 1. вложенность - все возможные комбинации с использованием всех блоков даже html 2. назначить локальные стили и перебивать внешним CSS файлом 3. все описанное выше + important! 4. дядя гугль не знает ответа,какие стили имеют самые высокие приоритеты 5. создайте несколько CSS файлов и перебивайте стили - оба файла должны перебивать одни и те же стили - научитесь перебивать стили первым подключенным файлом CSS, который имеет ниже приоритет нежели файл подключенный самым последним. У Вас наверное вопрос, зачем такой головняк, я отвечу, поработайте с онлайн библиотекой moodle - где все css файлы 20+ CSS файлов преобразуются PHP в 1 файл, от веселуха то будет, если не разбираетесь в приоритетах стилей и как их перебивать)))).

Ответить

porsake porsake 09.02.2018 19:28:07

вы так всех новичков здесь напугаете, после прочтения вашего коммента, у них сложится впечатление, что авторы статей щадят их нервы, скрывая страшную правду о коварном CSS, который мучает даже могучего дядьку Гугла. Это была шутка :)). А если серьезно, то человек слишком практичен, чтобы ломать голову, над тем, что ему сейчас не нужно. По мере углубления в процесс обучения, возникнут и другие вопросы, ответы на которые, найдутся в сообществах.

Ответить

romas_s romas_s 10.02.2018 16:03:46

Еще раз спасибо автору за статью, очень многим она будет очень полезна + мой комент - даст возможность увидеть полную картину приоритетов. CSS сам по себе легкий, единственное что сложного в CSS - приоритеты стилей, на эту тему информация отсутствует вовсе, даже если и имеется, то корявая, где половина информации не соответствует действительности. Уж лучше со старта разобраться в приоритетах, тогда вовсе не важно в каком файле написан стиль css, его можно легко перебить.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.