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

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

آموزش CSS

دوستان عزیز سلام؛ امروز هم با شما هستم با آموزش CSS – بخش سیزدهم و در این بخش (که بخش پایانی آموزش CSS3 می باشد) به مباحث زیر می پردازیم:

  • جعبه های منعطف در CSS3
  • مدیا کوئری در CSS3
  • طراحی واکنشگرا در CSS3

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

در ابتدا باید با جعبه های منعطف یا همون flexbox آشنا شویم:

جعبه های منعطف در CSS3

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

قبل از هر چیز توجه داشته باشید که:

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

اما قبل از هر توضیحی می خواهم شما دوستا را با مفهوم flexbox آشنا سازم:

مفهوم flexbox

یک جعبه منعطف از دو بخش تشکیل شده است. بخش اول المان اصلی و دربرگیرنده می باشد (flex container) و بخش دوم عناصری هستند که درون این عنصر دربرگیرنده قرار می گیرند (flex item).

هرچیزی که درون یا بیرون از عنصر دربرگیرنده قرار می گیرد به صورت عادی نمایش داده می شود. کاری که flexbox انجام می دهد، تصحیح نحوه چیدمان عناصر درون عنصر دربرگیرنده متناسب با اندازه مرورگر می باشد.

حال ببینیم که یک جعبه منعطف را چگونه باید ایجاد کرد:

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

آموزش CSS

سبک دهی به جعبه های منعطف

در ادامه ویژگی هایی معرفی می شوند که برای عنصر دربرگیرنده و عناصر درون آن به کار می روند.

ویژگی های عنصر دربرگیرنده

بیایید ببینیم که با چه ویژگی هایی می توان عنصر دربرگیرنده را سبک دهی کرد:

flex-direction

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

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

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

نتیجه به صورت زیر خواهد بود:

آموزش CSS

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

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

آموزش CSS

ویژگی justify-property

ممکن است که آیتمها تمام فاصله در دسترس در راستای محور 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 را نمایش می دهد.

آموزش CSS

ویژگی flex-wrap

وقتی که تعداد آیتم ها زیاد است و فضای کافی برای نمایش آنها در عنصر دربرگیرنده وجود ندارد، با استفاده از این ویژگی تعیین می کنید که آیتم ها در فضای عنضر دربرگیرنده قرار گیرند یا نه؟

مقادیر این ویژگی دیافت می کند عبارتند از: nowrap  (که پیش فرض است)، wrap  و wrap-reverse  هستند.

توجه داشته باشید که برای استفاده از این ویژگی باید ارتفاع آیتم ها را تعیین کنید.

ویژگی align-content

این ویژگی رفتار flex-wrap  را بهبود می بخشد و کاری که می کند تراز خطوطی است که آیتم ها روی آن ها چیده می شوند. مقادیر این ویژگی عبارتند از:

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

و اما ویژگی های flex item ها:

ویژگی های عناصر flex

حال ببینیم که عناصر درون عنصر دربرگیرنده را چگونه می توان سبک دهی کرد:

ویژگی order

این ویژگی ترتیب چینش آیتم ها نصبت به دیگر آیتم ها را تعیین می کند. به دو صورت می توان به این ویژگی مقدار داد:

در روش اول می توان از مقادیر +1 و یا -1 استفاده کرد که مقدار -1 یک آیتم خاص را قبل از دیگر المانها (یعنی در ابتدای خط چینش آیتم ها) قرار می دهد و مقدار +1 عنصر را بعد از دیگر المان ها قرار می دهد.

در روش دیگر می توان با استفاده از این ویژگی تعیین که که کدام عنصر در مکان اول، کدام یک در مکان دوم و … قرار گیرند که در این صورت باید این ویژگی را برای تمام آیتم ها بنویسیم. (توجه داشته باشید در صورتی که بخواهیم چینش پیش فرض را تغییر دهیم از این ویژگی استفاده می کنیم.)

ویژگی margin

این ویژگی نیز برای تنظیمات فاصله خارجییست.

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

اگر یک آیتم داشته باشید، دستور margin: auto  آن را در وسط عنصر دربرگیرنه قرار می دهد.

ویژگی align-self

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

ویژگی flex

این ویژگی اندازه یک آیتم را بر اساس دیگر آیتم ها تعیین می کند.

فرضا 4 آیتم داریم. مقدار ویژگی flex را برای آیتم اول 1، آیتم دوم 2، آیتم سوم 3، آیتم چهارم 4 تعیین می کنیم. در این حالت ردیفی که این آیتم ها در آن قرار می گیرند را به 10 قسمت تقسیم کرده ایم. فضای اشغالی برای آیتم اول یک قسمت از 10 قسمت، آیتم دوم دو قسمت از 10 قسمت، آیتم سوم سه قسمت از 10 قسمت و آیتم چهارم 4 قسمت از ده قسمت خواهد بود.

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

آموزش CSS

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

مدیا کوئری در CSS3

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

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

قابلیت جدید مدیا کوئری در CSS3 آن را به تکنیکی محبوب برای سبک دهی مناسب المان ها در دستگاه های تبلت، اندروید و آی فون تبدیل کرده است.

اما ببینیم که ساختار دستور مدیا کوئری به چه صورت است:

نتیجه مدیا کوئری زمانی درست است که نوع مدیا تعیین شده با دستگاهی که سند را نمایش می دهد یکسان و همزمان شرایطی را که تعیین می کنیم (expressions) برقرار باشد. با درست بودن نتیجه درخواست، فایل CSS تعیین شده و یا دستورات نوشته شده، اعمال می شوند.

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

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

در مثال زیر در عرض های بیشتر از 450 پیکسل پنجره مرورگر، چینش دیوها تغییر می کند:

آموزش CSS

و اما در آخرین بخش از آموزش CSS3 با طراحی واکنشگرا آشنا می شوید:

طراحی واکنش گرا در CSS3

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

خب بیایید ببینیم در طراحی واکنشگرا چه تنظیماتی باید انجام شود:

تنظیمات viewport

اولین بخشی که باید در طراحی رسپانسیو تنظیم شود، viewport است.

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

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

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

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

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

طراحی رسپانسیو با نمای شبکه ای

منظور از نمای شبکه ای (grid-view) طراحی صفحه به صورت شبکه ای است به طوری که صفحه به چندین سطر و 12 ستون تقسیم می شود. این کار باعث راحتی در قرار دادن المان ها در صفحه می شود.

در این روش طراحی، صفحه را به 12 ستون تقسیم می کنیم و عرض کل را 100% در نظر می گیریم. در اینصورت فضای اشغال شده توسط هر عنصر در اندازه های مختلف ثابت خواهد ماند. یعنی همواره درصد مشخصی از viewport را اشغال می کند.

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

گفتیم که در طراحی grid-view صفحه را به 12 ستون تقسیم می کنیم. برای محاسبه عرض هر ستون 100 را بر 12 تقسیم می کنیم. یعنی عرض هر ستون تقریبا 8.33% خواهد بود.

چرا از درصد استفاده می کنیم؟ لطفا پاسخ خود را در بخش دیدگاه ها برای ما ارسال نمایید.

توجه کنید که این ستون ها فرضی هستند. برای این ستون های فرضی کلاس های   col-… در نظر می گیریم که به جای سه نقطه اعداد 1 تا 12 قرار خواهند گرفت. دستورات CSS زیر را می نویسیم:

از این تقسیم بندی بدین شکل استفاده می کنیم که فرضا می خواهیم دو دیو را در صفحه قرار دهیم که یکی عرض 75% و دیگری عرض 25% داشته باشد. در اینصورت به دیو اولی کلاس col-9  و به دیو دومی  کلاس col-3  می دهیم.

این دو دیو را به صورت زیر در یک ردیف قرار می دهیم:

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

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

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

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

آموزش CSS

اگر اندازه مرورگر را کاهش دهید:

آموزش CSS

دوستان عزیز و همراهان سایت سازان، آموزش CSS – بخش سیزدهم را در اینجا به پایان میرسانم.

تا اینجای کار تقریبا با تمام دستورات مهم CSS3 برای سبک دهی به المان ها، آشنا شده ایم. در قدم بعدی باید مبحث بسیار جذاب جاوا اسکریپت را شروع کنید که می توانید از منوی بالا به آموزش جاوا اسکریپت دسترسی داشته باشید.

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

موفق باشید.

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

Comments (5)

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

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

نظرم ثبت شد؟

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

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

Comments are closed.