Про CSS

1. Роль HTML 🏗️

Структура документа: HTML (HyperText Markup Language) отвечает за создание структуры веб-страницы. Он определяет элементы, такие как заголовки, параграфы, изображения, списки и т. д., которые формируют "скелет" или "дом" веб-сайта.

Теги и атрибуты: HTML использует теги (например, <div>, <p>, <img>) для определения элементов и атрибуты (например, src для изображений, href для ссылок) для предоставления дополнительной информации об этих элементах.

<p>
  Hello, it's
  <b> it-kamasutra.com </b>
</p>
<hr />
<p>You can learn JS with our service.</p>
 
<img src="http://jsheroes.io/assets/images/logo/community/JSBelgrade.jpeg" />
<img src="https://andafter.org/media/users/29/js-cube.png" />
 
<a href="http://google.com"> it-kamasutra </a>
 
<input value="hello" />
<input value="hello2" />
 
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

2. Роль CSS 🎨

Визуальное оформление: CSS (Cascading Style Sheets) отвечает за внешний вид и стиль веб-страницы. Он позволяет "разукрасить" и "выровнять" элементы HTML, задавая цвета, размеры, шрифты, отступы и другие визуальные свойства.

"Раб HTML". CSS не имеет смысла без HTML. Он стилизует существующие элементы HTML.

Атрибут style: Встроенный CSS может быть применен к отдельному элементу HTML с помощью атрибута style. Значения внутри атрибута style записываются в формате "ключ: значение;".

3. Роль JavaScript ⚡

Поведение и логика: JavaScript отвечает за интерактивность и поведение веб-страницы. Он добавляет "логику" и "жизнь" к статичной структуре (HTML) и стилям (CSS), позволяя элементам открываться, закрываться, взаимодействовать и изменять свое состояние.

"Раб HTML и CSS": JavaScript может манипулировать как структурой HTML (например, добавлять или удалять элементы), так и стилями CSS (например, изменять цвет или размер элемента).

4. Взаимосвязь между HTML, CSS и JavaScript 🔗

Иерархическая зависимость: HTML (структура) → CSS (стиль) → JavaScript (логика)

Это иерархическая зависимость, где JavaScript может влиять на CSS, который, в свою очередь, применяется к HTML.

🏠 Пример с домом:

• HTML: Строительство "дома" (стены, крыша)
• CSS: Окраска стен, выравнивание, придание эстетического вида
• JavaScript: Добавление функциональности (двери открываются/закрываются, смывается унитаз, работает электричество)

5. Инструменты разработчика (DevTools) 🔧

Вкладка Network. Показывает все запросы и ответы, происходящие по сети (загрузка HTML, CSS, JavaScript, изображений и т.д.).

Вкладка Elements. Позволяет инспектировать HTML-структуру страницы и примененные к элементам стили.

6. Принципы качественного кода: что делать можно, а что — нельзя ⚖️⚖️

✅ Рекомендуется переиспользование кода

Избегайте дублирования - повторение кода усложняет поддержку и увеличивает риск ошибок при изменениях.

Решение: используйте абстракции, функции и классы для организации кода.

❌ Избегайте смешения ответственности

Не допускайте, когда один компонент отвечает за множество задач - это нарушает принцип единой ответственности.

Решение: четко разделяйте обязанности:

• HTML - только структура
• CSS - только стили
• JavaScript - только поведение

7. Классы в CSS 🏷️

Атрибут class. Общий атрибут, который может быть добавлен к любому элементу HTML для присвоения ему одного или нескольких классов.

Тег <style>. Используется для определения CSS-правил в заголовке HTML-документа.

Определение класса: Внутри тега <style> класс определяется с помощью точки (.) перед именем класса (например, .red).

✅ Преимущества классов:

1) Устранение дублирования. Позволяет определить набор стилей один раз и применить его ко многим элементам, избегая повторения атрибута style с одинаковыми значениями.

2) Разделение ответственности. Отделяет стили от HTML-структуры, делая HTML-код более чистым и сосредоточенным на своей основной задаче (структуре).

3) Легкость изменений. Изменение стиля для класса в одном месте автоматически применяется ко всем элементам, имеющим этот класс.

<p>
  Hello, it's
  <b> it-kamasutra.com </b>
</p>
<hr />
<p>You can learn JS with our service.</p>
 
  <img src="http://jsheroes.io/assets/images/logo/community/J5Belgrade.jpeg" style="width: 50px" />
  <img src="https://andafter.org/media/users/29/js-cube.png" style="width: 50px" />
 
  <a href="http://google.com">it-kamasutra</a>
 
  <ol>
    <li class="red">learn JS</li>
    <li>learn Html</li>
    <li>learn CSS</li>
  </ol>
 
  <input value="hello" />
  <input value="hello2" />
 
  <style>
    .red {
      color: red;
      font-size: 20px;
      border: red 1px solid;
      margin-left: 10px;
      padding: 5px;
    }
  </style>
</div>