Программы
CSS — стили

CSS — стили

Гораздо позднее, чем HTML, появились каскадные таблицы стилей — CSS. Во времена беззакония и хаоса, когда у каждого браузера были свои свистелки и способы «сделать красиво», консорциум W3C принял рекомендацию CSS1.

Гораздо позднее, чем HTML, появились каскадные таблицы стилей — CSS. Во времена беззакония и хаоса, когда у каждого браузера были свои свистелки и способы «сделать красиво», консорциум W3C принял рекомендацию CSS1.

Особенностью CSS были:

  1. Независимость от браузера (свободная).
  2. Каскадность — то есть свойства наследовались на дочерние теги (те, что лежали внутри тех, на которые написаны правила).

Вернёмся к инструментам веб-разработчика и обратим внимание на вкладку «Styles».

Там будут те самые описания стилей — CSS, которые применены к выбранном элементу (тегу). Например, там есть простое правило, задающее цвет фона тега <body> — то есть самой страницы:

body {
  background: #f1f1f1;
}

Пару слов о цвете

Цвет задан в шестнадцатеричном коде. Его можно разбить на 3 части: «f1», «f1», «f1». Каждая из этих частей отвечает за насыщенность определённого цвета спектра RGB — красный, зелёный и синий.

Таким образом, самый красный цвет, который вы можете использовать —  #FF0000, зелёный — #00FF00, синий — #0000FF. Сумма их — это белый — #FFFFFF.

То есть наш фон «почти белый, слегка сероватый».

Наследование правил CSS

Хорошо, предположим, мы написали следующий html-код:

<div style="color: #22cc66; border: 1px solid black; padding: 10px;">
  Просто текст цвета div-правила.
  
  <h3>Пример наследования цвета текста</h3>
 
  <p style="color: #555555">
    Пример переопределения цвета.
  </p>
</div>

Получим:

Просто текст цвета div-правила.

Пример наследования цвета текста

Пример переопределения цвета.

Давайте разбираться, что же мы написали:

  1. Элемент «пустышка» div — не имеет никакого семантического смысла, используется, когда надо сделать какой-то блок, но в рамках документа он не представляет какого-то глубокого смысла. Тот же h3 — заголовок, p — параграф, а div… просто блок.
    • В div-е мы написали атрибут style, который используется для указания CSS-стилей элемента в самом элементе (inline описание). В атрибуте style мы указали 3 css правила:
      1. color: #22cc66 — цвет текста внутри элемента (светло-зелёный);
      2. border: 1px solid black — рамка элемента, в данном случае — составное правило, означающее: рамка толщиной в 1 пиксель, цельная, чёрного цвета (да, вместо #000000 можно написать black);
      3. padding: 10px — сделать отступ внутри элемента, чтобы до рамки было 10 пикселей.
  2. Текст внутри div, который, как мы и заказывали — зелёный.
  3. Заголовок 3-го уровня (h3). Он без стилей, лежит в div со стилем ⇒ наследует цвет. border и padding он не наследовал от div потому что… так придумали создатели CSS. Вы скоро привыкнете.
  4. Параграф (p), в нём задан атрибут style, где определён color (серенький). Но <p> лежит в <div>, который тоже определяет color… Побеждает тот, кто последний определил, то есть <p>.

Домашнее задание:

Узнать, как использовать следующие css-правила (часто используемые) и применить их на своей соц. страничке, которую мы верстали на первом занятии. То есть перейти от табличной вёрстки к div-ной.

text-align

Выравнивание текста по горизонтали в пределах данного элемента

margin

Задает величину  отступа от каждого края элемента

font-family

Определяет, каким шрифтом (например, «Times New Roman») будет оформлен текст

font-size

Задается размер шрифта (например, 14px)

font-style

Это свойство определяет какой будет шрифт — обычный курсив или наклонный

height

Задает высоту данного блока (например, img)

widht

Задает ширину данного блока (например, img)

max-height

Задает максимальную высоту данного элемента

max-widht

Задает максимальную ширину данного элемента

min-height

Задает минимальную высоту данного элемента

min-widht

Задает минимальную ширину данного элемента

border-radius

Добавляет скругленные уголки данному элементу (скруглённое фото — это модно!)

padding

Данное свойство определяет размер отступа вокруг элемента

 

Также может быть вам интересно:

HTML — базовая верстка

Читать »

Расположение элементов на странице

Уверен, когда вы делали задание из первого урока, элементы на странице не слушались, наезжали друг на друга, в общем, не хотели стоять так, как хотелось бы вам. Для того, чтобы их укротить нам потребуется понимание того, как браузер расставляет эти самые элементы. Хотя бы базовое.

Читать »
Фото Добавляем поддержку медиа-файлов в Django проект

Добавляем поддержку медиа-файлов в Django проект

Современные сайты редко ограничиваются только текстом и вёрсткой. Часто в заметках красуются фотографии, а рядом с описанием товаров - их изображения.

Фото Настройка журналирования (логирования) в Python с примерами

Настройка журналирования (логирования) в Python с примерами

Во время работы программы часто нужно сохранять некоторые важные записи о процессе выполнения команды. В Python есть довольно мощный модуль для работы с логами - давайте разберёмся с тем, как его использовать.

Фото Маленькая книга о Go (golang)

Маленькая книга о Go (golang)

Маленькая книга о Go распространяется под лицензией Attribution-NonCommercial-ShareAlike 4.0 International license. Вы не должны платить за эту книгу.

Фото Новый синтаксис старой команды with в Python 3.10

Новый синтаксис старой команды with в Python 3.10

Как же долго моё чувство прекрасного страдало… Но в Python 3.10 появился новый парсер синтаксических конструкций Python!

Фото Разграничение прав доступа на Django сайте

Разграничение прав доступа на Django сайте

Почти на любом веб-сайте необходимо разделять пользователей на группы и предоставлять им разные возможности. В Django есть довольно серьёзная система прав доступа для пользователей - давайте её рассмотрим!

Фото Пользователи и их создание в Django - своя регистрация на сайте

Пользователи и их создание в Django - своя регистрация на сайте

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

Фото Как на Bash посчитать число строк в проекте (директории)

Как на Bash посчитать число строк в проекте (директории)

Ниже будет представлен однострочник, решающий данную задачу на Bash + пошаговое описание его работы.

Фото Пользователи и авторизация (логин) в Django, кастомизация пользователя

Пользователи и авторизация (логин) в Django, кастомизация пользователя

В Django есть множество встроенных возможностей, которые позволяют не реализовывать многие классы для стандартных операций. Среди них - авторизация. Django изначально предоставляет пользовательскую систему. Но её можно использовать лучше, чем по умолчанию.