- Стаття допоможе внести правки в оформлення свого сайту. Ці ж знання допоможуть завантажити який-небудь...
- Основні теги
- Введення в CSS
- Класи і ідентифікатори
- Спадкування і перевизначення CSS стилів
- Вкладеність тегів і об'єктів в CSS, селектори
- Популярні CSS параметри
- Як швидко редагувати стилі
- Популярні завдання
- Це трохи посунути
- Це поміняти місцями, тут додати
- це перефарбувати
- це прибрати
- Виправлення помилок
- 1. Коли блоки сильно змістилися
- 2. Коли оформлення не таке, як очікується
- Висновок
Стаття допоможе внести правки в оформлення свого сайту. Ці ж знання допоможуть завантажити який-небудь шаблон на themeforest.net і змайструвати з нього Лендінгем для перевірки своїх гіпотез.
Наша взаимовыгодная связь https://banwar.org/
Оформлення будь-якого сайту складається з двох частин. Це HTML і CSS. В HTML знаходиться структура сторінки сайту, а в CSS її оформлення. Оскільки ми не плануємо створювати нові сайти, а тільки хочемо внести правки в існуючі, нам не знадобляться довгі освітні курси. Досить знати основні базові принципи і кілька правильних речей, про які ми зараз і розповімо.
Введення в HTML
Основа будь-якого сайту - це HTML код. Щоб подивитися, як він виглядає, відкрийте браузер Chrome (тут і далі ми будемо дивитися все в ньому), натисніть правою кнопкою миші по сторінці і в контекстному меню виберіть пункт «Переглянути джерело сторінки» (View Page Source).
Все це все таке - це і є HTML код. Якщо почати в нього вдивлятися, то буде видно, що все незрозуміле знаходиться в трикутних дужках <так>, іноді з слешем </ так>.
Такі конструкції називаються тегами. В HTML тег, який без слеша позначає початок будь-якого об'єкта, а з слешем - його кінець. Можна вважати, що вся сторінка складається з таких об'єктів, вкладених один в одного. Тег початку називається відкриває тегом, а кінця зі слешем - закриває тегом.
Це виглядає приблизно так:
<Об'ект1> <об'ект2> ... </ об'ект2> <об'ект3> <об'ект4> ... </ об'ект4> </ об'ект3> </ об'ект1>
Знаки табуляції тут тільки для прикладу, вкладеність об'єктів залежить тільки від «відкриття» і «закриття» тега.
Тег, який був відкритий раніше, повинен закриватися пізніше. І навпаки: якщо тег відкритий пізніше, то повинен закритися раніше. Не повинно бути пересічний у відкритті та закритті тегів.
Так правильно:
<a> <b> ... </ b> </a>
Так помилка:
<a> <b> ... </a> </ b>
Тег <a> повинен закриватися пізніше, так як відкрився раніше, вийшло перетин.
Основні теги
Кожен тег виконує певну команду. Зараз ми розглянемо основні з них.
<head> </ head> - це службові теги, що позначають початок сторінки. Вони, як правило, не відображають ніякої інформації в браузері. Вони використовуються для того, щоб усередині за допомогою інших тегів вказати SEO параметри (keywords, description), заголовок сторінки (title), Favicon, підключити файли CSS і т.п. Якщо потрібно відредагувати вказані параметри, то шукати їх потрібно саме в частині <head>.
<body> </ body> - теги, які повинні бути відразу після тега <head>. У них міститься вся інформація, яка повинна відображатися в браузері. Закриває тег </ body> має бути після всього змісту сторінки.
<img src = 'URL'> - цей тег додає картинку на сторінку. В лапках, замість URL потрібно вказати посилання на картинку, яку потрібно показати на сторінці. Зверніть увагу, що цього тегу НЕ потрібен закриває тег.
Так правильно:
http://digistr.ru/images/logo.png '>
Так помилка:
http://digistr.ru/images/logo.png '>
<a href='URL'> - тег для посилання. Текст (або картинку), який ви хочете зробити посиланням, потрібно розмістити після відкриваючого тега <a> і перед закриває </a>.
наприклад:
http://digistr.ru/ '
> Digistr.ru
», Який буде посиланням на сторінку« http://digistr.ru/ ».
<h1> </ h1> - тег заголовка H1. Коли сайт знаходиться в просуванні, потрібно, щоб він був на сторінці, причому в одиничному екземплярі. Це найголовніший заголовок сторінки. Решта заголовки можуть знаходиться в тегах від h2 до h6. Чим більше номер, тим, стандартно, менше заголовок.
<p> - це текстовий тег для створення абзацу тексту. Кожен абзац розміщується між тегами <p> </ p>.
<br> - тег розриву рядків. В HTML коді переноси рядків ігноруються. Щоб розділити текст на абзаци використовується тег <p> </ p>, а для звичайного розриву рядків - тег <br>, якому не потрібен закриває тег.
правильно:
Рядок 1 <br> рядок 2.
Помилка:
Рядок 1 <br> </ br> 2-й рядок.
<div> </ div> - тег блоків. Зазвичай вони використовуються для логічного поділу всієї сторінки на більш дрібні частини. Наприклад, сторінку можна логічно поділити на наступні частини: шапка, навігація, основний зміст і підвал. Кожна така секція знаходиться між своїм відкриває і закриває тегом <div> </ div>.
Практично всі теги (крім body, head і, бажано, h1) можна використовувати в будь-яких кількостях на сторінці. З цих тегів і створюється структура сторінки.
Тегів трохи більше, весь список можна знайти тут . Найбільш часто використовувані такі теги:
a, b, br, button, div, em, embed, form, h1-h6, i, img, input, label, ul або ol c li, p, select, small, span, strong, table, tr, td, textarea, u. Всього близько 30 штук.
Тепер, коли ви будете бачити в коді сторінки такі теги, ви будете знати, що кожен з них робить.
Найчастіше, в готової сторінці теги виглядають зовсім інакше, ніж в прикладах. Це через те, що для HTML тегів додано нестандартне оформлення за допомогою CSS. HTML розставляє елементи, а CSS їх оформляє.
Перейдемо тепер до оформлення.
Введення в CSS
CSS код, зазвичай, розміщений в окремих .css файлах. Вони підключаються в тезі <head> за допомогою тега <link>.
<Link href = "/ styles.css" rel = "stylesheet">
У параметрі href указивайтся шлях до файлу зі стилями.
CSS конструкції мають такий вигляд:
Названіе_об'екта_для_оформленія {Параметр_оформленія1: значення параметра; Параметр_оформленія2: значення параметра; }
Нам потрібно вказати, який елемент ми хочемо оформити, а в фігурних дужках поставити це оформлення за допомогою параметрів і їх значень через двокрапку. Параметри поділяємо між собою крапкою коми. Прогалини і табуляція тут теж не важливі. Наприклад, нам потрібно зробити все абзаци тексту червоними. Тег абзацу «p» (Пе латинське).
Тоді CSS код для такого оформлення буде наступним:
p {color: red;}
Якщо ми хочемо зробити заголовок <h1> червоним, тоді код такий:
h1 {color: red;}
Так ми вказуємо тег і його оформлення. Тут ми використовували параметр оформлення - color, який дозволяє редагувати колір елемента. Як вказувати колір, дивіться тут . Найчастіше використовується шістнадцятковий код через решітку. Для червоного кольору це буде так:
h1 {color: # FF0000;}
Класи і ідентифікатори
У верстці сторінки часто можна побачити, що теги використовуються однакові, але виглядають вони по-різному на сторінці. Щоб таке зробити, потрібно ввести додаткові позначення тегами, щоб мати можливість їх оформити незалежно один від одного.
Це робиться за допомогою класів або ідентифікаторів. Різниця між ними в тому, що елементів одного класу може бути багато на сторінці, а ідентифікатор тільки один.
Класи вказуються так:
<P class = 'green-text'> ... </ p> <p> ... </ p> <p class = 'green-text'> ... </ p>
Так у нас є можливість вказати окреме оформлення для тегів <p>, у яких вказаний клас green-text.
Для цього в CSS потрібно вказати, який об'єкт ми оформляємо через точку.
.green-text {color: green; }
Для ідентифікаторів використовуються ґрати в CSS і параметр id для тега. HTML:
<Img id = 'logo' src = '...'>
CSS:
#logo {width: 100px; }
А ось так буде неправильно:
<P id = 'green-text'> ... </ p> <p> ... </ p> <p id = 'green-text'> ... </ p>
Тому що id повинен бути один на сторінці, а тут два «green-text». Ось так правильно, так як різних ID може бути багато на сторінці:
<P id = 'green-text1'> ... </ p> <p> ... </ p> <p id = 'green-text2'> ... </ p>
але логічно некоректно, так як для однотипних об'єктів, яких кілька, краще використовувати class.
ID найчастіше використовується для визначення унікальних частин сторінки, наприклад в такому вигляді:
<Div id = 'header'> Шапка сайту </ div> <div id = 'content'> Зміст сторінки </ div> <div id = 'footer'> Підвал </ div>
Спадкування і перевизначення CSS стилів
Порядок запису стилів в .css файлі може бути довільним. Для кожного об'єкта стилі застосовуються в порядку їх зазначення.
приклад:
h1 {color: red;} h2 {color: green;} h1 {font-size: 32px;}
В цьому випадку об'єкту H1 застосується два параметра - color і font-size. Незважаючи на те, що вони вказані в різних блоках. Тобто другий блок доповнює стилі першого, або успадковує стилі першого блоку. Так H1 успадкував властивість red з попереднього блоку.
Але в другому блоці можна і перевизначити стилі першого блоку. наприклад:
h1 {color: red;} h2 {color: green;} h1 {font-size: 32px; color: yellow;}
У цьому випадку колір H1 буде yellow, так як він вказаний повторно і слід після кольору red. Для тега використовується останній вказаний стиль.
Саме цей принцип дозволяє нам «перефарбовувати і рухати» дизайн сайту. В кінці файлу стилів ми можемо дописати свої стилі, які перевизначити попередні стилі тега.
Вкладеність тегів і об'єктів в CSS, селектори
Часто необхідно вказати стилі тегам, які знаходяться в певній частині сторінки. Наприклад, для телефонів в шапці сайту, які знаходяться в тегах <p>, потрібно вказати більший розмір шрифту.
Саме для цього сторінка, зазвичай, ділиться на різні логічні частини в HTML. Наприклад, у нас є такий код:
<Div id = 'header'> <div class = 'phone'> <p> +1 (234) 56-78-910 </ p> </ div> </ div> <div id = 'content'> < p> Абзац 1 </ p> <p> Абзац 2 </ p> </ div> <div id = 'footer'> <p class = 'copyright'> © 2016, Ваша компанія </ p> </ div>
Якщо ми, як і раніше, вкажемо такий стиль:
p {font-size: 32px;}
То у нас все елементи будуть шрифтом в 32px. Але нам потрібно, щоб тільки телефон був такого розміру.
Для цього в CSS ми можемо використовувати вказівку тегів з урахуванням вкладеності. наприклад:
#header .phone p {font-size: 32px;}
Таким чином, розмір шрифту зміниться тільки у тега <p>, який знаходиться в класі .phone, який, в свою чергу знаходиться в елементі з id рівним header. І навпаки, CSS буде шукати спочатку елемент #header, в ньому повинен бути елемент .phone, а далі елемент p. Параметри об'єктів вказуються через пробіл.
Розгорнутий приклад:
#header .phone p {font-size: 32px;} #content p {color: silver;} #footer .copyright {font-size: 10px;}
Тут телефон буде розміром 32px, абзаци в змісті сторінки будуть сірого кольору, а копірайт буде шрифтом в 10px.
Такі послідовності тегів, класів і ідентифікаторів називаються селекторами. Від слова select - вибрати. Вони вибирають елементи на сторінці і вказують їм стилі. Детальніше про них тут .
Крім цього, в стилях можна вказати через кому кілька селекторів, щоб вказати їм однакові стилі.
наприклад:
#content p, #footer .copyright {color: silver;} #footer .copyright {font-size: 10px;}
В цьому випадку копірайт буде сірого кольору (успадковується з правила вище) і розміром шрифту в 10px.
Популярні CSS параметри
margin, border, padding - зовнішні відступи від об'єкта, межа об'єкта і відступи всередині об'єкта, відповідно.
Виглядає це приблизно так.
Тут чорною рамкою і оформленням border виділений сам об'єкт, margin - це відступ навколо нього, а padding - всередині нього.
HTML:
<Div id = 'header'> <div id = 'logo'> <img src = '...'> </ div> </ div>
CSS:
#header {background: # F8CB9C; padding: 1px; } #Logo {margin: 10px; padding: 20px 30px; background: # C1CD89; border: 3px solid black; } #Logo img {border: 1px dashed black; }
Тут зелений відступ створений за рахунок padding в елементі #logo. Весь елемент залитий зеленим кольором, але його зміст починається ні від краю за рахунок padding, вийшла рамка для наочності. У цього ж елемента #logo вказано margin по 10px з усіх боків, що і розтягнуло зовнішній блок, вийшов другий відступ через margin. У самого ж елемента #logo чорна рамка в 3px створюється параметром border.
display - спосіб відображення елемента. Найбільш популярні значення:
- none - не відображати елемент. Використовується, коли потрібно щось «заховати / відключити» на сторінці.
- block - елемент буде розтягнутий на всю ширину елемента, в який він вкладений. Якщо елемент знаходиться в тезі <body>, то він розтягнеться на всю сторінку. Таким чином, всі інші елементи після нього будуть відображатися з нового рядка.
- inline-block - елемент буде такого розміру, який потрібно для вмісту цього елемента, в рядок можна буде розташувати кілька таких елементів (залежить від розміру рядка і елементів). Крім цього, до такого об'єкта можна застосувати властивості margin і padding, аналогічно типу block.
- inline - відображати елемент як рядковий. Рядкові елементи не мають відступів. Наприклад, слова в реченні можна вважати малими елементами. Вони мають розмір рівний їх вмісту, переносяться по рядках і слідують один за одним. Верхні margin і padding до таких елементів застосувати не можна.
position - позиціонування елемента. Має наступні популярні варіанти:
- absolute - абсолютне. Відлік позиції починається з початку сторінки, або щодо об'єкта, в який він вкладений, якщо у нього властивість position одно relative. Найчастіше використовується в зв'язці саме з relative зовнішнім об'єктом. Наприклад HTML: <div class = 'product-photo'> <span class = 'label-sale'> Розпродаж! </ Span> <img src = 'product-photo.jpg'> </ div> CSS: .product- photo {position: relative; } .Label-sale {position: absolute; top: 0px; right: 0px; } Елемент .label-sale буде позиціонуватися щодо .product-photo, так як у нього позиціонування relative. Top - вказує, щоб відлік вівся зверху. 0 - означає, що елемент буде в самому верху. Аналонічно «right: 0px» - справа. Так робляться підписи новинок, розпродажів та іншого в списках товарів. Кожен label-sale знаходиться справа вгорі саме у свого товару. Для звіту знизу використовується параметр bottom, зліва - left. Найчастіше, використовується bottom або top, right або left. Тобто вказується тільки один спосіб відліку по горизонталі і вертикалі (зліва чи справа і зверху чи знизу, відповідно).
- relative - відносне. Позиціонування елемента щодо того, де він розташований в даний момент. Використовується, коли елемент потрібно трохи «посунути».
- fixed - фіксоване. Незалежно від прокрутки вікна браузера, елемент буде знаходиться на зазначеній позиції. Використовується, як правило, для закріпленої верхньої або нижньої плашки сайту, для віджетів консультантів, які завжди знаходяться на одній позиції.
Інші параметри можна вивчити тут . Зазвичай, вони просто оформляють будь-якої тег. Найбільш популярні параметри:
background, border, clear, color, display, float, font-family, font-size, font-style, font-weight, height, left, margin, overflow, padding, position, right, text-align, text-decoration, top, width.
Як швидко редагувати стилі
У браузері Chrome клікніть на будь-який елемент сторінки правою кнопкою миші, в меню оберіть «переглянути код» або «Перевіряти елемент». Внизу відкриється панель, де буде видно HTML код сторінки. У ньому буде підсвічена рядок з елементом, за яким кликали (1).
Переконайтеся, що обраний саме потрібний для редагування елемент. Якщо це не так, то зліва в списку тегів біля кожного елемента є трикутник. Натискаючи на нього, ви зможете переглядати ієрархію об'єктів і знайти той, який потрібно відредагувати.
Справа буде видно селектори (2) які працюють для цього елемента і його стилі. При прокручуванні блоку стилів буде видно, які стилі успадковує елемент від яких класів.
У верхній блок допишіть свої стилі або відредагуйте існуючі, просто клікнувши по блоку або назвою параметра і значення в ньому. Наприклад, так:
Тут ми переписали властивість color, додали background і margin-top (який замінив верхнє опис). Це змінило вигляд кнопки і підняло її вгору за рахунок зменшення зовнішнього верхнього відступу.
Тепер скопіюйте цей блок CSS коду та вставте його в кінець свого .css файлу, або замініть на нього існуючий блок з даними селектором. У нашому випадку це блок «.tp-static .btn.btn-border.btn-warning». Його потрібно знайти в .css файлі і замінити на код з браузера. Так наші зміни збережуться в сторінці.
Популярні завдання
Погратися зі шрифтами
Щоб замінити шрифт для всіх елементів, потрібно знайти в .css файлах все властивості font та font-family. У стилях, зазвичай, через кому перераховується кілька шрифтів. Якщо перший не встановлено на комп'ютері, в якому відкривається сайт, то використовується другий. Потрібно замінити зазначені назви шрифтів на свої. Якщо назва шрифту з пропуском, то його потрібно вказувати в лапках.
Наприклад, було, CSS:
body, input, textarea, select {font-family: Arial, Verdana, Tahoma;} .title {font-family: Verdana, Tahoma;}
Стало, CSS:
body, input, textarea, select {font-family: 'Open Sans', sans-serif;} .title {font-family: 'Open Sans', sans-serif;}
Тепер все шрифти будуть Open Sans. Це нестандартний шрифт (не у всіх встановлений на комп'ютері). Його та інші шрифти можна знайти на fonts.google.com . Справа в фільтрі потрібно вибрати Languages = Cyrillic для текстів без спецсимволов (для заголовків, наприклад) або Cyrillic Extended для шрифтів, які використовуються для довільних текстів (1). У списку знайдених шрифтів виберіть потрібний і натисніть на плюсик, який стане мінусики (2). Внизу з'явиться панель з обраним шрифтом (3).
Натисніть на цю панель, на вкладці Customize оберіть варіанти шрифту (жирний, курсив і т.п.). Якщо їх не вибрати, то дані формати будуть некоректно відображатися на сторінці. Але, якщо жирний курсив, наприклад, не використовується на сторінці, то краще його не вибирати. Це скоротить розмір сторінки і вона буде швидше завантажуватися.
Після вибору шрифту, на вкладці Embed скопіюйте код <link> (1) і розмістіть його в <head> свого сайту перед файлом стилів, в якому він використовується (2).
Тепер, якщо шрифт не встановлений на комп'ютері, він завантажиться з колекції шрифтів Google. На сторінці все буде відображатися коректно.
Це трохи посунути
Ключове слово тут «трохи». На 1-2 сантиметри, рідко більше. Це робиться за допомогою CSS параметрів margin, padding або position.
Наприклад, потрібно трохи посунути логотип і зробити його трохи менше.
HTML код такий, припустимо:
<Div id = 'logo'> <a href='/'> <img src = 'logo.png'> </a> </ div>
Головне - це визначити селектор і вказати йому потрібні стилі. У нашому випадку це «#logo img». Ієрархія читається справа наліво: картинка img, яка знаходиться в елементі #logo. Навпаки (зліва направо) - в блоці #logo повинна бути картика img, ось її і потрібно рухати.
Спосіб 1. Через margin рухаємо вправо і вниз.
#logo img {margin-top: 10px; / * Відступ вгорі рухає вниз * / margin-left: 20px; / * Відступ зліва рухає вправо * / width: 100px; / * Вказуємо потрібне значення параметру «трохи менше» * /}
Спосіб 2. Через padding теж рухаємо вправо і вниз.
Тільки padding - це внутрішній відступ, тому нам потрібно робити цей відступ для елемента, в якому знаходиться картинка. Тобто всередині блоку #logo повинен бути відступ. Значить наш селектор вже «#logo».
#logo {padding-top: 10px; / * Верхній відступ в елементі зрушіть все вниз * / padding-left: 20px; / * Відступ зліва рухає все вправо * /}
В даному випадку нам знадобиться ще окремий блок стилів для зміни розміру логотипу:
#logo img {width: 100px; }
Видається логічним зробити все через margin в одному блоці, але іноді макет зверстаний так, що відступи задаються через padding. Тоді простіше поправити вже існуючі стилі.
Спосіб 3. Через position.
Нам знадобиться position зі значний relative, так як потрібно посунути логотип трохи щодо поточного його положення.
#logo img {position: relative; top: 10px; left: 20px; width: 100px; }
Це поміняти місцями, тут додати
Тут знадобиться переміщення HTML коду по сторінці і, можливо, коригування стилів. Наприклад, у нас є такий код.
<Div id = 'header'> <div class = 'header-left'> Логотип </ div> <div class = 'header-center'> <div class = 'phone'> Телефон </ div> </ div> <div class = 'header-right'> Пошук </ div> </ div>
Код CSS такий для нашої задачі.
.header-center .phone {font-size: 24px; }
Наше завдання - перенести телефон в правий блок, а пошук - в центр. Для цього, потрібно поміняти вміст блоків місцями. Вийди так.
<Div id = 'header'> <div class = 'header-left'> Логотип </ div> <div class = 'header-center'> Пошук </ div> <div class = 'header-right'> <div class = 'phone'> Телефон </ div> </ div> </ div>
Але при відкритті сторінки ми побачимо, що стиль телефону змінився. Він вже не буде 24 розміром шрифту. Це пов'язано з тим, що телефон шукається в блоці «.header-center». Тому, нам потрібно виправити стилі відповідно до нової версткою, щоб селектор знаходив телефон в новому блоці. Для стилів телефону .header-center в CSS замінити на .header-right.
.header-right .phone {font-size: 24px; }
Якби початкові стилі мали такий вигляд:
.phone {font-size: 24px; }
Тобто без прив'язки до зовнішнього блоку (.header-center), який змінився (на .header-left), тоді правки в стилях не будуть потрібні.
Для додавання даних в макет аналогічно потрібно додати новий код в сторінку і написати для нього стилі.
це перефарбувати
Для перефарбовування потрібно просто визначити селектор елемента і задати йому нові стилі. Припустимо, у нас є такий код.
<Div id = 'header'> <div class = 'phone'> +1 (234) 56-78-910 <a class='callback' href='#'> Замовити дзвінок </a> </ div> < / div>
Нам потрібно зробити телефон корисним, а посилання замовлення дзвінка - синьою. При наведенні посилання повинна бути зеленою.
#header .phone {color: # FF0000; } / * Окремо потрібно вказати колір і для посилання * / #header .phone a.callback {color: # 0000FF; } #Header .phone a.callback: hover {color: # 00FF00; }
Тут через двокрапку вказується так званий псевдоклас hover. Він додається елементу при наведенні на нього курсора. Детальніше про такі класи тут .
це прибрати
Аналогічно перефарбування, потрібно визначити селектор і приховати цей елемент через параметр display, наприклад:
#header .cart {display: none; }
Виправлення помилок
Всі помилки - в коді. Якщо верстка явно «поїхала», значить десь некоректний код. Найчастіше буває два види «з'їздів».
1. Коли блоки сильно змістилися
Швидше за все, десь не вистачає закривають тегів. Або навпаки, закриває тег занадто рано з'явився. Важливо дотримуватися такі правила верстки. 1. Кожному відкриває тегу повинен бути закриває. 2. Теги не повинні перетинатися. Кожне з цих правил було детально описано вище.
Щоб уникнути таких зсувів, рекомендується форматувати код з відступами. Кожен новий блок починати з нового рядка і додатковим відступом. например:
<Div> <p> <a> ... </a> </ p> </ div> <div> <ul> <li> ... </ li> </ ul> </ div>
Так видно, що теги все вказані коректно і рівно. А помилки, звичайно, виникають, в таких ситуаціях.
<Div> <p> <a> ... </a> </ p> <div> <ul> <li> ... </ li> </ ul> </ div>
Тут не закрите перший тег div.
<Div> <p> <a> ... </a> </ p> <div> <ul> <li> ... </ li> </ ul> </ div> </ div>
Тут він закритий пізніше, ніж потрібно. Два блоки перетнулися.
Щоб побачити такі помилки - потрібно форматувати код і стежити за всіма відкриттями і закриттям тегів. Коректно відкриті і закриті теги знаходяться на одному візуальному рівні за рахунок відступів. Коли йде два поспіль закритих тега на одному рівні, швидше за все, це помилка і тег повинен закриватися раніше.
2. Коли оформлення не таке, як очікується
В цьому випадку некоректно вказано селектор. Якщо блок був перенесений з іншого блоку, то переконаєтеся, що в селекторі не вказано старий блок. Як було вище в прикладі з .header-center .phone і .headre-left .phone. Оскільки стилі успадковуються, то потрібно переконатися, що всі селектори, які раніше застосовувалися до елементу, застосовуються і при новій структурі блоків. Для цього використовуйте інструмент «Перевіряти елемент», який показує в правій частині всі застосовані стилі елемента.
Якщо блок був тільки доданий на сторінку, значить йому невірно підібраний селектор. Відповідно, потрібні стилі до елементу не застосовуються.
Висновок
Сподіваємося, дана інструкція допоможе вам вносити правки в існуючий дизайн сайту самостійно, або говорити з помічниками на одній мові. Можливо, ця інструкція стане відправною точкою в вивчення HTML и CSS з сайту Htmlbook.
Для продовження підписуйтесь на наш сторінки в Вконтакте и Фейсбуці , А також на Youtube канал.
Успішних вам продажів!
Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.
