CSS-Моддинг: Руководство 9А

Этап 1: Селекторы и свойства (Основы)

CSS работает по простой формуле: кто (селектор) должен выглядеть как (свойство: значение).

• Селектор — это тег (body, div), класс (.btn) или ID (#header).

• Свойства — это то, что мы меняем (цвет, размер, фон).

Пример: Сделаем фон страницы серым.

CSS

body {
  background: #BDC3B8;
}

Этап 2: Box Model (Коробки)

Это самое важное в CSS. Представь, что любой элемент на сайте — это коробка. У нее есть контент, отступ внутри (padding), рамка (border) и отступ снаружи (margin).

Пример: Создадим красивую карточку профиля с отступами.

CSS

.ms-card {
  margin: 40px auto;         /* Отступ снаружи (сверху 40px, по бокам авто - центрирует) */
  padding: 30px;             /* Отступ внутри коробки */
  border: 2px solid #003399; /* Рамка */
}

Этап 3: Цвета, прозрачность и Эмо-стиль

Мы уже научились делать блоки прозрачными с помощью background: transparent !important. Также важно не забывать про color (цвет текста), чтобы он не терялся.

Пример: Делаем наш блок друзей прозрачным и настраиваем текст.

CSS

.myspace-friends-box {
  background: transparent !important; /* Прозрачный фон */
  border: 2px solid #fff;             /* Белая рамка */
  color: #fff;                        /* Белый текст */
  padding: 10px;
}

Этап 4: Очистка и позиционирование

Чтобы страница выглядела как отдельное приложение, нам нужно скрыть стандартные элементы сайта (display: none) и зафиксировать наш блок на весь экран (position: fixed).

Пример: Прячем стандартный хедер блоггера и растягиваем наш контейнер.

CSS

header {
  display: none !important; /* Полностью убираем элемент со страницы */
}

#v-screen-wrapper {
  position: fixed; /* Фиксируем на экране */
  top: 0; left: 0;
  width: 100vw; height: 100vh;
}

ИТОГОВЫЙ КОД (Мастер-класс)

Если собрать все эти этапы вместе, получается тот самый стиль, который ты используешь для своего проекта. Сохрани этот код как основу твоего стиля:

CSS

/* --- ГАЙД: MASTER CSS --- */

/* Этап 4: Чистка и позиционирование */
header, footer, .sidebar { 
    display: none !important; 
}

#v-screen-wrapper { 
    position: fixed; 
    top: 0; left: 0; 
    width: 100vw; height: 100vh; 
    background: #BDC3B8; 
}

/* Этап 2: Коробка (MS-Card) */
.ms-card { 
    width: 900px; 
    margin: 40px auto; 
    background: #fff; 
    border: 2px solid #003399; 
    border-radius: 15px; 
}

/* Этап 3: Прозрачность и цвета */
.myspace-friends-box { 
    background: transparent !important; 
    border: 2px solid #fff; 
    color: #fff !important; 
    padding: 10px;
    border-radius: 8px;
}

/* Этап 1: Стилизация кнопок */
.btn { 
    background: #eee; 
    color: #000; 
    padding: 8px; 
    border-radius: 5px; 
    cursor: pointer;
}