Самые популярные css свойства

Самые популярные CSS-свойства:

color — цвет текста.
Возможные значения: red, orange, yellow, green, blue и многие другие.
Пример использования: color: blue;

display — способ отображения.
Возможные значения: none (не отображать), block (как блочный элемент) и некоторые другие.
Пример использования: display: none;

width — ширина элемента. По-умолчанию в px (pixel, точка экрана).
Возможные значения: 100px, 200, 5px и другие.
Пример использования: width: 1000;

height — высота элемента.
Возможные значения: 100px, 200, 5px и другие.
Пример использования: height: 30;

background — цвет фона.
Возможные значения: red, orange, yellow, green, blue и многие другие.
Пример использования: background: gray;

position — способ позиционирования. По-умолчанию элементы выстраиваются сверху вниз, слева направо (static). То есть, позиция элемента зависит от того, куда его вставили и какие элементы расположены перед ним. Использование значения absolute позволяет точно указывать позицию элемента с помощью свойств top и left.
Возможные значения: static, absolute, relative, fixed.
Пример использования: position: absolute;

top — расположение элемента относительно верха страницы. Работает только со значением position: absolute (или position: relative — тогда позиционирует относительно того места, куда вставлен элемент и зависит от предыдущих элементов).
Возможные значения: 100px, 200, 5% и другие.
Пример использования: top: 100;

left — расположение элемента относительно левого края страницы. Работает аналогично свойству top.
Возможные значения: 100px, 200, 5px и другие.
Пример использования: left: 30;

Источник

Все свойства CSS, которые нужны для создания сайта

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Возможно, вы только начинаете работать с CSS, а может, уже довольно опытны в этом деле. Но вы наверняка согласитесь, что количество свойств в CSS огромно. И, соответственно, заблудиться в них совсем не тяжело.

Но без некоторых CSS-свойств при создании сайта не обойтись, хотя и их не так просто выделить. Тем не менее, мы попытались это сделать.

Давайте погрузимся в свойства CSS, которые вы наверняка будете использовать при создании сайта.

1. display: flex;

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

display: flex; выстраивает элементы-потомки в горизонтальный ряд.

Совет: чтобы сделать вертикальный ряд, нужно добавить flex-direction: column; . Свойство flex-direction определяет главную ось. Значение по умолчанию — row .

justify-content: center; выравнивает элементы по основной оси. Это означает, что элемент в нашем коде будет отцентрирован по горизонтали. У justify-content могут быть разные значения. Например, при помощи justify-content: space-between можно распределить элементы по ряду, не оставляя отступов в начале и конце.

align-items управляет перпендикулярной осью, например, здесь элементы центрируются по вертикали.

Примечание редакции Techrocks. Рекомендуем почитать статью «CSS-свойство position: разбираемся с позиционированием элементов».

2. margin

Это свойство определяет расстояние между отдельными элементами.

.your-class-name < margin-top: 16px; margin-right: 12px; margin-bottom: 16px; >// краткая запись .your-class-name

Можно указать отступы с каждой стороны при помощи margin-top , margin-right и т.д. Но можно указать и все вместе, в одном свойстве margin :

Если вы пропустите bottom , будет унаследовано значение top . Если не укажете left — унаследуется значение right .

Примечание редакции Techrocks. Рекомендуем почитать статью «Все, что вам нужно знать о свойстве margin в CSS».

3. padding

На первый взгляд кажется, что padding похож на margin . Синтаксис у них идентичный, и краткая запись тоже.

Зачем тогда нужен еще и какой-то padding ?

Представьте, что у вас есть чемодан. Вы хотите написать на нем что-то, но чтобы надпись шла не прямо с верхнего левого угла. Вам хотелось бы сделать небольшой отступ от краев.

Вот для этого и нужен padding . Он задает отступ внутри элемента.

А вот если у вас есть два чемодана, и вы хотите, чтобы они не стояли вплотную друг к другу, вам пригодится margin .

4. background-color

Это свойство простое, но знать его абсолютно необходимо. С его помощью задается цвет фона. Вы можете применять его для большинства HTML-элементов.

background-color: blue; background-color: #232323; background-color: rgb(255, 255, 128); background-color: rgba(255, 255, 128, 0.5);

Атрибуты могут варьироваться: можно указывать название цвета, его HEX-значение или RGB (и даже HSL).

Особый интерес представляет RGBA, поскольку позволяет указать не только цвет, но и прозрачность. Видели 0.5 в конце? Это означает, что элемент будет на 50% прозрачным.

5. color

color имеет много сходного с background-color . Единственная разница — это свойство указывается для текста. Все остальное одинаково, включая прозрачность.

6. opacity

Но прозрачным можно сделать не только текст, а вообще все, что угодно!

opacity: 0.1; // 10% видимости opacity: 0.9; // 90% видимости

Это свойство пригождается при создании интересных эффектов и для оформления состояния отключения.

7. width

А здесь все не так просто. Чаще всего вам не понадобится фиксированная ширина элементов. Дизайн должен быть отзывчивым (адаптивным), а это достигается за счет внешних и внутренних отступов (margin и padding).

Но иногда какие-то размеры нужно зафиксировать. Например, когда вам нужно поставить значок с шириной в 24px.

Или вот эта статья. Попробуйте увеличить масштаб страницы. Вы заметите, что после определенного размера элементы смещаются. Это потому, что для страницы установлено свойство max-width .

8. height

Свойство height попроще, поскольку прокрутка страницы идет вверх и вниз. Но иногда и фиксированная высота элементов может пригодиться. Например — для хедера сайта.

Здесь также есть свои особые случаи — min-height и max-height .

9. cursor: pointer;

Наведите курсор на любую кнопку или ссылку на этой странице. Видите, как стрелочка превращается в руку?

Это происходит благодаря свойству cursor: pointer; . Если с элементом можно что-то сделать (например, мы можем нажать на кнопку или ссылку), к нему стоит добавить это свойство.

10. font-size

Это простое свойство, которое служит для управления размером шрифтов. Единица размера бывают разными, но новички в CSS могут начать с абсолютных — px.

Немного освоившись, познакомьтесь с относительными единицами, в частности, rem. Вы сможете установить для своего сайта размер шрифта по умолчанию в px, а все остальные размеры шрифтов — в относительных единицах. Тогда они будут рассчитываться, исходя из базового значения.

Например, если базовое значение 16px, 2rem будет равно 32px.

Примечание редакции Techrocks. Рекомендуем почитать «Единицы измерения в CSS» и «Доводы в пользу применения rem в CSS».

11. font-family

Вероятно, вы хотели бы видеть на своем сайте разные шрифты. Google Fonts, например, очень неплохо выглядят. Вы запросто можете выбрать какой-нибудь из этих шрифтов, включив их в ваш index.html и добавив имя шрифта в font-family .

12. :hover

При помощи :hover можно задать разные эффекты, которые будут проявляться при наведении мыши на элемент.

В этом примере при наведении на элемент курсор сменится на указатель (стрелочка сменится на руку).

Заключение

Возможно, вы удивитесь, но при помощи этих 12 свойств можно решить большинство задач, связанных с CSS сайта.

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

Источник

Основные css-свойства – что нужно знать при работе с css

От автора: приветствую вас. В css есть достаточно много свойств, если так подумать, но действительно важных и наиболее употребляемых не так уж и много. В этой статье я хотел бы кратко описать самые используемые css свойства.

Что нужно знать для начала

Многие ошибочно называют свойства в css тегами. Так вот, это не совсем правильно. Теги – это команды html языка, и только его одного – все они пишутся в угловых скобках. В css же никаких тегов не нужно. Рассмотрим например, типичные правила для оформления веб-страницы, прописанные в таблице стилей:

Это типичный синтаксис этого языка. Тут все очень просто – вначале пишется селектор (body или любой другой), потом открываются фигурные скобки, в которые и записывают все необходимые свойства и их значения.

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

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

Стили для текстового содержимого

Текст – всему голова на веб-странице. Для его оформления есть множество свойств. О них подробно написано в других статьях: Размер шрифта в html, Как задать цвет шрифта в html, Как задать шрифт в html.

С помощью свойств, описанных там, вы сможете сделать с текстом все, что угодно: изменить его размер, начертание, сам шрифт и многое другое.

Например, в css есть возможность определить расстояние между буквами и между отдельными словами. Это делается с помощью letter-spacing и word-spacing соответственно.

Отображение на экране

По умолчанию элементы делятся на строчные и блочные и разница в них только в том, что блочные не могут стоять в одной строке друг с другом. Зато строчным нельзя задать размер, он зависит от того, сколько в них содержимого.

Итак, иногда такое поведение нужно изменить и для этого используется display и множество его значений, но я расскажу лишь о самых основных:

Block – элемент становится блочным (то есть приобретает блочные особенности, даже если он был строчным. С этих пор ему можно записывать размеры, нормально определять внешние отступы и т.д.)

Inline- преобразование в строчный элемент.

Inline-block – блочно-строчный тип. Это такое поведение, при котором элемент сохраняет свои блочные свойства, но при этом может стать в одну строку с другими блоками, если им тоже прописано inline-block и им хватает места по ширине. Стоит помнить, что по умолчанию блок занимает в родителе все свободное место по ширине, потому нужно вручную определить ширину для него (абсолютную или относительную).

Table — преобразование элемента в таблицу (соответственно, есть также значения table-row и table-cell)

None – элемент исчезает со страницы и не оставляет никаких следов, как будто бы его на ней и не было.

Опять же, это не все значения, только самые основные.

Свойства размера

Блоки играют основную роль в создании сайта. Им нужно прописывать определенные размеры, это указывается с помощью таких свойств:

Max-width, min-width – максимальная или минимальная ширина. Например, если указать блоку max-width, то эта ширина не будет жесткой, она сможет меняться в зависимости от размеров окна. Если же указать и min-width, то тогда блок не сможет стать уже, чем указанный размер. Такое же можно прописать и для высоты, но это делают гораздо реже.

Также на размеры блочных элементов могут повлиять дополнительные параметры. Например, внутренние отступы. Они задаются с помощью слова padding и значения в пикселях (но можно и в другой величине). Если нужно задать отступ только для одной стороны, можно указать это, дописав к padding- через дефис нужную сторону (left, right и т.д.)

Например, если мы определили ширину контейнера в 600 пикселей, а потом добавили внутренние отступы по бокам в 20 пикселей, то реальная новая ширина составит 640px. Если вы не хотите, чтобы размеры добавлялись, можно воспользоваться таким приемом:

Источник