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

آموزش CSS – بخش ششم

آموزش CSS

سلام مجدد بر دوستان و همراهان همیشگی سایت سازان. همراه شما عزیزان هستم در آموزش CSS – بخش ششم و در این جلسه میخواهم مطالب زیر را برای شما عزیزان شرح دهم:

  • سبک دهی پیوندها با CSS
  • سبک دهی لیست ها با CSS
  • سبک دهی جداول با CSS

دوستان عزیز، مطالب ارائه شده در این بخش در هر پروژه ی طراحی سایت کاربرد دارند. پس با دقت و حوصله به مطالعه مطالب بپردازید:

سبک دهی پیوندها با CSS

در جلسه ششم آموزش HTML آموختیم که با استفاده از تگ <a>  پیوند ها را ایجاد و کاربران را به صفحاتی از سایت و یا وب سایتی دیگر هدایت می کنیم. حال می خواهیم ببینیم که با چه دستوراتی و چگونه می توان لینک ها را سبک دهی کرد:

لینک ها با استفاده از سه ویژگی color ، font-family  و background  سبک دهی می شوند. به این ترتیب خواهیم توانست رنگ و فونت و زمینه لینک ها را به دلخواه تغییر دهیم و به زیبایی آن بیفزاییم.

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

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

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

CSS این امکان را به ما می دهد که سبک پیوند را در هر 4 حالت به گونه ای که می خواهیم تغییر دهیم که برای این کار دستوراتی با الگوی زیر را خواهیم داشت:

حالات مختلفی که یک لینک می تواند داشته باشد عبارتند از:

a:link : این دستور، سبک های پیوند قبل از بازدید و کلیک را بیان می کند.

a:visited : سبک های پیوند بعد از کلیک با این دستور تنظیم می شوند.

a:hover : با استفاده از این دستور، رفتار پیوند در زمانی که نشانگر موس روی آن قرار دارد را تعریف می کنیم.

a:active : این دستور نیز سبک های پیوند را هنگام فشار دادن دکمه موس، تغییر می دهد.

در جلسه هشتم آموزش CSS با جزئیات بیشتر حالات مختلف یک لینک آشنا خواهیم شد. (و به حقایقی در مورد آن پی می بریم!!)

حال بیایید یک مثال را با هم بررسی کنیم:

آموزش CSS – بخش ششم

خب حالا دستورات CSS زیر را برای سبک دهی به لینک، در فایل خارجی نوشته و به سند HTML لینک می دهیم:

آموزش CSS – بخش ششم

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

در سبک دهی به پیوند ها باید ترتیب زیر رعایت شود:

  • ابتدا حالت a:link  را تعیین کنید.
  • مرحله دوم باید حالت a:visited  را تنظیم کنید.
  • a:hover  در مرحله سوم تعیین می شود
  • در آخر نیز a:active  تنظیم می شود.

در ادامه دستورات مهم دیگه رو معرفی می کنم:

text-decoration

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

آموزش CSS – بخش ششم

background-color

از سبک های دیگری که به پیوندها داده می شود، رنگ زمینه در هر حالت است. همانطور که می دانید ویژگی background-color  برای این منظور استفاده می شود:

آموزش CSS – بخش ششم

حالا که با این دستورات آشنا شدیم، می خواهیم یک مثال را بررسی کنیم تا ببینیم چگونه می توانیم لینک را به دکمه ای زیبا تبدیل کنیم؟

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

آموزش CSS – بخش ششم

بدین ترتیب می توان با استفاده از این دستورات لینک ها را زیبا سازی کرد. همانطور که گفتم بعد از سبک دهی به لینک ها، سبک دهی به لیست ها را خواهیم آموخت:

سبک دهی به لیست ها با CSS

با لیست ها در جلسه هشتم آموزش HTML آشنا شدیم و انواع آن را با هم بررسی کردیم. در ادامه خواهیم دید که چگونه به لیست های مرتب و نامرتب، سبک دهی می کنیم.

اولین دستوری که با آن آشنا می شویم دستوری برای تغییر نحوه علامت گذاری (بولت ها) موارد یک لیست می باشد:

list-style-type

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

آموزش CSS – بخش ششم

list-style-image

یک عکس کوچک را می توان با استفاده از این دستور برای نشانه گذاری موارد قرار داد. نحوه انجام این کار بدین ترتیب است که ابتدا ویژگی list-style-image  را می نویسیم و بعد مقدار url( ' image address ' )  را به آن می دهیم.

آموزش CSS – بخش ششم

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

list-style-position

این دستور برای تعیین محل نشانه (شماره یا بولت و یا عکس) موارد یک لیست استفاده می شود که دو مقدار inside  و outside  را دریافت می کند:

آموزش CSS – بخش ششم

list-style

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

  • مقدار اول ویژگی list-style-type  را تعیین می کند.
  • مقدار دوم list-style-position  را تعیین می کند
  • مقدار سوم برای تعیین مقدار list-style-image  است که باید آدرس عکس را در url(' ')  بنویسیم.

خب اگر فرضا یکی از موارد بالا تنظیم نشود چه اتفاقی رخ می دهد؟

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

خب دوستان، اگر توجه کرده باشید مقدار اول دستور list-style  نوع نشانه گذاری و مقدار سوم عکسی را برای نشانه گذاری موارد تنظیم می کند!!!

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

مرورگر در ابتدا عکس را برای نشانه گذاری استفاده می کند. اما ممکن است عکس به هر دلیلی بارگذاری نشود که در این صورت اگر type را برای نشانه گذاری تنظیم نکنیم، موارد لیست بدون نشانه باقی می مانند.

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

         رنگ زمینه لیست ها

می توان برای لیست ها یا موارد درون آنها رنگ زمینه ای را برای زیباتر شدن تنظیم کرد. اگر رنگ زمینه را برای تگ <ol>  یا تگ <ul>  تنظیم کنیم، این رنگ برای <li>  ها نیز اعمال می شود. اما اگر رنگ زمینه را برای <li>  تنظیم کنیم، این رنگ زمینه فقط برای <li>  ها اعمال می شود.

آموزش CSS – بخش ششم

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

آموزش CSS – بخش ششم

حال به سراغ آخرین مبحث این بخش، یعنی سبک دهی به جداول میرویم.

سبک دهی به جداول با CSS

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

حاشیه گذاری جداول

در مثال زیر نحوه حاشیه گذاری جدول و سلول های آن را می بینیم که برای فهم بهتر، یک جدول را مانند یک ماتریس در نظر می گیریم. یعنی داده سطر اول ستون اول را a11 و سطر دوم ستون سوم را a23 و به همین ترتیب سطر n-ام ستون m-ام را  در نظر می گیریم.

همانطور که می دانید تگ های <th>  سلول های عنوان را مشخص می کنند و تگ های <td>  داده های جدول را تعیین می کنند.




آموزش CSS – بخش ششم

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

و این یعنی المان های <table>  و <th>  و <td>  درون دیوی که کلاس d02 دارد انتخاب شوند. در جلسه نهم آموزش CSS انتخاب کننده ها به تفصیل بررسی خواهند شد.

border-collapse

در مثال بالا دیدیم که حاشیه ای که برای جداول ایجاد می شد، حاشیه ای دو خطی بود که دلیل آن این است که من حاشیه ها را برای سلول ها و خود جدول ایجاد کرده ام. برای ادغام حاشیه ها و تبدیل آنها به یک خط، از دستور border-collapse  با مقدار collapse  استفاده می کنیم.

آموزش CSS – بخش ششم

طول و ارتفاع جدول

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

آموزش CSS – بخش ششم

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

تراز داده های یک سلول

برای جابجایی داده های سلول های یک جدول در راستای عمودی از ویژگی vertical-align  استفاده می کنیم. این ویژگی با سه مقدار top  ،  bottom  و middle  داده ها را در بالا ، پایین و یا وسط سلول قرار می دهد.

همچنین اگر بخواهیم داده ها را در عرض سلول جابجا کنیم از ویژگی text-align  با مقادیر left ، right  و center  استفاده می کنیم.

  • مکان داده ها در عرض سلول، به مقدار ویژگی direction بستگی دارد. یعنی اگر direction: rtl  باشد، داده ها در سمت راست قرار خواهند داشت و اگر جهت چپ به راست باشد داده ها در سمت چپ قرار می گیرند.
  • داده های <th>  به صورت پیش فرض در وسط سلول قرار می گیرند.

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

آموزش CSS – بخش ششم

در مثال زیر می بینید که چگونه می توان یک لبه از سلول ها را حاشیه گذاری کرد:

آموزش CSS – بخش ششم

جداول با قابلیت hover

مطمئنا در سایت های مختلف جداولی را دیده اید که با حرکت نشانگر موس روی ردیف ها، هایلایت می شوند و رنگ زمینه آنها تغییر میابد. در CSS انتخاب کننده :hover  برای سبک دهی به المان ها در زمان حرکت نشانگر موس روی آنها استفاده می شود. به عنوان مثال برای دادن سبک خاص به یک ردیف در هنگام حرکت موس روی آن الگوی زیر را داریم:

حال بیایید مثالی را با هم بررسی کنیم:

آموزش CSS – بخش ششم

در مثال بالا با حرکت موس روی <tr>  ها، رنگ زمینه آنها تغییر میابد. ضمنا حرکت موس روی المان ها را hover over می گوییم.

جداول راه راه

می توان رنگ سطرهای هر جدول را به رنگ دلخواه تغییر داد و جدولی راه راه را ایجاد کرد. برای این کار باید از انتخاب کننده فرزند استفاده کنیم.

nth-child()  انتخاب کننده فرزند است که با استفاده از آن می توان بچه های با شماره زوج (even) و یا فرد (odd) را انتخاب کرد. به عنوان مثال :

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

آموزش CSS – بخش ششم

رسپانسیو کردن جدول

جداول را می توان به صورت رسپانسیو طراحی کرد. برای این کار باید کل <table>  را درون یک المان مثلا یک div قرار داد و برای آن المان ویژگی overflow-x:auto  را تنظیم کرد؛

اگر همراه overflow  حرف x بیاید یعنی محتوای اضافه در عرض صفحه را scroll کن و اگر حرف y همراه آن بیاید یعنی محتوای اضافه در راستای محور y را scroll کن که در این صورت یک scrollbar برای چپ یا راست و بالا یا پایین کردن جدول ایجاد می شود. اگر تعداد سطرها زیاد باشد باید حرف y و اگر تعداد ستون ها زیاد باشد باید حرف x را همراه با overflow استفاده کنید. (با ویژگی overflow و کاربرد آن در جلسه هشتم آموزش CSS آشنا می شویم).

آموزش CSS – بخش ششم

قرار دادن عنوان برای جدول

با استفاده از تگ <caption>  که دقیقا بعد از تگ <table>  می  آید، می توان عنوانی را برای جدول تعیین که و با انتخاب caption و ویژگی caption-side  عنوان را در بالا (top) و یا در پایین (bottom) جدول قرار داد.

آموزش CSS – بخش ششم

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

در جلسه هفتم آموزش CSS مطالب کاربردی تر و جذابتری را خواهیم آموخت. با ما همراه باشید.

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

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