Простой и пустой HTML шаблон
<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h1>Заголовок раздела</h1>
<p>Текст раздела</p>
</section>
</main>
<footer>
<p>Copyright © Год</p>
</footer>
</body>
</html>Универсальные HTML Open Graph метатеги, для различных соцсетей. Однако же, стоит заметить, что для некоторых платформ может быть специфическое начало в property:
<meta property="og:title" content="Заголовок страницы">
<meta property="og:description" content="Описание страницы">
<meta property="og:image" content="URL_изображения">
<meta property="og:url" content="URL_страницы">
К слову сказать в HTML множество различных мета-тегов, вот еще пример иногда или часто встречающихся:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Описание вашего веб-сайта">
<meta name="keywords" content="ключевые слова, разделенные запятыми">
<meta name="author" content="Имя автора">
<meta name="robots" content="index, follow">
<meta name="googlebot" content="index, follow">
<meta name="revisit-after" content="7 days">
<meta name="language" content="язык">
<meta name="theme-color" content="#ffffff">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">Все мы знаем, что есть такой формат ссылки mailto: но многие не знают, что сюда можно добавить сразу и тему письма и строки для начала письма. например
<a href="mailto:Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в браузере должен быть включен Javascript. ?subject=Вопрос с сайта&body=Здравствуйте">нам на почту</a>Это же работает и для большинства ссылок на мессанджеры, только нужно указывать ?text=
Простейший пример горизонтального меню с использованием CSS flexbox
<div class="container">
<nav class="menu">
<a href="#">Главная</a>
<a href="#">О нас</a>
<a href="#">Услуги</a>
<a href="#">Контакты</a>
</nav>
</div>Стиль
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.menu {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f2f2f2;
padding: 10px;
}
.menu a {
text-decoration: none;
color: #333;
margin-right: 10px;
}Flexbox сильно упрощает верстку блочных элементов Подробнее о всех свойствах можно прочесть по этой ссылке.
Пример анимации на CSS. Мигание элемента
<div class="pulse"></div>
.pulse {
width: 100px;
height: 100px;
background-color: #ff5e3a;
border-radius: 50%;
animation: pulseAnimation 1.5s ease-in-out infinite;
}
@keyframes pulseAnimation {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
CSS постоянно развивается и дополняется, это и новые единицы измерения например cqw, cqmin, это и новые селекторы, например has или where, и попытки добавить математические операторы. Вообщем, кто занимается фронтэндом, те должны следить и постоянно быть в курсе обновлений и поддержке браузерами. Вот, например, один из обзоров, что добавили в 2023 году. А вот крутейший сайт, гд можно проверить, какой браузер, что поддерживает. Опять же ссылки еще я продублирую в самом конце
А пока перечислю самые популярные и часто используемые свойства css
-
text-decoration: Устанавливает вид текста (например подчеркнутый). -
box-shadow: Устанавливает тень блока. Для текста text-shadow -
transition: Устанавливает переходные эффекты для свойств элемента при изменении состояния. Можно указывать время (transition-duration) и тип (transition-timing-function) перехода. Иными словами делает плавной анимацию -
text-align: Устанавливает выравнивание текста внутри элемента. -
widthиheight: Устанавливают ширину и высоту соответственно. Можно и нужно использовать также min-width или max-width для установки минимальной или максимальной ширины (или высоты) -
border: Устанавливает границу элемента. Также можно прописать:border-width(толщина границы),border-color(цвет границы),border-style(стиль границы). Border-radius позволит вам скруглить углы. -
font-family: Устанавливает шрифт (семейство шрифта) для текста. -
font-size: Устанавливает размер шрифта. -
color: Устанавливает цвет текста. -
background: Устанавливает фоновые свойства элемента. Некоторые возможные значения:background-color(цвет фона),background-image(изображение фона),background-position(положение фона),background-repeat(повторение фона). -
padding: Устанавливает внутренние отступы элемента. Можно задавать отступы для всех сторон сразу (padding: 10px) или для конкретной стороны (padding-left: 10px). -
margin: Устанавливает внешние отступы элемента. Можно задавать отступы для всех сторон (margin: 10px) или для конкретной стороны (margin-top: 10px). -
position: Определяет позиционирование элемента. Некоторые распространенные значения:static(позиционирование по умолчанию),relative(относительное позиционирование),absolute(абсолютное позиционирование),fixed(фиксированное позиционирование). -
display: Устанавливает тип отображения элемента. Некоторые распространенные значения:block(элемент отображается как блок),inline(элемент отображается как строчный элемент),none(элемент не отображается). -
gradient-background: Позволяет создавать градиентные фоны с плавным переходом цветов. -
transform: Позволяет изменять размер, поворот и масштаб элементов. -
opacity: Позволяет устанавливать прозрачность элементов. -
box-sizing: Позволяет управлять моделью размеров блока, определяя, каким образом размеры и отступы влияют на полное занимаемое пространство. -
media queries: Позволяют создавать адаптивный дизайн, изменяя стили в зависимости от различных параметров экрана (например, ширина экрана, разрешение и ориентация). -
flexbox: Позволяет гибко распределять элементы внутри контейнера по горизонтали и вертикали. -
grid: Позволяет создавать сетки для размещения элементов на веб-странице. -
animation: Позволяет создавать сложные анимации и переходы с использованием ключевых кадров и временных функций.
Теперь о CSCC/LESS/SASS. Все это так называемые препроцессоры css, которые сильно расширяют функциональность и помогают при программировании (или написании) css. Можно использовать переменные, константы, вложенности, mixin и т.д., SCSS и LESS отличаются синтаксисом и некоторыми особенностями, но основные концепции и возможности у них схожи. Но я обещал поменьше теории ) Мне лично scss помог в свое время избавиться от всяких !important и быстрой замены каких-либо цветов сразу для всех элементов. Вот простой пример
// Определение переменных
$primary-color: #ff0000;
$font-size: 16px;
// Стили для элемента .my-element
.my-element {
background-color: $primary-color;
font-size: $font-size;
&:hover {
color: #fff;
}
.inner-element {
font-weight: bold;
}
}Чуть не забыл, пожалуй самое базовое и нужное в CSS это сброс всех отступов границ и т.д. для умолчаний. Вы можете добавить и свои элементы
/* CSS Reset */
/* Обнуление отступов и полей */
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
margin: 0;
padding: 0;
}
/* Сброс стандартных стилей списков */
ol, ul {
list-style: none;
}
/* Границы */
img, iframe {
border: 0;
}
/* Обнуление свойств шрифта */
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
/* Сброс стандартных стилей ссылок */
a {
text-decoration: none;
color: inherit;
}
/* Сброс стандартных стилей заголовков */
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}Теперь по дебрям, кратко и сухо.
