Стварэнне прасторы і фізічнае падзел элементаў у HTML з дапамогай CSS
Стварэнне прасторы і фізічнае падзел элементаў у HTML можа быць цяжка зразумець, для пачаткоўца вэб-дызайнера. Гэта таму , што HTML мае ўласцівасць , вядомае як «пробельные калапс.» увядзіце Ці вы 1 месца або 100 у вашым HTML-кода, вэб-браўзэр аўтаматычна згортвае гэтыя прабелы ўніз толькі адзін адзіную прастору. Гэта адрозніваецца ад праграмы , як Microsoft Word , што дазваляе стваральнікам дакументаў дадаць некалькі прабелаў для падзелу слоў і іншых элементаў гэтага дакумента.
Гэта не тое, як працуе сайт разнос дызайн.
Такім чынам, як вы дадаеце пробельные ў HTML , якія адлюстроўваюцца на вэб - старонцы ? У дадзеным артыкуле разглядаюцца некаторыя з розных спосабаў.
Прабелы ў HTML з дапамогай CSS
Пераважны спосаб дадаць прабелы ў вашым HTML з'яўляецца з каскадных табліц стыляў (CSS) . CSS павінны быць выкарыстаны для дадання якіх-небудзь візуальных аспектаў вэб-старонкі, а так як адлегласць з'яўляецца часткай візуальнага дызайну характарыстык старонкі, CSS, дзе вы хочаце, каб гэта было зроблена.
У CSS, вы можаце выкарыстоўваць або маржынальнасць або дапаўняюць ўласцівасці, каб дадаць прасторы вакол элементаў. Акрамя таго, тэкст-водступаў ўласцівасць дадае прастору ў пярэдняй часткі тэксту, напрыклад, для водступаў абзацаў.
Вось прыклад таго, як выкарыстоўваць CSS, каб дадаць прастору перад усімі сваімі пунктамі. Дадайце наступны CSS для вашых знешніх ці ўнутраных стыляў:
р {
Тэкст-водступаў: 3em;
}
Прабелы ў HTML: Унутры вашага тэксту
Калі вы проста хочаце, каб дадаць дадатковае прастору або два тэксты, вы можаце выкарыстоўваць непарыўны прабел.
Гэты персанаж дзейнічае так жа, як стандартны сімвал прабелу, толькі ён не згортваецца ўсярэдзіне браўзэра.
Вось прыклад таго, як дадаць пяць прабелаў ўнутры радка тэксту:
Гэты тэкст мае пяць дадатковых прабелаў ўнутры яго
Выкарыстоўвае HTML:
Гэты тэкст мае & NBSP; & NBSP; & NBSP; & NBSP; & NBSP; пяць лішніх прабелаў ўнутры
Вы таксама можаце выкарыстоўваць
тэг для дадання дадатковых парываў радкоў.
Гэта прапанова мае пяць парываў радкоў у канцы яна
Чаму Разнос ў HTML гэта дрэнная ідэя
Хоць гэтыя варыянты і праца - непарыўныя прабелы элемент сапраўды дадаць інтэрвал ў тэкст і парывы радкоў дадасць адлегласць пад пунктам паказана вышэй, - гэта не самы лепшы спосаб стварэння інтэрвалу ў вэб-старонкі. Даданне гэтых элементаў у свой HTML дадае візуальную інфармацыю ў кодзе замест падзелу структуры старонкі (HTML) з візуальных стыляў (CSS). Найлепшая практыка падказвае, што яны павінны быць падзеленыя па шэрагу прычын, у тым ліку прастаты абнаўлення ў будучыні і агульны памер файла і старонкі прадукцыйнасці.
Калі вы выкарыстоўваеце знешнюю табліцу стыляў, каб дыктаваць ўсе свае стылі і інтэрвал, то змена гэтых стыляў для ўсяго сайта лёгка зрабіць, так як вы проста павінны абнавіць гэты адзін ліст стыляў.
Разгледзім прыклад вышэй фразы з пяццю
тэгі ў канцы яго. Калі вы хочаце, што колькасць адлегласьці ў ніжняй частцы кожнага абзаца, вам трэба будзе дадаць, што HTML-код для кожнага пункта ва ўсім вашым сайце. Гэта значыць дастатковую колькасць дадатковай разметкі, якая будзе надзімацца вашыя старонкі.
Акрамя таго, калі вы вырашылі ўніз па дарозе, што гэта адлегласць занадта шмат ці занадта мала, і вы жадаеце змяніць яго трохі, вам трэба будзе рэдагаваць кожны абзац ўсяго сайта. Не, дзякуй!
Замест дадання гэтых распорных элементаў у код, выкарыстоўвайце CSS.
р {
абіўка-дно: 20px;
}
Гэта адна лінія CSS будзе дадаць інтэрвал у адпаведнасці з пунктамі вашай старонкі. Калі вы хочаце змяніць гэты інтэрвал у будучыні, змяніць адзін радок (замест кода ўсяго сайта), і вы добра ісці!
Цяпер, калі вам трэба дадаць адзін прабел у адной частцы вашага сайта, выкарыстоўваючы тэг
або адзін непарыўны прабел не канец святла, але вы павінны быць асцярожныя.
Выкарыстоўваючы гэтыя убудаваны HTML параметры інтэрвалаў можа быць слізкім. У той час як адзін ці два не можа пашкодзіць ваш сайт, калі вы будзеце працягваць па гэтым шляху, вы будзеце ствараць праблемы на вашыя старонкі. У рэшце рэшт, вам лепш звярнуцца да CSS для інтэрвалу HTML, а таксама ўсе іншыя вэб-старонкі візуальных патрэбаў.