loader

Основные теги HTML и CSS Вторая часть

Հիմնական HTML և CSS թեգեր Երկրորդ մաս

Теперь давай поговорим о стилях. Для добавлений дизайна на сайт нужен язык стилей CSS. CSSCascading Style Sheets — это каскадные таблицы стилей. По сути — язык, который отвечает за описание внешнего вида HTML-документа. В начале развития интернет-технологий веб-разработчики использовали только HTML. Если вы хотите выбрать все элементы параграфа на HTML странице, чтобы изменить текст внутри него с чёрного цвета на синий, вам нужно написать такой код:

Հիմա եկեք խոսենք ոճերի մասին: Կայքում դիզայն ավելացնելու համար անհրաժեշտ է CSS ոճավորման լեզուն: CSSCascading Style Sheets — դրանք կասկադային ոճային ստիլերն են: Իրականում դա լեզու է, որը պատասխանատու է HTML փաստաթղթի տեսքը նկարագրելու համար: Ինտերնետ տեխնոլոգիաների զարգացման սկզբում վեբ ծրագրավորողները օգտագործում էին միայն HTML: Եթե ցանկանում եք ընտրել պարբերության բոլոր տարրերը HTML էջի վրա՝ դրա ներսում տեքստը սևից կապույտի փոխելու համար, ապա կգրեք հետևյալ կոդը.

Есть три способа подключение CSS к сайту:

  • Внешние таблицы стилей
  • Внутренние таблицы стилей
  • Встроенные таблицы стилей

Կայքում CSS-ն ընդգրկելու երեք եղանակ կա.

  • Արտաքին ոճային աղյուսակ
  • Ներքին ոճային աղյուսակ
  • Ներկառուցված ոճերի աղյուսակ

Внешние таблицы стилей подключаются при помощи отдельного файла с расширением .css и тега <link>, “встроенного” в HTML-документ. Например:

Արտաքին ոճային աղյուսակները ներառված են առանձին .css ֆայլի և HTML փաստաթղթում «ներկառուցված» <link> թեգի միջոցով: Օրինակ:

Внутренние таблицы стилей “включаются” в HTML-документ, а используется для этого атрибута style. Например:

Ներքին աղյուսակները «ներառված են» HTML փաստաթղթում և օգտագործվում են style հատկանիշի համար: Օրինակ:

Встроенные таблицы стилей “прописываются” в заголовке HTML-документа. Например:

Ներկառուցված ոճերի աղյուսակները գրված են HTML փաստաթղթի գլխում: Օրինակ:

Для добавления внешних таблиц стилей нужно создать файл с расширением .CSS, который ОБЯЗАТЕЛЬНО должен находиться там где и html файл.

Արտաքին ոճերի աղյուսակը ավելացնելու համար անհրաժեշտ է ստեղծել ֆայլ .CSS ընդլայնմամբ, որը ՊԵՏՔ է գտնվի այնտեղ, որտեղ գտնվում է html ֆայլը:

Теперь давайте посмотрим на несколько CSS свойств: color, background-color, font-size, font-family, text-align. Как говорилось выше свойства color нужен, для того чтобы изменить цвет текста. А что по поводу background-color, вы можете изменить цвет фона для любова объекта. Например, у нас есть текст которому мы хотим изменить фон на красный. Код будет выглядеть следующим образом:

Հիմա եկեք տեսնենք CSS-ի մի քանի հատկություններ՝ color, background-color, font-size, font-family, text-align: Ինչպես նշվեց վերևում color հատկությունը անհրաժեշտ է տեքստի գույնը փոխելու համար: Իսկ ինչ վերաբերում է background-color-ին, ապա դուք կարող եք փոխել ցանկացած օբյեկտի ֆոնի գույնը: Օրինակ, մենք ունենք տեքստ, որը մենք ցանկանում ենք փոխել ֆոնի գույնը կարմիր: Կոդը կունենա հետևյալ տեսքը.

Может возникнуть такая ситуация, что нам нужно изменить цвет фона всей страницы. Для этого мы обратимся к <body> и сделаем фон чёрным. Чтобы текст не переливался, сделать цвет белым.

Կարող է լինել այնպիսի իրավիճակ, որ մենք պետք է փոխենք ամբողջ էջի ֆոնի գույնը: Դրա համար մենք կանդրադառնանք <body> Որպեսզի տեքստը տարբերվի, գույնը դարձրեք սպիտակ:

black-in-white png

В HTML мы поговорили как сделать комментарии. А что с CSS? Комментарии в CSS необходимы для комментирования отдельных частей кода или быстрого временного отключения свойств без удаления их из редактора. Комментарий оформляется при помощи двух пар символов, /* и */:

HTML-ում մենք խոսեցինք այն մասին, թե ինչպես կարելի է մեկնաբանություններ անել: Իսկ ի՞նչ կասեք CSS-ի մասին? CSS-ում մեկնաբանություններն անհրաժեշտ են կոդի որոշ մասերը մեկնաբանելու կամ հատկություններն արագ ժամանակավորապես անջատելու համար՝ առանց դրանք խմբագրիչից հեռացնելու։ Մեկնաբանությունը ձևակերպվում է երկու զույգ նիշերի միջոցով՝ /* և */:

Для того чтобы текст сделать более крупным мы можем использовать свойство font-size. Мы можем задать размер текста разными измерительными единицами (px, em, %, rem, vh, vw), но хочу взять во внимание px и em.

Տեքստը մեծացնելու համար կարող ենք օգտագործել font-sizeհատկությունը։ Մենք կարող ենք տեքստի չափը սահմանել տարբեր միավորներով (px, em, %, rem, vh, vw), բայց ուզում եմ որ հշադրության դարձնեք px-ին և em-ին։

Если вычислить значение в em, то оно рассчитывается по отношению к текущему шрифту. В результате размеры, заданные в em, будут уменьшаться или увеличиваться вместе со шрифтом. Это бывает очень удобно, учитывая то, что размер шрифта определяется в родителе, и может быть изменён ровно в одном месте.

Եթե դուք հաշվարկում եք արժեքը em-ով, ապա այն հաշվարկվում է ընթացիկ տառատեսակի համեմատ։ Արդյունքում, em չափերը կփոքրանան կամ կմեծանան տառատեսակի հետ միասին: Սա կարող է շատ հարմար լինել, հաշվի առնելով, որ տառատեսակի չափը որոշվում է ծնող ելեմենտում և կարող է փոխվել հենց մեկ տեղում:

px-and-em png

Про <div> мы чуть позже поговорим. А пока что поговорим о font-family. Font-family позволяет задать семейство шрифта, которым будет написан текст. Можно прописать конкретный шрифт, например «Arial». Или же можно задать желаемый тип шрифта — например, «с засечками» и «без засечек». Подробнее можете прочитать на самом сайте про a font-family.

<div>-ի մասին մի փոքր ուշ կխոսենք: Առայժմ խոսենք font-family-ի մասին։ Font-family-ը թույլ է տալիս սահմանել տեքստի տառատեսակների ընտանիքը: Դուք կարող եք նշանակել կոնկրետ տառատեսակ, օրինակ «Arial»: Կամ կարող եք սահմանել ցանկալի տառատեսակը՝ օրինակ՝ «serif» և «sans serif»: Տառատեսակի ընտանիքի մասին ավելին կարող եք կարդալ հենց կայքում: font-family.

Предположим ситуацию, что нам нужно сделать текст в центре либо справа, для этого можете использовать свойство text-align.

Ենթադրենք, որ մենք պետք է տեքստը դարձնենք կենտրոնում կամ աջ կողմում, դրա համար կարող եք օգտագործել text-align հատկությունը։

txt-algn png

Давайте ещё несколько слов поговорим про class и id. Для чего же они нужны? Для того чтобы выражения знали к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля. Если нужно применить стили только к одному конкретному элементу, то ему задают идентификатор при помощи атрибута id и если будет использовано многократно, то используйте атрибут class. Разница заключается в самом названии id, что означает идентификатор, или уникальный. Основное отличие от классов заключается в том, что селектор id можно использовать только один раз на странице. Селектор классов, напротив, можно использовать неограниченное количество раз на одной странице:

Խոսենք ևս մի քանի խոսք class և id-ի մասին: Որպեսզի արտահայտությունները իմանան, թե որ HTML տարրը պետք է կիրառի CSS-ի որոշակի հատկություններ, որոնք սահմանված են ոճի հայտարարագրման բլոկի ներսում: Եթե ցանկանում եք ոճեր կիրառել միայն մեկ կոնկրետ տարրի վրա, ապա նրան տրվում է նույնացուցիչ՝ օգտագործելով id հատկանիշը, իսկ եթե այն կօգտագործվի մի քանի անգամ, ապա օգտագործեք class հատկանիշը։ Տարբերությունը հենց id անվան մեջ է, որը նշանակում է նույնացուցիչ կամ եզակի: Դասերից հիմնական տարբերությունն այն է, որ id ընտրիչը կարող է օգտագործվել միայն մեկ էջի համար: Մյուս կողմից, դասի ընտրիչը կարող է օգտագործվել նույն էջում անսահմանափակ թվով անգամներ.

Для того чтобы обратиться к идентификатору мы пишем через решётку(#), а для класса через точку(.):

id անդրադառնալու համար մենք գրում ենք հեշ նշանի միջոցով (#), իսկ class-ի համար՝ կետի միջոցով (.):

Атрибут <div> группирует элементы и не имеет значения семантически. Не имея стилей, сам по себе <div> ничего из себя не представляет — пользователь увидит пустое место на экране. Помните что <div> является блочным элементом. К примеру, можно представить этот тег как универсальную коробку. В неё можно положить что угодно или не класть ничего и просто оформить как нужно.

<div> հատկանիշը միավորում է տարրերը և իմաստային առումով իմաստ չունի: Առանց ոճերի, <div>-ն ինքնին ոչինչ է. օգտատերը էկրանի վրա կտեսնի դատարկ տարածություն: Հիշեք, որ <div>-ը բլոկի տարր է: Օրինակ, դուք կարող եք պատկերացնել այս պիտակը որպես ընդհանուր տուփ: Դուք կարող եք դրա մեջ ինչ-որ բան դնել կամ ոչինչ դնել դրա մեջ և պարզապես դասավորել այն, ինչպես ձեզ հարկավոր է:

Тег <span> позволяет выделить и стилизовать часть текста или другие элементы в блоке. Этот тег очень похож на <div>, поскольку он также служит для группировки элементов с целью применения общего стиля. Разница лишь в том, что <div> группирует содержимое в единый блок, а <span> подчеркивает линию или отдельный символ в этом блоке. По этой причине мы называем <div> блочным элементом, а <span> - линейным.

<span> թեգը թույլ է տալիս ընտրել և ոճավորել տեքստի մի հատված կամ այլ տարրեր բլոկում: Այս թեգը շատ նման է <div>-ին, քանի որ այն նաև ծառայում է տարրերը միասին խմբավորելու՝ ընդհանուր ոճ կիրառելու համար: Միակ տարբերությունն այն է, որ<div> բովանդակությունը խմբավորում է մեկ բլոկի մեջ, մինչդեռ <span>-ն ընդգծում է տող կամ մեկ նիշ այս բլոկում: Այս պատճառով մենք <div>-ն անվանում ենք բլոկ տարր, իսկ <span>՝ ներկառուցված տարր:

txt-algn png

Блочная модель, она же box model — это способ рассчитать размеры элемента на странице, который используется при отрисовке. Они рассчитываются по методу расчётов площади каждого отдельного фрагмента сайта, которым пользуются пользователи в процессе отрисовки. Так, чтобы точно знать, какой блок в результате получится на выходе и сколько место он займет, держите в голове следующую картинку:

box model — էջի վրա տարրի չափերը հաշվարկելու միջոց է, որն օգտագործվում է արտապատկերման ժամանակ։ Դրանք հաշվարկվում են կայքի յուրաքանչյուր առանձին հատվածի տարածքի հաշվարկման մեթոդի համաձայն, որն օգտագործվում է օգտատերերի կողմից մատուցման գործընթացում: Այսպիսով, որպեսզի հստակ իմանաք, թե որ բլոկը կստացվի և որքան տեղ կխլի, հիշեք հետևյալ պատկերը.

px-and-em png

Блочная модель состоит из нескольких CSS-свойств, влияющих на размеры элемента:

  • width — ширина элемента;
  • height — высота элемента;
  • padding — внутренние отступы от контента до краёв элемента;
  • border — рамка, идущая по краю элемента;
  • margin — внешние отступы вокруг элемента.

box model-ը բաղկացած է մի քանի CSS հատկություններից, որոնք ազդում են տարրի չափերի վրա.

  • width — տարրի լայնությունը;
  • height — տարրի բարձրությունը;
  • padding — տարածություն է ստեղծում տարրի ներսում;
  • border — տուփի եզրագծի լայնությունը;
  • margin — ստեղծում է տարածություն տարրի շուրջ.

Теперь поговорим про свойство width и height. При помощи этих свойств можно задавать размеры контентной области блока. Немного ниже мы создаем блок с помощью тега <div>, в который вкладываем текст:

Հիմա խոսենք width և height. Օգտագործելով այս հատկությունները, կարող եք սահմանել բլոկի բովանդակության տարածքի չափը: Մի փոքր ավելի ցածր՝ մենք ստեղծում ենք բլոկ՝ օգտագործելովՕգտագործելով այս հատկությունները, կարող եք սահմանել բլոկի բովանդակության տարածքի չափը: Մի փոքր ավելի ցածր՝ մենք ստեղծում ենք բլոկ՝ օգտագործելով <div> թեգը, որում տեղադրում ենք տեքստ.

Width отвечает за ширину элемента. С его помощью мы можем увеличивать или уменьшать ширину блочных (block) элементов. Используя свойство height, вы можете задать высоту любому блочному (block) элементу. Высоту и ширину можно задавать как в абсолютных единицах (пикселях px) так и в относительных (проценты, vh, vmin, rem и так далее).

Width-ը պատասխանատու է տարրի լայնության համար: Դրանով մենք կարող ենք մեծացնել կամ նվազեցնել բլոկի (block) տարրերի լայնությունը։ Օգտագործելով height հատկությունը՝ կարող եք սահմանել ցանկացած block տարրի բարձրությունը։ Բարձրությունը և լայնությունը կարող են սահմանվել ինչպես բացարձակ միավորներով (px պիքսել), այնպես էլ հարաբերական միավորներով (տոկոս, vh, vmin, rem և այլն):

Давайте добавим ему ширину 300px и высоту в 150px. Для красоты сделаем фон зелёного цвета. Увеличим размер текста, сделаем 30px и поставим в центре.

Եկեք նրան տանք 300px լայնություն և 150px բարձրություն։ Գեղեցկության համար եկեք կանաչապատենք ֆոնը։ Եկեք մեծացնենք տեքստի չափը, դարձնենք այն 30px և տեղադրենք այն կենտրոնում:

px-and-em png

За внутренние отступы отвечает padding свойство. Если говорить об блочной модели, то необходимо помнить: внутренние отступы прибавляются к ширине и высоте элемента. Согласитесь, смотрелось бы лучше если текст был бы в центре блока. Для этого нам нужно изменить внутренний отступ сверху (padding-top) на 15px.

padding հատկությունը պատասխանատու է սահմանի միջև եղած տարածություն համար: Եթե ​​մենք խոսում ենք box մոդելի մասին, ապա դուք պետք է հիշեք. սահմանի միջև եղած տարածությունը ավելացվում է տարրի լայնությանը և բարձրությանը: Համաձայն եմ, ավելի լավ տեսք կունենար, եթե տեքստը լինի բլոկի կենտրոնում: Դա անելու համար մենք պետք է վերևի միջև եղած տարածությունը (padding-top) դարձնենք 15px:

px-and-em png

Высота будет равна 150 + 15 = 165 пикселей. Внутренние отступы прибавились к высоте. Но предположим у нас будет такая ситуация:

Բարձրությունը կկազմի 150 + 15 = 165 պիքսել: Սահմանի միջև եղած տարածությունը ավելացվել է բարձրության վրա։ Բայց ենթադրենք, որ ունենք հետևյալ իրավիճակը.

Теперь ширина блока будет равна 300 + 20 + 20 = 340 пикселей. А высота будет равна 150 + 35 + 35 = 220 пикселей. Внутренние отступы прибавились к ширине и высоте. Для определения размера элемента в расчет берутся и рамки, за которые ответственен свойство border. А теперь пусть у элемента из примера выше будет рамочка со всех сторон.

Այժմ բլոկի լայնությունը կլինի 300 + 20 + 20 = 340 պիքսել: Իսկ բարձրությունը կլինի 150 + 35 + 35 = 220 պիքսել։ Սահմանի միջև եղած տարածությունը ավելացվել է լայնության և բարձրության վրա: Տարրի չափը որոշելու համար հաշվի են առնվում նաև սահմանները, որոնց համար պատասխանատու է border հատկությունը։ Եվ հիմա թող վերը նշված օրինակի տարրը բոլոր կողմերից շրջանակ ունենա:

Теперь конечные размеры элемента будут: 300 + 20 + 20 + 5 + 5 = 350 пикселей в ширину и 150 + 35 + 35 + 5 + 5 = 230 пикселей в высоту.

Այժմ տարրի վերջնական չափերը կլինեն՝ 300 + 20 + 20 + 5 + 5 = 350 պիքսել լայնություն և 150 + 35 + 35 + 5 + 5 = 230 պիքսել բարձրություն:

Если вы используете свойство margin, внешние отступы не будут добавлены прямо к размерам элемента или его размеру страницы и повлияют на количество места в странице. Если элементу из нашего примера мы зададим внешние отступы, то он будет занимать больше места, двигая при этом своих соседей:

Եթե ​​օգտագործում եք margin հատկությունը, սահմանի միջև եղած տարածությունը ուղղակիորեն չեն ավելացվի տարրի չափերին կամ էջի չափերին և կազդեն էջի տարածքի քանակի վրա: Եթե ​​տարրը տանք մեր օրինակի սահմանի միջև եղած տարածությանը, ապա այն ավելի շատ տեղ կզբաղեցնի՝ միաժամանակ տեղափոխելով իր հարևանները.

px-and-em png

В веб-браузере при открытии исходного кода у вас справа снизу будет панель где будет показано его исходный размер. К примеру наш блок будет выглядеть так:

Վեբ բրաուզերում, երբ դուք բացում եք կոդը, դուք կունենաք վահանակ ներքևի աջ մասում, որտեղ կցուցադրվի դրա սկզբնական չափը: Օրինակ, մեր բլոկը կունենա հետևյալ տեսքը.

px-and-em png

На самом деле браузеры рассчитывают размер элемента, как описано выше, прибавляя внутренние отступы и рамки к высоте. На этот счет могут быть связаны неприятные сюрпризы, когда элемент вёрстке занимает большее место чем вы думаете. Поменять стандартное поведение и указать браузеру, что ширина или высота заданы в CSS, должны включать в себя внутренние отступы и рамки. Для того чтобы сделать это, нужно свойство box-sizing. Его нужно добавить в *. Селектор * выбирает все элементы.

Բրաուզերներն իրականում հաշվարկում են տարրի չափը, ինչպես նկարագրված է վերևում՝ ավելացնելով սահմանի միջև եղած տարածությանը և եզրագծեր բարձրությանը: Այս հաշվին տհաճ անակնկալներ կարող են կապված լինել, երբ տարրը ավելի շատ տեղ է զբաղեցնում, քան կարծում եք: Փոխեք սկզբնական վարքագիծը և բրաուզերներին ասեք, որ լայնությունը կամ բարձրությունը սահմանված է CSS-ում, պետք է ներառի սահմանի միջև եղած տարածությունը և շրջանակը: Դա անելու համար ձեզ անհրաժեշտ է box-sizing հատկությունը: Այն պետք է ավելացվի *-ին: * տարրը ընտրում է բոլոր տարրերը:

px-and-em png

Добавим для него ещё и скругление чтобы блок выглядел красиво. Для этого нам нужно использовать свойство border-radius который добавляет скругление краям.

Եկեք դրա համար կլորացում ավելացնենք, որպեսզի բլոկը գեղեցիկ տեսք ունենա: Դա անելու համար մենք պետք է օգտագործենք border-radius հատկությունը, որն ավելացնում է եզրերին կլորացում:

px-and-em png

Дополнительное задание

Լրացուցիչ առաջադրանք

Попробуйте воссоздать также как на картинке: Что вам нужно знать! Размер текста должен быть: h1; Размер блоков должен быть 150 x 150. Цвет первого блока: purple - violet. Цвет второго блока: green - yellow;

Փորձեք վերստեղծել նույնը, ինչ նկարում. Ինչ պետք է իմանաք: Տեքստի չափը պետք է լինի՝ h1; Բլոկների չափերը պետք է լինեն 150 x 150: Առաջին բլոկի գույնը` purple - violete: Երկրորդ բլոկի գույնը `green - yellow;

shift+1 gif
Показать ответ! Ցույց տալ պատասխանը
<< Предыдущий Следующий >>
<< Նախորդը Հաջորդը >>