Login
Введение в CSS
Селекторы
Margin и padding
Позиционирование
Виджеты
Анимации
← HTML

Введение в CSS

JS →

Ну вот мы и дошли до css.Поздравляю!!!


CSS - каскадные таблицы стилей - оформление веб-страницы

Подключение CSS:

<head>
        ...
        <link rel="stylesheet" href="style.css">
        ...
</head>

Как назначить тегу оформление?

HTML:

<p class="name">...</p>

Где name - имя класса, которое придумывает сам верстальщик

CSS:
селектор {свойство: значение;}

    .name {
          color: green;
          font-size: 24px;
    }


Cвойства для работы со шрифтами:

1) color: цвет; - цвет текста

2) background-color: цвет; - цвет фона

3) font-size: 12px; - размер шрифта в пикселях

Для наглядности посмотрите пример

4) font-weight: значение; - толщина шрифта. Значение может быть от 100 до 900, соответственно, чтобы сделать текст полужирным, ему нужно прописать: font-weight: 900;

Для наглядности посмотрите пример

5) text-decoration: значение; - внешний вид текста (значение может быть underline (подчеркнутый), overline (надчеркнутый), line-through (перечеркнутый))

Для наглядности посмотрите пример

6) letter-spacing: 13px; - расстояние между буквами в пикселях,может быть отрицательным

Для наглядности посмотрите пример

7) line-height: 13px; - расстояние между строчками в пикселях, только положительное. Если сделать маленьким, строчки приблизятся вплотную, нулевым - наедут друг на друга.

Для наглядности посмотрите пример

8) font-family: значение; - значением является имя шрифта в кавычках. К примеру: "Times New Roman" или "Roboto". Об этом свойстве поговорим отдельно.

Для наглядности посмотрите пример

Margin, padding и border



Позиционирование


Виды элементов:

Блочные
1) Эгоисты - не дают никому стоять в одном ряду с ними.
2) Если их размер меньше размера окна, то всё оставшееся место занимается пустотой.

Строчные
1) Альтруисты - готовы встать рядом с таким же блоком и не против других соседей.
2) Игнорируют отступы по вертикали.

Свойство display
Используя свойство display, можно изменять вид элемента, а, значит, и его поведение.

Значение свойства
а) display: block; - заставить элемент вести себя как блочный, т.е. не давать другим становиться в одну строчку с собой.
б) display: inline; - заставить элемент вести себя как строчный, т.е. выстраиваться в одну строчку с соседними элементами строчного типа.
в) display: none; - не отображать элемент в принципе.
г) display: flex; - заставить блоки внутри данного встать в ряд.

Как работает "display:flex"?
Посмотрим на следующий код:
HTML:

<div class="main">
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

CSS:

.main {background-color:yellow;}
.red {width:200px; height:200px; background-color:red;}
.green {width:200px; height:200px; background-color:green;}
.blue {width:200px; height:200px; background-color:blue;}

Результат его выполнения:



Если же добавить для элемента .main свойство display:flex; произойдет два события:

квадраты встанут в ряд;
можно будет управлять положением квадратов в ряде.

Результат с display:flex;