به شرکت طراحی سایت WEBRGB خوش آمدید.
آماده پاسخگویی هستیم: 4334 451 0936

CSS چیست؟

ارسال شده توسط: در بخش : آموزش بهینه سازی سایت, آموزش طراحی و مدیریت سایت, بلاگ ۰۹ آبان ۱۳۹۱ دیدگاهها: ۵

CSS که یکی از بزرگترین پیشرفتها در صنعت طراحی وب محسوب می شود، مزایای بسیاری در طراحی وب بخصوص در بهبود سرعت لود سایت همچنین سئو دارد. CSS مخفف عبارت Cascading Style Sheets است که اولین ورژن آن در سال ۱۹۹۶ (CSS1) ساخته شد.

ورژن بعدی آن CSS2 می باشد که در سال ۱۹۹۸ ساخته شد که بیشتر برای ویرایش صفحات، نحوه نمایشها تگها و … کاربرد دارد. فایل استایلها با فرمت CSS ذخیره میشود. یکی از مهمترین کاربردهای css، جدا کردن ظاهر صفحات اعم از طرح بندی و رنگ بندی و… از محتوای صفحات مانند کد های HTML و … می باشد.

 

انواع استایلها:

 

۱. Inline Style:

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

<p style=”font-family: Tahoma”>This is a paragraph

</p>

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

 

۲. Embedded or Global Style:

در این نوع، استایل نوشته شده در تمامی صفحه تاثیر خواهد گذاشت، اینرا بین دو تگ (<head></head>) به صورت زیر به کار می برند:

<style type=”text/css”>

pp { color: red; text-align: left; font-size: 8pt }

</style>

 

در این حالت استایل تعریف شده بروی تمامی تگهای پاراگراف اعمال خواهد شد که رنگ متن: قرمز، جهت متن: چپ، و اندازه فونت ۸ پوینت خواهد بود. توجه داشته باشید در این مثال سه حالت مختلف یک استایل را برای تگ پاراگراف تعریف کردیم که با استفاده از (;) حالتهای مختلف آن از هم جدا شدند.

اگر بخواهید این حالت نوشته شده را برای چند تگ دیگر اعمال کنید می توانید تگها را بااستفاده از کاما (,) از هم جدا کنید برای مثال:

h1, h2, h3, h4 { color: gold; font-family: sans-serif }

 

۳. Linked or External style sheet:

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

<head><link rel=”stylesheet” type=”text/css” href=”mystyle.css”> </head>

 

در این نوع از استایلها بعد از اینکه فایل استایل خود را آماده کردید آنرا با فرمت CSS ذخیره کرده و آنرا همانند بالا، به قالب لینک می کنیم. برای راحت بودن در کار می توانید ابتدا استایلها را به صورت Internal استفاده کرده و بعد از اینکه کارتان تمام شد کدهای نوشته شده بین دو تگ (<style></style>) را در نت پد کپی کرده و آنرا با فرمت CSS دخیره نمایید و سپس با استفاده از فرمول بالا آن فایل را به قالب لینک دهید.

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

(منبع)

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

مطالب مرتبط

دیدگاهها: ۵

  1. ارسال شده توسط فرشاد ۱۲ آبان ۱۳۹۱ at ۱۰:۱۳ ب.ظ پاسخ

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

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • ارسال شده توسط مدیریت سایت ۱۳ آبان ۱۳۹۱ at ۱۲:۱۳ ق.ظ پاسخ

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

      موفق باشید

      VN:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)

نظر خود را با سایرین به اشتراک بگذارید!

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *