текст перекладу
Основні можливості та переваги шаблону HTML і CSS для електронної комерції
Вибір правильного шаблону для електронної комерції може бути важливим кроком для успіху вашого інтернет-магазину. Серед численних доступних варіантів важливо вибрати шаблон, який відповідає цілям вашого бізнесу, цільовій аудиторії та ідентичності бренду. У цій статті ми розглянемо основні функції та переваги, на які потрібно звернути увагу при виборі HTML і CSS шаблону для вашого вебсайту електронної комерції.
Функції
- Адаптивний дизайн: При виборі шаблону HTML для електронної комерції, ви повинні віддати перевагу тому, який має адаптивний вебдизайн, що адаптується до будь-якого розміру екрана. Це дозволить забезпечити зручний досвід покупок для клієнтів на будь-якому пристрої.
- Дизайн для мобільних пристроїв: Більше 50% користувачів віддають перевагу перегляду через мобільні пристрої, тому намагайтеся отримати шаблон HTML і CSS для електронної комерції, який виглядає добре на мобільних пристроях.
- Продуктивність: Купуйте шаблон HTML для електронної комерції з чистим кодом і оптимізованими зображеннями, щоб створити онлайн-магазин, який працює швидко. Це може покращити оптимізацію вашого вебсайту для пошукових систем.
- Налаштовувані макети: Ви можете не знайти шаблон, який повністю відповідає вимогам вашого бренду. Припустимо, що придбаний вами шаблон має всі необхідні дизайни, але він не має кращого дизайну для електронної комерції. У цьому випадку можна розглянути можливість покупки повністю налаштовуваного шаблону, який дозволяє вносити зміни до теми електронної комерції.
- Розширене відображення продуктів:
- Шаблон повинен дозволяти додавати галереї зображень високої роздільної здатності з можливістю збільшення, переглядом на 360 градусів і підтримкою відео для привабливого відображення продуктів.
- Ви повинні мати можливість додавати детальні описи продуктів з налаштовуваними полями та опціями в шаблон, щоб надати клієнтам вичерпну інформацію.
- Шаблон повинен мати розділ відгуків та оцінок клієнтів з легким у використанні рейтингом для створення довіри та соціального доказу.
текст перекладу
У документі HTML кожному елементу можна призначитиid.
. . .
. . .
``` `id` має бути унікальним в межах всього документа. Наприклад, наступний код **не дозволений**, оскільки два абзаци мають однаковий `id`. ```
. . .
. . .
``` Після того, як ви призначите відповідний `id`, ви зможете використовувати селектор `id`, щоб надати кожному абзацу унікальний стиль. Селектор `id` починається з хеш-символу (`#`), після якого йде `id` елемента, який ви хочете вибрати. ``` #first-paragraph { color: red; } #second-paragraph { color: blue; } #third-paragraph { color: green; } ``` [Переглянути демо коду 🔗](https://codepen.io/ericnanhu/embed/preview/rNRrJEY?default-tab=html%2Cresult) Однак, як ви бачите, оскільки не може бути двох елементів з однаковим `id`, цей метод все одно вимагає від нас мікроменеджменту окремих елементів. Тому, замість цього, можна використовувати `class`, щоб категоризувати різні елементи. ```
. . .
. . .
. . .
``` Далі використовуйте селектори `class`, щоб вибирати HTML елементи під цією конкретною `class`. Селектор `class` починається з крапки (`.`), після якої йде `class`, який ви хочете вибрати. ``` .red-text { color: red; } .blue-text { color: blue; } ``` [Переглянути демо коду 🔗](https://codepen.io/ericnanhu/embed/preview/oNVMEKQ?default-tab=html%2Cresult) Окремі елементи HTML також можуть бути розташовані під кількома класами, розділеними пробілами. Це дозволяє створювати різні комбінації. Наприклад, ви можете зробити текст жирним і червоним, призначивши елементу класи `red-text` і `bold`. ```
. . .
. . .
. . .
``` ``` .red-text { color: red; } .blue-text { color: blue; } .bold { font-weight: bold; } .underline { text-decoration: underline; } ``` [Переглянути демо коду 🔗](https://codepen.io/ericnanhu/embed/preview/yLwqKBb?default-tab=html%2Cresult) Нарешті, можливо вибрати елементи конкретного типу під заданим `class`. Наприклад, ось як можна вибрати всі `p` елементи з класом `red-text`.
Heading
. . .
. . .
p.red-text { color: red; } ``[Переглянути демо коду 🔗](https://codepen.io/ericnanhu/embed/preview/RwdBMbz?default-tab=html%2Cresult) Зверніть увагу, що хочаpтакож має класred-text, він залишатиметься без стилів, оскількиp.red-textвибирає лише елементиpз класомred-text`.
Селектори-комбінатори
Коли браузер відображає вебсторінку, він створює деревоподібну структуру на основі HTML документа. Наприклад:
. . .
. . .
. . .
``` Цей HTML документ створить таку деревоподібну структуру: , що означає, що елементи матимуть ієрархічні відносини один з одним. Наприклад, якщо ми почнемо з ``, батьківського елемента, він має два нащадки: `div` і `section`, які є братами один одному. Ви можете використовувати ці відносини між елементами для вибору бажаних компонентів.
текст перекладу
Ці селектори називаються комбінаторними селекторами.
Наприклад, ви можете використовувати пробіл для вибору нащадків елемента.
div p {
color: red;
}
```
Зверніть увагу, що два абзаци, прямі і непрямі нащадки div, обрані. Окрім вибору нащадків, ви також можете вибирати сусідів за допомогою селекторів
+ і ~.
. . .
. . . . . .+ вибирає сусіда безпосередньо після конкретного елемента: p + span { color: red; } Ви можете комбінувати різні комбінаторні селектори, щоб створити складний селектор, наприклад,
div > p + span. Однак не рекомендується використовувати це, оскільки дуже легко допустити помилки. Наприкінці також можливо використовувати селектори class разом з комбінаторними селекторами. Наприклад, ви можете вибрати всі p елементи, які є нащадками елементів під класом .intro.
.intro p {. . .}
У цьому випадку браузер почне з елементів під класом intro, а потім перевірить, чи є у них абзаци як нащадки.
Псевдоселектори
Є два типи псевдоселекторів: псевдокласові селектори та псевдоелементні селектори.
Псевдокласові селектори дозволяють стилізувати елемент залежно від його стану.
Наприклад, давайте розглянемо елемент `` , який представляє гіперпосилання на вебсторінці. Спочатку він виглядає синім. Після кліку він стає червоним, а після того, як він був відвіданий, він стає фіолетовим. Попри те, що це той самий елемент, до нього застосовуються різні стилі в залежності від його стану.
Псевдокласові селектори є ключем до досягнення цього ефекту. Вони вибирають елементи тільки тоді, коли вони знаходяться в певному стані.
Елемент гіперпосилання починається без будь-якого стану. Коли ви наводите курсор на нього, йому присвоюється стан :hover, при кліку — стан :active, а після відвідування — стан :visited.
Ці стани дозволяють застосовувати різні стилі до того самого елемента в різних обставинах. Ця функція є важливою для фронтенд-дизайну, оскільки дозволяє вебсторінці динамічно реагувати на дії користувача.
a {
color: blue;
}
a:hover {
color: darkblue;
}
a:active {
color: red;
}
a:visited {
color: purple;
}
Існує багато інших псевдокласових селекторів, і різні елементи можуть мати різні стани. Ми не будемо охоплювати всі з них у цьому уроці, але якщо вам цікаво, ось список усіх псевдокласових селекторів від W3Schools.
Псевдоелементні селектори, з іншого боку, використовуються для вибору частин елемента.
Наприклад, початкова літера є популярним декоративним елементом на багатьох вебсторінках. Вони використовуються для позначення початку статті.
Без псевдоелементного селектора вам доведеться обертати першу літеру абзацу в елемент і потім застосовувати стилі до цього.
Lorem ipsum dolor sit . . .
текст перекладу
Однак є і скорочення. Ви можете просто використовувати селектор ::first-letter, щоб вибрати першу літеру елемента.
Lorem ipsum dolor sit . . .
.cap-drop::first-letter {
font-size: xx-large;
float: left;
margin-right: 5px;
}
Переглянути демо коду 🔗
.cap-drop знаходить елементи під класом cap-drop, а потім ::first-letter вибирає першу літеру вибраних елементів. Зверніть увагу, що псевдоелементні селектори починаються з двох двокрапок (::). Це дозволяє уникнути необхідності обертати першу літеру в елемент ``.
Існують інші псевдоелементні селектори, доступні в CSS. Для деталей відвідайте вказану сторінку.
Інші селектори
Іноді вам може знадобитися застосувати ті ж стилі до всіх елементів на вебсторінці, таких як уніфікація шрифта або вирівнювання тексту. У такому випадку, замість того щоб повторювати одну й ту саму стильову директиву для всіх елементів, можна використовувати універсальний селектор (*), який вибирає всі елементи на вебсторінці.
* {
font-family: Arial, sans-serif;
}
Або, якщо ви хочете вибрати лише підмножину елементів, можна використовувати груповий селектор. Різні селектори в групах розділяються комами (,).
h1, h2, h3, p {
font-family: Arial, sans-serif;
}
Нарешті, CSS також дозволяє вибирати елементи на основі атрибутів. Наприклад, наступний приклад вибирає всі p елементи з атрибутом lang.
p[lang] {. . .}
Або ви також можете вказати бажане значення для цього атрибуту.
p[lang="en"] {. . .}
І тепер вибиратимуться тільки ті p елементи, які мають атрибут lang="en".
Додаткове читання
- Що таке адаптивний дизайн
- Як зробити ваші зображення адаптивними
- Як створити та налаштувати анімації в CSS
Цей пост був спочатку опублікований на TheDevSpace. Усе, що вам потрібно для опанування веб-розробки, в одному місці.
Перекладено з: Introducing CSS Selectors