Робота з версткою інших сайтів. Інспектування

При копіюванні структури, яку ми практикували в першому тестовому завданні більшість допускається однієї і тієї ж помилки — забирають усе начисто, разом з зайвими блоками та помилками…

Пам’ятайте, що передирати бездумно — це ще більший злочин, ніж красти в інтернеті 🙂 До того ж логіка CSS селекторів на донорському скоріш за все відрізнятиметься від Вашої.

По факту нас цікавлять лише деякі з параметрів потрібних нам блоків. Для цього відкриваємо інспектор. При наведенні на блок коду в інспекторі, браузер підсвічує його результат.

Як відділити зерно від полови і виудити лишень потрібні для нас параметри. Для цього наводимо курсором на зону з властивостями — на нижньому зображенні легко помітити, що навпроти кожного параметру підсвічуєтья чекбокс.

Знімаючи галочку, ми деактивовуємо параметр, після чого він перекреслюється. 

На попередньому скріншоті я деактивував параметри height та margin. Ніякої видимої зміни на візуальній частині ми не побачили. Проте, коли я зняв галочку з властивості border-bottom зі значенням “0”, то під кожною новиною з’явилась лінія.

Тепер спробуємо зняти останній параметр з виділеної області — width. Нам варто зауважити два моменти. Змінилась сітка новин — з трьох колонок на дві. Окрім того, в інспекторі активувався нижній параметр width зі значенням 47.5%, який до цього моменту був викреслений.

Якщо ви знімете і з нього галочку, то активується нижній параметр width зі значенням 100% і макет новин стане одноколоночним. Гадаю, що ви зрозуміли принцип пріорітетності в інспекторі — рулять ті параметри, що вище.

N.B. Будь ласка, не плутайте з пріорітетністю параметрів в .CSS документах — там нижні параметри вважаються “новішими”, а отже вони перевизначають верхні.

Таким чином, досліджуючи інші сайти, Ви можете дуже просто визначати, який з параметрів знадобиться Вам в новому макеті, а який залишиться вдома. Тепер просто визначаємо пріорітетні параметри, які формують вигляд та переносимо властивості і вже через селектори прикручуємо їх до потрібних блоків.