جستجو پیشرفته محصولات

آشنایی با برنامه نویسی

خواندن این مطلب

4 دقیقه

زمان میبرد!

Css

زبان Css چیست؟

هدف از تولید Css در واقع جداسازی اطلاعات محتوا (که توسط زبانی مانند HTML نوشته شده اند) از اطلاعات ظاهری مانند صفحه بندی، رنگ و سایز و نوع فونت می باشد. این جداسازی موجب افزایش سرعت در دسترسی به سایت، انعطاف پذیری بیشتر برای کنترل ویژگی های ظاهری، قابلیت طراحی چندین صفحه با یک فرمت یکسان و جلوگیری از پیچیدگی و انجام کارهای تکراری در طراحی وب سایت می گردد.

ساختار کدهای Css

ساختار یک کد از دو قسمت تشکیل شده است:

  • انتخاب کننده (Selector)
  • بلاک اعلان (Declaration)

Selector

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

انتخاب کننده عنصر:

با استفاده از این انتخاب کننده می‌توانید تگ خاصی را انتخاب و تغییرات استایل را بر روی آن اعمال کنید به طور مثال می‌توان تگ‌ <p> در یک صفحه وب را انتخاب کرد و رنگ آن را به قرمز تغییر داد.

انتخاب کننده id :

اگر بخواهید استایل‌های CSS بر روی گروهی از تگ‌ها تعریف شود، باید از انتخاب کننده ID استفاده کنید. برای این کار باید در کدهای HTML برای تگی که قصد تغییر استایل آن‌ را دارید یک ID تعریف کنید، سپس در بخش Css آی‌دی مورد نظر را انتخاب و تغیرات را بر روی آن اعمال می‌کنید.
دستورات فقط بر روی یک ID خاص که با با علامت # در ابتدای آن مشخص میشود اعمال می‌گردد.

انتخاب کننده Class :

برای این کار باید تمام تگ‌هایی را که قصد دارید ظاهر یکسانی داشته باشند را داخل یک کلاس تعریف کنید و همانند ID به بخش CSS رفته و استایل مد نظرتان را روی آن کلاس تعریف کنید. مد نظر داشته باشید صفت کلاس با “ . “ در ابتدای آن قابل تشخیص می‌باشد.

فایل css چیست؟

سی اس اس با ایجاد فایل css. همچنین شما را قادر می سازد تا نمایش صفحه مورد نظر خود را در چندین حالت مختلف Rendering مانند حالت نمایش بر روی مانیتور، حالت نمایش در زمان چاپ، در زمان حالت شناسایی صدا ( برای مرورگرهای مبتنی بر قابلیت شناسایی صدا) و همچنین برای نمایش در صفحات مرورگر موبایل را به درستی تنظیم نمایید.

اضافه کردن CSS به HTML

نحوه اتصال فایل css به فایلhtml به سه روش زیر انجام می‌شود:

  • External CSS
  • Internal CSS
  • Inline CSS

اولین نسخه از سی اس اس که توسط موسسه استاندارد سازی W3C نیز مورد تایید قرار گرفت، در دسامبر سال ۱۹۹۶ منتشر شد. این نسخه از سی اس اس از قابلیت های زیر پشتیبانی می کرد :

  •  امکان تنظیم نمودن مشخصه های فونت مانند قابلیت Fontface و Emphasis
  • امکان تغییر سایر مشخصه های متون، مانند تنظیم نمودن فاصله بین کلمات، حروف و سطرها.
  • هم تراز نمودن نوشته ها، تصاویر و جداول
  • قابلیت اضافه نمودن حاشیه، کادر و لایه بندی صفحات
  • امکان دسته بندی و نشانه گزاری مشخصه ها و امکانات وب سایت

قانون اولویت بندی استایل دهی در CSS

به بخش مهم آموزش CSS چیست و چه کاربردی دارد می‌رسیم. منظور از اولویت بندی استایل دهی چیست؟ اگر به خاطر داشته باشید در بالا گفتیم که سه روش برای استایل دهی در CSS وجود دارد. حال سوال اینجاست: مثلاً اگر برای استایل دهی به یک پاراگراف همزمان از هر سه روش استفاده کنیم چه اتفاقی خواهد افتاد؟

اولویت استایل دهی به ترتیب زیر است :

  • استایل دهی خطی
  • استایل دهی داخلی
  • استایل دهی خارجی

قانون اولویت بندی سلکتورها در CSS

همانطور که استایل دهی قانون خود را دارد، سلکتورها نیز قانون اولویت بندی دارند. کلمه CSS مخفف Cascading Style Sheets به معنای صفحات استایل آبشاری می‌باشد. حال که نحوه نوشتن استایل را یاد گرفتیم می‌توانیم بگوییم که اگر دو استایل مشترک در یک صفحه وجود داشته باشد، اولویت با آن استایلی خواهد بود که در پایین ترین سطر از کدها نوشته باشد. زیرا استایل ها به ترتیب از بالا به پایین اجرا و بر روی عنصر ها اعمال می‌شوند.

حال می‌خواهیم یک سوال از شما بپرسیم : اگر چند استایل متفاوت و از چند سلکتور مختلف بر روی یک عنصر یا تگ در HTML اعمال شود اولویت با اجرای کدام استایل خواهد بود؟

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

به طور کلی اولویت ها را می‌توان در چهار رده اولویت بندی کرد که به ترتیب زیر می‌باشد :

  • استایل خطی یا Inline
  • آیدی (ID)
  • کلاس (Class)
  • سلکتور تگ یا Element

Css

درباره نویسنده



نظرات کاربران



دیدگاهتان را بنویسید

مطالب مرتبط



جستجو کنید ...

محصولات جدید

دوره مقدماتی تا پیشرفته CSS
تومان
190,000
دوره مقدماتی جاوا اسکریپت
تومان
199,000
دوره مقدماتی تا پیشرفته HTML
رایــگان