ادامه جلسه اول اموزش css

sina hub sina hub sina hub · 1400/06/21 08:16 · خواندن 6 دقیقه

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

id و Class در CSS

 

 

همونطور که در بخش ساختار نحوی دستورات مشاهده کردین، تو بخش Selector عنصری رو که می‌خوایم استایل روی اون اعمال بشه رو ذکر می‌کنیم.

 

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

 

اعمال دستورات فقط بر روی یک عنصر واحد توسط id

 

برای این منظور اول باید به کدهای HTML رفته و برای عنصر مورد نظر صفت id رو تعریف کنیم. سپس به بخش دستورات CSS رفته و در بخش Selector، صفت id که برای عنصر مورد نظر تعریف کردیم رو نوشته و یک نماد “#” قبل از اون اضافه کنیم.

 

مثلا اگه بخوایم دستورات فقط بر روی یک پاراگراف خاص اعمال بشن، ابتدا برای اون پاراگراف یک صفت id در کدهای HTML تعریف می‌کنیم:

 

 

  • This is a Paragraph.

 

 

سپس در دستورات CSS در بخش Selector مقدار صفت id تعریف شده را همراه با یک علامت “#” می نویسیم:

 

 

  • #para1 { text-align:center; color:red; }

 

 

اعمال دستورات بر روی یک گروه از عناصر توسط Class

 

 

برای این منظور اول باید به کدهای HTML رفته و برای همه عناصری که می‌خوایم خاصیت‌های ظاهری یکسان داشته باشن صفت Class رو تعریف کنیم. سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت Class که برای عناصر مورد نظر تعریف کرد‌یم رو نوشته و یک نماد “.” قبل از اون اضافه کنیم.

 

 

مثلا اگه بخوایم دستورات بر روی تعدادی پاراگراف مورد نظر ما اعمال بشن، ابتدا برای اون دسته از پاراگراف‌ها یک صفت Class مشترک در کدهای HTML تعریف می‌کنیم:

 

 

  • This is a Paragraph.

 

 

سپس در دستورات CSS در بخش Selector مقدار صفت Class تعریف شده را همراه با یک علامت “.”  یا همان نقطه می‌نویسیم:

 

 

  • .center { text-align:center; }

 

 

بدین ترتیب این دستورات فقط بر روی پاراگراف هایی اعمال می‌شن که دارای Class برابر با Center هستن و سایر پاراگراف‌های موجود در صفحه از این دستورات تاثیرپذیر نیستن.

 

 

کدهای CSS را کجا بنویسیم؟

 

 

این کد ها رو می‌تونیم داخل هر ویرایشگر کدی بنویسیم، که پیشنهاد ما به شما برای شروع، ویرایشگر هایی مثل brackets، sublime text و notepad هستن.

 

 

برای نوشتن کدهای CSS و اتصال اون ها به HTML، سه روش وجود داره:

 

 

  • External Style Sheet : اتصال خارجی
  • Internal Style Sheet : اتصال داخلی
  • Inline Style : اتصال درون خطی
  • External style sheet یا اتصال خارجی

 

 

استایل های خارجی فایل هایی با فرمت css هستن که بوسیله تگ در صفحه وب قرار گرفته اند و بهترین راه برای تغییر دادن ظاهر یک وب سایت که از صفحات زیادی درست شده هستن.

 

 

کد های موجود در اون فایل ها، شکلی شبیه به زیر رو دارن:

 

 

  • hr { color: sienna; } p { margin-left:20px; } body { background-image:url("images/back40.gif"); }

 

 

Internal Style Sheet یا اتصال داخلی

 

 

نحوه نوشتن این استایل ها مثل استایل خارجی هست ولی تنها فرق اون اینه که به جای تگ از تگ

 

inline style یا اتصال درون خطی

 

با استفاده از این روش بسیاری از مزیت ها و ویژگی هایی که دستورات CSS بخاطر اون‌ها به وجود اومده رو از دست میدین. چرا که برای هر عنصر باید دستورات مختص اون رو بنویسین و واضحه که برای تغییر باید به تک تک عناصر مراجعه کرده و اون‌ها رو تغییر بدین که بسیار زمانبر و گاهی همراه با خطا خواهد بود.

برای استفاده از این روش باید به عنصر مورد نظر صفت style را افزوده و بعد خاصیت ها و مقدار ها رو به این صفت اضافه کنین. تو مثال زیر از همین روش برای تغییر رنگ متن پاراگراف استفاده می‌کنیم:

 

  • This is a paragraph.

 

اولویت تاثیرگذاری روش های اتصال کد CSS

 

 

به طور کلی، زمانی که یک کد CSS توسط هر سه روش برای یک عنصر HTML نوشته می‌شه، اولویت اجرای اون‌ها به صورت زیر است:

 

  • استایل های درون خطی
  • شیوه نامه های داخلی
  • شیوه نامه های خارجی

 

پس دستورات CSS ای که به صورت درون خطی و تنها برای یک عنصر خاص نوشته می‌شه، باعث می‌شه دستورات CSS مربوط به اون عنصر که توسط روش اتصال داخلی که در تگ style نوشته شده و همچنین دستورات مربوطه در روش اتصال خارجی که با تگ link به صفحه فعلی متصل شده نادیده گرفته بشن.

 

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

 

تو این جلسه،‌ با CSS آشنا شدیم. فهمیدیم CSS چیه و چیکار می کنه،‌ و اینکه چطور می‌تونه به ما کمک کنه.

 

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

 

تو این جلسه،‌ با CSS آشنا شدیم. فهمیدیم CSS چیه و چیکار می کنه،‌ و اینکه چطور می‌تونه به ما کمک کنه.

 

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

 

پس با ما در ادامه این آموزش همراه باشین 🙂