<a href=”https://xxx.com”><img src=”https:/image.png” alt=””></a>
Тут атрибут src визначає адресу зображення, а href — адресу сайту або веб-сторінки, куди має переводити посилання.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Изменение цвета текста</title>
<style>
.colortext {
color: red; /* Красный цвет выделения */
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, <span class="colortext">consectetuer
adipiscing elit</span>,
sed diem nonummy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat.</p>
</body>
</html> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Найпростіший спосіб має такий вигляд:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Цвет текста и маркеров в списке</title>
<style>
li {
color: red; /* Цвет маркеров */
}
li span {
color: navy; /* Цвет текста */
}
</style>
</head>
<body>
<ul>
<li><span>Скрипка</span></li>
<li><span>Гитара</span></li>
<li><span>Волынка</span></li>
<li><span>Шарманка</span></li>
<li><span>Челеста</span></li>
</ul>
</body>
</html> Для реалізації використовуємо наступний код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ссылки без подчеркивания</title>
<style>
a {
text-decoration: none; /* Отменяем подчеркивание у ссылки */
}
</style>
</head>
<body>
<p><a href="link.html">Ссылка без подчеркивания</a></p>
</body>
</html> Щоб додати зображення в документ застосовується тег , його атрибут src визначає шлях до графічного файлу, який має бути у форматі GIF, PNG чи JPEG.
Також для тега
необхідно вказати обов’язковий атрибут alt, він описує альтернативний текст, видимий у процесі завантаження зображення або при відключенні картинок у браузері.
В HTML4, HTML5 <img src="шлях до файлу" alt="альтернативний текст"> В XHTML <img src="шлях до файлу" alt="альтернативний текст" />
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Мої зображення</title> </head> <body> <p><img src="images/dzen.png" alt="Листи майстра дзен"></p> </body> </html>
Якщо графічний файл знаходиться в одній папці з HTML-документом, то як шлях достатньо вказати тільки ім’я файлу.
Враховуйте, що коли використовується XHTML або суворий HTML4, тег <img> можна розміщувати тільки всередині блокових елементів на кшталт <p> або <div>.
Іноді коли формується картка товару у WooCommerce, потрібно оформити опис та додаткову інформацію так, щоб текст розгортався. Далеко не кожна тема дає таку можливість, але все можна виправити.
Ви завжди можете скористатися додатковим кодом, щоб отримати такий ефект, а інтегрувати цей код можна за допомогою плагіна "Simple Custom CSS and JS".
Спочатку потрібно зберегти код php, який можна додати через пункт html:
function add_full_description_and_additional_info_accordion_script() {
?>
<script>
document.addEventListener(‘DOMContentLoaded’, function () {
const descriptionTab = document.querySelector(‘a[href=”#tab-description”]’);
const additionalInfoTab = document.querySelector(‘a[href=”#tab-additional_information”]’);
const descriptionPanel = document.querySelector(‘#tab-description’);
const additionalInfoPanel = document.querySelector(‘#tab-additional_information’);
function createReadMoreButton(panel, tab) {
if (panel && panel.textContent.trim() !== ”) {
const readMoreBtn = document.createElement(‘button’);
readMoreBtn.className = ‘read-more-btn’;
readMoreBtn.textContent = ‘Читати більше’;
readMoreBtn.addEventListener(‘click’, function () {
panel.classList.toggle(‘expanded’);
if (panel.classList.contains(‘expanded’)) {
readMoreBtn.textContent = ‘Читати менше’;
} else {
readMoreBtn.textContent = ‘Читати більше’;
}
});
panel.parentNode.insertBefore(readMoreBtn, panel.nextSibling);
tab.addEventListener(‘click’, function () {
document.querySelectorAll(‘.read-more-btn’).forEach(btn => btn.style.display = ‘none’);
readMoreBtn.style.display = ‘block’;
});
}
}
createReadMoreButton(descriptionPanel, descriptionTab);
createReadMoreButton(additionalInfoPanel, additionalInfoTab);
// Показуємо кнопку лише для активної вкладки при завантаженні сторінки
document.querySelectorAll(‘.read-more-btn’).forEach(btn => btn.style.display = ‘none’);
if (descriptionTab.classList.contains(‘active’)) {
document.querySelector(‘.read-more-btn’).style.display = ‘block’;
}
});
</script>
<?php
}
add_action(‘wp_footer’, ‘add_full_description_and_additional_info_accordion_script’);
А потім додайте стиль CSS:
.woocommerce-Tabs-panel–description,
.woocommerce-Tabs-panel–additional_information {
overflow: hidden;
max-height: 200px;
transition: max-height 0.5s ease;
position: relative;
}
.woocommerce-Tabs-panel–description.expanded,
.woocommerce-Tabs-panel–additional_information.expanded {
max-height: 100%;
}
.woocommerce-Tabs-panel–description:after,
.woocommerce-Tabs-panel–additional_information:after {
content: “”;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background: linear-gradient(transparent, #fff);
pointer-events: none;
opacity: 0.7;
transition: opacity 0.5s ease;
}
.woocommerce-Tabs-panel–description.expanded:after,
.woocommerce-Tabs-panel–additional_information.expanded:after {
opacity: 0;
}
.read-more-btn {
display: inline-block;
margin-top: 10px;
background-color: #000;
color: #fff;
padding: 10px 15px;
cursor: pointer;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.read-more-btn:hover {
background-color: #444;
}
