Программы
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 — базовая верстка

Читать »

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

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

Читать »
Фото Python: Встроенные типы данных (list, set, dict, etc)

Python: Встроенные типы данных (list, set, dict, etc)

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

Фото Python: типы данных, переменные, логическое ветвление и циклы

Python: типы данных, переменные, логическое ветвление и циклы

Первая часть заметок о Python. О базовых типах, переменных, ветвлении и циклах.

Фото Как сделать свою middleware в Django (с примерами)

Как сделать свою middleware в Django (с примерами)

Middleware или "промежуточное программное обеспечение" - элегантный способ установить общие правила обработки запросов и ответов приложения. Давайте напишем парочку middleware, чтобы понять, как они работают.

Фото Как настроить отправку почты из Django

Как настроить отправку почты из Django

Письма об ошибках, отчёты на почту, восстановление паролей - всё это полезно при работе с сайтом. Django предоставляет удобный способ это сделать с минимумом настроек!

Фото Новый оператор match-case в Python

Новый оператор match-case в Python

В новой версии Python (3.10) появится новый оператор. Новый оператор сопоставления по шаблону (match-case).

Фото Нет слов, одни... однострочники

Нет слов, одни... однострочники

На днях вышел пост со списком полезных однострочников для JavaScript программистов. Памятуя Perl-овую молодость, заглянул туда.

Фото Добавляем переменные в контекст Django шаблонов (свой контекст-процессор)

Добавляем переменные в контекст Django шаблонов (свой контекст-процессор)

В Django вы можете передавать данные в шаблоны посредством контекстов. Контекст передаётся из контроллера (view в терминах Django), однако, если одни и те же данные нужны в разных местах, лучше сделать свой контекст-процессор.

Фото Пример своей консольной команды в Django проекте

Пример своей консольной команды в Django проекте

Если вы работали с Django проектом, то, скорее всего, запускали команды из консоли (manage.py). В Django есть простой способ писать свои команды для управления проектом.