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

آموزش CSS – بخش هفتم

آموزش CSS

دوستان عزیزم سلام. امروز در خدمت شما همراهان گرامی  هستم با آموزش CSS – بخش هفتم و در این جلسه نیز می خواهیم چند تا از ویژگی های خیلی پرکاربرد CSS را بررسی کنیم.

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

در این جلسه ویژگی های زیر را که برای طرح بندی صفحات وب استفاده می  شوند را بررسی می کنیم:

  • Display
  • Position
  • Overflow
  • Float و clear
  • Inline-block
  • Align

من بعد تا حد امکان از نوشتن کدهای HTML می پرهیزیم و دستورات CSS را بررسی می کنیم. در صورت نیاز به کد های HTML تنها بخش <body>  را برای شما قرار می دهیم.

در ابتدا به سراغ ویژگی display که یکی از مهم ترین ویژگی های CSS در کنترل طرح بندی است می رویم.

ویژگی display در CSS

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

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

میدانید که المان های HTML به دو دسته درون خطی (inline) و بلوک (block) تقسیم می شوند. بنابراین هر کدام از المان ها مقدار پیش فرضی برای ویژگی display دارند. بهتره که در اینجا یادآوری داشته باشیم از انواع المان ها:

المان های بلوک شده

همانطور که می دانید، المان های بعد از یک المان بلوک شده، در خط بعدی قرار می گیرند. یعنی بعد از المان های block-level هیچ المانی نمی تواند قرار بگیرد چون این اجزا تمام عرض مرورگر را اشغال می کنند. المان <div>  نمونه ای از المان های بلوک شده است. المان های دیگری که در این دسته قرار می گیرند عبارتند از:

  • تگ های سر صفحه <h1>  تا <h6>
  • تگ <p>
  • <form>
  • <header>
  • <footer>
  • <section>

المان های درون خطی

این المان ها در مقابل المان های بلوک شده قرار دارند و می توانند درون یک خط با هر عرضی قرار بگیرند و المان های بعد از خود را به خط بعدی منتقل نمی کنند. <span>  و <a>  و <img>  در این دسته قرار دارند.

پس المان ها مقداری از پیش تعیین شده برای ویژگی display دارند که می توان این مقدار پیش فرض را بی اثر کرد. چگونه؟

خنثی سازی مقدار از پیش تعیین شده display

همانطور که می دانید لیست ها نیز در درسته المان های بلوک شده قرار می گیرند و با استفاده از همین لیست ها، منو های افقی را طراحی می کنند. در اینجا لازم است که لیست را با دستور display: inline;  مانند یک المان درون خطی نمایش دهیم تا تمام <li>  ها در یک خط قرار بگیرند و گزینه های منوی ما را تشکیل دهند.

پس می توان در صورت لزوم مقدار از پیش تعیین شده ی ویژگی display را برای منظوری خاص تغییر داد. اما توجه کنید که:

با تغییر display فقط نحوه نمایش عناصر تغییر می کند و دسته آنها تغییر نخواهد کرد. مثلا اگر به ویژگی display یک <div>  مقدار inline را بدهید، این بدین معنی نیست که دیو را به دسته المان ها inline برده اید بلکه فقط نحوه نمایش آن را تغییر داده اید.

پس با استفاده از ویژگی display نحوه نمایش (درون خطی یا بلوکی) پیش فرض المان ها را تغییر می دهیم.

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

پنهان سازی المان ها

در CSS به دو روش می توان عناصر را پنهان کرد که در ادامه می خواهیم این دو روش و تفاوت آنها را ببینیم.

روش اول به این صورت است که برای یک المان، مقدار none را به ویژگی display می دهیم. بدین ترتیب المان بدون این که فضایی را اشغال کند، پنهان می شود و دیگر المان هایی که بعد از آن قرار دارند می توانند جایگزین آن شوند. فرض کنید که سه عنوان به صورت زیر داریم:

آموزش CSS – بخش هفتم

و برای عنوان دوم با کلاس h12 دستور display:none;  را تنظیم می کنیم. یعنی:

آنچه را که خواهید دید به صورت زیر است:

آموزش CSS – بخش هفتم

همانطور که می بینید عنوان 3 جایگزین عنوان 2 شده است. توجه داشته باشید که عنوان 2 حذف نشده، بلکه پنهان شده است.

در روش دیگر و با استفاده از ویژگی دیگر می توان المان ها را با حفظ فضای اشغالی توسط آن ها، پنهان کرد. در مثال بالا دستور زیر را برای عنوان2 می نویسیم:

در این صورت عنوان دوم که کلاس h12 را دارد نمایش داده نمی شود ولی فضای اشغالی آن حفظ می شود:

آموزش CSS – بخش هفتم

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

ویژگی position در CSS

در CSS برای تثبیت موقعیت (مکان) المان ها متد هایی داریم که ویژگی position نوع آن را تعیین می کند. چگونه؟ با مقادیری که دریافت می کند که این مقادیر عبارتند از:

  • static
  • relative
  • fixed
  • absolute
  • sticky

زمانی که متد تثبیت موقعیت المان تعیین شد، با استفاده از 4 ویژگی top ، right ، left  و bottom می توان المان را جابجا کرد و در مکانی دلخواه قرار داد. اما توجه کنید که:

در صورتی که ویژگی position تنظیم نشود، ویژگی های left ، right ، top  و bottom بی اثر خواهند بود.

حال ببینیم که متدهای ویژگی position  چگونه عمل می کنند؟

متد static

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

حتما می پرسید جریا طبیعی المان یعنی چی؟ در ادامه با بررسی متد relative  به این سوال شما پاسخ داده شده است.

متد relative

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

در متد relative  المان ها نسبت به مکان اولیه خود، جابجا می شوند. پس این متد المان ها را با چهار ویژگی left ، right ، top  و bottom به صورت نسبی جابجا می کند. نسبت به کجا؟ نسبت به مکان اولیه شان. مکان اولیه کجاست؟ اولین مکانی که المان در آن قرار می گیرد. خب این یعنی چی؟ در مثال توضیح خواهم داد.

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

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

از طریق inspector مرورگر مقدار ویژگی های top و right  را تغییر دهید و نتیجه را مشاهده نمایید!

آموزش CSS – بخش هفتم

متد fixed

این متد نیز مکان المان را به صورت نسبی تعیین می کند. اما به نظر شما نسبت به کجا؟ البته برای کسی که با طراحی سایت آشنایی ندارد (و حتی بعضا کسانی که در این زمینه مشغول به فعالیت هستند) پاسخ این سوال دور از ذهن است.

دوستان عزیز پاسخ این است که متد fixed المان را نسبت به viewport و در مکان ثابتی قرار می دهد. یعنی زمانی که المانی نسبت به viewport تثبیت می شود، همواره در مکان ثابتی قرار خواهند داشت حتی با اسکرول کردن صفحه.

مثال زیر را ببینید:

آموزش CSS – بخش هفتم

متد absolute

این متد المان را نسبت به نزدیک ترین جد خود ثابت نگه می دارد. خب اگر المان هیچ جدی (پدر، پدربزرگ و …) نداشته باشد، نسبت به چی تثبیت می شود؟ بله دوستان. نسبت به body.

آموزش CSS – بخش هفتم

در مثال بالا دیو پدر را جابجا کنید؛ خواهید دید که دیو فرزند همواره مکان ثابتی درون دیو پدر دارد و با آن جابجا می شود.

متد sticky

حتما در بعضی سایتها دیده اید که با اسکرول کردن صفحه، زمانی که لبه بالای مرورگر به المانی برسد، آن المان به لبه بالای مرورگر میچسبد و ثابت می شود. این المان با استفاده از متد sticky تثبیت مکانی شده است. پس این متد، ترکیبی از متد های fixed و relative می باشد.

به مثال زیر توجه کنید:

آموزش CSS – بخش هفتم

و حالا با یک ویژگی مهمتر آشنا می شویم.

همپوشانی المان ها

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

برای فهم بهتر موضوع یک محور فرضی عمود بر صفحه نمایش در نظر بگیرید که جهت مثبت آن رو به شما باشد. روی این محور هر تعداد المان می تواند قرار بگیرد. حالا برای جابجایی المان ها روی این محور، از ویژگی z-index  استفاده می کنیم. یعنی هر المان را با این ویژگی و با مقادیر عددی مثبت و منفی می توان جابجا کرد.

حالا می توانید به سوال مطرح شده پاسخ دهید. بله، پاسخ شما صحیح است، المانی که مقدار z-index  آن بیشتر است به کاربر نمایش داده می شود و سایر المان ها زیر آن قرار می گیرند.

خب بیایید با یک مثال این ویژگی را بررسی کنیم. یک دیو و یک پاراگراف را در صفحه قرار می دهیم.

آموزش CSS – بخش هفتم

حالا دیو و پاراگراف را به صورت زیر سبک دهی می کنیم:

آموزش CSS – بخش هفتم

همانطور که می بینید المان پاراگراف زیر دیو قرار گرفته است. با استفاده از دستور z-index پاراگراف را روی دیو قرار می دهیم:

آموزش CSS – بخش هفتم

توجه داشته باشید که:

  • اگر دو المان z-index  برابر داشته باشند، المانی بالاتر قرار می گیرد که در کد های HTML پایین تر قرار دارد.
  • در مثال بالا هم دیو و هم پاراگراف تثبیت مکانی شده اند. یعنی z-index  زمانی عمل می کند که المان ها تثبیت مکانی شده باشند.

یک مثال جالب!

در مثال زیر می بینید که چگونه می توان متن ها را روی یک عکس جابجا کرد.

آموزش CSS – بخش هفتم

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

ویژگی overflow در CSS

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

مقادیر ویژگی overflow

مقادیر زیر را می توان به این ویژگی داد:

  • visible : این مقدار که پیش فرض مرورگرهاست متن اضافه را بیرون از المان نمایش می دهد.
  • hidden : این مقدار محتوای اضافی را برش می دهد و پنهان می کند و مقداری از آن را متناسب با ابعاد المان پدر نمایش می دهد. در این حالت متن پنهان شده را به هیچ وجه نمی توان دید.
  • scroll : در این حالت نیز محتوای اضافه برش داده می شود ولی برای مشاهده محتوا، اسکرول بار ایجاد می کند.
  • auto : در این حالت اگر محتوا سر ریز شود اسکرول بار ایجاد می شود.

قبل از تنظیم overflow  باید طول و ارتفاع را تنظیم کنید.

در مثال زیر نحوه استفاده از این ویژگی را می بینیم:

آموزش CSS – بخش هفتم

Overflow-x و overflow-y

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

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

ویژگی های float و clear در CSS

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

آموزش CSS – بخش هفتم

و بعد دیو 2 زیر دیو 1 قرار می گیرد:

آموزش CSS – بخش هفتم

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

آموزش CSS – بخش هفتم

می توان این دیوها را شناور کنیم به طوری که در کنار هم قرا بگیرند؛ از سمت چپ و یا از سمت راست در کنار هم چیده شوند. چگونه؟ با استفاده از ویژگی float :

ویژگی float

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

مثلا اگر 4 دیو داشته باشیم، اگر float: right;  را برای این دایوها سِت کنیم، این 4 دیو به صورت زیر از سمت راست در صفحه قرار می گیرند:

آموزش CSS – بخش هفتم

آموزش CSS – بخش هفتم

آموزش CSS – بخش هفتم

آموزش CSS – بخش هفتم

تمرین: به عنوان تمرین این دیو ها را از سمت چپ در کنار هم بچینید.

حالا در مثال زیر می خواهیم پاراگراف و عکس را در یک صفحه قرار دهیم:

آموزش CSS – بخش هفتم

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

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

آموزش CSS – بخش هفتم

زمانی که المان ها شناور شوند، می توان رفتار آنها را با استفاده از ویژگی clear  کنترل کرد.

ویژگی clear

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

clear: left  یعنی هیچ المانی اجازه شناور شدن در سمت چپ را ندارد.

clear: right  یعنی هیچ المانی اجازه شناور شدن در سمت راست را ندارد.

clear: both  یعنی هیچ المانی اجازه شناور شدن در دو طرف المان را ندارد.

آموزش CSS – بخش هفتم

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

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

آموزش CSS – بخش هفتم

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

بله درست گفتین. با نوشتن دستور overflow: auto  برای container  این مشکل حل می شود:

آموزش CSS – بخش هفتم

اما این کار در بعضی مواقع باعث ایجاد اسکرول بار می شود. روش بهتر استفاده از المان ساختگی ::after  می باشد. المان ساختگی چیست؟؟ این المان ها را در جلسه هشتم آموزش CSS بررسی خواهیم کرد.

دستورات CSS مثال بالا را به صورت زیر بنویسید:

که تفاوتی در نتیجه ایجاد نمی شود.

آموزش CSS – بخش هفتم

تمرین: کد ها را به گونه ای تغییر دهید که متن و عکس در کنار هم قرار بگیرند.

آموزش CSS – بخش هفتم

راهنمایی: کد های HTML را باید تغییر دهید.

inline-block در CSS

ویژگی float این امکان را به ما می دهد که یک صفحه را به صورت شبکه ای طراحی کنیم یعنی جعبه هایی را به صورت ردیفی در کنار هم بچینیم. فرض کنید که 6 دیو و یک پاراگراف دارین و می خواهیم این دیو ها را در کنار هم بچینیم. پس دستور float :left  را برای آنها می نویسیم:

آموزش CSS – بخش هفتم

همانطور که می بینید نتیجه دلخواهمان حاصل نشده است. برای رفع مشکل، دستور clear: left  را برای پاراگراف می نویسیم. مشکل رفع خواهد شد:

آموزش CSS – بخش هفتم

اما می خواهم روش بهتری را برای این کار معرفی کنم. در این روش از دستور display: inline-block  استفاده می کنیم و دستور clear :right  را برای پاراگراف به کار نمی بریم:

آموزش CSS – بخش هفتم

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

تراز کردن المان ها

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

وسط چین کردن

در ادامه روش هایی را برای وسط چین کردن المان ها، متن ها و عکس ها را می آموزید:

وسط چین کردن المان ها

یکی از روش های وسط چین کردن المان های بلوکی این است که در ابتدا عرض آنها را با استفاده از ویژگی width محدود کنیم تا تمام عرض مرورگر را در برنگیرند. در مرحله بعد دستور margin: auto  را برای المان به کار می بریم تا فضای خالی موجود در عرض مرورگر را در دو طرف المان به طور یکسان تقسیم کند:

آموزش CSS – بخش هفتم

آموزش CSS – بخش هفتم

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

در مثال بالا اگر عرض المان را تعیین نکنید، وسط چین نخواهد شد.

وسط چین کردن متن ها

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

وسط چین کردن عکس ها

همانطور که می دانید المان <img>  در دسته المان های درون خطی قرار دارد. برای وسط چین کردن آن ها باید در ابتدا نحوه نمایش آنها را به block تغییر دهید و پس از تعیین عرضی مشخص، دستور margin: auto  را برای آن ها بنویسید:

آموزش CSS – بخش هفتم

چپ چین/راست چین المان ها

چپ و یا راست چین کردن متن ها را آموختیم. حالا می خواهیم ببینیم چگونه می توان المان ها را چپ چین و یا راست چین کرد؟ برای این کار می توانیم از دو ویژگی position و یا float استفاده کنیم.

استفاده از ویژگی position

در این روش در ابتدا المان را با متد absolute تثبیت مکانی می کنیم و سپس با استفاده از ویژگی های left و یا right و با دادن مقدار 0 به آن ها المان ها را در سمت چپ و یا راست قرار می دهیم.

آموزش CSS – بخش هفتم

زمانی که از ویژگی position  برای تراز کردن المان ها استفاده می کنید، جهت جلوگیری از تغییر نحوه نمایش در مرورگر های مختلف، ویژگی های margin  و padding  را برای body با مقدار دلخواه تنظیم کنید.

استفاده از ویژگی float

در این متد می توان با استفاده از دستور float: left/right  المان ها را چپ چین و یا راست چین کرد:

آموزش CSS – بخش هفتم

مطلب آخر معرفی دو متد برای جابجایی المان ها در ارتفاع صفحه (و یا المان در برگیرند) می باشد.

جابجایی عمودی المان ها

در CSS متد های زیادی برای جابجایی عمودی المان ها وجود دارد که در ادامه دو متد را برای شما دوستانم تشریح می کنم:

استفاده از padding

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

آموزش CSS – بخش هفتم

تمرین: در مثال بالا متن را در وسط دیو قرار دهید.

 استفاده از line-height

در مثال بالا دید که چگونه می توان متن را در وسط المان قرار داد. در مثال زیر از طرفند دیگری برای این کار استفاده می کنیم. در این روش به دو ویژگی line-height  و height مقدار برابر می دهیم:

آموزش CSS – بخش هفتم

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

خب دوستان عزیزم، آموزش CSS – بخش هفتم را هم در این جا به پایان می رسانم. منتظر نظرات و پیشنهادات شما دوستان عزیزم هستم چرا که با همکاری شما عزیزان خواهم توانست آموزش های کاملتری را ارائه دهم.

همراه سایت سازان باشید در جلسه هشتم آموزش CSS با ویژگی های مهم و جالب تری آشنا خواهیم شد.

پیروز و سربلند باشید.

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