Полное руководство по CSS
Введение в CSS
CSS (Cascading Style Sheets) - это язык стилей, который используется для оформления веб-страниц. Он позволяет задавать стили для HTML элементов, таких как цвет, шрифт, расположение и многие другие свойства.
Встроенные стили (Inline CSS)
Встроенные стили применяются непосредственно к HTML элементам с помощью атрибута style. Этот метод удобен для быстрого применения стилей, но менее предпочтителен для крупных проектов.
<p style="color: red; font-weight: bold;">Это текст с встроенным стилем</p>Внутренние стили (Internal CSS)
Внутренние стили задаются в разделе <style> внутри HTML документа. Этот метод полезен для стилей, которые применяются только на одной странице.
<style>
p {
color: blue;
font-size: 18px;
}
</style>
<p>Это текст с внутренними стилями</p>Внешние стили (External CSS)
Внешние стили подключаются к HTML документу с помощью тега<link>. Это наиболее предпочтительный метод для крупных проектов, так как позволяет разделять контент и оформление.
<link rel="stylesheet" href="styles.css">
<p class="styled-text">Это текст с внешними стилями</p>Цвета и Шрифты
<style>
.text-color {
color: #3498db;
}
.background-color {
background-color: #ecf0f1;
}
.font-size {
font-size: 20px;
}
.font-family {
font-family: 'Arial', sans-serif;
}
</style>
<p class="text-color">Этот текст окрашен в синий цвет.</p>
<div class="background-color">Этот блок имеет светло-серый фон.</div>
<p class="font-size">Этот текст имеет увеличенный размер шрифта.</p>
<p class="font-family">Этот текст использует определенный шрифт.</p>В этом разделе рассмотрены свойства для задания цвета текста, фона, размера шрифта и шрифта. Свойство color задает цвет текста, background-color — цвет фона, font-size — размер шрифта, а font-family — шрифт.
Модель Коробки (Box Model)
<style>
.box-model {
width: 100px;
height: 100px;
padding: 10px;
border: 5px solid #333;
margin: 15px;
background-color: #f39c12;
}
</style>
<div class="box-model">Пример модели коробки</div>Модель коробки описывает как браузер рассчитывает размеры элементов. Она включает в себя ширину, высоту, внутренние отступы (padding), границы (border) и внешние отступы (margin). Это важное понятие для понимания расположения и размеров элементов на странице.
Flexbox Layout
<style>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: #2ecc71;
}
.flex-item {
background-color: #e74c3c;
color: white;
padding: 10px;
margin: 5px;
border-radius: 5px;
}
</style>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>Flexbox — это метод для создания макетов, который позволяет легко выравнивать элементы и управлять их пространством внутри контейнера. Свойство display: flex используется для включения Flexbox, а justify-content и align-items управляют выравниванием элементов.
Грид Layout
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.grid-item {
background-color: #9b59b6;
color: white;
padding: 20px;
border-radius: 5px;
}
</style>
<div class="grid-container">
<div class="grid-item">Grid Item 1</div>
<div class="grid-item">Grid Item 2</div>
<div class="grid-item">Grid Item 3</div>
</div>Грид Layout позволяет создавать сложные макеты с помощью сетки. Свойство display: grid активирует Грид, а grid-template-columns и gap управляют количеством колонок и промежутками между элементами.
Медиа Запросы
<style>
.responsive-text {
font-size: 16px;
}
@media (min-width: 768px) {
.responsive-text {
font-size: 24px;
}
}
@media (min-width: 1024px) {
.responsive-text {
font-size: 32px;
}
}
</style>
<p class="responsive-text">Размер этого текста меняется в зависимости от ширины экрана.</p>Медиа запросы позволяют применять стили в зависимости от характеристик устройства, таких как ширина экрана. Это позволяет создать адаптивный дизайн, который изменяется в зависимости от размеров экрана.
Отступы и Паддинги
<style>
.margin-padding-example {
margin: 20px;
padding: 15px;
background-color: #3498db;
color: white;
}
</style>
<div class="margin-padding-example">Этот блок имеет отступы и паддинги.</div>Отступы (margin) и паддинги (padding) управляют пространством вокруг элементов. Отступы создают пространство вне границ элемента, а паддинги — внутри границ элемента.
Селекторы и Свойства
<style>
p {
color: green;
font-size: 16px;
}
</style>
<p>Это текст параграфа.</p>CSS селекторы используются для выбора элементов на странице, к которым будут применяться стили. Свойства определяют, как выбранные элементы будут стилизованы. Например, селектор p выбирает все абзацы, а свойство color изменяет их цвет.
Классы и Идентификаторы
<style>
.text-green {
color: green;
}
#main-title {
font-size: 24px;
font-weight: bold;
}
</style>
<h1 id="main-title">Главный Заголовок</h1>
<p class="text-green">Текст с классом text-green.</p>Классы и идентификаторы позволяют применить стили к определенным элементам. Классы обозначаются через точку (.), а идентификаторы через решетку (#). Классы можно использовать многократно, а идентификаторы должны быть уникальными для каждого элемента.
Порядок Применения Стили
<style>
#main-title {
color: blue;
}
h1 {
color: red;
}
</style>
<h1 id="main-title">Этот заголовок будет синим</h1>CSS использует каскадный порядок для применения стилей. Это означает, что если к элементу применяются несколько стилей, будет использован стиль с большей специфичностью или последний по порядку. Важно понимать, как работает специфичность, чтобы правильно управлять стилями.
Наследование
<style>
div {
color: blue;
}
p {
font-size: 18px;
}
</style>
<div>
<p>Это параграф внутри div.</p>
</div>В CSS некоторые свойства наследуются дочерними элементами от своих родительских элементов. Это означает, что дочерний элемент может автоматически принимать стили от родителя, если они не переопределены.
Группировка Селекторов
<style>
h1, h2, h3 {
color: navy;
font-family: Arial, sans-serif;
}
</style>
<h1>Заголовок H1</h1>
<h2>Заголовок H2</h2>
<h3>Заголовок H3</h3>Для применения одного и того же стиля к нескольким элементам можно использовать группировку селекторов. Это упрощает код и снижает количество повторяющихся стилей.
Макеты и Выравнивание
<style>
.flex-container {
display: flex;
justify-content: space-around;
}
.flex-item {
background-color: pink;
padding: 10px;
margin: 5px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.grid-item {
background-color: lightcoral;
padding: 10px;
}
</style>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>В этом разделе рассмотрены методы выравнивания элементов с помощью flexbox и grid макетов.
Анимации
<style>
.animated-box {
width: 100px;
height: 100px;
background-color: purple;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<div class="animated-box">Animated Box</div>Пример CSS анимации с использованием @keyframes для вращения элемента.
Трансформации
<style>
.transform {
width: 100px;
height: 100px;
background-color: teal;
transform: rotate(45deg);
}
</style>
<div class="transform">Rotated Box</div>Пример применения CSS трансформаций для изменения формы элемента.
Псевдоклассы
<style>
.link {
color: blue;
text-decoration: none;
}
.link:hover {
color: red;
text-decoration: underline;
}
.input {
padding: 8px;
border: 1px solid #ccc;
}
.input:focus {
border-color: blue;
outline: none;
}
</style>
<a href="#" class="link">Hover over me</a>
<input type="text" class="input" placeholder="Focus on me" />Псевдоклассы позволяют изменять стили элементов в зависимости от их состояния. В этом примере использованы псевдоклассы :hover и :focus.
Псевдоэлементы
<style>
.pseudo-element {
position: relative;
padding: 20px;
border: 1px solid #ccc;
}
.pseudo-element::after {
content: " - Псевдоэлемент";
color: grey;
position: absolute;
right: 0;
top: 0;
}
</style>
<p class="pseudo-element">This paragraph has a pseudo-element</p>Псевдоэлементы, такие как ::after и ::before, используются для добавления стилизованного контента до или после элемента. В этом примере показано использование ::after.