روز بخیر، خوانندگان و مشترکین وفادار. انتشار فعلی به تجزیه و تحلیل دقیقموضوع: "طرح بندی صفحه CSS پاسخگو در جهت بلوک". در این مقاله، من به شما خواهم گفت که چیدمان بلوک به چه معناست، مزایای آن چیست و از چه ابزارهایی برای این کار استفاده می شود.

علاوه بر این، من دانشی را در مورد چند رویکرد ساده برای پیاده سازی سازگاری و تقویت همه توصیفات به اشتراک خواهم گذاشت. نمونه های عینی. خوب، بیایید شروع به یادگیری کنیم!

شلاق و نان زنجبیلی

طرح بندی بلوک صفحات وب روشی برای علامت گذاری صفحات در بلوک ها (لایه ها) است که با استفاده از یک برچسب خاص ایجاد می شوند. < div>.

در ابتدا، توسعه دهندگان از یک طرح بندی جدولی استفاده کردند، اما پس از ظاهر شدن نمای توصیف شده، در پس زمینه محو شد. چرا این اتفاق افتاد؟ و همه اینها به این دلیل است که چیدمان صفحات در لایه ها دارای لیست نسبتاً بزرگی از مزایا و فقط چند معایب است. بیایید نگاهی دقیق تر به هر یک از آنها بیندازیم.

شیرینی زنجبیلی خوشمزه

کاهش حجم کدهنگام استفاده از جداول به عنوان قرار دادن ساختار یافته محتوا و کنترل های سایت، سند html حاوی تعداد زیادی تگ تو در تو بود که حتی توسعه دهندگان با تجربه را گیج می کرد.

بلوک ها این مشکل را برطرف می کنند. تعداد کمی div در کد وجود دارد که هر کدام با قوانین سبک از طریق کلاس تعیین شده تنظیم می شوند. مثلا:

…

…

…

مدیریت اشیاء انعطاف پذیربا توجه به اینکه هر لایه مسئولیت دارد کلاس خاص، امکان بازتعریف سریع و بدون آسیب بلوک های دیگر فراهم شد ظاهرانتخاب شده، آن را در صفحه وب حرکت دهید، یا ظاهر نمای را تغییر دهید. علاوه بر این، طرح بندی بلوک به شما امکان می دهد حل کنید کارهای چالش برانگیزبا قرار دادن غیر استاندارد لایه ها.

یک مزیت قابل توجه برایسئو.در نمایش های جدولی، تمام محتویات وب سرویس در سلول ها توزیع می شد که کار را بسیار پیچیده می کرد. ربات های جستجوگر. با استفاده از همین طرح بلوک این مشکلنیز تصمیم گرفت.

تمام محتوای سایت بر اساس معنی به بلوک هایی تقسیم می شود که با استفاده از کلاس ها امضا می شوند. بنابراین برنامه های جستجوراحت پیدا میشه اطلاعات لازمو نمایه سازی و این بدان معنی است که سایت هنگام صدور نتایج در بالا می رود عبارات جستجو.

توانایی ایجاد طراحی تطبیقیصفحات وب.برای کسانی که هنوز نمی دانند طراحی واکنش گرا چیست، به شما توصیه می کنم مقالات مربوطه را در وبلاگ من در مورد این فناوری بخوانید. در این میان، فقط می گویم که سازگاری به سرویس ها اجازه می دهد تا روی صفحه نمایش ها با هر رزولوشن، چه دسکتاپ و چه گوشی هوشمند، یکسان و جذاب به نظر برسند.

به لطف چیدمان در لایه ها است که این امکان فراهم شده است. البته، نیاز به دانش اضافی دارد، اما ارزشش را دارد.

مانع یا مشکل سرراه

ظهور مشکلات در توسعه.در مقایسه با طرح بندی جدولی، مطمئنا ساده تر است. کافی است چند تگ اصلی که جداول با آنها ساخته می شوند را بدانید و به سادگی سلول های ایجاد شده را با اطلاعات پر کنید.

در طرح بندی بلوک، همه چیز می تواند کمی پیچیده تر به نظر برسد. به خصوص برای یک مبتدی. زیرا نه تنها به کدهای html بلکه باید بیشتر خصوصیات css را نیز بشناسید. با این حال، مشکلات تنها در ابتدا هنگام مطالعه فن آوری ها بوجود می آیند، اما پس از آن زندگی مانند یک افسانه به نظر می رسد.

جداسازی قطعات با سازگاری بین مرورگرها.از آنجایی که این رویکرد کمی دیرتر از روش جدولی ظاهر شد، همه موقعیت ها با عملکرد آن استاندارد نیستند. و بنابراین، گاهی اوقات در مرورگرهای مختلف، نمایش سایت شما ممکن است کمی متفاوت به نظر برسد. در برخی موارد، برای اصلاح کاستی ها باید منحرف شوید.

تکنیک های ساده برای ایجاد پاسخگویی

خوب، حالا بیایید مستقیماً به تحلیل چندین مکانیسم ساده برای ایجاد سازگاری سایت برویم. برای این کار یک صفحه آرایی ساده ایجاد می کنیم.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

وب سایت SuperAuto گالری عکس ویدئو مخاطب تسلا تمامی حقوق محفوظ است!

همانطور که می بینید ظاهر منبع اینترنتی ایجاد شده به درستی نمایش داده می شود تا اندازه صفحه نمایش خیلی کوچک شود. بنابراین ما تکمیل می کنیم ویژگی های cssبرخی از پارامترها

برای شروع با بلوک های دارای کلاس . سرتیتر, . ظرفو . پاورقیاضافه کردن ملک حداقل عرض: 355 پیکسل. اکنون صفحه محتوای شما تنها به کوچک می شود اندازه مشخص شده، و سپس یک اسکرول ظاهر می شود.

AT این مثالمن نیازی به پیاده سازی پاسخگویی برای تصاویر نداشتم. با این حال، با نوشتن خطوط زیر در استایل ها می توان به اندازه خودکار تصویر دست یافت.

ابتدا بیایید تعریف کنیم که نشانه گذاری چیست؟ همانطور که این اصطلاح نشان می دهد، نشانه گذاری- این قرار دادن برچسب ها است، در مورد ما، در کد html سند، یعنی. صفحات وب. نشانگرها در اینجا هستند برچسب ها، که به شما امکان می دهد مرزهای عمل نشانه گذاری را مشخص کنید یا یک عنصر سند html ایجاد کنید. هنوز مشخص نیست؟ سپس بخوانید و همه چیز سر جای خود قرار می گیرد.

اصول نشانه گذاری Htmal یا تگ چیست

تگ ساختاری است که با علامت کمتر از (<) и заканчивающуюся знаком больше (>) . بیشتر تگ ها از یک تگ باز و بسته تشکیل شده اند. تفاوت آنها در این است که در برچسب باز کردنشما می توانید (در صورت لزوم) تعدادی از ویژگی های اضافی آن را با استفاده از به اصطلاح مشخص کنید ویژگی های، و در ابتدای نام برچسب بسته شدنکاراکتر selsh (/) مشخص شده است، به عنوان مثال:

متن پاراگراف، تراز راست.

.

AT این موردتگ بلوک p یک پاراگراف ایجاد می کند و صفت alignمحتوای پاراگراف را در لبه راست (راست) تراز کنید.

لازم به ذکر است که در html تگ ها دو نوع بلوکی و درون خطی هستند. برچسب ها را مسدود کنیدیک عنصر در سطح بلوک، اغلب با padding و زیر ایجاد کنید موارد زیردر حال حاضر می روند" با خط جدید ». برچسب های درون خطیبرای علامت گذاری یک قطعه کد و ایجاد شکستن خط در نظر گرفته شده است.

همانطور که می گویند: برای هر قاعده ای استثنا وجود دارد - این در مورد برچسب ها نیز صادق است. برچسب هایی وجود دارند که برچسب بسته شدن ندارند و برای ایجاد برچسب ها و عناصر یک سند html در نظر گرفته شده اند، به عنوان مثال:

در این حالت تگ رشته img عنصری را به شکل تصویر در صفحه وب درج می کند که آدرس آن در ویژگی src نوشته شده است. معنی ویژگی altهست یک متن جایگزینکه در صورت در دسترس نبودن تصویر نمایش داده می شود و مشخصه border ضخامت کادر اطراف تصویر را تعیین می کند.

برای سهولت در به خاطر سپردن همه موارد بالا، در اینجا یک تقلب کوچک و بصری وجود دارد که می توانید برای یادگیری HTML از آن استفاده کنید:

ارجاع سریع به تگ های html

و بنابراین، ما قبلاً با دو برچسب ملاقات کرده ایم، بنابراین آنها را حذف می کنم. در زیر تعدادی از تگ های نشانه گذاری سند html و برخی از ویژگی های آنها را ارائه خواهم داد. برای شروع، این بیش از حد کافی خواهد بود، اما اگر به لیست کاملی از برچسب های HTML و ویژگی های آنها علاقه مند هستید، توصیه می کنم به سایت htmlbook.ru مراجعه کنید و آن را به عنوان کامل ترین و راحت ترین به بوکمارک های خود اضافه کنید. مرجع در HTML و CSS. ادامه بدیم؟

چگونه لینک بسازیم؟برای انجام این کار، باید از تگ رشته A استفاده کنید، که متنی که در آن وجود دارد را به عنوان علامت گذاری می کند ارتباط دادن - عنصر فعالصفحه وب، با کلیک بر روی آن، کاربر می تواند به صفحه وب دیگری که آدرس آن در ویژگی href مشخص شده است، برود.

چگونه متن را پررنگ کنیم؟برای انجام این کار، باید از تگ رشته B استفاده کنید، که متنی را که در آن قرار دارد، تنظیم می کند سبک جسورانهفونت

چگونه متن را ایتالیک کنیم؟برای این کار باید از تگ I inline استفاده کنید که متنی که در آن قرار دارد را به حالت ایتالیک تنظیم می کند.

چگونه زیر متن خط بکشیم؟برای این کار باید از تگ رشته U استفاده کنید که یک زیرخط به متن موجود اضافه می کند.

چگونه متن را حذف کنیم؟برای انجام این کار، باید از تگ رشته S استفاده کنید که متن را به صورت خط خطی نمایش می دهد.

چگونه کد را در متن برجسته کنیم؟برای انجام این کار، باید از تگ رشته CODE استفاده کنید، که معمولاً توسط مرورگر با فونت monospaced ارائه می شود، مانند پیک جدید.

چگونه کد را در متن قالب بندی کنیم؟برای این کار باید از بلوک استفاده کنید تگ PRE، که بلوک را تعریف می کند کد برنامه، معمولاً با فونت تک فاصله توسط مرورگر ارائه می شود. برخلاف تگ رشته CODE، تگ PRE فاصله ها و خطوط شکسته را حفظ می کند.

چگونه متن را بزرگتر کنیم؟برای این کار باید از تگ رشته BIG استفاده کنید که اندازه فونت را نسبت به متن معمولی یک برابر افزایش می دهد.

چگونه متن را کوچکتر کنیم؟برای این کار باید از تگ رشته SMALL استفاده کنید که اندازه فونت را نسبت به متن معمولی یک برابر کاهش می دهد.

چگونه فونت، رنگ و اندازه فونت را در متن تنظیم کنیم؟برای این کار باید از تگ رشته FONT استفاده کنید. ویژگی چهرهدر اینجا نوع قلم (نام) فونت، رنگ - رنگ فونت و اندازه - اندازه آن در واحدهای دلخواه (از -7 تا 7) تنظیم می شود.

چگونه یک هدر بسازیم؟برای این کار باید از تگ های بلوک H که عنوان ها را تعریف می کنند استفاده کنید. سطوح مختلف، از 1 (بزرگترین)تا 6 (کوچکترین)، که به شما امکان می دهد ساختار اطلاعات منتشر شده در صفحه وب را تنظیم کنید. عنوان ها از نظر اندازه فونت و تورفتگی با یکدیگر متفاوت هستند و همچنین پررنگ هستند.

چگونه یک فونت زیرنویس بسازیم؟برای این کار باید از تگ رشته SUB استفاده کنید که فونت را به صورت رندر می کند زیرنویس، یعنی متن زیر خط پایه بقیه کاراکترهای خط قرار می گیرد و اندازه آن کاهش می یابد.

چگونه یک فونت فوق نویس بسازیم؟برای انجام این کار، باید از تگ رشته SUP استفاده کنید، که فونت را به عنوان ابر اسکریپت، یعنی. متن بالای خط پایه بقیه کاراکترهای خط قرار می گیرد و اندازه آن کاهش می یابد.

چگونه یک نقل قول را در متن وارد کنیم؟برای این شما باید استفاده کنید برچسب درون خطی Q ، که برای برجسته کردن نقل قول ها در متن استفاده می شود که به طور خودکار توسط مرورگر در نقل قول نمایش داده می شود.

چگونه در متن یک نقل قول ایجاد کنیم؟برای انجام این کار، باید از تگ بلوک BLOCKQUOTE استفاده کنید، که برای برجسته کردن نقل قول های طولانی در سند html. به طور معمول، چنین متنی با بالشتک 40 پیکسلی در سمت چپ و راست و همچنین صفحه در بالا و پایین نمایش داده می شود.

چگونه یک خط در متن ایجاد کنیم؟برای این کار باید از تگ بلوک BR استفاده کنید که خط جدید را در محلی که این تگ قرار دارد تنظیم می کند. برخلاف تگ پاراگراف p، استفاده از تگ br یک تورفتگی خالی قبل از خط اضافه نمی کند.

چگونه در html یک لایه بسازیم؟برای این کار باید از بلوک استفاده کنید تگ DIV، که یک لایه بدون بالشتک ایجاد می کند.

چگونه یک جداکننده در متن ایجاد کنیم؟برای این کار باید از تگ بلوک HR استفاده کنید که جداکننده را می کشد خط افقی. ویژگی رنگرنگ خط را تنظیم می کند، اندازه اندازه را تعیین می کند و noshade جلوه سه بعدی را خاموش می کند.

چگونه یک لیست تهیه کنیم؟دو نوع لیست اصلی در html وجود دارد: شماره گذاری شده ( OL)و علامت گذاری شد ( UL). در این مورد، داده شده است کد html لیست گلوله ای، داده شده برچسب بلوک UL. به طور پیش فرض، به عنوان یک دایره نشانگر (دایره پر شده)، که در ابتدای خط اول آیتم لیست ظاهر می شود، توسط برچسب داده شده است L.I.

البته در مقاله خود فقط اصل مطلب را آورده ام تگ های html، که ممکن است هنگام چیدمان یک صفحه وب به آن نیاز داشته باشید. در بیشتر موارد، برای نشانه گذاری HTML، این بیش از حد کافی است. تنها چیزی که من حذف کردم، اما مطمئناً هنگام علامت گذاری صفحات وب مهم است، کار با جداول است. آنها نیاز به مطالعه جداگانه دارند، زیرا. تفاوت های ظریف بسیار زیادی وجود دارد و بدون آن مقاله بسیار بزرگ بود. این همه برای من است. با تشکر از توجه شما. موفق باشید!

ترجمه آن ویژه خوانندگان حبر در ادامه تقدیم می گردد.

با وجود تمام ویژگی های شگفت انگیز CSS، آنها برای پیاده سازی اصول اساسی صفحه آرایی کافی نیستند. با این حال، ویژگی های اضافیبرای ایجاد بیشتر صفحات پویادر حال حاضر شروع به ظاهر شدن کرده است.

پس از سال ها وعده، CSS3 بالاخره موفق شد یک ظاهر طراحی کند. مجموعه‌ای کاملاً جدید از ابزارها را به زرادخانه ما اضافه کرده است و گوشه‌های گرد، شیب‌ها، شفافیت، تبدیل عناصر، انیمیشن‌ها و موارد دیگر را برای ما فراهم می‌کند. چه چیز دیگری می تواند چشم ما را خوشحال کند؟

مشکل بعدی CSS نشانه گذاری است. تا به حال، ما این کار را با استفاده از جعبه‌های شناور، موقعیت‌های نسبی و ترفندهای لایه‌بندی منفی انجام داده‌ایم که دستیابی به همه آنها به روشی که شبیه یک طرح‌بندی استاندارد دو یا سه ستونی به نظر می‌رسد، دشوار بوده است.

W3C و سازندگان مرورگر از این مسائل آگاه هستند و روی تعدادی راه حل کار می کنند. رهبر در میان آنها (در کمال تعجب) اینترنت اکسپلورر است. به نظر می رسد IE10 منادی خواهد بود عصر جدیدنشانه گذاری CSS که به شما امکان می دهد با استفاده از ویژگی هایی که قبلاً دست نیافتنی بودند، سایت های عالی، پویا و جذاب ایجاد کنید.

نویسنده در این مقاله توجه دارد روش های مختلفنشانه‌گذاری‌هایی که می‌خواهیم در مراحل خاصی از توسعه استفاده کنیم، از قبلاً اجرا شده تا موارد کاملاً نظری. ممکن است در آینده نتوانیم از همه آنها استفاده کنیم (حداقل نه به شکل فعلی)، اما برای درک آینده نشانه گذاری CSS ارزش نگاهی به این روش ها را دارد.

بلندگوها

توزیع محتوا در چندین ستون یک عنصر اساسی چاپ است و ماژول چند ستونی CSS همین قابلیت را برای وب فراهم می کند. دو راه برای ایجاد ستون وجود دارد که هر کدام از آنها استفاده می کند خواص مختلف(عنصر والد). در حالت اول، تعداد ستون ها به طور مستقیم مشخص می شود، که در میان آنها لازم است متن توزیع شود. به عنوان مثال، این کد سه ستون با عرض مساوی ایجاد می کند که به عرض عنصر والد اضافه می شود:

Div (تعداد ستون: 3;)
در روش دوم، عرض ستون ها ثابت است، آنقدر تکرار می شوند تا عرض عنصر والد را پر کنند. در این مثال، عرض ستون روی 140 پیکسل تنظیم شده است، به این معنی که پنج ستون باید در یک کادر پهن 800 پیکسل ظاهر شوند:

Div (عرض ستون: 140 پیکسل؛ )
به طور پیش فرض، فاصله بین ستون ها 1em است، اما با استفاده از ویژگی می توان آن را تغییر داد شکاف ستون. همچنین می توانید بین ستون ها قرار دهید خطوط تقسیماز طريق ستون-قاعده، از نظر نحو شبیه به اموال مرزی. کد زیر ایجاد خواهد شد خط نقطه چینعرض 2 پیکسل، و همچنین بالشتک بین ستون ها را روی 28 پیکسل قرار دهید (جداکننده در وسط قرار خواهد گرفت):

Div ( شکاف ستون: 28 پیکسل؛ قانون ستون: 2 پیکسل نقطه‌دار #cccc؛ )
اگر می خواهید نتیجه را ببینید، به مثال ستون های CSS نگاهی بیندازید. برای دیدن سه ستون باید از فایرفاکس، کروم، سافاری، اپرا 11.1 یا IE10 استفاده کنید. (IE10PP). یا به اسکرین شات زیر نگاهی بیندازید.

با ستون ها می توانید کارهای مختلفی انجام دهید. مثال عملیاستفاده از آنها در ویکی پدیا، در بخش یادداشت ها، جایی که از آن استفاده می شود، است تعداد ستون. فایرفاکس چند ستون را با پیشوند پیاده سازی می کند -moz-، در کروم و پیشوند سافاری -وب کیت-، در Opera 11.1 و IE10PP بدون پیشوند.

جدول

سیستم چیدمان جدول کاملاً جدید در IE10PP است. قبل از استفاده از آن، باید در مورد ردیف ها و ستون ها تصمیم بگیرید. برای ستون ها، می توانید از مقادیر طول استفاده کنید، کلمه کلیدی خودکارو یک واحد اندازه گیری جدید fr(کوتاه برای کسر، کمیت نسبی). به این مثال نگاه کنید:

Div (نمایشگر: شبکه؛ ستون‌های شبکه: 1fr 3fr 1fr؛ ردیف‌های شبکه: 100 پیکسل خودکار 12em؛ )
این کد یک جدول با سه ستون ایجاد می کند که عرض ستون مرکزی سه برابر چپ و راست است، و سه ردیف، که در آن بالا 100 پیکسل، پایین 12 میلی متر و وسط به طور خودکار از نظر ارتفاع گسترش می یابد. بر اساس طول محتوا

حالا که یک جدول داریم، می توانیم محتوا را در آن قرار دهیم. با استفاده از عناصر HTML5، می‌توانید طرح‌بندی صفحه واقعاً بسیار ساده ایجاد کنید:

سرصفحه ( گرید-ستون: 1؛ گرید-ستون-وسعت: 3؛ ردیف-شبکه: 1؛ ) nav ( ستون-شبکه: 1؛ ردیف-شبکه: 2؛ ) مقاله ( گرید-ستون: 2؛ ردیف-شبکه: 2; ) کنار (گرید-ستون: 3؛ ردیف مشبک: 2؛) پاورقی (شبکه-ستون: 1؛ شبکه-ستون-وسعت: 3؛ ردیف-شبکه: 3؛ )
با نگاه کردن به کد، می توانید ببینید که محتوای صفحه به ترتیب با استفاده از ویژگی ها در ردیف ها و ستون ها توزیع شده است. ردیف شبکهو شبکه-ستون. عنصر مقالهدر ستون دوم ردیف دوم - مرکز جدول 3x3 قرار داده شده است. از ملک نیز استفاده می شود دهانه ستونبرای عناصر سرتیترو پاورقی، که آنها را به هر سه ستون امتداد می دهد (ویژگی دهانه ردیف، که در اینجا استفاده نشده است).

نسخه ی نمایشی نشانه گذاری را می توان در مثال CSS Grid پیدا کرد، اما به IE10 نیاز دارد. اگر نه، فقط به اسکرین شات نگاه کنید.

ویژگی های ذکر شده در بالا به طور کامل در IE10PP پیاده سازی شده اند، بنابراین می توانید همین الان آنها را آزمایش کنید. با این حال، بسیاری از ویژگی ها هنوز اجرا نشده اند.

نمونه

رویکرد دیگری به نمای جدولماژول طرح بندی قالب است. از یک نحو کمی متفاوت استفاده می کند، جایی که ابتدا باید با استفاده از یک کاراکتر تحت اللفظی و ویژگی، موقعیتی را به بلوک ها اختصاص دهید. موقعیت:

سرصفحه ( موقعیت: a; ) nav ( موقعیت: b; ) مقاله ( موقعیت: c; )
هنگامی که یک موقعیت را تعیین می کنیم، می توانیم با استفاده از یک دنباله از کاراکترها نشانه گذاری ایجاد کنیم. هر دنباله معادل یک ردیف است و هر کاراکتر در دنباله یک ستون است. به عنوان مثال، برای ایجاد یک جدول با یک سطر و سه ستون، می توانید از موارد زیر استفاده کنید:

Div (نمایش: "abc"؛ )
با این کار سه مورد با فاصله مساوی در یک ردیف افقی نمایش داده می شود. اما می‌توانید کاراکترها را برای گسترش ستون‌ها تکرار کنید، و می‌توانید از همان کاراکترها در یک موقعیت در ردیف‌های مختلف برای گسترش سطرها استفاده کنید. در مثال زیر، عنصر ناوبریشامل دو خط است و سرتیترو مقالههمپوشانی دو ستون (کد برای وضوح فرمت شده است):

Div (نمایشگر: "baa" "bcc"؛ )
طرح‌بندی الگو هنوز توسط مرورگرها استفاده نمی‌شود، اما در حال حاضر یک اسکریپت پلی‌پری زیبای jQuery وجود دارد که به شما امکان آزمایش را می‌دهد، این همان چیزی است که در مثال در پیوند استفاده شده است. نتیجه مانند مثال نشانه گذاری جدول به نظر می رسد، اما کد کاملاً متفاوت است.

صفحه نمایشی از جاوا اسکریپت استفاده می کند، بنابراین باید برای همه کار کند مرورگرهای مدرن. نشانه گذاری جدولاحتمالاً از نحو الگو نیز پشتیبانی می کند، مانند مثال زیر:

سرصفحه ( سلول شبکه: a; ) مقاله ( سلول شبکه: b; ) div (نمایش: شبکه؛ شبکه-الگو: "a" "b"؛ )
از نظر عملکرد، این کد با ویژگی های طرح بندی قالب یکسان است، اما هنوز پیاده سازی نشده است (و شاید هرگز اجرا نشود).

بلوک های شناور قابل موقعیت

دارایی فعلی شناوربه متن اجازه می دهد تا اطراف یک عنصر به سمت چپ یا راست بپیچد، اما یک ویژگی توسعه یافته در IE10PP به شما این امکان را می دهد که یک عنصر شناور را با قرار دادن آن در هر جایی تقویت کنید، و محتوای مجاور همچنان در اطراف آن بلوک قرار می گیرد. فقط به یک ارزش جدید برای ملک نیاز داشت شناور:

Div ( شناور: موقعیت؛ چپ: 200 پیکسل؛ موقعیت: مطلق؛ بالا: 100 پیکسل؛ عرض: 250 پیکسل؛ )
این کد یک عنصر با عرض 250 پیکسل ایجاد می کند که 200 پیکسل در سمت چپ و 100 پیکسل در بالای شی والد قرار دارد. به‌طور پیش‌فرض، هر محتوای دیگری در والد از همه طرف به دور عنصر قرار داده شده می‌پیچد، اما می‌توان آن را تغییر داد. معانی مختلفخواص نوع بسته بندیبه عنوان مثال، زمانی که متن فقط در اطراف بالا و پایین عنصر قرار می گیرد:

Div (نوع بسته بندی: بالا به پایین؛ )
می توانید با قرار دادن یک عنصر در جدول و اجازه دادن به محتوا در اطراف آن از همه طرف، ویژگی های موقعیت و چیدمان جدول را ترکیب کنید:

Div ( شناور: موقعیت؛ ستون-شبکه: 2؛ ردیف شبکه: 2؛)
اگر IE10PP دارید، پس می توانید. اگر نه، نتیجه در تصویر زیر نشان داده شده است، آن را نمی توان با قابلیت های فعلی CSS پیاده سازی کرد.

محرومیت ها

ویژگی شناوراجازه می دهد فقط عناصر مستطیل شکل شناور شوند، اما مستندات برای شناور شدن بر روی شکل فراهم می کند. این ایده پس از استفاده از ماژول CSS Exclusions به وجود آمد. دو ویژگی کلیدی دارد. اولین، شکل بسته بندی، به شما امکان می دهد بیضی ها، مستطیل ها یا چند ضلعی هایی ایجاد کنید که شکل بلوکی را که محتوا دور آن می پیچد را مشخص می کند، به عنوان مثال:

Div ( شکل بسته بندی: دایره (50٪، 50٪، 100px)؛ )
این کد دایره ای با شعاع 100 پیکسل ایجاد می کند که در مرکز قرار می گیرد عنصر والد. می توانید از تابع استفاده کنید چند ضلعی()برای ایجاد هر شکلی با تعیین جفت مختصات جدا شده با یک فاصله، به عنوان مثال برای یک مثلث:

Div ( شکل بسته: چند ضلعی (0,100px 100px,100px 50px,0)؛
هنگامی که یک شکل مشخص وجود دارد، محتوای درونی را می توان با استفاده از خاصیت دوم دور آن شکل قرار داد حالت بسته بندی شکل، مثل اینجا:

Div ( شکل بسته بندی: دایره (50٪، 50٪، 100 پیکسل)؛ حالت بسته بندی: اطراف؛ )
می‌توانید با دانلود نمونه اولیه برای Mac یا Windows از Adobe Lab، Exclusions CSS را در عمل مشاهده کنید. دارای اسناد کامل و چند دموی بسیار جالب است، مانند این:

مناطق

پیشنهاد بعدی Adobe، CSS Regions است که نحوه توزیع محتوا در یک مجموعه را تعریف می کند. عناصر مختلف. این کار ابتدا با تعریف عنصری انجام می شود که با استفاده از یک شناسه رشته منحصر به فرد در ویژگی، محتوا را در اختیار دیگران قرار می دهد جریانو سپس با استفاده از تابع، مناطقی را انتخاب کنید که با این محتوا پر شود از جانب()خواص محتوا:

محتوا ( جریان: foo; ) .target1, .target2 ( محتوا: from(foo; )
در اینجا محتوا از عنصر گرفته می شود .محتوا، و سپس ابتدا روی عنصر توزیع می شود .target1و اگر بلوک برای نمایش محتوا کافی نباشد، در ادامه نمایش داده می شود .target2. محتوا در بلوک ها تکرار نمی شود، در اول شروع می شود و در دوم (در صورت لزوم) ادامه می یابد. برای درک بهتر، کافی است به تصویر زیر نگاه کنید.

به هر حال، هیچ الزامی برای مناطق هدف در مورد مکان آنها در نشانه گذاری وجود ندارد. در صورت لزوم می توان آنها را در طرف مقابل صفحه قرار داد.

مشخصات ناحیه CSS هنوز در مرورگرها پیاده‌سازی نشده است، اما مشابه Exclusions، می‌توانید از نمونه اولیه آزمایشگاه Adobe استفاده کنید و خودتان این عملکرد را امتحان کنید.

نتیجه

هنوز مشخص نیست که کدام یک از ماژول های نشانه گذاری جدید (از FlexBox و Columns) به طور کامل در مرورگرها پیاده سازی خواهد شد. در مورد بلوک‌های شناور و Exclusions، من می‌خواهم به دلیل شباهت عملکردی از آنها عبور کنم (شاید اینطور باشد). نشانه گذاری جدولی ارتباط نزدیکی با نشانه گذاری الگو دارد و مطمئناً می توانید انتظار داشته باشید که در IE10 ظاهر شود. مناطق CSS قبلاً در یکی از شاخه‌های WebKit پیاده‌سازی شده‌اند و احتمالاً به زودی در مرورگرهای WebKit (Safari، Chrome و دیگران) ظاهر می‌شوند.

بنابراین، می توان پیش بینی کرد که با تغییراتی در نحو، هر آنچه در بالا توضیح داده شد در آینده در CSS3 استفاده خواهد شد. اگر این اتفاق بیفتد بسیار خوب است، زیرا در این صورت روش‌های جدید اجازه می‌دهند حداقل هزینهفقط در چند سال وب سایت های بسیار متفکر ایجاد کنید.

برچسب ها:

• css3
• فلکس باکس
• یعنی 10
• html5

افزودن برچسب

توسعه وب سایت برای افرادی که اعصاب ضعیفی دارند کار نیست. علاوه بر دانش، شما نیاز به تفکر خلاق، سازه های کمال گرا و دقت فیلیگرانی هنگام چیدمان صفحه دارید. CSS در این مورد به سادگی ضروری است. و هر وب مستر باید اصول اولیه آن را بداند.

CSS چیست؟

لازم نیست به کسانی که با HTML آشنایی دارند گفته شود که یک زبان نشانه گذاری صفحه است. اما سازندگان آن تصمیم گرفتند برچسب هایی را به آن اضافه کنند که وظیفه ظاهر و طراحی را بر عهده دارند. اما با این رویکرد، کد صفحه بیش از حد حجیم و تقریبا ناخوانا شد. طبیعتا این مسیر به جایی نرسید، بنابراین تصمیم گرفته شد راه حل کامل: HTML مسئول چیدمان صفحه، CSS - برای است طراحی بصری.

مخفف CSS مخفف (Cascading Style Sheet) است. این شامل پارامترهایی است که مسئول طراحی بصری اشیاء در صفحه هستند.

مزایای CSS

شیوه نامه آبشاری به مدیر وب سایت اجازه می دهد تا نه تنها یک منبع زیبا ایجاد کند، بلکه کد را خوانا کند و اندازه آن را به میزان قابل توجهی کاهش دهد. با استفاده از CSS، می توانید پارامترهایی را تنظیم کنید که در نشانه گذاری HTML صفحه امکان پذیر نیست.

با CSS، شما می توانید به معنای واقعی کلمه ظاهر صفحات منابع را تنها با چند کلیک تغییر دهید. این بسیار راحت است، به خصوص اگر سایت چند صفحه ای باشد. تمام تغییرات طراحی در شیوه نامه آبشاری انجام می شود، نه با تغییر پارامترها در هر صفحه از منبع. و تنها به لطف CSS امکان پیاده سازی نشانه گذاری بلوک وجود دارد.

اتصال CSS

صحبت از پایه اصول CSS، اولین قدم این است که یاد بگیرید چگونه یک شیوه نامه آبشاری را در یک فایل HTML قرار دهید. این فرآیند بسیار ساده است. اولین قدم ایجاد یک سند HTML است. برای کسانی که هنوز نمی دانند، در برنامه Notepad ایجاد شده است. سپس با استفاده از تابع "Save As" باید پسوند HTML را مشخص کنید.

استایل شیت cascading دقیقا به همین صورت ایجاد می شود، فقط پسوند css باید به فایل داده شود. سند حاصل باید در همان پوشه ذخیره شود فایل های HTML. فرض کنید که سند شیت style.css نام دارد. برای اتصال آن به یک سند HTML، باید از تگ استفاده کنید ، که وظیفه اتصال را بر عهده دارد فایل های خارجی. بین موارد زیر باید وارد شود:

شاید این یکی از بهترین ها باشد راه های راحتاتصال فایل های خارجی

قانون css

یادگیری نشانه گذاری CSS باید با یادگیری نحو شروع شود. هیچ برچسب، اسکریپت یا تنظیماتی در شیوه نامه آبشاری وجود ندارد. در اینجا فقط یک قانون وجود دارد که باید رعایت شود. این شامل یک انتخابگر و یک بلوک سبک است. فرض کنید موقعیت در شیوه نامه آبشاری این است: بدن (پس زمینه: سیاه؛ رنگ: سفید).

در اینجا بدن انتخاب کننده است که مسئول طراحی بدنه سایت است. background:black و color:white خواص و مقادیر آنها هستند. با نقطه ویرگول نوشته می شوند. این موقعیت پس زمینه سایت را سیاه و متن را سفید می کند.

انتخابگرها

خوب، اجازه دهید با یک مقدمه فشرده برای CSS ادامه دهیم. بدون دانستن انتخابگرها انجام چیدمان صفحه بسیار دشوار خواهد بود. اگر همه چیز با ویژگی ها و مقادیر آنها مشخص باشد، دانش اضافی در مورد انتخابگرها به ایجاد طرح بندی صفحه مورد نظر کمک می کند.

چه چیزی در مورد انتخابگرها باید بدانید؟ ابتدا انواع آنها:

• مشخص کننده.نام عناصر صفحه را می توان به عنوان انتخابگر استفاده کرد. در مواردی که برای مثال لازم است یک پاراگراف از متن را با رنگ متفاوت برجسته کنید، یک شناسه اضافه می شود. توسط پارامتر id تنظیم می شود.

شایان ذکر است که یک شناسه فقط یک بار قابل استفاده است. در این مثال، انتخابگر صورتی نامیده می شود، اگر به شناسه دیگری نیاز دارید، فقط باید نام دیگری (pink2، سبز و غیره) به آن بدهید.

کلاس ها. انتخابگر کلاس زمانی استفاده می شود که چندین شیء باید تنظیم شوند همان پارامترها. به عنوان مثال، برای دو پاراگراف متن، باید رنگ را قرمز تنظیم کنید.

هر تعداد شی با کلاس می تواند وجود داشته باشد.

برای یک شی، می توانید هم کلاس و هم شناسه را مشخص کنید - این منافاتی ندارد نشانه گذاری CSS. اما از آنجایی که شناسه دارای اولویت بالاتری است، پس از سبک آن برای شی استفاده می شود. هنگام علامت گذاری یک صفحه در CSS، این باید در نظر گرفته شود.

شناسه ها و کلاس ها را می توان برای هر شیئی اعمال کرد. و اگر نیاز به تنظیم یک سبک برای متن و تصویر باشد، نمی توانید نام عنصر را همانطور که در مثال بود (p#pink، p.red) مشخص کنید. شما فقط می توانید یک نقطه یا یک شبکه قرار دهید. شما همچنین می توانید انتخابگرها را گروه بندی کنید. به عنوان مثال h1، h2، h3 (رنگ: قرمز؛ فونت شش: 17 پیکسل).

صفحه آرایی

با مطالعه نشانه گذاری صفحات، می توانید متوجه شوید که انواع مختلفی از آن وجود دارد:

• جدولی.قبل از اینکه یک شیوه نامه آبشاری وجود داشته باشد، این نشانه گذاری اصلی بود. این امکان قرار دادن دقیق ترین اشیاء منابع را از یکدیگر فراهم می کرد. اما معلوم شد که کد بسیار بزرگ است و توسط موتورهای جستجو نمایه نشده است. یکی دیگر از معایب این روش سرعت دانلود است. تا زمانی که کل جدول بارگذاری نشود، کاربر حتی ابتدای متن را نخواهد دید.
• مسدود کردن.اکنون این راه اصلی برای علامت گذاری صفحات است. استفاده از آن تنها به لطف توسعه و بهبود شیوه نامه امکان پذیر شد.

مزایای طرح بلوک

طرح بندی صفحه را مسدود کنید با استفاده از CSSچندین مزیت غیر قابل انکار دارد. اول اینکه سبک اشیاء جدا از سند HTML است که خوانایی کد را تا حد زیادی افزایش می دهد و به شما اجازه می دهد تا به سرعت تغییرات بصری ایجاد کنید. ثانیاً امکان قرار دادن یک لایه بر روی لایه دیگر وجود دارد و این روند موقعیت یابی را چندین برابر آسان تر می کند. طبیعتاً چنین سایت هایی سریعتر بارگذاری و ایندکس می شوند. موتورهای جستجو. چیدمان صفحه CSS تنظیم جلوه های بصری مدرن را آسان می کند.

تنها اشکال این رویکرد، "درک" متفاوت توسط مرورگرها است. برخی منابع را طوری نمایش می دهند که مدیر وب سایت آن را می بیند. اما مرورگرهایی هستند که تصویر را تحریف می کنند، بنابراین چه زمانی در تعداد زیادکلاس‌ها و انتخابگرها، باید از هک‌هایی استفاده کنید که کد را مرورگر متقابل می‌کنند.

چگونه یک طرح بندی بلوکی از سایت ایجاد کنیم؟

اولین چیزی که باید با آن شروع کنید ایجاد یک طرح است. باید یک تصویر psd معمولی باشد. پس از ایجاد آن (خرید یا دانلود)، باید تصویر را به بلوک برش دهید و آن را در یک پوشه (ترجیحاً یک پوشه جداگانه) قرار دهید. این قطعات به عنوان پس زمینه برای بلوک ها استفاده خواهند شد.

AT سند HTMLتگ برای چیدمان بلوک استفاده می شود