طراحی سایت در تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
۰۹۱۲۰۱۹۹۳۸۶   ۰۲۱۸۸۴۷۱۵۲۱

آموزش CSS – بخش سیزدهم

آموزش CSS

در بخش پایانی آموزش CSS به مباحث مهم زیر می‌پردازیم:

  • Flexible Box
  • Media Query
  • Responsive Design

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

 Flexible Box

Flexible Box یا به اختصار flexbox روشی جدید در CSS3 برای طرح بندی صفحات وب است. وقتی که از این روش استفاده میکنیم مطمئن هستیم که وقتی کاربر اندازه مرورگر را تغییر میدهد، صفحه طراحی شده متناسب با اندازه مرورگر تغییر میکند. در واقع رفتار اجزاء درون سند قابل پیش بینی است. این روش طراحی از float نمیکند. وقتی که از float استفاده میکنید میبینید که با تغییر اندازه صفحه، مارجینها هم تغییر میکند.

مفهوم flexbox

flexbox از دو بخش تشکیل میشود. جزء اصلی که قرار است محتویاتی درون آن قرار بگیرد (flex container ) و بخش دوم اجزائی هستند که درون این جزء قرار میگیرند (flex item ).

برای flex container پراپرتی display را سِت میکنیم. این پراپرتی برای نمایش اجزا به صورت block مقدار flex و برای نمایش اجزا بصورت inline مقدار inline-flex را میگیرد. ( حتما میدانید که بعد از اجزا بلاک هیچ جزئی نمیتواند قرار بگیرد ولی بعد از اجزاء اینلاین هر جزئی میتواند قرار بگیرد. )

تمام اجزائی که درون و یا بیرون از فلکس کِنتِینر قرار میگیرد بصورت عادی نمایش داده میشوند. کاری که فلکس باکس میکند تغییر نحوه چیدمان آیتمهای درون فلکس کِنتِینر متناسب با اندازه مرورگر است. مرحله به مرحله با این ماژول آشنا میشویم.

در مرحله اول flex container را ایجاد میکنیم و درون آن flex item ها را قرار میدهیم. برای چپ چین یا راست چین کردن آیتم ها میتوانیم از پراپرتی direction استفاده کنیم:

[us_single_image image=”11805″ align=”center”]

Flex Direction

برای تعیین نحوه چینش آیتمها درون flex container از پراپرتی flex-direction استفاده میکنیم. مقدار دیفالت این پراپرتی row است. یعنی آیتمها را از چپ به راست و از بالا به پایین میچیند. مقادیر دیگری ( علاوه بر row ) که این پراپرتی میتواند بگیرد:

  • row-reverse: با توجه به دایرکشن ( پراپرتی direction که در مثال بالا برای body سِت شده است ) آیتمها را بر عکس میچیند. مثلا اگر دایرکشن از راست به چپ باشد، این مقدار ردیف آیتمها را  را از چپ به راست میچیند.
  • column: اگر نحوه چینش آیتمها ردیفی باشد ( که دیفالت ردیفی است و یعنی آیتم ها از چپ به راست یا برعکس چیده شده باشند ) آنها را از بالا به پایین خواهد چید.
  • column-reverse: آیتم ها را ستونی و از پایین به بالا میچیند.

اگر دستور زیر را برای مثال بالا بنویسید:

[us_single_image image=”11806″ align=”center”]

اندازه ارتفاع آیتمهارا تغییر دهید. خواهید دید که آیتم از محدوده کِنتِینر تجاوز نمیکنند.

پراپرتی هایی را که میتوان برای flexbox به کار برد

فلکس کانتینر دو محور main و cross دارد که آیتمها در راستای انها چیده میشوند.

[us_single_image image=”11807″ align=”center”]

در ادامه پراپرتی هایی را که میتوانی برای کانتینر به کار ببریم را با هم بررسی میکنیم.

justify-content: ممکن است که آیتمها تمام فاصله در دسترس در  راستای محور main را استفاده نکنند. در این صورت از طریق این پراپرتی میتوان آیتمها را در طول این محور تراز کرد. اما مقادیری را که میتوان به این پراپرتی داد عبارتند از:

  • flex-start: مقدار دیفالت است. آیتم ها از ابتدای محور main تا انتهای آن قرار میگیرند.
  • flex-end: آیتهما را در انتهای محور main قرار میدهد.
  • center: آیتمها را در وسط محور main قرار میدهد.
  • space-between: آیتم اول و آخر را به لبه های کانتینر میچسباند. فاصله باقیمانده را بین دیگر آیتمها به طور مساوی تقسیم میکند.
  • space-around: فاصله خالی قبل، بعد و بین آیتمها قرار میدهد.

align-item: این پراپرتی تنظیمات دلخواه بالا را در راستای محور cross انجام میدهد.

  • stretch: مقدار دیفالت است. اگر ارتفاعی برای آیتمها سِت نشده باشد، را از بالا تا پایین کش میدهد.
  • flex-start: آیتمها را در ابتدای محور cross قرار میدهد.
  • flex-end: آیتمها را در انتهای محور cross قرار میدهد.
  • center: آیتمها در وسط محور cross قرار میگیرند.
  • baseline: آیتمها را در راستای baseline آنها قرار میدهد. عکس زیر baseline را نمایش میدهد.
[us_single_image image=”11808″ align=”center”]

flex-wrap : وقتی که تعداد آیتمها زیاد است و فضای کافی برای نمایش آنها در کانتینر وجود ندارد از طریق این پراپرتی تعیین میکنیم که آیتمها wrap شوند یا نه؟ مقادیر این پراپرتی nowrap که دیفالت است، wrap و wrap-reverse هستند. ( ارتفاع آیتمها باید سِت شده باشد )

align-content : این پراپرتی رفتار flex-wrap را بهبود میبخشد و کاری که میکند تراز کردن خطوط فلکس است. مقادیر این پراپرتی عبارتند از:

stretch | flex-start | flex-end | center | space-between | space-around

در ادامه پراپرتی های flex item را بررسی میکینم:

order : این پراپرتی برای جابجا کردن آیتمهاست. مقادیر -۱ برای قرار دادن آیتم مورد در ابتدای فلکس و +۱ برای قرار دادن آیتم مورد نظر در انتهای فلکس استفاده میشود. وقتی که تعداد آیتمها زیاد است از طریق این پراپرتی مکان چینش آنها سِت میکنیم. حال اگر این پراپرتی را برای تمام آتم ها به کار ببریم اگر مقدار این پراپرتی برای آیتمی یک باشد، در ابتدا فلکس کانتینر قرار میگیرد. مقدار ۲ این پراپرتی آیتم را در مکان دوم، مقدار ۳ آیتم را در مکان سوم و به همین ترتیب مقدار این پراپرتی مکان آیتم را تعیین میکند.

margin : این پراپرتی نیز برای تنظیمات مارجین است. وقتی مقدار auto برای این پراپرتی سِت شود، فاصله خالی موجود در کانتینر را جذب میکند. مثلا اگر برای آیتم دوم مقدار margin-right: auto; سِت شود، تمام فاصله اضافی موجود در کانتینر درسمت راست این آیتم قرار میگیرد. ( عرض آیتم ها را کوچک در نظر بگیرید تا فضای خالی زیادی در کانتینر ایجاد شود و سپس این پراپرتی را سِت کنید. ). برای قرار دادن آیتمها در وسط کانتینر این پراپرتی را برای .flex-item سِت کنید.

 self-align : این پراپرتی را برای آیتمی مینویسیم که میخواهیم پراپرتی align-items ( که برای کانتینر نوشته شده است ) را برای آن به هر دلیل خنثی کنیم. مقادیر این پراپرتی همان مقادیر پراپرتی align-items هستند.

flex : این پراپرتی برای تعیین اندازه آیتمها بر اساس اندازه دیگر آیتمهاست. فرضا ۴ آیتم داریم. مقدار پراپرتی را برای آیتم اول ۱، آیتم دوم ۲، آیتم سوم ۳، آیتم چهارم ۴ سِت میکنیم ( مقادیر فلکس هر عددی میتواند باشد. ) در این حالت فضای کانتینر را به ۱۰ قسمت تقسیم کرده ایم. فضای اشغالی برای آیتم اول یک قسمت از ۱۰ قسمت، آیتم دوم دو قسمت از ۱۰ قسمت، آیتم سوم سه قسمت از ۱۰ قسمت و آیتم چهارم ۴ قسمت از ده قسمت خواهد بود.

تمام کدهای بالا را به ترتیب در مثال زیر نوشته ایم. خط به خط کدها را بررسی کنید و با تغییر مقادیر آنها نتیجه را مشاهده کنید :

[us_single_image image=”11809″ align=”center”]

آشنایی اولیه با مدیا کوئری

اولین بار در CSS2 دستور @media برای تعیین استایل های خاص متناسب با نوع مدیا ایجاد شد. مثلا میخواهیم که برای نمایش بهتر اجزا در نمایشگر گوشی، تبلت، تلویزیون و یا هنگام پرینت استایلهای خاصی را سِت کنیم، از این دستورا ستفاده میکنیم. از بین این مدیا های مختلف فقط print در دستگاههای مختلف پشتیبانی میشد.

در CSS3 این مشکل بر طرف شد. در واقع در CSS3 بجای تشخیص نوع دستگاه، قابلیت های دستگاه بررسی میشود. منظور از قابلیت ها عرض و ارتفاع viewport، طول و عرض دستگاه، orientation  ( افقی یا عمودی بودن صفحه دستگاه ) و رزولیشن و … است.

مدیا کوئری تکنیکی محبوب برای تعیین استایل ها مناسب برای دستگاه های تبلت، iPhone و اندروید است.

دستور مدیا کوئری شامل نوع مدیا و یا چند دستور CSS است.

نتیجه مدیا کوئری زمانی درست است که نوع مدیا تعیین شده با دستگاهی که سند را نمایش میدهد یکسان باشد. در اینصورت تمام دستورات اجرا شده و این یعنی expression ها هم true هستند. بعد  از این میتوان فایل CSS دیگر link شود یا دستورات CSS نوشته شده اجرا شوند.

برای ضمیمه کردن استایل شیت دیگری به سند دستور زیر را داریم:

مدیا های زیادی در CSS2 وجود داشت که در CSS3 استفاده نمیشوند. در عوض از سه مدیا print ( برای پرینتر ها )، screen ( برای تلفنهای هوشمند، تبلت و کامپیوتر ) و speech در CSS3 استفاده میشود. و زمانی که بخواهیم تمام این مدیا ها را انتخاب کنیم، all را در mediatype مینویسیم.

مثالی ساده از مدیا کوئری

در مثال زیر در عرضهای بیشتر از ۴۵۰ پیکسل، چینش دایوها تغییر میکند:

       

[us_single_image image=”11810″ align=”center”]

آشنایی با طراحی رسپانسیو

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

تنظیمات viewport

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

این متا دیتا به مرورگر در کنترل صفحه در ابعاد و اندازه های مختلف کمک میکند.

قسمت width=device-width عرض صفحه را متناسب با اندازه عرض دستگاه سِت میکند. initial-scale=1.0 نیز اندازه بزرگنمایی اولیه را تنظیم میکند.

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

  • از اجزای با عرض زیاد و ثابت استفاده نکنید. اندازه عرض را متناسب با viewport در نظر بگیرید.
  • برای نمایش بهتر اجزا از viewport های خاص استفاده نکنید. یعنی طراحی شما نباید به گونه ای باشد که برای نمایش بهتر محتویات و اجزای صفحه تان برای هر دستگاه viewport خاصی سِت کنید.
  • از مدیا کوئری برای تغییر CSS در نمایشگرهای مختلف استفاده کنید. مثلا برای اجزا اصلی عرض ثابت پیکسلی را در نظر نگیرید. به جای این کار میتوانید از درصد استفاده کنید تا در نمایشگرهای کوچک، محتویات به درستی نمایش داده شوند. همچنین تا میتوانید از اجزای با پوزیشن absolute کمتر استفاده کنید تا در دستگاه های کوچک، محتویات به بیرون از viewport منتقل نشوند.

طراحی رسپانسیو با grid view

منظور از grid-view طراحی صفحه به صورت شبکه ای است به طوری که صفحه به چندین سطر و ۱۲ ستون تقسیم میشود. این کار باعث راحتی در قرار دادن اجزا در صفحه میشود. در این روش طراحی، صفحه را به ۱۲ ستون تقسیم میکنند و عرض کل را ۱۰۰% در نظر میگیرند. در اینصورت فضای اشغال شده توسط هر جزء در اندازه های مختلف ثابت خواهد ماند. یعنی همواره درصد مشخصی از viewport را اشغال میکند.

برای طراحی به این روش در ابتدا باید اطمینان حاصل شود که عرض و ارتفاع و مارجین و پَدینگ در هم ادغام شده اند. همانطور که میدانید برای این کار باید پراپرتی box-sizing را برای تمام اجزای سند با مقدار border-box سِت کنیم. پس دستور زیر را در ابتدای دستورات CSS مینویسیم:

گفتیم که در طراحی grid-view صفحه را به ۱۲ ستون با عرض ۱۰۰% تقسیم میکنیم. برای محاسبه عرض هر ستون ۱۰۰ را بر ۱۲ تقسیم میکنیم. یعنی عرض هر ستون تقریبا ۸٫۳۳% خواهد بود. توجه کنید که این ستونها فرضی هستند. برای این ستون های فرضی کلاسهایی با col-… در نظر میگیریم که به جای سه نقطه اعداد ۱ تا ۱۲ قرار خواهند گرفت. دستورات CSS زیر را مینویسیم:

توجه کنید که در صفحه HTML هیچ دایوی فعلا قرار نگرفته است. از این تقسیم بندی بدین شکل استفاده میکنیم فرض کنید که میخواهیم دو دایو قرار دهیم که یکی عرض ۷۵% و دیگری عرض ۲۵% داشته باشد. در اینصورت به دایو اولی کلاس col-9 و به دایو دومی کلاس col-25 میدهیم. با این نحوه تقسیم بندی ردیفهایی ( row ) به وجود آورده ایم که باید آنها را در دایوی با کلاس row قرار دهیم:

در دایو کوچکتر قرار است لینکهایی قرار بگیرند. پس لینکها را در یک ul قرار میدهیم.

اگر ردیفهای بیشتری در سندباشد، وقتی اندازه مرورگر را بیش از اندازه بزرگ کنید میبینید که جریان ترتیب چینش دایوها نا منظم میشود. برای جلوگیری از این پدیده بعد از ردیف ها محتوایی را قرار میدهیم و پراپرتی clear را با مقدار both سِت میکنیم.

در ادامه تغییراتی را که میخواهیم در طراحیمان وجود داشته باشد را مینویسیم.

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

[us_single_image image=”11811″ align=”center”][us_single_image image=”11812″ align=”center”]

نوشته های مرتبط

Comments (5)

سلام
بابت آموزشهاتون ممنونم
اگه ممکنه جاوا اسکریپت رو هم قرار بدید.
ضمنا به نظر من همین آموزشها هم در قالب فیلم ارائه بشه خیلی خوب باشه

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

سلام
تشکر ویژه بابت آموزشهاتون. میگم برای HTML . CSS هم آموزش ویدئویی قرار میدهید؟
آموزش جاوا اسکریپت رو کی قرار میدید؟ جاوا اسکریپت متنی هست یا ویدئو هم داره؟

سلام علیکم علیرضا جان
لطف دارید خوشحالیم که تونستیم رضایت شما کاربر عزیز رو جلب نماییم. خدمت شما عرض شود که آموزش های ویدئویی صرفا برای آموزش های بعد php هستش و دوره های html , css , javascript به صورت متنی می باشند. در مورد آموزش جاوا اسکریپ هم باید خدمت شما عرض کنیم تمامی دروس دوره به صورت کامل و به صورت متنی آماده شده و به زودی در سایت منتشر خواهد گردید.
موفق باشید

دیدگاه ‏خود را بنویسید