????? HTML ? CSS ??? ??????????

HTML ? CSS ?????????? ????? ??????? ???????? ???-??????????. HTML ???????? ?? ??????????? ? ??????? ????????, ? CSS ?????????? ?????????? ??????????? ?????????. ????????? ???? ?????? ????????? ??????????? ? ?????????? ????????.

HTML ???????????????? ??? HyperText Markup Language. ???? ???????? ?????????? ???? ??? ???????????? ???? ????????. ??????? ???????????? ???? ? ?????????? ?????????? ???????? ???????????? ?????????.

CSS ?????? Cascading Style Sheets. ????????? ??????? ?????? ???? ???????? ?????????? ? ?????????????. ??????????? ????? ?????????????? ?????????? ?????? ????? ???-?????, ?????????????? ???????????? ???? ??????.

???????? 1xbet ??????? ????????????????? ???????. ?????????? ?????????? ??????? ??????? ???????? ???? ????????. ????? ???????? ??????????? ????????? ????? ?????????? ? ??????? ?????????.

??????? ???????? ???????????? ??????? ????? ??????. ??????????? ???????????? ???????? ? Chrome, Firefox ? ?????? ??????????. ??????? ???????? ???????? ????????? ??? ? ??????? 1xbet ?? ?????????? ????????.

????????? HTML??????????: doctype, head, body ? ??????????????? ????? ????????

?????? HTML-???????? ??????????? ? ?????????? DOCTYPE. ?????????? ?????????? ???????? ???????? ????? ????????. ??????? ???????? ???????????html??? ???????? ????????? HTML5.

???????? ??????? html ?????????? ??? ?????????? ?????????. ??????? lang ????????????? ???? ???????? ??? ????????? ??????. ?????? ???????? ????? ??????????? ??????????? ? ???????????? ?????.

?????? head ???????? ?????????????? ? ????????. ?????? ????????????? ???? meta, title, link ??? ??????????? ??????. ????????? UTF-8 ????????????? ?????? ??????????? ??????. ???????? title ???????????? ?? ???????? ???????? ? ??????????? ??????.

??????? body ???????? ???? ?????????? ?????????? ????????. ?????????? ???????????? ?????? ?????????? ????? ?????? ? ???? ????????. ??????????? ????????? ?????, ???????????, ????? ?????? ?????? ??????.

??????? ??????? ???????? ????????? ????????? ?????? ??? ??????????. ???????? ????????? ???????????? ????????????? ? ??????? ??????????. ?????????? ??????????? ???? ????????? ?????????? ?????????? ? ?????????????.

??????????????? HTML?????: ?????????, ?????????, ???????????, ??????????? ? ???????

????????? ?? h1 ?? h6 ????????????? ????????? ???????? ?? ????????. ??? h1 ?????????? ??????????? ???????? ? ????????????? ???????? ???. ????????? ?????? ??????? ????????????? ????????? ????????. ????????? ??????? ??????? ???????? ??? ????????? ????????.

??? p ??????? ????????? ?????? ? ????????? ???????? ????????? ??? ???????????? ????????. ??????? ????????????? ??????? ????????? ?????? ? ?????. ??????? ?????? ?? ?????? ???????? ??????????.

?????? ?????????? ????? a ? ??????????? ????????? href. ????? ????? ????????? ?? ????????? ???????? ??? ????? ?????? ????????. ??????? target ?? ????????? _blank ????????? ??????????? ? ????? ???????.

??? img ???????? ??????????? ? ????????. ??????? src ???????? ???? ? ????? ????????. ?????????????? ????? ? ???????? alt ????????? ??????? ??? ?????? ? ?????????????? ??????????.

??????????????? ?????? ul ?????? ???????? li ??? ????????????? ??????????????????. ???????????? ?????? ol ?????????? ?????? ? ???????. ??????? ???????????? ??????????????? ?????????? ? ?????????? ??????? ??? ????????.

????????? ????????: header, nav, main, section, article, footer

????????? ???? ???????? ?????????????? ???????? ?????? ????????. ???????? ? ????????? ??????? ????? ?????????? ????????? ?????????. ???????????? ?????????? ????? ??????????? ??????????? ??? ????????????? ? ????????????? ?????????????.

??? header ?????????? ????????????? ?????? ???????? ??? ?????. ?????? ??????????? ???????, ????, ????????? ???????. ?????? ???????? ????? ????????? ????????? ????????? header.

??????? nav ???????????? ??? ????????????? ???????????. ???? ?????, ??????????, ??????? ?????? ??????????? ?????? ????? ????. ??????????? ?????????? nav ??? ???????? ??????????? ?? 1xbet.

???????? ????????????? ??????????:

• main ?????? ???????????? ???????? ????????
• section ???????? ???????? ??????????????? ??????????
• article ???????????? ??????????????? ??????????
• footer ???????? ?????? ?? ?????????, ????????, ????????

?????????? ????????????? ????????? ???????? ???????? ??????????? ?????????. ????????? ?????? ?????????????? ???????????? ???????? ? ???????????? ??????. ???????????? ????? ??????????? ? ???? ??? ????????????? ????????????? ?????????.

??? ????? CSS: ??????????? ?????? ? ??????? ????????? (???????, ?????, id)

CSS ????????????? ??????????? ????????????? HTML-????????? ?? ????????. ????????? ??????? ?????? ???????????? ????????? ??????, ?????????, ????????????????? ???????????. ?????????? ?????????? ? ?????????? ???????? ???????? ???????.

?????????? ??? ??????? ????????????? ?????? ? ?????????. ????????? ???? CSS ???????????? ????? ??? link ? ????? head. ?????????? ????? ?????????? ? ???? style. ?????????? ????? ???????? ? ??????? style ????????.

???????? ???????? ???????? ??? ???? ????????????? ???? ?? ????????. ??????? p color: blue; ???????? ????? ???? ?? ???? ??????????. ????? ?????? ????????? ??? ?????????????? ???????.

?????? ???????????? ????????? ????? ????????? ? ?????????????? ??????????. ??????? class ????????????? ?????, ? ? ?????? ???????? ???????? ? ?????. ???? ??????? ????? ???????? ????????? ??????? ????? ????????????.

????????????? id ?????????? ???????????? ??????? ?? ????????. ???????? id ???????? ? ????? ??????? ? ??????? ??????. ?????? ????????????? ???????????? ????????????? ???????? ??? ? ?????????. ??? ?????? id ????, ??? ? ??????? ? ?????????? ?????????.

??????? ???????? CSS: ????, ?????????, ??????? ? ?????? ? ???????

??????? color ????????????? ???? ?????? ????????. ????????? ????????????? ? ???????? hex, rgb, rgba ??? ??????? ????????. ???????? background-color ?????????? ??????? ???? ????????. ????????? ??????? ???????? ?????????? ???????????.

????????? ???????? ???????????? ????? font-family. ????????????? ???????? ????????? ????? ????? ???????. ??????? ???????? ????????? ????????? ????? ?? ???????. ?????? ?????? ????????????? ?????????? font-size ? ???????? ??? ?????????.

??????? font-weight ????????? ???????? ?????????. ???????? ??????????? ??????? ?? 100 ?? 900 ??? ?????????? normal ? bold. ????????? ?????????? ???????????? ????? font-style ?? ????????? italic.

???????????? ?????? ???????? ????????? text-align ? ?????????? left, right, center, justify. ??????????? ?????????? ?????????????? ????? line-height. ????????? ?????? text-decoration ????????? ????????????? ??? ???????????? ? ?????? ??????.

??????? ??????? margin ????????? ???????????? ?????? ????????. ?????????? ????????? padding ??????? ???????? ????? ?????? ? ?????????. ???????? ??????????? ??? ???? ?????? ????? ??? ???????? ??? ?????? ????.

?????? ????? (box model): content, padding, border, margin ? ?????

?????? ????? ????????????? ??????????? ??????? ???????? ?? ???-????????. ?????? ??????? ??????? ?? ??????? ?????: ???????????, ??????????? ???????, ????? ? ???????? ???????. ???????? ????????? ????? ??? ???????? ?????????? ?????????.

??????? content ???????? ??????????? ??????????: ?????, ??????????? ??? ??????????? ??????????. ?????? ? ?????? ???????? ?????????? width ? height. ?? ????????? ??? ???????? ?????? ?????? ??????? ????????.

?????????? ?????? padding ???????? ???????????? ????? ?????????? ? ???????? ????????. ??????? ???????????? ????????? ??? ?????? ??????? ????????????? ??? ?????? ??? ???? ?????. ?????????? padding ????????? ???????? ?????? ?????.

??????? border ????????? ??????? ??????? ??????. ???????? border ????????? ??????, ????? ? ???? ???????. ????????????? ?????? ????: solid, dashed, dotted ? ?????? ???????? ? 1xbet.

??????? ??????? margin ?????????? ?????????? ????? ??????? ?? ????????. ????????????? ???????? margin ????????? ?????. ???????? box-sizing ?? ????????? border-box ???????? padding ? border ? ???????? width ? height.

?????? ??????????: ???????? ? ??????? ????????, flexbox/??????? ???????? ??? ????????

HTML-???????? ???????????????? ?? ??????? ? ???????? ?? ???? ????????????. ??????? ???????? ???????? ??? ???????? ?????? ? ?????????? ? ?????? ?????. ?????????? ???????? ??????????? ? ?????? ?????? ? ????????? ?????? ????????? ???????.

???????? display ???????????? ??? ???????????? ????????. ???????? block ?????????????? ??????? ? ???????, ? inline ?????? ????????. ???????? inline-block ????????? ?????????????? ????? ?????.

Flexbox ????????????? ?????????? ??? ???????????? ?????????? ??????????. ????????? ? display: flex ??????????? ???????? ???????? ? flex-????????. ??????????? ?????????? ??????????????? ????????? flex-direction.

??????? ???????? flexbox ??? ????????????:

• justify-content ????????????? ???????? ?? ???????? ?????
• align-items ???????????? ?????????????? ?? ???????????????? ?????
• flex-wrap ????????? ????????? ???????????? ?? ?????? ??????
• gap ???????? ?????????? ????? flex-??????????

??????? ?????????? ??????????? ? ????????? ???????? ?????????. ???????? ????????????? ?????? ????? ? ????? ???????. Flexbox ????????? ???????????? ?????? ?????????? ? ??????.

?????????? ??? ????????: ?????????? ???????????? ???????? ? ????????? ????????? ? ?????????? CSS

?????????? ?????? ???????? ?????????? ? ????????? HTML-???????. ???????? ???????? ?????????? DOCTYPE, ?????? head ? body ? ??????????? ???????????. ??????? ???????? ???????? ?????????, ????????? ?????? ? ???????????.

????????? ???? ??????? — ??????????? ???????? ????????? CSS ? ?????????. ???????????? ???? styles.css ? ??????? ??? ????? ??? link. ??????? ? ??????? ??????????: ??????? ????? ??? ???????? ? ???? ???? body.

????????? ??? — ?????????? ?????? ? ???????? ?????. ?????????? ??????? ? ??????? ??????????, ????????????? ??????????? ???????? ??? ??????????. ??????? ??????????? ????? ??? ????????? ??????????.

?????????????? ? ????????? ???????? ??????????? ??????????. ??????? ?????????? ?????? ????? ? ?????????? ??????? ????? margin: auto. ???????? ?????????? ??????? padding ?????? ????????? ? ?????? ??????.

????????? ????????? ?????????? ?????????? ?????? ? hover-????????. ???????? ???? ?????? ? ??????? ?????????????. ??????????? border-radius ??? ?????????? ????? ???????????. ??????????? ? ??????? ??????????? ??? ????????? ?? ???????.