Шпаргалка по CSS (скорочена)

Post on 22 квітня 2018

by Super User

in Уроки CSS

Зручно мати під рукою список селекторів СSS та їхніх властивостей, які використовуються найчастіше. У статті - шпаргалка CSS для початківців.
ТЕКСТ CSS

Вирівнювання по горизонталі тексту :

text-align

значення

left - вліво

right - вправо

center - по центру

justify - по ширині

Запис:

p{text-align:left;}

h1{text-align:right;}

h2{text-align:center;}

span{text-align:justify;}

Вирівнювання по вертикалі тексту, малюнків, полів форми :

vertical-align

значення (основні)

top - вирівнювання елемента по верхній лінії найвищого елемента у рядку

bottom - вирівнювання по нижній лінії найнижчого елемента у рядку

middle - вирівнювання по середній лінії батьківського елемента

sup - опускає текст як нижній індекс

super - піднімає текст як верхній індекс

baseline - вирівнювання по базовій лінії батьківського елемента

УВАГА! Часто використовується для розміщення малюнків.

Запис:

img{vertical-align:top;}

img{vertical-align:bottom;}

img{vertical-align:middle;}

span{vertical-align:sub;}

span{vertical-align:super;}

Відстань між рядками (міжрядковий інтервал)

line-height

значення

числове значення без одиниць вимірювання - міжрядковий інтервал відповідно до висоти шрифта

значення в одиницях вимірювання px, em, pt

значення у % - вказує % відносно розміру шрифта

запис:

p{line-height:1.5;} /* міжрядковий інтервал розміром у 1,5 висоти шрифта */

p{line-height:40px;}

p{line-height:120%;}

Відступ тексту

text-indent

значення

відступ у одиницях вимірювання px, em, pt

відступ у %

УВАГА! Значення може бути додатнім і від'ємним.

запис:

p{text-indent:10px;}

p{text-indent:-10px;}

Декорування тексту
text-decoration
значення

blink - блимання тексту (застарілий)

line-through - закреслений текст

overline - лінія над текстом

underline - лінія під текстом
none - відміна декорування, якщо воно було

ШРИФТИ CSS

Накреслення шрифта (назва шрифта)

font-family

значення

повна назва шрифта, пишеться у подвійний лапках.

запис

font-family:"Comic Sans MS"

font-family:"Arial"

font-family:"Times New Roman"

назва базового сімейства шрифтів

Наприклад:

font-family: Serif;

font-family: Sans-serif;

font-family: Monospace;

font-family: Cursive;

та ін.

УВАГА! Якщо автор сайту вирішив використати оригінальний малопоширений шрифт, необхідно через "кому" вказати запасні шрифти:

font-family: "Aharoni", Arial;

УВАГА!! Щоб зробити сайт унікальним, можна підключити шрифти-гугл або передбачити власні шрифти для сайту.

Як підключити google-шрифти?

1. Зайти на сайт зі шрифтами гугл за адресою https://fonts.google.com/

2. Вибрати один або кілька шрифтів для свого сайту - для цьго натиснути червоний плюс біля назви шрифта.

3. Список обраних шрифтів з'явиться в спливаючому вікні внизу екрана. Натиснути на назву спливаючого вікна Falilies Selected

4. Виділити і скопіювати код, який створено гугл для підключення шрифтів.

Є два способи використання цього коду.

Спосіб 1 - вкладка Standart

Вставити скопійований код у "голову" сайта (тобто вставити його між тегами <head></head>)

Наприклад:

<!DOCTYPE HTML>

<head>

</head>

<body>

<p style="font-family:Gugi;">A red flare silhouetted the jagged edge of a wing.</p>

</body>

Спосіб 2 - вкладка @import

Вставити скопійований код у стилі(тобто у файл типу css або між тегами <style></style>).

Наприклад:

<!DOCTYPE HTML>

<head>

<style>

@import url('https://fonts.googleapis.com/css?family=Do+Hyeon|Gugi|Roboto');

p{font-family:Roboto;}

</style>

</head>

<body>

<p style="font-family:Gugi;">A red flare silhouetted the jagged edge of a wing.</p>

</body>

6. Після цього назву нових шрифтів можна використовувати у font-family.

Як підключити власні шрифти?

1. Скопіювати власний шрифт у папку, де зберігаються усі файли для сайту, і підпапку, де зберігатимуться шрифти (нвприклад, у підпапку fonts).

2. Після цього назву шрифта можна використовувати у font-family, використовуючи такий запис:

@font-face {

font-family: Aharoni; /* Назва шрифта */

src: url(fonts/aharoni.ttf); /* Путь к файлу со шрифтом */

}

span {font-family:Aharoni;}

Колір шрифта

color

значення

шістнадцятковий код шрифта

rgba-код шрифта (або rgb-код шрифта)

назва кольору

Усі варіанти запису можна подивитись за адресою https://colorscheme.ru/html-colors.html

запис

body {color: grey;}

h1 {color: #00ff00;}

strong {color: rgb(0,0,255);}

p {color: rgb(0%,0%,100%);}

span {color: rgba(255,0,0,0.3);}

Розмір шрифта (кегль)

font-size

значення:

числове значення висоти літер у px, pt, em

% - у відсотках від батьківського елемента

абсолютний розмір - xx-small, x-small, small, medium, large, x-large, xx-large

відносний розмір - smaller, larger - більше або менше відносно розміру шрифта батьківського елемента

запис

h3 {font-size: small;}

h1 {font-size: xx-large;}, em {font-size: large;}

p {font-size: 20px;}

h3 {font-size: 120%;}

Стиль накреслення шрифта

font-style

значення

italic - курсив

obtique - літери нахилені

normal - літери нормальні

запис:

p{font-style: italic;}

p{font-style: obtique;}

Варіант накреслення шрифта - маленькі літери (прописні) перетворюються у малі заголовні

font-variant

значення

small-caps - малі прописні

normal - звичайні

запис:

p{font-variant: small-caps;}

p{font-variant: normal;}

Насиченість шрифта

font-weight

значення

normal - насиченість 400

bold - насиченість 700

bolder - насиченість більша, ніж у батьківського елемента

lighter - насиченість менша, ніж у батьківського елемента

числові значення насиченості 100, 200, 300 .... 900

запис:

p{font-weight: bold;}

p{font-weight: bolder;}

p{font-weight: lighter;}

p{font-weight: 900;}

ПОСИЛАННЯ CSS

Підкреслення посилань

text-decoration

запис

none - відмінити підкреслення для посилання

underline - зробити підкреслення для посилання

Стани посилання CSS (псевдокласи)

Стани гіперпосилання:

a:link - посилання, за яким ще не переходили

a:visited - посилання, за яким вже переходили

a:hover - проведення "мишкою" над посиланням без натискування

a:active - момент натискування посилання "мишкою"

Для кожного зі станів можна описати стиль - зовнішній вигляд.

Наприклад:

a{display:block;padding:20px 30px;text-decoration:none;color:red;}

a:link{color:green;}

a:visited{color:yellow;}

a:hover {text-decoration:none;color:lime;}

a:active {color:grey;}

Вигляд курсора при наведенні на посилання

cursor

значення і запис

cursor: grab

cursor: grabbing

cursor: e-resize

cursor: ne-resize

cursor: n-resize

cursor: nw-resize

cursor: w-resize

cursor: sw-resize

cursor: s-resize

cursor: se-resize

cursor: ew-resize

cursor: ns-resize

cursor: nesw-resize

cursor: nwse-resize

cursor: col-resize

cursor: row-resize

cursor: all-scroll

Посилання-кнопка

Посилання перетворюється у кнопку шляхом вказування розміру, кольору фону, зображення фону.

Розмір посилання-кнопки вказується за допомогою властивості padding, але спочатку перетворюють посилання з рядкового елемента на блочний.
Запис:

a {display:block;padding:10px 20px;}

Колір фону посилання-кнопки вказується за допомогою властивості background-color
Запис:

a {background-color:red;}

a {background-color:green;display:block;padding:10px 20px;}

Зображення фону посилання-кнопки вказується за допомогою властивості background-image При цьому, за потреби, вказують властивості зображення фону (background-repeat , background-size , background-position , background-attachment)
Запис:

a {background-image:url();}

ФОН CSS

Колір фону

background-color

значення:

шістнадцятковий код

назва кольору

код rgb

код rgba
запис:
div{background-color:red;}
div{background-color:#7FFF00;}

div{background-color:rbda(220, 20, 60, 0.8);}

Фонове зображення

background-image

значення

url('URL') - адреса фонового зображення

none- відміна зовнішнього зображення

linear-gradient() - лінійна заливка кольором

radial-gradient() - заливка кольором по колу

запис

background-image: url()

background-image: linear-gradient(to top, #fefcea, #f1da36) - заливка кольoром від верхньoго краю елемента до нижнього (більше про це: http://htmlbook.ru/css3-na-primerakh/lineinyi-gradient )

background-image: radial-gradient(#55ddff, #0081b5) - заливка кольром від центру блока до його країв (більше про це: http://htmlbook.ru/css3-na-primerakh/radialnyi-gradient )

Повтор фонових зображень

background-repeat

значення і запис

div {background-repeat: no-repeat;} - без повторення фону

div {background-repeat: repeat-x;} - повторення по осі х

div {background-repeat: repeat-y;} - повторення по осі y

div {background-repeat: repeat;} - повторення фонового зображення

Позиціонування фонових зображень

background-position

значення

left top,

left center,

left bottom,

right top,

right center,

right bottom,

center top,

center center,

center bottom - позиція по вертикалі і по горизонталі, можна вказувати одне знначення, тоді друге - center

px / em/ % - вказується два значення: перше - відстань зліва від краю фонового зображення до краю контейнера, друге - відстань зверху від краю фонового зображення до краю контейнера. УВАГА! Якщо вказати background-position: 50% 50%; - фонове зображення розміститься рівно по центру контейнера

записdiv {background-position: center center;}

div {background-position: 50% 100%;}

div {background-position: left;}

div {background-position: 50px;}

Фіксація фонового зображення

background-attachment

значення

scroll - фонове зображення переміщується разом з усім текстом (значення за замовчуванням)

fixed - фонове зображення зафіксоване і не переміщується при прокрутці

local - фонове зображення переміщується разом з усім вмістом контейнера.

Розмір фонового зображення

background-size

значення

auto - розмір фонового зображення дорівнює його реальним розмірам (значення за замовчуванням)

px / em /cm - розмір фонового зображення у відповідних одиницях. УВАГА! Якщо потрібно змінювати фонове зображення відповідно до зміни шрифта, то потрібно використати одиниці em.

% - розмір фонового зображення у % до контейнера, для якого воно служить фоном.

cover - масштабує зображення так, щоб воно будь яким чином помістилоь у контейнер. УВАГА! При цьому налаштуванні зображення може спотворитись.

запис

div {background-size: 300px 150px;}

div {background-size: 50% 30%;}

div {background-size: cover;}

div {background-size: contain;}

РАМКА CSS

Стиль рамки

значення

none - без рамки

hidden - те ж саме, що none.

dotted - в крапочку

dashed - штрихова

solid - суцільна лінія

double - подвійна лінія

groove - об'ємна рамка

ridge - об'ємна рамка

inset - об'ємна рамка

outset - об'ємна рамка

Колір рамки

border-color

Товщина рамки

border-width

Властивості рамки одним рядком вказується у такому порядку: спочатку товщина, потім стиль, потім - колір.

Наприклад:

div.ramka {

width: 500px;

height: 100px;

border: 2px solid red;

}

Рамка по різним сторонам елемента може мати різні властивості. Для цього вказують, для якої саме частини рамки задають ту чи іншу властивість.

Частини рамки:

border-top

border-right

border-bottom

border-left

Об'єднання з відповідними властивостями має такий вигляд:

border-top-style, border-right-style, border-bottom-style, border-left-style

border-top-color, border-right-color, border-bottom-color, border-left-color

border-top-width, border-right-width, border-bottom-width, border-left-width

СПИСКИ CSS

Відміна позначки нумерованого чи ненумерованого списку

list-style-type:none;

list-style:none;

Перетворення списку з посилань на горизонтальне меню:

Cпосіб 1

li {display: inline; margin-right: -4px;}

Спосіб 2

ul {height:auto;overflow: hidden;}

li {float: left;}

a {display: block;}

Спосіб 3

li {display: inline-block;}

a {display: block;}

Про інші властивості фонового зображення та інших налаштувань селекторів можна дізнатись у відповідних підручниках CSS:

https://html5book.ru/

http://htmlbook.ru/

Main menu

Мітки

Базовий html-код

Кольори html

Google Fonts

Шпаргалка по CSS (скорочена)

Свіже