Навигация:

Көнүгүү 2 - CSS

CSS менен кооздоо

Тегдер браузерге веб-сайттын кандай элементтерин колдонуу керектигин көрсөтөт. Бирок биз элементтерди кантип көрсөтүүнү жана аларды кайда жайгаштырууну да көрсөтүшүбүз керек. Биз аталышын борбордо же оң жагында болушун каалайбыз. Оң жакта сүрөт жана сол жакта абзац болуш керек. Муну биз эки жол менен жасай алабыз: HTML атрибуттары аркылуу же Cascading Style Sheets (Каскаддык стиль баракчалары).

Каскаддык стиль баракчалары (CSS)

HTML атрибуттары жөнөкөй, бирок алар бат эле башаламан болуп кетиши мүмкүн. Эгерде биз көп стиль кааласак, ар бир HTML элементи окуу кыйын болуп калышы мүмкүн. Андан башка, эгер биз көп элементти бирдей стилде болушун кааласакчы? Анда элементтин бардык атрибуттарын көчүрүп алышыбыз керек болот, бул убакыт алат жана ката кылышыбыз мүмкүн. Көпчүлүктү стилдөө үчүн CSSти колдонуу жакшы.

CSS файлдары HTML тегдери менен тыгыз байланышкан. Ар бир HTML тегинде ар бир элементти аныктоого жардам берген class атрибуту жана/же id атрибуту болушу мүмкүн. . Көптөгөн элементтер бир класска ээ болушу мүмкүн, ал эми элементте бир нече класс болушу мүмкүн. Бирок, элементтин бир гана идентификатору болушу мүмкүн жана id элементтер арасында бөлүшүлбөйт. CSS файлы ар бир class же id үчүн өзгөчө стилди көрсөтүү үчүн бул атрибуттарды колдонот.

Төмөндөгү мисалдарды караңыз:

CodePen'деги Делиана Эскобардын(@sunnydee) (@Sunny-Dee) Pen Стилдөө'сүн көрүңүз CodePen.

HTML кодун көрүү үчүн жогорку сол бурчтагы "HTML" өтмөгүн, ал эми CSS кодун көрүү үчүн "CSS" өтмөгүн басыңыз.

Келгиле, HTML кодун карап көрөлү. “info” атрибутуна ээ болгон <div> тегин таап көрүңүз. Ал буга <div id=“info”> окшош. Бул div-ге id берип, биз андан кийин ушул элемент үчүн стилди көрсөтүүгө CSS-ти колдоно алабыз.

CSS файлына өтүңүз. Биз белгилүү бир түрдөгү бардык элементтерди стилдей алабыз - мисалы, биз CSS’ди колдонуп <p> элементтерин бирдей стилде кооздосок болот. Баш маалымат блогунда биз браузерге бардык аталыштарды #0097A7 (бул көк түскө) боёсун деп көрсөтөбүз.

CSSтин синтаксиси (же жазуу жолу) жөнүндө сүйлөшөлү. Биринчиден, сиз стилдин кайсы элементинен баштайсыз. Эгер сиз бирдей тегтеги бардык элементтерди стилдештирүүнү кааласаңыз (мисалы, <header>), жөн гана атын жазышыңыз керек. Эгер сиз элементти класс же идентификатор менен стилдештирүүнү кааласаңыз, class же id аталышынын алдына . же # коюңуз. Андан кийин, өзгөрткүңүз келген ар бир атрибут үчүн attribute-name: value; форматын колдонуңуз. Ар бир сапты ; менен бүтүрүүнү унутпаңыз. Бул стилдердин баары { жана } тармал кашаалары менен курчалышы керек.

Бул окуу куралында алардын баарын камтый албагандай өтө көп стилдик элементтер бар. Эгер мурда жасаган ишиңизди стилдештирүү үчүн каалаган CSSти кантип колдонууну билбей жатсаңыз, интернеттен издеп көрүңүз.

CSS “жашыл”, “кызыл” жана “көк” сыяктуу 140 түстүн аталышын түшүнсө да, мунун чектелиши бар. Кочкул жашыл же бир аз ачык жашыл болсочу? Буга жетүү үчүн биз он алтылык (hexadecimal) же RGB формасындагы түстөрдү да көрсөтө алабыз. Түстөрдү жана алардын тиешелүү он алтылык формасын көрүү үчүн бул шилтемени текшериңиз.

Жаңы шрифт кошуу

Сиз колдоно турган бир нече шрифт бар. Бул бөлүк сиздин сайтка ар кандай шрифттерди кантип кошуш керектигин көрсөтөт.-9

Келгиле, Heebo шрифтин интернеттен кошолу. Биринчиден биз CSS файлынын жогору жагына шрифти бул билдирүү менен кошобуз: @import url('https://fonts.googleapis.com/css?family=Heebo|Open+Sans');
Андан кийин биз аны дене тегине беребиз. Бул тег башка бардык HTML элементтерин камтыгандыктан, биз тандаган шрифт бардык элементтер үчүн колдонулат.

alt text

Көңүл буруңуз, тармал кашаалардын ичиндеги формат: аты: мааниси;
- @import url(‘https://fonts.googleapis.com/css?family=Roboto+Mono');
  font-family: 'Roboto Mono', monospace;
- @import url(‘https://fonts.googleapis.com/css?family=Indie+Flower');
  font-family: 'Indie Flower', cursive;
- @import url(‘https://fonts.googleapis.com/css?family=Pacifico');
  font-family: 'Pacifico', cursive;
- @import url(‘https://fonts.googleapis.com/css?family=Permanent+Marker');
  font-family: 'Permanent Marker', cursive;

Көнүгүү 2 - Атрибуттарды жана стилди кошуу

Азыр биздин веб-сайтты кооз кылууга убакыт келди! Бул көнүгүүнү аяктоо үчүн сиз төмөнкү кадамдарды аткарышыңыз керек:

Веб редакторду ачып (төмөндөгү “Өзүңүз байкап көрүңүз!” баскычын басыңыз)
Баш тегтин бирине id атрибутун кошуңуз. Мисалы, <header id="page-title">
CSS өтмөгүнө өтүңүз #page-title { стиль бул жерде ... }
Тармал кашаалардын ичине “color: yellow;” кошуп аталыштын түсүн өзгөртүңүз
Тармал кашаалардын ичине font-family: 'Roboto Mono', monospace; жана CSS өтмөгүнүн жогору жагына @import url(‘https://fonts.googleapis.com/css?family=Roboto+Mono'); кошуп шрифти өзгөртүңүз

Өзүңүз байкап көрүңүз!