CSS: колер шрыфта, стылі, фон, памер

Праграмаванне - што люстэрка: спачатку было слова, а адбіўся зусім не адказ. І вельмі хутка прыйшлося «памяняць»: спачатку люстэрка, потым слова ... У дадзены момант часу табліцы каскадных стыляў - гэта добра, але чаму так доўга да іх ішло свядомасць распрацоўніка? CSS - гэта ўсё той жа масіў часоў пачатку эры кампутарных праграм, але толькі ў іншым ракурсе. Нават калі масівы сталі асацыятыўнымі, рэвалюцыі гэта не зрабіла.

Старонка сайта - гэта тэгі HTML-разметкі, якім можа быць прыпісаны пэўны стылявы клас або ідэнтыфікатар стылю. Першае можна вызначыць аднойчы і прыпісваць да чаго заўгодна колькі трэба раз, другое належыць канкрэтнаму элементу.

Агульная логіка апісання стыляў

Па традыцыі, стыль змяшчаецца ў CSS-файл, але можа быць прыпісаны да пэўнага элементу ў яго атрыбуце style. Стыль можна стварыць у дынаміцы сродкамі JavaScript. Асаблівага значэння не мае, як апісаць, напрыклад, з дапамогай CSS колер шрыфта, яго памер, гарнітуру, фон пад ім і інш. Месца апісання стылю мае значэнне ў кантэксце, звычайна двух, ідэй: чым пазней апісана, тым яно больш прыярытэтнае, а калі апісана на элеменце, то гэта зусім! Important. Апошняе, запісанае як ёсць, відавочна вызначае прыярытэт.

Ўжываць стыль каб, напрыклад, нейкае font color памяняла колер, можна дзе заўгодна і як заўгодна. Пытанне ў тым, як да гэтага паставіцца браўзэр падчас разборкі ўсіх стыляў у сукупнасці. Колькі ён на гэта выдаткуе працэсарнага часу?

У ідэале, font color павінна быць пазначана толькі адзін раз - гэта класіка. Дадумваць да аднаго простаму апісанню яшчэ парачку, а потым яшчэ і яшчэ ... вядома, можна. Гэта модна, але непрактычна.

Прыклад агульнай логікі

Усё вельмі проста: вызначыўшы пры дапамозе CSS color за ўсё для трох элементаў, можна атрымаць як мінімум тры доўгайграючыя праблемы:

# Ele1, # Ele2, # Ele3 {
POSITION: absolute;
left: 20px;
top: 14px;
color: red;
}

# Ele2, # Ele3 {
left: 90px; // змяніць каардынату CSS па гарызанталі
color: yellow; // змяніць колер шрыфта CSS
}

# Ele3 {
top: 114px; // змяніць каардынату CSS па вертыкалі

color: green; // яшчэ раз змяніць колер шрыфта CSS

background-color: lightgrey; // колер вылучэння тэксту CSS зменены, але гэтага няма ў # Ele1 і # Ele2; становішча таксама змененае, але яно ўжо змянялася ў # Ele2 і не так, як тут

}

Зараз прыйдзецца памятаць, што ўсе гэтыя тры элемента дзесьці вызначаны, а ў выпадку змены каляровых уяўленняў ўладальніка сайта, распрацоўніку прыйдзецца ўспомніць не толькі пра color, але і пра правілы left і top, ды і аб змене колеру вылучэння тэксту варта не забыцца.

Далёка не ўсе распрацоўшчыкі шануюць патрабаванне CSS: стыль ідэнтыфікатара - толькі аднаму элементу, а стыль класа - многім тэгам, да таго ж апошнія можна паказваць у тэгах як прыметнікі:

• задаць колер шрыфта ў CSS - стыль класа groundColor;
• ўдакладніць памер шрыфта - клас size15;
• ўсталяваць становішча - клас PlaceUp.

Натуральна, выкарыстанне ідэнтыфікатараў, асабліва калі яны належаць да аднаго элементу разметкі, лепш за дзесятак стылявых класаў, распісаных у розным спалучэнні па сотні элементаў старонкі. Але ва ўсім ёсць свая аб'ектыўная логіка.

Распрацоўшчык проста павінен пісьменна ўлічваць: калі нават колер шрыфта HTML, CSS прапануе апісаць жорстка, то гнуткасць агульнай структуры апісанняў - гэта яго праца.

Чаканы вынік прымянення агульнай логікі

Сучасныя браўзэры спакойна ставяцца да вялікай колькасці стылявых файлаў і іх аб'ёмах. Аднак праектуючы, у прыватнасці, з дапамогай CSS, color ўсёй старонкі, заўсёды варта думаць аб разумнай дастатковасці. Не ўсе стылявыя правілы «танна» выглядаюць ва ўжыванні. Простая лаканічная запіс: * {color: white;} - безумоўна прыгожая, але ставіцца яна да ўсіх элементаў старонкі без выключэння.

З усіх правілаў, якімі абсталяваны CSS, самае важнае:

• стыль - клас, і тады яго імя пачынаецца з ".";
• стыль - ідэнтыфікатар і яго імя пачынаецца з знака "#";
• у астатніх выпадках - гэта найменне тэга або нешта асаблівае

Астатнія ідэі ў частцы апісання стыляў (ўспадкоўванне, перакрыцце уласцівасцяў, прыярытэты, становішча, парадак і т. Д.) Варта ўжываць асэнсавана і строга па неабходнасці.

Браўзэр заўсёды прапусціць, што не разбярэ ў апісанні, так што асаблівых нечаканасцяў не будзе. Калі чагосьці не апынулася ў патрэбным месцы або задаць колер шрыфта ў CSS не ўдалося, значыць, памылка ў стылі.

нечаканыя магчымасці

Не варта злоўжываць стылямі накшталт * {left: 124px; } або

ol ol, ol ul, ul ul, ul ol {margin-bottom: 0; }
a img {border: 0; }

Хоць цяжка прымусіць нават пачаткоўца распрацоўніка выкарыстоўваць правілы CSS як ёсць. Заўсёды ў распрацоўцы любога сайта нават ідэальна просты сінтаксіс CSS дорыць непрадбачаныя праблемы. Зрэшты, калі накіраваць намаганні ў вобласць правільнага выкарыстання сінтаксісу, але ўжыць да яго функцыянал JavaScript, то новыя нечаканыя магчымасці дазволяць пазбегнуць манатоннага стварэння ідэнтыфікатараў для кожнага элемента або сачыць за разнастайнасцю прымянення стылявых класаў.

CSS - гэта не толькі файл стыляў, падлучаны да старонкі праз тэг link або ўстаўлены ў яе праз тэг style. Гэта таксама магчымасць стварыць стыль на лета або змяніць ужо існуючы.

Ужываючы CSS, колер шрыфта можна зрабіць праграмна. Гэтак жа як і памер, і становішча, водступы. Сайт - гэта не мэта прымяніць веды ў CSS, HTML, PHP або бліснуць эфектамі JavaScript.

Вэб-рэсурс - гэта перш за ўсё інфармацыя, прапанаваная пэўным чынам. Менавіта таму CSS лепш за ўсё разглядаць у дынаміцы скрозь прызму таго, як можна сфармаваць, пакуль старонка яшчэ на сэрвэры (ёю заняты PHP ў момант, калі на сайт прыйшоў наведвальнік, а не распрацоўшчык у той час, калі ён распрацоўвае сайт), патрэбны файл стыляў пад канкрэтны тэкст, пад актуальны кантэнт або стварыць стыль класа або ідэнтыфікатара на лета ў працэсе работы старонкі, калі яе праглядае канкрэтны наведвальнік.

статычная дынаміка

Не заўсёды варта пісаць складаны JavaScript-код, каб зрабіць кантэнт дынамічным, а яго афармленне - адэкватным змесце. Часам досыць правільна выкарыстоўваць наяўныя магчымасці. У прыватнасці, вызначыўшы пры дапамозе CSS колер шрыфта першапачаткова статычным правілам, можна схаваць гэтае правіла (hidden) і візуалізаваць іншае (visible).

Тут дынаміка не патрабуе алгарытму:

// падсвятліць кнопку ўваходу на сайт
function scfWelcomeOver () {
document.getElementById ( 'scDocxNamePiP'). style.visibility = 'visible';
}

// схаваць кнопку ўваходу на сайт
function scfWelcomeOut () {
document.getElementById ( 'scDocxNamePiP'). style.visibility = 'hidden';
}

CSS прапануе ўласныя варыянты дынамікі: беглыя радкі, празрыстасць элементаў, розныя варыянты накладанняў, праяў, згасанне колеру. У CSS колер шрыфта можна зрабіць нават такім, якім ні адным стылявым правілам не прадугледжана.

Дынамічнае адлюстраванне кантэнту

Калі б не было догмаў, верагодна, не было б і прагрэсу. Проста няма з чым было б змагацца. Гіпертэкст прынёс у свет шмат догмаў. Надышла пара звярнуць на іх увагу і заняцца распрацоўкай сайтаў ў прагматычным і практычным стылі.

Першапачаткова ёсць старонка (P), на ёй размешчаны кантэнт (K), усе тэгі старонкі апісаны ў табліцы стыляў (S). Не нова фармаваць старонку P праз PHP або Perl на сэрвэры, выбіраючы K з базы дадзеных. Наяўная табліца стыляў S прыкладзецца аўтаматам. Аднак K можа быць зменены, а ў большасці выпадкаў такая змена пацягне за сабой патрэба ў іншых стылях, гэта значыць у S +.

Напрыклад, заказчык сказаў: «Сайт, які апісвае жыццё Масквы, лепш будзе глядзецца, калі навінавыя артыкулы аформлены ў стылі" ЗаЗавтраком ", апісання начны мітусні ў стылі" ЛасВегас ", а артыкулы аб навукова-тэхнічным прагрэсе ў стылі" МодернТехно "». Але калі зрабіць S на тры гэтых варыянту, то няма ніякай гарантыі, што ў заказчыка не ўзнікне ідэі мець набор артыкулаў «Навіны», «Святы», «Праца», «CSS / HTML» і бонус «ХозяйкеНаЗаметку».

Больш практычны іншы падыход. Па-за залежнасці ад катэгорыі артыкулы ў ёй заўсёды ёсць змест, якое можна размаляваць у вызначаны колер. Вось на гэтым месцы ўзнікае цалкам разумная думка: атрымаўшы канкрэтнае K, яшчэ на сэрвэры сфармаваць адэкватную S, і калі браўзэр запатрабуе P, ён атрымае патрэбнае ўтрыманне ў належным афармленні.

Дынаміка стылю ад JavaScript

Мінімальны, хоць і вельмі эфектыўнае рашэнне, - рабіць стылёвае афармленне непасрэдна ў браўзэры кліента. Па-першае, гэта разгружае сервер - не трэба будзе марнаваць час на фарміраванне гіпертэксту старонкі і файлаў стыляў для яе.

Па-другое, натуральныя марнаванні часу ўнутры браўзэра створаць эфект, што старонка занятая справай і актыўна падтрымлівае дыялог з наведвальнікам: усё роўна той не ўспрымае кантэнт оптам, такім чынам, яму спадабаецца паслядоўны і прадуманы выснова інфармацыі.

Па-трэцяе, гэта дае магчымасць распрацоўніку падаць у распараджэнне наведвальніка механізм фарміравання кантэнту ў такім стылі, у якім яму гэта зручна. Гэтага няма яшчэ ні ў каго.

Для ўвасаблення гэтай ідэі неабходна рэалізаваць механізм стварэння стыляў элементаў адразу пасля загрузкі старонкі і ў працэсе яе функцыянавання. Сучасны сайт - гэта AJAX ў тым ці іншым варыянце. Не складае працы выконваць фарміраванне стыляў непасрэдна ў працэсе фарміравання дрэва старонкі. Гэта проста, даступна і эфектыўна, таму як кантэнт ідзе разам са сваім афармленнем.

Гэта не супярэчыць сучаснай тэндэнцыі аддзяліць прадстаўленне даных ад іх апрацоўкі і выконваецца над дадзенымі бяруць пачатак у адлюстраванне.

CSS як актыўная кампанента

Гіпертэкст прынёс шмат добрага, але толькі малая крыха натуральнай інфармацыі была паспяхова фармалізаваная, з'явіліся прылады і вопыт стварэння якасных HTML, XML, CSS дакументаў. Не праблема формализовывать новыя аб'ёмы інфармацыі і змяняць ужо зробленае раней.

У дачыненні да CSS гэты працэс ужо актывізуецца ў зусім іншым кантэксце. Убудаваныя сродкі ў JavaScript, якія дазваляюць "на ляту" ствараць элементы і стылі элементаў, не меркавалі такую магчымасць, а стваральнікі PHP, у прыватнасці, меркавалі займацца фарміраваннем толькі HTML старонак.

І першае, і другое дазваляюць заняцца праграмаваннем стыляў. Гэта новы напрамак у галіне інфармацыйных тэхналогій. Стылі значна больш фармальная рэч, чым HTML або XML, правілы вельмі простыя. Стыль заўсёды прысутнічае ў інфармацыі, якой бы прыроды яна ні была.

Афармленнем дадзеных праграмісты займаюцца заўсёды ў значна больш нефармалізаваны сферах, але вось тэма CSS - вельмі простая задача, але неяк не трапляла ў поле зроку працэсу распрацоўкі.

Аб догмах ў галіне праграмавання

Як і айсберг, догма не можа доўга баразніць інфармацыйныя абшары. Назапашаны вопыт павінен быў сканцэнтравацца не толькі ў HTML- і CSS-стандартах, інструментах працы з імі, ведах распрацоўшчыкаў.

Простая задача - зрабіць з дапамогай CSS колер шрыфта - знайшла сваё выдатнае рашэнне. Правілы, сінтаксіс, логіка і зручнасць несумнеўныя. Але нават калі шрыфтоў на самай справе трэба не шмат, кветак для практыкі таксама шмат не трэба, ды і наогул для мэтаў віртуалізацыі рэальнасці зусім не патрэбная ўся назапашаная «сіла» HTML і CSS, надыходзіць момант, калі сітуатыўныя веды сыходзяць у репродуцирующие, і з'яўляецца вопыт і інструменты натуральнага адукацыі стыляў ад кантэнту.

Як гэта будзе, можа і не зусім ясна, але тое, што працэс ужо ідзе, відавочна.