Іспит по курсу HTML&CSS

<header>

<h>

<h1>

<heading>

створити абзац

створити посилання

створити параграф

додати картинку

<img src="image.jpg" alt="My Image">

<picture src="image.jpg" alt="My Image">

<image source="image.jpg" text="My Image">

<img alt="My Image">image.jpg</img>

створення абзацу

створення лінії

створення не впорядкованого списку (маркованого списку)

створення впорядкованого списку (нумерованого списку)

<table><row><column></column></row></table>

<table><tr><td></td></tr></table>

<tr><td></td></tr>

<row><column></column></row>

bg-color

color-background

background-color

color

margin: 10px;

spacing: 10px;

padding: 10px;

border: 10px;

визначає товщину шрифту

змінює колір шрифту

визначає стиль шрифту

встановлює розташування тексту

shape: circle;

border-shape: circle;

border-radius: 50%;

circle: true;

border-radius: 50px;

horizontal-align: center;

font-align: center;

text-center: true;

text-align: center;

shadow: 2px 2px 5px 3px #888888;

box-shadow: 2px 2px 5px 3px #888888;

text-shadow: 2px 2px 5px 3px #888888;

block-shadow: 2px 2px 5px 3px #888888;

змінює колір тексту

встановлює відступи тексту

змінює ширину блоку

визначає порядок відображення елементів

block-width: 100px;

width: 100px;

size: 100px;

box-width: 100px;

встановлює стиль блоку

змінює ширину блоку

встановлює блоки в гнучкому контейнері

встановлює висоту блоку

image-background: url('image.jpg');

 background-image: url('image.jpg');

image: background('image.jpg');

image: url('image.jpg');

<paragraph>

<p>

<a>

<section>

typeface: 'Arial', sans-serif;

text-font: 'Arial', sans-serif;

font-family: 'Arial', sans-serif;

font-type: 'Arial', sans-serif;

frame-style: solid 1px #000;

outline: 1px solid #000;

border-style: 1px solid #000;

border: 1px solid #000;

DOCTYPE, html, head, body

DOCTYPE, title, head, body

DOCTYPE, head, title, body

DOCTYPE, html, title, body

background-picture: path(‘...’)

background-image: src(‘...’)

background-picture: url(‘...’)

background-image: url(‘...’)

background-place

background-top-left

background-position

background-road

прописати flex-rows та цифру

прописати flex-wrap зі значенням wrap

нічого, елементи самі вибудовуватимуться

вказати flex-columns і скільки колонок буде в рядах

теги: css, style та атрибут model

теги: link, styles, view

теги: style, link та атрибут style

теги: meta, style, css

згори донизу

справа наліво

знизу догори

зліва направо

fixed

scroll

local

absolute

h1, p, strong, em

h1, h2, p, em

h2, b, p, i

b, p, i, em

flex-direction

flex-stream

flex-way

flex-road

p

a 

b

span

відступ лінії від елемента та колір

колір та товщину ліній

округлення країв та ширину ліній

тип, ширину та колір лінії

”-- --”

<!-- -->

*!-- --*

#!-- --#

p

div

span

h1

тільки горизонтальні

тільки вертикальні

чотири сторони: верх, низ, ліво, право

краї навскоси (верхній правий кут тощо)

table, tbody, td

table, tr, td

table, thead, tr

table, tn, th

/tag/ /tag/

#tag# #/tag#

<tag> </tag>

(tag) (/tag)

spacing: letters 2px;

text-spacing: 2px;

letter-spacing: 2px;

char-spacing: 2px;

Визначає відстань між елементами

Робить елемент невидимим

Встановлює відносний розташування відносно попереднього елемента

Видалити вміст поза контейнером

Визначає колір тексту

Об'єднує комірки в горизонтальному напрямку

Об'єднує комірки у вертикальному напрямку

Забороняє виводити рамку навколо комірки

corner-radius: 10px;

border-corner: 10px;

rounded-corners: 10px;

 border-radius: 10px;

Визначає відстань між буквами

Визначає відстань між словами

Визначає відстань між рядками

Змінює ширину текстового блоку

.txt или .doc

.html или .htm

.doc

.php или .asp

<line>

<hr>

<divider>

<line-break>

size: 16px;

font-size: 16px;

text-size: 16px;

text-font: 16px;

<h1>

<h2>

<h3>

<h4>

Визначає ненумерований список

Визначає посилання

Визначає нумерований список

Визначає картинку

Робить текст жирним

Додає підкреслення до тексту

Додає тінь до тексту

Робить текст курсивним

grid-columns: 3;

columns: 3;

grid-template-columns: 1fr 1fr 1fr;

grid: 3;

grid-gap-space: 10px

gap: 10px;

grid-space: 10px

space-between: 10px;

column-width: 100px;

grid-column-width: 100px;

column-size: 100px;

grid-template-columns: 1fr 100px;

Визначає метадані документа

Визначає абзац

Визначає заголовок

Додає зображення на сторінку

створює таблицю

створює форму для введення даних

додає зображення

створює список

<embed>

<video>

<source>

<object>

Визначає, як елемент буде виглядати на мобільних пристроях

Визначає поведінку вмісту, що виходить за межі елемента

Змінює положення елемента

Встановлює прозорість елемента

<sound>

<audio>

<music>

<media>

Визначає назву зображення

Додає опис до зображення

Визначає альтернативний текст, який показується, якщо зображення не завантажується

Визначає колір фону для зображення

Приховує елемент з сторінки

Робить елемент прозорим

Змінює розмір елемента

Додає тінь до елемента

transparent: 0.5;

opacity: 0.5;

alpha: 0.5;

visibility: 0.5;

Визначає мінімальну ширину елемента

Визначає максимальну ширину елемента

Визначає ширину елемента

Визначає відступи для елемента

Це спеціальні класи для стилізації тексту.

Це елементи, які додаються безпосередньо в DOM.

Це псевдоелементи, що дозволяють додавати контент перед або після вмісту елемента без зміни HTML.

Це властивості, що змінюють порядок відображення елементів.

Абсолютне позиціонування використовує координати відносно вікна браузера, а відносне — відносно батьківського елемента.

Відносне позиціонування змінює розміри елемента.

Абсолютне позиціонування відноситься до flexbox моделі.

Відносне позиціонування зберігає початкові розміри елемента, тоді як абсолютне змінює їх.

CSS Grid — це новий фреймворк для CSS, а Flexbox — це бібліотека для створення адаптивних макетів.

CSS Grid використовується для розміщення елементів у двовимірній сітці, а Flexbox орієнтований на вирівнювання елементів у рядках або стовпцях.

CSS Grid призначений тільки для мобільних пристроїв, а Flexbox для десктопів.

Flexbox дозволяє працювати лише з текстовими елементами, а CSS Grid — з блоковими.

Інлайновий елемент завжди вирівнюється по центру сторінки.

Блоковий елемент можна стилізувати, а інлайновий — ні.

Блоковий елемент використовується тільки для зображень.

Блоковий елемент займає всю ширину контейнера, а інлайновий — тільки необхідну.

id може бути використаний кілька разів на сторінці, а class лише один раз.

id використовується для JavaScript подій, а class — для стилізації.

id повинен бути унікальним для кожного елемента, а class можна застосовувати до багатьох елементів.

Це синоніми, обидва використовуються для стилізації елементів.

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

Це дизайн, який змінює кольори сторінки в залежності від роздільної здатності екрану.

Адаптивний дизайн — це створення окремих сайтів для різних пристроїв.

Адаптивний дизайн досягається виключно за допомогою JavaScript.

Це теги для створення таблиць. Приклади: <table>, <th>, <td>.

Семантичні теги описують логічну структуру контенту. Приклади: <header>, <article>, <footer>.

Семантичні теги — це теги, що визначають стилі. Приклади: <div>, <span>, <style>.

Це теги для роботи з мультимедійними файлами. Приклади: <video>, <audio>, <embed>.