CSS - каскаддык стилдер жадыбалы, бул веб-баракчалардын көрүнүшүн сүрөттөө үчүн тил. CSSтин негизги артыкчылыктарынын бири - үстөлдүн макетин блоктун макетине алмаштыруу мүмкүнчүлүгү.
Ал зарыл
HTML code editor
Нускамалар
1 кадам
Биринчи блокту түзүңүз. HTML формасында, ал 'block01' идентификатору бар div тэгге окшош болот. Бул жерде, block01 идентификатору CSS сүрөттөмөсүндө, # block01 селектору үчүн ушул блоктун бардык касиеттери көрсөтүлгөндүгүн көрсөтөт.
2-кадам
CSS ичиндеги блокту сүрөттөп бериңиз. CSS стилдеринде идентификатордун аталышын көрсөтүңүз (# block01) жана тармал кашаада анын параметрлерин - туурасы, жайгашуусу, жылышы, фон түсү ж.б. Мисалы, мындай болушу мүмкүн: # block01 {width: 150px; бийиктиги: 150px; абалы: абсолюттук; top: 0px; солдо: 0px; фон-түс: кызгылт}. Бул сыпаттама кутучанын узундугу 150 жана кеңдиги 150 пиксел болот деп болжолдоп, документтин жогорку сол бурчуна катуу жайгаштырылат жана анын фону кызгылт түскө боёлот.
3-кадам
Блокко салыштырмалуу жайгашууну бериңиз. Эгер сиз CSS сүрөттөмөсүндө абсолюттук эмес, бирок салыштырмалуу жайгаштырууну колдонгон болсоңуз, анда блокторду координаттар торуна катуу кесилгендей эмес, мурунтан бар болгон башка блокторго салыштырмалуу жайгаштыра аласыз. Бул үчүн коддун ордун өзгөртүңүз: абсолюттук; top: 0px; солго: позиция боюнча 0px: салыштырмалуу; top: 200px; сол: 100px.
4-кадам
Блокту тегеректеп бериңиз. CSSте, бул үчүн чек ара радиусу билдирүүсү жооп берет. Стилдик таблицаңызга төмөнкү кодду кошуңуз: border-radius: 8px. Блоктун тегерек бурчтары болот. Эгер сиз кээ бир бурчтарды тегеректөөнү гана кааласаңыз, алардын ар бири үчүн радиусту өзүнчө сүрөттөп бериңиз: border-radius: 8px 8px 0px 0px.
5-кадам
Блокко инсульт бериңиз. Блоктун контурун жука сызык менен бөлүп көрсөтүү үчүн, анын CSS сүрөттөмөсүнө төмөнкү кодду кошуңуз: border-top: 1px үзүк кара. Бул көрсөтмө блоктун чек арасы кара болуп, калыңдыгы бир пиксель болот дегенди билдирет. Бул учурда контур сызыгынын өзү үзүк сызык катары көрсөтүлөт (үзүндү - чекиттүү сызык, чекиттүү - чекит, катуу - катуу сызык).
6-кадам
Калган блок касиеттерин коюңуз. CSS сүрөттөмөсүндө блоктун ичиндеги текст үчүн кандай арип колдонулушу керектигин, шрифттин көлөмү, тегизделиши жана блоктун четтеринен чегиниши кандай болушу керектигин көрсөтүңүз. Бул касиеттер шрифт-үй-бүлө, арип өлчөмү, текст менен тегиздөө жана толтуруу аныктамаларында баяндалган.
7-кадам
Float касиетин колдонуп, бир блоктун экинчисине агымын жөндөсөңүз болот. Эгерде сиз аны "солго" койсоңуз, анда калган элементтер сол жактагы блоктун айланасында, ал эми "оң" - оң тараптан агып өтөт. Эгер сиз float маанисин "жок" деп койсоңуз, блокту тегиздөө орнотулбайт. CSSтеги ачык касиет блоктун оңго, солго же эки тарапка агышына жол бербейт жана float операторун жокко чыгарат.
