Здравствуйте, дорогие друзья!
Давайте рассмотрим наиболее часто используемые CSS свойства, без которых не обходится создание практически ни одного сайта.
Навигация по статье:
Данная статья будет особенно полезна для тех, кто только начинаете осваивать CSS и сайтостроение в целом. Знание этих CSS свойств позволит вам вносить правки в оформление уже существующие страницы сайта и создавать новые.
Ширина элемента
За задание ширины блока или любого другого элемента отвечает CSS свойство width. Оно может задаваться в пикселях, %, em, rem и других условных единицах.
1 2 3 |
.main { width:400px; } |
Высота элемента в CSS
Для задания высоты используется свойство height. Оно так же может задаваться в пикселях, %, vh и условных единицах, но при задании его в % есть некоторые нюансы, о которых я расскажу в одной из следующих статей.
Изначально имеет значение auto и подстраивается под содержимое блока.
1 2 3 |
.main { height:200px; } |
Рамка элемента
Рамки используются в основном для оформления элементов. И создаются они пи помощи CSS свойства border.
1 2 3 |
.main { border:1px solid #000; } |
Здесь мы задаём толщину рамки, далее её тип и цвет.
Толщину обычно задают в пикселях.
Тип рамки может принимать следующие значения:
- solid – сплошная рамка
- dotted – пунктирная линия, состоящая из точек
- dashed – пунктирная линия, состоящая из мелких линий
- double – двойная линия
- inset – вдавленная рамка
- outset – выпуклая рамка
Цвет задаётся при помощи кодового слова (red, black, white), в шестнадцатеричном формате (#ccc, #000) или форматах rgb и rgba.
Так же мы можем задать рамку только с одной стороны элемента.
1 2 3 4 5 6 |
.main { border-top:1px solid red; /*рамка сверху*/ border-bottom:1px solid red; /*рамка снизу*/ border-left:1px solid red; /*рамка слева*/ border-right:1px solid red; /*рамка справа*/ } |
Задаём фон в CSS
Для задания фона можно использовать CSS свойство background
1 2 3 |
.main { background:#ccc; } |
«Как сделать фон в html и CSS?»
Внешний отступ
За отступ между редактируемым элементом и другими элементами сайта отвечает CSS свойство margin.
Оно может задаваться в px, % и условных единицах. А так же имеет разные варианты задания:
1 2 3 4 5 6 7 8 9 |
.main { margin:20px; /*отступ со всех сторон 20px*/ margin:20px 30px; /*отступ сверху и снизу 20px, слева и справа 30px*/ margin-top:20px; /*отступ сверху 20px*/ margin-bottom:20px; /*отступ снизу 20px*/ margin-left:20px; /*отступ слева 20px*/ margin-right:20px; /*отступ справа 20px*/ margin:auto; /*выравнивание по центру по горизонтали*/ } |
Внутренний отступ
Отступ от границы элемента до его контента можно задать при помощи CSS свойства padding.
Особенности его использования практически такие же как и у margin, но padding по вертикали применяется и для строчных и для блочных элементов.
1 2 3 4 5 6 7 8 |
.main { padding:20px; /*внутренний отступ со всех сторон 20px*/ padding:20px 30px; /*внутренний отступ сверху и снизу 20px, слева и справа 30px*/ padding-top:20px; /*внутренний отступ сверху 20px*/ padding-bottom:20px; /*внутренний отступ снизу 20px*/ padding-left:20px; /*внутренний отступ слева 20px*/ padding-right:20px; /*внутренний отступ справа 20px*/ } |
Обтекание блоков
Для обтекания используется CSS свойство float, которое может принимать следующие значения
1 2 3 4 5 |
.main { float: left; /*обтекание по левому краю*/ float: right; /*обтекание по правому краю*/ float:none; /*обтекание отсутствует*/ } |
Данное CSS свойство имеет некоторые особенности, о которых я говорила в видео.
CSS свойство overflow
Данное свойство отвечает за поведение контента, когда он выходит за границы родительского блока. Мы можем сделать чтобы он обрезался или управлять полосами прокрутки.
1 2 3 4 5 6 |
.main { overflow:hidden; /*контент обрезается*/ overflow:auto; /*появляются полосы прокрутки по горизонтали и вертикали*/ overflow-x:hidden; /*контент обрезается по оси x*/ overflow-y:hidden; /*контент обрезается по оси y*/ } |
Прозрачность
Для задания прозрачности используется свойство opacity. Оно принимает значения от 0 до 1, где 0 – это полностью прозрачный элемент.
1 2 3 |
.main { opacity:0.5; } |
Скрыть или показать блок при помощи CSS
Часто возникает необходимость скрыть какой-то неиспользуемый блок на сайте. Для этой цели можно использовать CSS свойство display:none;
1 2 3 |
.main { display:none; } |
Чтобы показать блок используем свойство:
Также у свойства display есть ряд других особенностей, о которых я расскажу в одной из следующих статей.
«Как определить ID и класс элемента на странице?»
CSS свойства для работы с текстом
text-align – выравнивание текста.
Значения:
1 2 3 4 5 6 |
.main { text-align:left; /*выравнивание по левому краю*/ text-align:right; /*выравнивание по правому краю*/ text-align: center; /*выравнивание по центру*/ text-align:justify; /*выравнивание по ширине*/ } |
font-weight – жирность текста
1 2 3 4 |
.main { font-weight:bold; /*жирный шрифт*/ font-weight:normal; /*нормальный шрифт*/ } |
font-family – изменяем шрифт, указываем название шрифта
1 2 3 |
.main { font-family:Verdana; } |
«Как подключить шрифт в CSS?»
«Красивые шрифты Google Fonts для вашего сайта»
Font-size – размер шрифта
1 2 3 |
.main { font-size:15px; } |
line-height – междустрочный интервал или высота строки, может задаваться в пикселях или числовым значением.
1 2 3 |
.main { line-height:1.2; } |
font-style – стиль написания текста
1 2 3 4 5 |
.main { font-style: italic; /*курсив*/ font-style: oblique; /*наклонный текст*/ font-style: normal; /*нормальный текст*/ } |
сolor – цвет текста
1 2 3 |
.main { color: #555555; } |
text-decoration – оформление текста
1 2 3 4 5 6 7 |
.main { text-decoration:blink; /*мигающий текст*/ text-decoration:line-through; /*зачёркнутый текст*/ text-decoration:underline; /*подчёркнутый текст*/ text-decoration:overline;/*линия над текстом*/ text-decoration:none; /*обычный текст*/ } |
Конечно же, это далеко не все CSS свойства, но уже благодаря им вы сможете вносить правки в оформление страниц на своём сайте и создавать новые страницы.
Подробнее о других свойствах CSS вы можете почитать в других моих статьях.
С уважением Юлия Гусарь
Класс. Для новичков самое то! Я добавил бы ещё, что можно добавлять эти же свойства для различных тегов html, помимо вот этого класса «main» Успехов, Юлия!
Спасибо, Артём!