CSS-мен HTML-дағы кеңістікті және элементтерді физикалық бөлуді жасаңыз
HTML-дегі элементтерді бос орындар жасау және физикалық бөлісу бастапқы веб-дизайнер үшін түсіну қиын болуы мүмкін. Өйткені, HTML- ді «бос кеңістіктің құлдырауы» деп атайтын қасиеті бар. HTML-кода 1 бос орынды немесе 100-ні теріп жатсаңыз, веб-браузер бұл кеңістіктерді бір ғана бос орынға автоматты түрде құлатады. Бұл құжат құрушыларға сөздерді және сол құжаттың басқа элементтерін бөлуге бірнеше бос орындарды қосуға мүмкіндік беретін Microsoft Word сияқты бағдарламадан ерекшеленеді.
Бұл веб-дизайн интервалы қалай жұмыс істемейді.
Сонымен, веб-бетте көрсетілетін HTML-дағы бос орындарды қалай қосасыз? Бұл мақалада кейбір түрлі жолдар қарастырылады.
CSS-мен HTML-мен кеңістік
HTML-ге бос орындарды қосудың артықшылық жолы - Cascading Style Sheets (CSS) . CSS веб-беттің кез-келген көрнекі аспектілерін қосу үшін пайдаланылуы керек, ал интервал беттердің визуалды дизайн ерекшеліктерінің бір бөлігі болғандықтан, CSS-ті сіз мұны жасағыңыз келеді.
CSS-де сіз айналадағы бос орындарды қосу үшін маржа немесе толтырғыш сипаттарын пайдалана аласыз. Сонымен қатар, мәтіндік-шегініс сипаты мәтінді алдымен параграфқа шығарады, мысалы, параграфты шығарып алу үшін.
Мұнда барлық абзацтарыңыздың алдында бос орын қосу үшін CSS-ды пайдаланудың мысалы келтірілген. Сыртқы немесе ішкі мәнер кестесіне келесі CSS қосыңыз:
p {
мәтіндік-үзінді: 3em;
}
HTML-ге арналған кеңістік: мәтіннің ішінде
Егер сіз тек мәтінге қосымша орын немесе екі қосқыңыз келсе, сіз үзілмейтін орынды пайдалана аласыз.
Бұл кейіпкер стандартты кеңістік кейіпкері сияқты жұмыс істейді, тек ол браузердің ішінде құлап кетпейді.
Мәтін жолында бес бос орынды қосудың мысалы келтірілген:
Бұл мәтіннің ішінде бес қосымша бос орын бар
HTML пайдаланылады:
Бұл мәтінде & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ішіндегі бес қосымша орын
Сондай-ақ, қосымша жол үзілістерін қосу үшін тегін тегті пайдалануға болады.
Бұл сөйлемнің соңында бес жол үзілімі бар
Неге HTML-ке бөлу - жаман идея
Бұл опциялар жұмыс істесе де - үзілмейтін бос орындар элементі сіздің мәтініңізге аралықты қосады және жол үзілімдері жоғарыда көрсетілген параграфтың астына аралықты қосады - бұл сіздің веб-беттегі аралықты құрудың ең жақсы жолы емес. HTML-ге осы элементтерді қосу визуалды мәнерлерден (CSS) беттің құрылымын (HTML) бөліп алудың орнына көрнекі ақпаратты кодқа қосады. Ең жақсы тәжірибелер оларды бірнеше себептермен, соның ішінде болашақтағы жаңартулардың оңай болуын және жалпы файл өлшемі мен бет өнімділігін қоса алғанда, бөлек болуы керек деп белгілейді.
Барлық стильдер мен аралықтарды белгілеу үшін сыртқы мәнер парағын пайдалансаңыз, бүкіл веб-сайт үшін сол мәнерлерді өзгерту оңай, себебі бұл бір ғана мәнер парағын жаңарту керек.
Жоғарыда келтірілген мысалды бес сөз тіркесінің соңында қарастырайық. Әрбір абзацтың төменгі бөлігіндегі бос орын мөлшерін қаласаңыз, осы HTML кодын сіздің бүкіл сайтыңыздың әрбір абзацына қосу керек. Бұл сіздің беттеріңізді шағылыстыратын қосымша түзетулердің әділ сомасы.
Сонымен қатар, егер сіз бұл аралықтың тым көп немесе тым аз екендігін анықтасаңыз және оны аздап өзгерткіңіз келсе, онда сіз өзіңіздің веб-сайтыңыздың әрбір парағын өңдеуіңіз керек. Жоқ рахмет!
Бұл аралық элементтерді сіздің кодыңызға қосудың орнына CSS-ні қолданыңыз.
p {
толтыру төменгісі: 20px;
}
CSS-дің бір жолы сіздің бетіңіздің параграфтарының астына аралықты қосады. Егер сіз болашақта осы аралығын өзгертуді қаласаңыз, осы бір жолды түзетіңіз (орнына бүкіл сайттың кодының орнына) және сіз жақсы боласыз!
Енді сіздің веб-сайтыңыздың бір бөлігінде бір орынды қосу керек болса,
тегті немесе біржолғы үзіліссіз кеңістікті пайдалану әлемнің соңы емес, бірақ абай болу керек.
Осы кірістірілген HTML интерфейс опцияларын пайдалану тайғақ бейім болуы мүмкін. Біреуі немесе екеуі сіздің сайтыңызға зиян келтірмеуі мүмкін болса, егер сіз осы жолды жалғастырсаңыз, сіз беттеріңізде қиындықтар тудырасыз. Соңында, HTML интерфейсі үшін CSS-ге және барлық басқа веб-беттердің көрнекі қажеттіліктеріне оралуды жақсы көресіз.