Основы CSS. Базовые свойства

Основы CSS. Базовые свойства.

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

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

Ширина элемента

За задание ширины блока или любого другого элемента отвечает CSS свойство width. Оно может задаваться в пикселях, %, em, rem и других условных единицах.

Данное CSS свойство не работает для строчных элементов <a> , <span> .

Высота элемента в CSS

Для задания высоты используется свойство height. Оно так же может задаваться в пикселях, %, vh и условных единицах, но при задании его в % есть некоторые нюансы, о которых я расскажу в одной из следующих статей.
Изначально имеет значение auto и подстраивается под содержимое блока.

Рамка элемента

Рамки используются в основном для оформления элементов. И создаются они пи помощи CSS свойства border.

Здесь мы задаём толщину рамки, далее её тип и цвет.
Толщину обычно задают в пикселях.

Тип рамки может принимать следующие значения:

  • solid – сплошная рамка
  • dotted – пунктирная линия, состоящая из точек
  • dashed – пунктирная линия, состоящая из мелких линий
  • double – двойная линия
  • inset – вдавленная рамка
  • outset – выпуклая рамка

Цвет задаётся при помощи кодового слова (red, black, white), в шестнадцатеричном формате (#ccc, #000) или форматах rgb и rgba.
Так же мы можем задать рамку только с одной стороны элемента.

Задаём фон в CSS

Для задания фона можно использовать CSS свойство background

Более подробно об особенностях задания фона я рассказывала в отдельной статье:
«Как сделать фон в html и CSS?»

Внешний отступ

За отступ между редактируемым элементом и другими элементами сайта отвечает CSS свойство margin.
Оно может задаваться в px, % и условных единицах. А так же имеет разные варианты задания:

Если вы зададите отступ снизу или сверху при помощи это свойства для строчного элемента <a> или <span> то он не сработает. Отступ по вертикали применятся только для блочных элементов.

Внутренний отступ

Отступ от границы элемента до его контента можно задать при помощи CSS свойства padding.
Особенности его использования практически такие же как и у margin, но padding по вертикали применяется и для строчных и для блочных элементов.

Обтекание блоков

Для обтекания используется CSS свойство float, которое может принимать следующие значения

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

CSS свойство overflow

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

Так же это свойство может использоваться для устранения проблемы со схлопыванием по высоте родительского блока при задании свойства float для его дочерних элементов. Подробнее об этом я рассказывала в видео.

Прозрачность

Для задания прозрачности используется свойство opacity. Оно принимает значения от 0 до 1, где 0 – это полностью прозрачный элемент.

Скрыть или показать блок при помощи CSS

Часто возникает необходимость скрыть какой-то неиспользуемый блок на сайте. Для этой цели можно использовать CSS свойство display:none;

Чтобы показать блок используем свойство:

display:block;

Также у свойства display есть ряд других особенностей, о которых я расскажу в одной из следующих статей.

Если вы не знаете как вычислить класс или идентификатор элемента, то вам поможет эта статья:
«Как определить ID и класс элемента на странице?»

CSS свойства для работы с текстом

text-align – выравнивание текста.
Значения:

font-weight – жирность текста

font-family – изменяем шрифт, указываем название шрифта

Если вы не очень хорошо понимаете как работать со шрифтами в CSS то вам помогут эти статьи:
«Как подключить шрифт в CSS?»
«Красивые шрифты Google Fonts для вашего сайта»

Font-size – размер шрифта

line-height – междустрочный интервал или высота строки, может задаваться в пикселях или числовым значением.

font-style – стиль написания текста

сolor – цвет текста

text-decoration – оформление текста


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

С уважением Юлия Гусарь

Читайте также:

Подписаться на рассылку

2 комментария

  1. Класс. Для новичков самое то! Я добавил бы ещё, что можно добавлять эти же свойства для различных тегов html, помимо вот этого класса «main» //impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif Успехов, Юлия!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif