css - پشتیبانی البرزنیک


		07 Sep 2010

مرکز پشتیبانی البرزنیک » مرکز اطلاعات » css

	css

راه حل تاریخچه آغاز css:
در آغاز فراگیر شدن وب (سال های ۹۰ تا ۹۳) زبان HTML زبان ساده ای بود که با هدف ساخت مطالب به صورت منظم در صفحات وب استفاده میشد. در html دستوراتی برای , لینک , لیست , پاراگراف و … وجود داشت که به نظر کافی به نظر میرسید.
با ارایه مرورگر mosaic (اولین مرورگری که قادر به نمایش تصویر بود) همه چیز تغییر کرد و با ورود تصاویر به صفحات وب در اینترنت تحولی ایجاد شد. کم کم تعداد وب سایت ها زیاد شد و تمام وب ها با دستورات ساده ای مانند برای نمایش دادن متن به شکل پر رنگ یا برای نمایش مایل متن به html اضافه شد. اما این دستورات و امکانات برای طراحان کافی نبود! طراحان برای ساخت صفحات خود از دستورهایی مانند و سواستفاده میکردنند مثلا دستور table برای وارد کردن جداول بود اما طراحان تمام مطالب خود را برای سبک دهی در این دستور می نوشتند.
استفاده از این بر چسب ها و دستور ها مشکلات زیادی را برای طراحان ایجاد میکرد و ساده نبود. مشکلات زیادی وجود داشت از جمله مشکلات جستجوی نامناسب برای موتورهای جستجو بود.
در نهایت این مشکلات از نظر کنسرسیوم جهانی وب w3c مخفی نماند و سازمان را به فکر ساخت استاندارد جدید انداخت. در نهایت در سال ۱۹۹۵ این سازمان استاندارد CSS را معرفی کرد و در سال ۱۹۹۶ این استاندارد به تمام طراحان وب توصیه شد و در سال ۱۹۹۸ نسخه دوم این استاندارد نیز منتشر شد.
امروزه css در میان طراحان وب از محبوبیت زیادی برخوردار است و روز به روز سایت هایی که با استفاده از css ساخته شده اند بیشتر میشود. اولین سایتی که طراحی قدیمی را کنار گذاشت و از css استفاده وب سایت ورزشی ESPN بود که در حال حاضر روزانه بیش از ۱۰ میلیون بازدید کننده دارد ,البته سایت های بسیار دیگری قدم به سوی css برداشتند از جمله معروفترین سایت بازی gamespot و همچنین download.com و … که طراحی خود را با استفاده از css تغییر دادند.

حال css چیست؟
CSS مخفف Cascading Style Sheets می باشد و زبانی است برای مشخص کردن ویژگیهای ظاهری یک وب سایت.
css در حقیقت فهرستی است در قالب متن که میتوان مجموعه دستورات آن را داخل یک سند متنی نوشت و آن را با پسوند css. ذخیره کرد و با استفاده از دستوری که در پایین نوشته شده است به فایل html متصل نمود:

در کد بالا یک فایل خارجی css به نام style به فایل html ما متصل شده است. شما باید این دستور را در فایل html خود در میان برچسب قرار دهید. به طور مثال دستور زیر که در فایل css باید نوشته شود رنگ سفید را برای صفحه html شما مشخص میکند.
body {background: #FFFFFF;}
به طور خلاصه میتوان گفت css مجموعه دستوراتی است که در فایلی با پسوند css. نوشته میشود و صفحه وب سایت شما را به صورت دقیق و منظم پیکربندی میکند. در مطالب بعدی به دستورات مختلف و آموزش نوشتن css و ترفندهای آن میپردازیم.
چگونه css بنویسیم ؟
هر سبک css دارای دو بخش است . بخش اول نام گزینشگر ها ( selectors) که همان برچسب هایی هستند که سبک مورد نضر شما باید به آنها اعمال شود .
مثال :
کد:
h1 { color : red; }
در این دستور،h1 گزینشگر است که سبک ما به آنها اعمال میشود .
بخش دوم خصوصیات (properties) که مشخص می کند که چه سبکی باید به برچسب انتخاب شده اعمال گردد .
مثال :
کد:
h1 { color : red;}
در این دستور red همان خصوصیات است که به سبک اعمال شده بر color داده
میشود.
انواع گزینشگر :
گزینشگر های کلاس کاذب(Pseudo-Class Selectors) :
برچسب a در HTML نسبت به بقیه از تنوع بیشتری برخوردار است . با تعیین خصوصیات Link , Vlivk , Alink در body می توانید رنگ لینک های خود را تغییر دهید .
مثال :
کد:
a:link { color : #000ff; }
a:visited { color : #FF00FF; }
a:hover { color : #0ccff;}
a:active { color : #FF0000; }

گزینشگرهای کلاس(Class Selectors):
اختصاص دادن سبک ها به برچسب های HTML بسیار خوب است ولی چه اتفاقی خواهد افتاد اگر شما بخواهید سبک دیگری را به دو برچسب همسان اختصاص دهید ؟ در این زمان برچسب های css وارد عمل می شوند
مثال : این تعریف سبک باعث می شود که تمامی متون پاراگراف های داخلی سند به رنگ آبی نمایش یابد :

کد:
P { color : #000ff; }
حال اگر شما بخاهید سطری را به رنگی متمایز نمایش دهید باید به آن یک کلاس اختصاص دهید .
برای مثال کلاس slidebar را اختصاص می دهیم.
کد:
P { color : # 0000ff; }
.slidebar { color : #ffffff; }

نحوه استفاده در برچسب HTML :
کد:
Mambo Is The Best CMS

گزینشگر های مفهومی: (Contextual Selectors)
اگر بخواید لینک های ستون کانری سایت شما که در کلاس slidebar قرار میگیرند به رنگ متمایز از متن نمایش داده شوند باید از گزینشگرهای مفهومی استفاده نماییم .
مثال :
کد:
P { color : #000ff; }
.slidebar { color : #ffffff; }
p.slidebar a:link, p.slidebar a:visited
{color: #ffffff; }
نحوه ی استفاده در برچسب HTML :
کد:
Mambo Is The Best CMS ,Download Here

گزینشگر های خصوصی(ID Selectors) :
همانند گزینشگر های کلاسو گزینشگرهای خصوصی برای انتخاب یک برچسب خاص به کار می رود یا ترجیحا برای انتخاب گروهی از برچسب ها از آنها استفاده می شود . برچسب هایی که به آنها یک گزینشگر خصوصی اختصاص داده شده است ، با ویژگی ID خود مشخص می شوند .
کد:
Mambo Is The Best CMS

یک گزینشگر خصوصی به دلیل دارا بودن علامت # در آغاز ، به راحتی قابل داخل کد css قابل شناسایی است.
مثال :
کد:
#slidebar1 { color : #ffffff; }

Web چیست؟
تعریف روشنی از "وب 2" وجود ندارد. اجازه دهید آنرا با طرح چند مثال و مقایسه، بیشتر بشکافیم. در "وب 1" سایتهایی توسط گروه کوچکی از تولید کنندگان محتوا برای خوانندگان بسیار راه اندازی شد. خوانندگان اگر درباره ویندور اطلاعات می خواستند به سایت مایکروسافت مراجعه می کردند، اگر خبر می خواستند به CNN سر می زدند و مواردی از این قبیل.
به مرور زمان خوانندگان علاوه بر خواندن شروع به نوشتن کردند. مسیر وب به گونه ای شد که اشخاص تمایل بیشتری برای انتشار محتوا در وب پیدا کردند. آنها نظرات شخصی خود را منتشر کردند، از تجربیاتشان نوشتند، تحلیل کردند و همینطور آموزش دادند. در نتیجه ناگهان اطلاعات بسیاری در وب منتشر شد. بدین ترتیب پیگیری همه اطلاعات و مراجعه به همه سایتها و حتی سایتهای مورد علاقه برای خوانندگان غیر ممکن شد.
آیا می توان پذیرفت که اطلاعات مهم به دلیل کثرت سایتها و کمبود زمان از دسترسی کاربران دور بماند؟ روشن است که پاسخ "خیر" می باشد. با طرح سوالات بسیار دیگری از این دست، کم کم نیاز به تغییر در "وب 1" احساس شد.
به "وب 2" خوش آمدید!
رویکرد جدید وب اینگونه است: اطلاعات به واحدهای کوچکتری از "محتوا" خرد می شود و بوسیله سایتهای بسیاری توزیع می گردد. وب جدبد "دنیای اسناد" نیست بلکه "دنیای داده" است. ما دیگر به دنبال منابع قدیمی اطلاعات نیستیم بلکه به دنبال ابزاری هستیم که واحدهای کوچک اطلاعات را به روشهای تازه و موثر جمع آوری و تلفیق کند و در اختیارمان قرار دهد.
یک راه بسیار عالی برای درک بهتر "وب 2" بررسی ابزارهایی نظیر Google Earth, Google Maps, Microsoft Virtual Earth می باشد. به کمک این ابزار می توان کارتوگرافی، عکسبرداری ماهواره ای و جستجو در اینترنت را همزمان برای پاسخ دادن به پرسش "کجا؟" به خدمت گرفت.
Google Earth اطلاعات هر مکان را از منابع مختلف جمع آوری می کند و با توجه به شرایطی که کاربر مشخص می کند، نمایش می دهد.
Flicker را که سایتی معتبر برای مدیریت و به اشتراک گذاشتن عکس می باشد بررسی می کنیم. کاربران عکسهای خود را به کمک آن منتشر می کنند، سایز آن را تغییر می دهند، دسترسی به آن را مشخص می کنند، برای عکسهای خود و دیگران Tag (شناسه) تعریف می کنند. بدین ترتیب همه عکسها توسط خود کاربران دسته بندی و قابل جسجو می شوند.
درک بهتر "وب 2" با انجام چند مقایسه:
Web 1.0 <--> Web 2.0
mp3.com <--> Napster
Britannica Online <--> Wikipedia
personal websites <--> blogging
domain name speculation <--> search engine optimization
publishing <--> participation
directories taxonomy) <-->( tagging ("folksonomy")
با انجام مقایسه های مذکور به خوبی رویکردها را در "وب 1" و "وب 2" نمایان می سازد. ویکی پدیا و بریتانیکا را مقایسه کنید: محتوای بریتانیکا را ویراستاران تهیه می کنند و کاربران تنها از آن استفاده می کنند اما تقریبا تمام محتوای ویکی پدیا را کاربران آن توسعه می دهند در حالیکه هر کاربر می تواند هر مطلبی را ویراش کند. هر داوطلب می تواند مقالات آنرا به سبک ویکی اضافه و ویرایش کند. این بدین معناست که دیگری نیز می تواند همان مقاله را ویرایش کند. مقایسه این دو سایت با هم به خوبی تمایز publishing و participation را نیز می رساند.
"وب 2" را یک رویکرد نو می دانند نه یک تکنولوژی تازه. خمیرمایه "وب 2" مشارکت با دیگران برای انجام دادن چیزهایی است که به تنهایی امکان انجام دادن آنها را نداریم. واقعا چه لذت بخش است که آدرس سایتهایی که آنها را دوست داریم، کلماتی که جستجو کرده ایم را با دیگران به اشتراک بگذاریم.
اگر هنوز هم "وب 2" برایتان مفهوم نیست، باید بگویم که وبلاگ و RSS هم جزو ابزار "وب 2" قلمداد می شوند. با در اختیار گذاردن RSS و یا XML یک سایت، داده های آن هم در سایتهای دیگر قابل استفاده است و هم با ابزار دیگر.
آیا برای خواندن مطالب یک سایت باید حتما از یک مرورگر استفاده کنیم؟ خیر. می توانیم به کمک RSS سایت مدنظر و نصب ابزار لازم حتی بدون مرورگرها محتوای مورد علاقه مان را پیگیری کنیم. من این کار را کرده ام و از آن لذت می برم. هر روز صبح در حالیکه مشغول خواندن و پاسخ دادن به ایمیلها هستم، در پشت صحنه intraVnews عزیز مشغول جمع آوری اطلاعات از منابعی است که دوست دارم. جالب نیست؟
همینطور می توانید صفحه گوگل را متناسب با سلیقه خود شخصی سازی کنید و RSS های مختلف را به آن معرفی نمایید. در این صورت نیازی به نصب برنامه خاصی ندارید و در هر جا که باشید به منابع اطلاعی مورد علاقه خود تنها از طریق صفحه گوگل دسترسی خواهید داشت! باور کنید وب جذاب تر شده است. شاید همین قابلیتهای ساده باعث شده است که جمع آوری اخبار 15 برابر بیشتر از خواندن وبلاگها طرفدار داشته باشد (قابل توجه طرفدار متعصب وبلاگها!)
"وب 2" آثار متفاوتی دارد. بر روی رفتارهای اجتماعی، فرهنگی و حتی سیاسی کاربران خود تاثیر می گذارد. یکی از گروههایی که بیشترین تاثیر را می پذیرد، طراحان و توسعه دهندگان وب هستند. درست است که مهارتهای فنی آنها تغییر می یابد اما تغییر اصلی آنجاست که آنها باید محتوا را به صورتی منتشر کنند که بخشی از کل باشد به گونه ای که در کل وب قابل استفاده باشد نه یک جزیره دور افتاده.
تا دسترسی کامل به "وب 2" راه بسیاری وجود دارد. "وب 2" حتی مخالفانی دارد. زمانی Tim Bray مدیر تکنولوژیهای وب شرکت سان برداشت منفی خود را از آن ابراز داشت که البته زمینه ساز بحثهای بسیاری نیز شد.
اما وقتی سایتی مانند 43things.com اینهمه طرفدار دارد، مایکروسافت live.com را برای حفظ انحصارش راه اندازی می کند و یاهو del.icio.us را خریداری می کند، نمی توانیم "وب 2" را ساده بگیریم. به هر حال "وب 2" در راه است.

جزئیات مقاله

شماره مقاله: 12

ایجاد شده در: 30 Nov 2008 12:23 PM

این پاسخ مفید بود این پاسخ مفید نبود

نظرات کاربران افزودن توضیحات

کاربران گرامی ! با افزودن نظرات و توضیحات خود راجع به این خبر، ما را در بهبود فعالیت های سایت و شرکت یاری نمایید . نظرات و توضیحات شما توسط تیم فنی ما خوانده و از راهنمایی هایتان استفاده میگردد. به خاطر داشته باشید که به سوالات شما در این بخش پاسخ داده نمیشود و برای ارسال سوالات حتما باید به بخش ارسال درخواست مراجعه نمایید.

نام کامل:
پست الکترونیکی : (دلخواه)

توضیح: