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

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

آموزش css

دوستان عزیز سلام؛ به آموزش CSS – بخش اول خوش آمدید.

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

ابتدا ببینیم که CSS چیست؟

همانطور که مستحضر هستید(!) المان ها و عناصر صفحه بعد از نشانه گذاری باید سبک دهی شده و چگونگی نمایش آنها در صفحه، طرح بندی و تغییرات المان ها متناسب با اندازه مرورگر، تعیین شود و در کل ویژگی هایی به آن ها بدهیم. برای این کار از دستورات و کدهای CSS (که مخفف عبارت Cascading Style Sheet است) استفاده می کنیم.

پس CSS دستوراتی هستند که توسط آن ها به المان های صفحه وب، ویژگی هایی را تخصیص می دهیم.

اگر شما هم از آن دسته افرادی هستید که بدون مطالعه HTML، یاد گیری CSS را آغاز کرده اید (که اگر واقعا از این دسته افراد هستید ادامه مطلب رو نخونید و همین الان به آموزش HTML در سایت سازان مراجعه کنید و بعد از یادگیری HTML به سراغ این فصل بیایید)، خواهید پرسید که کدها و دستورات CSS را در کجای یک سند HTML باید نوشت؟

پاسخ سوالتان این است که به سه روش درون خطی (inline)، داخلی (internal) و خارجی (external)، دستورات CSS نوشته می شوند که توضیحات بیشتر در زمینه این سه روش در آموزش HTML ارائه شد که در صورت نیاز می توانید جلسه پنجم آموزش HTML را یک بار مرور نمایید و سپس به مطالعه ادامه مطالب این جلسه بپردازید.

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

خب بریم سر اصل مطلب، گفتیم که CSS ها دستوراتی برای سبک دهی و ویژگی دادن به المان ها هستند. این دستورات ساختاری دارند به این صورت که:

هر دستور (rule) CSS از دو قسمت تشکیل شده است: 1- انتخاب کننده (selector) 2- تعریف سبک (declaration)

در حالت کلی برای تغییر سبک ها در ابتدا المان مورد نظر را بر اساس شناسه، کلاس، خصیصه و یا نام آن انتخاب کنیم و در ادامه سبک های جدید را برای آن، تعریف می کنیم:

در دستور بالا یک دیو بر اساس شناسه انتخاب می شود (div#id) و رنگ زمینه فیروزه ای برای آن تعریف می شود. هر تعداد ویژگی را که بخواهیم می توانیم برای هر المان تعریف کنیم.

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

  • بعد از هر ویژگی و مقدار آن باید علامت نقطه ویرگول (semicolon) نوشته شود.
  • تمام ویژگی ها نیز باید در علامت کروشه قرار گیرند.
  • بین ویژگی و مقدار آن باید از دو نقطه ( ” : ” ) استفاده کرد.

حالا در اولین مثال، یعنی مثال زیر، رنگ و اندازه فونت پاراگراف را تغییر می دهیم:

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

در مثال بالا گفتیم که همه ی p های صفحه را انتخاب کن (به کی گفتیم؟ خب به مرورگر گفتیم. دستورات CSS را مرورگر اجرا می کند) و رنگ متن آنها را از سیاه (که پیش فرض مرورگرهاست) به آبی تغییر بده و اندازه فونت آنها را به 1.2 برابر اندازه پیش فرض تغییر بده. (em واحد اندازه فونت پیش فرض مرورگرهاست.)

خب گفتیم که برای سبک دهی به هر المان در ابتدا باید آن المان را انتخاب نماییم. بیایید ببینیم که چگونه می توان المان ها را انتخاب کرد:

روش های انتخاب هر المان

به چند طریق می توان عناصر را انتخاب کرد و آنها را سبک دهی کنیم که در ادامه این روش ها را بررسی می کنیم:

انتخاب المان ها بر اساس نام آنها

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

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

انتخاب المان ها بر اساس شناسه (id)

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

شناسه ها نباید با اعداد آغاز شوند.

در مثال زیر نحوه انتخاب المان بر اساس شناسه را خواهیم دید.

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

انتخاب المان ها بر اساس کلاس آنها

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

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

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

گفتیم که مجاز هستیم که برای المان ها کلاس یکسان انتخاب کنیم. در مثال زیر المان <h1>  و المان <p>  کلاس یکسان دارند. به نحوه انتخاب هر المان برای سبک دهی توجه نمایید:

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

همانطور که می بینید درصورت وجود المان های با کلاس یکسان، نام المان، نقطه و کلاس المان، انتخاب کننده خواهند بود.

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

  • کلاس هر المان می تواند چند قسمتی باشد و برای انتخاب المان، می توان از هر کدام از قسمت های کلاس استفاده کرد. فرضا <p class="part1 part2 part3">Some text</p>
  • مرورگر در اجرای دستورات مشابه CSS برای یک المان، دستوری که در خطوط پایین تر قرار دارد را اجرا می کند و به عنوان سبک نهایی المان اعمال می کند. مثلا اگر در خط اول رنگ متن یک پاراگراف را آبی کنیم و در خط بعدی دستور قرمز کردن رنگ همان پاراگراف را بنویسیم، دستور خط دوم، دستور خط اول را بی اثر می کند و رنگ متن از آبی به قرمز تغییر می کند.
  • در حالت کلی اولویت اول با CSS های درون خطی، اولویت دوم با CSS های داخلی و اولویت سوم با CSS های خارجی می باشد. و در CSS های درون خطی و خارجی، برای یک المان معین، ویژگی ای اعمال می شود که در خطوط پایین تر نوشته شده است.

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

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

همانطور که می بینید دستور color: purple;  دو دستور بالایی تغییر رنگ را خنثی کرده است.

انتخاب همزمان چند المان

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

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

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

توضیحات در CSS

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

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

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

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

شاد و سلامت باشید.

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