Қойындылар мен аралықтарды жасау үшін HTML және CSS-ды қалай пайдалануға болады

HTML-дағы ақ кеңістіктің шолғыштармен қалай өңделетінін қараңыз

Егер сіз веб-дизайншы болсаңыз, сайттың кодының ақ кеңістігін веб-браузерлермен өңдейтін әдіс ерте түсіну керек болатын көптеген нәрселердің бірі болып табылады.

Өкінішке орай, браузерлердің ақ кеңістікті өңдейтін тәсілі бірінші кезекте өте интуитивті емес, әсіресе HTML-ке кірген болсаңыз және сіз оны көбірек таныс болатын сөздік өңдеу бағдарламаларында қаншалықты ақ кеңістікте жұмыс істейтінін салыстырсаңыз.

Сөзді өңдейтін бағдарламалық жасақтамада құжаттағы көптеген аралықтарды немесе қойындыларды қосуға болады және бұл аралық құжат мазмұнының көрсетілімінде көрсетіледі. Бұл HTML немесе веб-беттермен емес. Осылайша, ақ кеңістіктің шын мәнінде веб-браузерлермен өңделгенін білу өте маңызды.

Басып шығарудағы аралық

Сөзді өңдеу бағдарламалық жасақтамасында үш негізгі бос кеңістіктің бос орындары, қойындысы және аралық қайтару болып табылады. Олардың әрқайсысы нақты түрде әрекет етеді, бірақ HTML-де браузерлер олардың бәрін бірдей көрсетеді. HTML белгілеуіңізде бір орынды немесе 100 бос орынды орналастырсаңыз да, қойындылар мен каретки қайтаруларымен араласып жатсаңыз, олардың барлығы браузер арқылы көрсетілетін кезде бір кеңістікке дейін төмендетіледі. Веб-дизайн терминологиясында бұл ақ кеңістіктің құлауы деп аталады. Браузер браузерде бірнеше кеңістікті тек бір бос орынға қоятындықтан, веб-беттегі бос орынды қосу үшін осы әдеттегі бос орын пернелерін пайдалана алмайсыз,

Неліктен біреу қойындыларды пайдаланады?

Әдетте, адамдар мәтіндік құжатта қойындыларды пайдаланған кезде, оларды орналасу себептері бойынша немесе мәтінді нақты орынға жылжыту немесе басқа элементтен белгілі бір қашықтық болуы үшін пайдаланады. Веб-дизайнда сол визуалды мәнерлерге немесе орналасу қажеттіліктеріне қол жеткізу үшін жоғарыда аталған ғарыштық таңбаларды пайдалана алмайсыз.

Веб-дизайнда кодқа қосымша аралық таңбаларды пайдалану тек осы кодты оңай қарап шығуға арналған. Веб-дизайнерлер мен әзірлеушілер көбінесе элементтердің элементтері болып табылатын элементтерді көре алатындай етіп ендірілген кодқа қойындыларды жиі пайдаланады, бірақ бұл шегіністер беттердің визуалды орналасуына әсер етпейді. Қажетті визуалды орналасу өзгерістері үшін сіз CSS-ге (каскадты стильдер кестесін) айналдыруыңыз керек.

HTML қойындыларын және аралықты жасау үшін CSS пайдалану

Бүгінгі сайттар құрылым мен стильді бөлу арқылы құрастырылған. Беттің құрылымы HTML арқылы өңделеді, ал CSS стилі CSS-нен жүктеледі. Бұл аралықты жасау немесе белгілі бір орналасуға жету дегенді білдіреді, сіз CSS-ге бұрылып, HTML-кодқа аралық таңбаларды жай ғана қосуға тырыспаңыз.

Егер сіз мәтін бағандарын жасау үшін қойындыларды пайдаланғыңыз келсе, орнына осы баған орналасуын алу үшін CSS арқылы орналасқан

элементтерін қолдануға болады. Бұл позициялау CSS флоты, абсолютті және салыстырмалы орналасуы немесе Flexbox немесе CSS Grid сияқты жаңа CSS орналасу әдістері арқылы жасалуы мүмкін.

Егер сіз шығарып жатқан деректер кестелік деректер болса, сіз сол деректерді қалағаныңызша теңестіру үшін кестелерді пайдалана аласыз. Кестелер көбінесе веб-дизайндағы нашар рэпке ие болады, өйткені олар көптеген жылдар бойы таза орналасу құралдары ретінде қолданылған, бірақ мазмұныңызда жоғарыда аталған кестелік деректер болса, кестелер әлі де жарамды болады.

Жақтау, толтыру және мәтін-жиек

CSS-мен ара қашықтықты құрудың ең көп тараған жолдары келесі CSS стильдерінің біреуін пайдалану арқылы жүзеге асады:

Мысалы, параграфтың бірінші жолын төмендегі CSS арқылы қойынды сияқты жазуға болады (бұл сіздің ежеңізде «бірінші» бекітілген сынып атрибуты бар екенін ескеріңіз):

p.first {
мәтіндік-үзінді: 5em;
}

Бұл абзац енді 5 таңбадан шықты.

Сондай-ақ, элементтің үстіңгі, астыңғы, сол немесе оң жағына (немесе сол жақтың комбинациясына) аралықты қосу үшін CSS-дегі шеттер немесе толтырғыш сипаттарын пайдалануға болады. Сайып келгенде, сіз CSS-ге ауысып, кез-келген бос орынға қол жеткізе аласыз.

CSS-ні ​​жоқ бір жерден артық мәтінді жылжыту

Егер сізге қажет болса, мәтіннің алдындағы элементтен бірнеше бос орынға жылжытылуы үшін, сіз үзілмейтін орынды пайдалана аласыз.

Үзілмейтін бос орынды пайдалану үшін сіз жай ғана & nbsp; HTML-нің түзетулеріне бірнеше рет қажет.

Мысалы, сөзіңізді бес бос орынға ауыстырғыңыз келсе, сөзден бұрын төмендегілерді қосуға болады.

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp;

HTML бұлды құрметтейді және оларды бір кеңістікке дейін тастамайды. Дегенмен, бұл өте нашар тәжірибе болып саналады, себебі макетке қажеттілікке жету үшін құжатқа қосымша HTML түзету қосылады. Құрылым мен стилдің бөлінуіне сілтеме жасай отырып, қажетті орналасу әсеріне жету үшін жайсыз кеңістіктерді қосудан аулақ болуыңыз керек және орнына CSS жиектерін және толтыруды пайдалану керек.