CSS - бұл веб-парақтардың сыртқы түрін сипаттайтын тіл болып табылатын каскадты стильдер кестесі. CSS-тің басты артықшылықтарының бірі - кестенің орналасуын блоктық орналасумен ауыстыру мүмкіндігі.
Бұл қажетті
HTML-код редакторы
Нұсқаулық
1-қадам
Бірінші блокты жасаңыз. HTML түрінде ол 'block01' идентификаторы бар див тегке ұқсайды. Мұнда block01 идентификаторы CSS сипаттамасында # block01 селекторы үшін осы блоктың барлық қасиеттері көрсетілгенін көрсетеді.
2-қадам
CSS-тегі блокты сипаттаңыз. CSS стильдерінде идентификатордың атын көрсетіңіз (# block01) және бұйра жақшаларда оның параметрлерін сипаттаңыз - ені, орналасуы, ығысуы, фон түсі және т.б. Мысалы, келесідей болуы мүмкін: # block01 {width: 150px; биіктігі: 150px; позиция: абсолютті; жоғарғы: 0px; сол жақта: 0px; фон-түс: қызғылт}. Бұл сипаттама қораптың ұзындығы 150 пиксел және ені 150 пиксель болады деп болжайды, ол құжаттың жоғарғы сол жақ бұрышында қатаң түрде орналастырылады және оның фоны қызғылт түсті болады.
3-қадам
Блокқа салыстырмалы позиция беріңіз. Егер сіз CSS сипаттамасында абсолютті емес, бірақ салыстырмалы позицияны қолдансаңыз, онда сіз блоктарды координаттар торына қатыстыра отырып емес, басқа бұрыннан бар блоктарға қатысты орналастыра аласыз. Ол үшін кодтың орнын өзгертіңіз: абсолютті; жоғарғы: 0px; сол жақта: позиция бойынша 0px: салыстырмалы; жоғарғы: 200px; сол жақ: 100px.
4-қадам
Блокқа дөңгелектеу беріңіз. CSS-те шекара-радиус мәлімдемесі бұған жауап береді. Стильдер кестесіне келесі кодты қосыңыз: border-radius: 8px. Енді блоктың дөңгелектелген бұрыштары болады. Егер сіз тек кейбір бұрыштарды дөңгелектегіңіз келсе, олардың әрқайсысы үшін радиусты бөлек сипаттаңыз: border-radius: 8px 8px 0px 0px.
5-қадам
Блокқа инсульт беріңіз. Блоктың контурын жіңішке сызықпен бөлектеу үшін оның CSS сипаттамасына келесі кодты қосыңыз: border-top: 1px сызылған қара. Бұл нұсқаулық блоктың жиегі қара болады және қалыңдығы бір пиксель болады дегенді білдіреді. Бұл жағдайда контур сызығының өзі үзік сызық түрінде көрсетіледі (үзік - үзік сызық, нүкте - нүкте, тұтас - тұтас сызық).
6-қадам
Қалған блок қасиеттерін орнатыңыз. CSS сипаттамасында блок ішіндегі мәтін үшін қандай қаріп қолданылуы керек, қаріп өлшемі, туралау және блок шеттерінен шегіну қандай болуы керек екенін көрсетіңіз. Бұл қасиеттер шрифт-жанұя, қаріп өлшемі, мәтін туралау және толтыру анықтамаларында сипатталған.
7-қадам
Float қасиетін бір блоктың екінші блокқа өтуін реттеу үшін пайдалануға болады. Егер сіз оны «солға» қойсаңыз, онда қалған элементтер блоктың айналасында сол жақта, ал «оң» - оң жақта айналады. Егер сіз қалқымалы мәнді «жоқ» етіп орнатсаңыз, блоктың туралануы орнатылмайды. CSS ішіндегі айқын қасиет блоктың оңға, солға немесе екі жағына өтуіне жол бермейді және float операторының орнын басады.
