Элементтерді веб-бетте орналастыру орналастырудың жалпы дизайны үшін маңызды. Кестелерді қолдану (мысалы, біз ұсынбайтын ) сияқты макетке әсер етудің басқа жолдары бар болса да, ең жақсы CSS-ды пайдалану болып табылады .
Төменде суреттерді, кестелерді, параграфтарды және тағы басқаларды теңестіру үшін қарапайым CSS мәнерін онлайн режимінде қалай пайдалану керектігін қарастырамыз.
Ескерту: Бұл әдістер сыртқы стильдер кестелерінде де пайдаланылуы мүмкін, бірақ олар жеке элементтерге қатысты болуы мүмкін және, осылайша, осында қалу қажет болуы мүмкін, төменде айтылғандай интернетте сәндеуді пайдалану керек.
Мәтін параграфтарын туралаңыз
Параграф тегі - сіздің веб-бетті орналастыруға бастау үшін бірінші орын. Тегтерді ашу және жабу келесідей:
Ежедегі мәтіннің әдепкі бойынша туралануы беттің сол жағында, бірақ сіз абзацтарды оң және ортаға дәл келтіре аласыз.
Жылжымалы сипатты пайдалану абзацтарды жоғарғы элементінің оң немесе сол жағына теңестіруге мүмкіндік береді. Бұл элементтің кез-келген басқа элементтері өзгермелі элемент айналасында ағып кетеді.
Параграфпен жақсы нәтиже алу үшін, контейнер (ата-ана) элементінен аз болатын параграфта енін орнату керек.
Мәтіннің ішіндегі параграфтарды туралаңыз
Мүмкін, параграф мәтіні үшін ең қызықты туралау - бұл «ақтайды», ол браузерде мәтінді сәйкес келетін, шын мәнінде, терезенің оң және сол жағына көрсетуді білдіреді.
Мәтінді параграфта ақтау үшін, сіз мәтіндік-теңшеу сипатын қолданасыз.
Сондай-ақ, параграфтың ішіндегі барлық мәтінді мәтіннің тегістеу сипатын пайдаланып, оң жаққа немесе солға (әдепкі) теңестіруге болады.
Text-align сипаты мәтін ішіндегі элементті туралайды. Техникалық жағынан, параграфтың ішіндегі немесе басқа элементтің бейнелерін туралауға болмайды, бірақ браузерлердің көбі суреттерді осы сипатқа кірістіру ретінде қарастырады.
Суреттерді сәйкестендіру
Сурет белгісіндегі float сипатын пайдаланып, беттегі кескіндерді орналастыруды және мәтіннің айналасында қалай оралатындығын анықтауға болады.
Жоғарыдағы параграфтар сияқты, сурет тегіндегі өзгермелі стиль сипаты суретіңізді бетке орналастырады және браузерге бұл кескін айналасындағы мәтінді және басқа элементтерді қалай апару керектігін айтады.
Жоғарыда келтірілген сурет тегінің мәтіні экранның оң жағында бейнеленгендей оң жаққа қарай ағып кетеді.
Егер сурет мәтінді орауды тоқтатуды қаласаңыз, мен нақты сипатты қолданамын:
style = «white»
Параграфтардан көбірек туралау
Алайда, егер сіз абзацтан немесе суреттен көп нәрсені теңестіргіңіз келсе не болады? Әрбір параграфта стиль сипатын жай ғана қоюға болады, бірақ сіз қолдануға болатын тег бар, бұл тиімдірек:
Мәтін мен кескіндерді (соның ішінде HTML тегтерін ) тегпен және стиль сипатымен (float немесе text-align) жай ғана қоршаңыз және сол бөліктегі барлық нәрсе оны қалай алғыңыз келеді.
Бөлімдегі параграфтарға немесе суреттерге қосылған теңшелімдер тегті алдын ала ескеріп, құрметке ие болатынын есте сақтаңыз.