loading...
وبكــا | وبسايت دانشجويان عمران و معماري
آخرین ارسال های انجمن
حسین سلامیان بازدید : 728 سه شنبه 07 خرداد 1392 نظرات (0)

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

 

 

CSS چیست؟

CSS یا Cascade Style Sheets زبان برنامه نویسی وب می باشد که کنسرسیوم بین المللی شبکه جهانی وب یا W3C برای غلبه بر مشکلاتی که در طی زمان با استفاده از زبان HTML بوجود آمده است پیشنهاد داده است. عملا این زبان برنامه نویسی، مکملی بر زبان قدیمی HTML است و سعی در پر کردن نقاط ضعف آن دارد.

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

برای این منظور مثالی را می زنیم. تصور کنید که سایت شما شامل 100 صفحه می باشد و شما آنها را تماما به زبان HTML نوشته اید. بعد از یک هفته تصمیم گرفته اید تا فونت تمام کلمات را کمی بزرگتر کنید. گفتن اینکه فونت تمام کلمات بزرگتر شود بسیار کار راحتی است و تنها یک جمله است. ولی آیا در عمل تغییر 100 صفحه نیز به همان راحتی خواهد بود؟

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

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

آشنایی بیشتر با CSS


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

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

  1. <p style="font-family: Tahoma;">This is a paragraph  
  2. <p>  

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

۲. Embedded or Global Style:
در این نوع، استایل نوشته شده در تمامی صفحه تاثیر خواهد گذاشت.

 
  1. <style type="text/css">  
  2. pp { color: red; text-align: left; font-size: 8pt }  
  3. <style>  

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

 
  1. h1, h2, h3, h4 { color: gold; font-familysans-serif }  

۳. Linked or External style sheet:
نوع آخر هم معروف به استایلهای خارجی هستند که به صورت لینک فایل استایل را به صفحات خود لینک میدهید. فایلهای استایل با فرمت CSS ذخیره میشوند و به صورت زیر به صفحات لینک داده میشود.

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

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

 

منبع :‌http://webyar.rozblog.com

مطالب مرتبط
ارسال نظر برای این مطلب

کد امنیتی رفرش
درباره ما
Profile Pic
استفاده از مطالب سایت با ذكر منبع بلامانع مي باشد.
اطلاعات کاربری
  • فراموشی رمز عبور؟
  • نظرسنجی
    از کدام بخش سایت بیشتر خوشتون میاد ؟؟
    آمار سایت
  • کل مطالب : 853
  • کل نظرات : 225
  • افراد آنلاین : 3
  • تعداد اعضا : 3727
  • آی پی امروز : 140
  • آی پی دیروز : 334
  • بازدید امروز : 186
  • باردید دیروز : 1,089
  • گوگل امروز : 0
  • گوگل دیروز : 5
  • بازدید هفته : 2,414
  • بازدید ماه : 2,414
  • بازدید سال : 130,729
  • بازدید کلی : 2,179,233
  • ارسال مطلب برای وبکـا
    شما نيز نويسنده سايت ما باشيد

    http://www.pwut.ac.ir/_layouts/1065/images/new.gifشما هم جزء کساني‌ باشيد که مي‌خواهيد مطلب خود را منتشر کنيد با ارسال مطلب خود ميتوانيد يکي‌ از ارسال کنندگان سايت باشيد تنها با فشار دادن ارسال مطلب شما هدايت ميشويد به بخش ارسال‌ها و مطلب خود را ثبت کنيد .

    ابتدا در سايت عضو شده تا پنل کاربري براي ارسال مطلب براي شما ايجاد گردد.

    ارسال