СÐÐÐÐÐ : ÐолÑÑаеÑÑÑ, ÑÑо HTML не единÑÑвеннÑй ÑзÑк, коÑоÑÑй Ð²Ñ Ð¼Ð¾Ð¶ÐµÑе иÑполÑзоваÑÑ Ð²Ð½ÑÑÑи веб-ÑÑÑаниÑÑ. ÐÑ Ð¼Ð¾Ð¶ÐµÑе иÑполÑзоваÑÑ Ñо, ÑÑо назÑваеÑÑÑ CSS, или ÐаÑкаднÑе ÑаблиÑÑ ÑÑилей, а Ñакже. CSS позволÑÐµÑ Ð·Ð°Ð´Ð°ÑÑ Ð³Ð¾Ñаздо болÑÑе именно ÑÑÑеÑика СеÑи ÑÑÑаниÑÑ, в Ñом ÑиÑле планиÑовки и ÑазмеÑов и ÑвеÑа и ÑÑиÑÑÑ Ð¸ многое дÑÑгое. ÐапÑимеÑ, давайÑе ÑоздаваÑÑ Ð²ÐµÐ±-ÑÑÑаниÑÑ Ð·Ð´ÐµÑÑ Ð½Ð°Ð·ÑваеÑÑÑ css0, ÑÑо пÑедÑÑавлÑÐµÑ Ñобой ÐомаÑнÑÑ ÑÑÑаниÑа длÑ, Ñкажем, Ðжона ÐаÑваÑда.
Ðа ÑÑой ÑÑÑаниÑе Ð¼Ñ Ð±Ñдем имеÑÑ Ðжон ÐаÑваÑда имÑ, под коÑоÑÑм бÑÐ´ÐµÑ Ñ
оÑоÑий ÑообÑение Ð´Ð»Ñ ÑвоиÑ
поÑеÑиÑелей, под коÑоÑÑй бÑÐ´ÐµÑ Ð¿Ð¾Ð´Ð²Ð°Ð», Ñ Ð³Ð¾Ð²Ð¾ÑÑÑ, некоÑоÑÑе ÑÐ²ÐµÐ´ÐµÐ½Ð¸Ñ Ð¾Ð± авÑоÑÑкиÑ
пÑаваÑ
. ЧÑÐ¾Ð±Ñ ÑделаÑÑ ÑÑо, давайÑе опÑеделим ÑÑи подÑÐ°Ð·Ð´ÐµÐ»ÐµÐ½Ð¸Ñ Ð´Ð»Ñ ÑÑÑаниÑÑ Ñ Ð¿Ð¾Ð¼Ð¾ÑÑÑ Ñега назÑваеÑÑÑ Ð´ÐµÐ». ÐÑкÑÑÑÑ ÐºÑонÑÑейн дел, Ðжон ÐаÑваÑд, недалеко ÐÑонÑÑейн дел, еÑе один оÑкÑÑÑÑй кÑонÑÑейн дел, и ÑепеÑÑ Ð¼Ñ Ð±Ñдем ÑказаÑÑ ÑÑо-Ñо как, добÑо пожаловаÑÑ Ð½Ð° Ð¼Ð¾Ñ ÑÑÑаниÑкÑ! РдавайÑе закÑоем ÑÑÑ DIV, а Ñакже.
Ð ÑепеÑÑ ÑÑеÑий и поÑледний дел, авÑоÑÑкое пÑаво. ÐÑоÑÑо бÑÑÑ ÑанÑазии, позволÑÑе мне иÑполÑзоваÑÑ ÑейÑÐ°Ñ Ð² HTML лиÑо, Ñимвол, коÑоÑÑй пÑедÑÑавлÑÐµÑ Ñимвол, коÑоÑÑй Ð²Ñ Ð½Ðµ могли инаÑе пеÑаÑаÑÑ Ð½Ð° клавиаÑÑÑе. Ð ÑаÑÑноÑÑи, Ñ ÑобиÑаÑÑÑ ÑделаÑÑ Ð°Ð¼Ð¿ÐµÑÑанд, ÑÑнÑ, 169, ÑоÑка Ñ Ð·Ð°Ð¿ÑÑой. ÐказÑваеÑÑÑ, ÑÑо ÑÑо ÑиÑÑовой код Ð´Ð»Ñ Ñимвола авÑоÑÑкого пÑава. Тогда давайÑе ÑÑоÑним Ðжон ÐаÑваÑд здеÑÑ Ð² нижней ÑаÑÑи. ÐакÑоем DIV и ÑоÑ
ÑаниÑе Ñайл.
ТепеÑÑ, ÑÑо же ÑÑо за дел Ñег? Ðел Ñег пÑоÑÑо опÑеделÑÐµÑ Ð´ÐµÐ»ÐµÐ½Ð¸Ðµ ÑÑÑаниÑÑ, коÑоÑÑй ÑвлÑеÑÑÑ Ð¿Ð¾ ÑÑÑеÑÑÐ²Ñ Ð¿ÑÑмоÑголÑÐ½Ð°Ñ Ð¾Ð±Ð»Ð°ÑÑÑ. Так ÑÑо в ÑÑÐ¾Ñ Ð¼Ð¾Ð¼ÐµÐ½Ñ Ð²Ñемени, Ñ Ð¼ÐµÐ½Ñ ÐµÑÑÑ ÑÑи пÑÑмоÑголÑнÑе облаÑÑи, один на веÑÑине Ð¾Ñ Ð´ÑÑгого. Так ÑÑо на даннÑй ÑÑÑÐµÐºÑ Ð¿Ð¾ÑÑи как Ñ
оÑÑ Ñ Ð´Ð¾Ð»Ð¶ÐµÐ½ бÑл ÑÑи абзаÑа. Ðо Ð¼Ñ Ð½Ðµ Ñвидим в Ñой же ÑÑепени пÑÐ¾Ð±ÐµÐ»Ñ Ð¼ÐµÐ¶Ð´Ñ Ð½Ð¸Ð¼Ð¸.
ÐавайÑе ÑоÑ
ÑаниÑÑ ÑÑÐ¾Ñ Ñайл, измениÑÑ ÐµÐ³Ð¾ ÑазÑеÑениÑ, и взглÑнÑÑÑ Ð½Ð° Ð¼Ð¾Ð¼ÐµÐ½Ñ Ð² Chrome. Chmod + R CSS0.html. ÐавайÑе ÑепеÑÑ Ð¾ÑкÑÑÑÑ Chrome и Ð²Ð¸Ð·Ð¸Ñ http://localhost.CSS0.html. Ð Ñамом деле, Ð²Ð¾Ñ Ð´Ð¾Ð¼Ð°ÑнÑÑ ÑÑÑаниÑа Ðжона ÐаÑваÑда. ÐавайÑе ÑепеÑÑ ÑÑилизоваÑÑ ÐµÐ³Ð¾ немного болÑÑе Ðменно Ñ Ð¿Ð¾Ð¼Ð¾ÑÑÑ Ð½ÐµÐºÐ¾ÑоÑÑÑ
CSS.
ÐеÑнÑÑÑÑÑ Ð² Gedit, давайÑе войдем в ÑÑÐ¾Ñ ÐеÑвÑй дел Ñеги и добавиÑÑ ÑÑÐ¸Ð»Ñ Ð°ÑÑибÑÑов ÑÑоÑнив, ÑÑо Ñ Ñ
оÑел Ð±Ñ ÑÐ°Ð·Ð¼ÐµÑ ÑÑиÑÑа, Ñкажем, 36 пикÑелей, или пикÑ. Ð Ñ Ñ
оÑел Ð±Ñ Ð²ÐµÑ ÑÑого ÑÑиÑÑа бÑÑÑ ÑмелÑм, а не по ÑмолÑаниÑ, коÑоÑÑй ÑвлÑеÑÑÑ Ð½Ð¾ÑмалÑнÑм. ÐÐ»Ñ Ð²ÑоÑого DIV, давайÑе ÑÑоÑним дÑÑгой аÑÑибÑÑ ÑÑилÑ, коÑоÑÑй Ð¸Ð¼ÐµÐµÑ Ð Ð°Ð·Ð¼ÐµÑ ÑÑиÑÑа 24 пикÑелей, Ñак ÑÑо немного менÑÑе. ÐакÑÑÑÑ ÐºÐ¾ÑиÑовки поÑле запÑÑой.
ÐаконеÑ, в ÑÑом ÑÑеÑÑем DIV, давайÑе Ñделаем ÑÑÐ¸Ð»Ñ Ñавна ÑÐ°Ð·Ð¼ÐµÑ ÑиÑаÑÑ, ÑÑиÑÑ, и Ñкажем 12 пикÑелей на ÑÑÐ¾Ñ Ñаз. ÐакÑÑÑÑ ÑиÑаÑа поÑле запÑÑой. ÐбÑаÑиÑе внимание, Ñо, ÑÑо Ñ, кажеÑÑÑ, Ñказано немного ÑÑилизаÑии Ð´Ð»Ñ ÐºÐ°Ð¶Ð´Ñй из ÑÑиÑ
ÑÑеÑ
DIVs Ñ Ð¸ÑполÑзованием, ÐказÑваеÑÑÑ, CSS. Ðа Ñамом деле, ÑинÑакÑиÑ, ÑÑо Ð²Ñ Ð²Ð¸Ð´Ð¸Ñе в Ð¼ÐµÐ¶Ð´Ñ ÑÑими двойнÑе кавÑÑки ÑвлÑеÑÑÑ CSS, ÑпеÑиалÑно CSS ÑвойÑÑва Ñо знаÑениÑми. Рпо ÑÑой пеÑвого Ñега, где Ñ Ð¸Ð¼ÐµÐ» две Ñакие ÑвойÑÑва, ÑÐ°Ð·Ð¼ÐµÑ ÑÑиÑÑа и Ð²ÐµÑ ÑÑиÑÑа, Ñ Ð¿ÑоÑÑо оÑделена иÑ
ÑоÑкой Ñ Ð·Ð°Ð¿ÑÑой.
ТепеÑÑ, пÑоÑÑо Ñади ÑÑилÑ, Ñ Ñакже вклÑÑÐµÐ½Ñ Ð¢Ð¾Ñка Ñ Ð·Ð°Ð¿ÑÑой в ÐºÐ¾Ð½ÐµÑ ÐºÐ°Ð¶Ð´Ð¾Ð¹ ÑÑÑоки. Ðо они не обÑзаÑелÑно, оÑобенно когда Ñ Ð²Ð°Ñ ÐµÑÑÑ ÑолÑко один ÑвойÑÑво, опÑеделÑемое. ÐавайÑе ÑепеÑÑ ÑоÑ
ÑаниÑе Ñайл и пеÑезагÑÑзиÑе в Chrome, и поÑмоÑÑеÑÑ, ÑÑо ÑиÑÑÑй ÑÑÑекÑ. ÐеÑнÑÑÑÑÑ Ð² Chrome здеÑÑ, давайÑе нажмиÑе ÐбновиÑÑ.
ТепеÑÑ Ñ Ð½Ð°Ñ ÐµÑÑÑ Ð½ÐµÐ¼Ð½Ð¾Ð³Ð¾ более инÑеÑеÑнÑй ÐомаÑнÑÑ ÑÑÑаниÑа Ð´Ð»Ñ Ðоанна ÐаÑваÑд, в ÑезÑлÑÑаÑе Ñего пеÑÐ²Ð°Ñ Ð»Ð¸Ð½Ð¸Ñ Ñ ÐµÐ³Ð¾ имÑ, коÑоÑое наÑ
одиÑÑÑ Ð²Ð½ÑÑÑи, ÑÑо ÐеÑвÑй дел, ÑоÑÑавлÑÐµÑ 36 пикÑелей в вÑÑоÑÑ, а Ñакже полÑжиÑнÑй, пÑиÑем вÑоÑÐ°Ñ ÑÑÑока, коÑоÑÑй в ÑÑом вÑоÑом DIV, 24 пикÑелей в вÑÑоÑÑ, но не жиÑнÑм ÑÑиÑÑом. РпÑи ÑÑом ÑÑеÑÑÑ ÑÑÑока в ÑÑом ÑÑеÑÑ Ð´ÐµÐ» ÑоÑÑавлÑÐµÑ 12 пикÑелей в вÑÑоÑÑ, а Ñакже не жиÑнÑм ÑÑиÑÑом. Ðо пÑедположим, ÑÑо ÑепеÑÑ Ñ Ñ
оÑел Ð±Ñ Ð¿ÐµÑейÑи веÑÑ ÑÑÐ¾Ñ ÑекÑÑ Ð½Ð°Ð´ Ñаким обÑазом, ÑÑо она по ÑенÑÑÑ.
Я мог вÑÑовнÑÑÑ ÐºÐ°Ð¶Ð´Ñй из лиÑноÑÑи Ð´Ð¸Ð²Ñ ÐºÐ°Ðº по ÑенÑÑÑ. Ðо легÑе, Ñ Ð¼Ð¾Ð³ обеÑнÑÑÑ ÑеÑ
, ÑÑи Ð´Ð¸Ð²Ñ Ð²Ð½ÑÑÑи ÑеÑвеÑÑого DIV, ÑодиÑÐµÐ»Ñ Ð´ÐµÐ», Ñак ÑказаÑÑ, и ÑкажиÑе ÑÑо, ÑÑо дел и вÑе его поÑомки Ð´Ð¾Ð»Ð¶Ð½Ñ Ð±ÑÑÑ Ð¢ÐµÐºÑÑ Ð²ÑÑавниваеÑÑÑ ÑенÑÑ? ÐавайÑе взглÑнем.
ÐнÑÑÑи Gedit, давайÑе веÑнемÑÑ Ðº Ð¼Ð¾ÐµÐ¼Ñ Ñело и добавиÑÑ Ð½Ð¾Ð²Ñй DIV навеÑÑ
Ñ Ñ Ð´ÐµÐ», ÑÑÐ¸Ð»Ñ Ñавна ÑиÑаÑой ÐºÐ¾Ð½ÐµÑ ÑиÑаÑÑ Ð¢ÐµÐºÑÑ Ð¿Ð¾ ÑенÑÑÑ, близко ÑиÑиÑÑÑ Ð¿Ð¾Ñле запÑÑой. Ð ÑепеÑÑ, давайÑе идÑи впеÑед и оÑÑÑÑп вÑе из ÑеÑ
линий, коÑоÑÑе Ð¼Ñ Ð²Ð²ÐµÐ»Ð¸ ÑанÑÑе. Рниже ÑÑой ÑÑеÑÑей DIV, давайÑе закÑÑÑÑ ÑÑÑ Ð½Ð¾Ð²ÑÑ DIV.
ÐÑÑгими Ñловами, Ñак как ÑÑи ÑÑи оÑигиналÑнÑе Ð´Ð¸Ð²Ñ ÑепеÑÑ Ð´ÐµÑи, Ñак говоÑиÑÑ, нового ÑодиÑелÑÑкого DIV и Ñ Ð¼ÐµÐ½Ñ ÐµÑÑÑ Ñказано, ÑÑо Ñ Ñ
оÑел бÑ, ÑÑÐ¾Ð±Ñ Ð²ÑÑовнÑÑÑ Ð¢ÐµÐºÑÑ ÑÑого ÑодиÑелÑÑкого ÑÐÑ Ð² ÑенÑÑе ÑÑÑаниÑÑ, ÑÑо имÑÑеÑÑво бÑÐ´ÐµÑ Ð½Ð°ÑледÑÑÑÑÑ Ð²Ñе из ÑÑиÑ
деÑей. Ð Ñамом деле, давайÑе ÑоÑ
ÑаниÑе Ñайл и взглÑнÑÑÑ Ð² бÑаÑзеÑе. ÐавайÑе пеÑезагÑÑзиÑÑ Ð² Chrome. Ð Ñ Ð½Ð°Ñ ÑÑо еÑÑÑ, еÑе пÑиÑÑнее ÐомаÑнÑÑ ÑÑÑаниÑа Ð´Ð»Ñ Ðжона ÐаÑваÑда.