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

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

4 دقیقه

زمان میبرد!

Css

زبان Css چیست؟

زبان نشانه‌گذاری CSS در حقیقت زبانی برای توصیف نحوه‌ی نمایش صفحات وب‌سایت است. اگر یک وب‌سایت را مانند یک ساختمان در نظر بگیریم HTML اسکلت‌بندی و ساختار کلی سایت محسوب شده و CSS نمای ساختمان، رنگ‌ها، کاغذ دیواری‌ها و تمام بخش‌های مربوط به دکوراسیون و زیباسازی ساختمان را شامل می‌شود. زبان‌هایی مانند ASP و PHP

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

انواع CSS ها

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

CSS های داخلی

CSS های داخلی، استایل هایی هستند که داخل خود صفحات وب (و نه در فایلی جداگانه) در میان کدهای HTML نوشته می شوند.

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

CSS های خارجی

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

CSS های درونی

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

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

هدف و کاربرد Css چیست ؟

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

برخی از کاربردهای آن عبارتند از:

  • تعیین ارتفاع و عرض
  • طراحی سایت رسپانسیو صفحات
  • انتخاب پس زمینه
  • انتخاب محل قرار گرفتن یک عنصر مانند متن یا عکس و…
  • تعیین چیدمان نوشته ها (چپ چین، راست چین و…)
  • مشخص کردن میزان فاصله ی عناصر از همدیگر
  • تغییر در نوع نوشتاری (فونت، رنگ و…)

در ادامه با ساختار کدهای CSS آشنا می شوید.

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

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

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

Selector

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

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

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

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

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

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

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

Css

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



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



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

مطالب مرتبط



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

محصولات جدید

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