CSS چيست ؟

 

استايل (CSS) چيست؟


- CSS مخفف کلمه Cascading Style Sheets ميباشند.


- اولين ورژن استايلها در سال ۱۹۹۶ ساخته شد. که اولين ورژن آن CSS1 بود.


- ديگر وژن آن CSS2 مي باشد که در سال ۱۹۹۸ ساخته شد که بيشتر براي ويرايش صفحات، نحوه نمايشها تگها و ... کاربرد دارد.

 

 

 

 در سال هاي اوليه ايجاد شدن وب (سال هاي 89 و 90) هيچ کس تصور نمي کرد که اينترنت اينقدر گسترده شود. در اوايل صفحات وب صفحاتي کاملا ساده و عاري از هر گونه تصوير بود. با ورود اولين مرورگر بصري (مرورگر موزائيک) چهره وب تغيير کرد و با همه گير شدن اينترنت ، افراد به داشتن سايت علاقه نشان دادند و سعي کردند صفحات خود را به شکلي طراحي کنند که از صفحات ديگران متمايز باشد و از آنجايي که در HTML ، تگ ها زيادي براي صفحه آرايي متن و صفحه وجود نداشت، کاربران به سوء استفاده از دستورات HTML روي آوردند و از تگ هاي HTML در مکان غير تخصصي استفاده کردند. نتيجه آن شد که صفحات وب بسيار حجيم شدند و ساختار منطقي که در اوايل براي HTML در نظر گرفته شده بود، معناي خود را از دست بدهد. در ارائه CSS در سال 1996 و ارائه نسخه دوم CSS در سال 1998 ، دنياي جديدي به روي طراحان وب باز شد. حالا طراحان مي توانند با کمک CSS صفحاتي به مراتب سبکتر و از نظر بصري، صفحاتي جذاب تر را ايجاد کنند.


صفحاتي که با CSS طراحي شده است

1- حجم بسيار کمتري دارند
2- ساختار کاملا منطقي و ساخت يافته اي دارند
3- موتور هاي جستجو اين صفحات را بهتر index مي کنند
4- ويرايش قالب هاي CSS و ايجاد تغيير در آن ها بسيار ساده است.

 

     مي‌توان گفت که امروزه CSS طراحي صفحات وب را در جهان متحول کرده است. اين فناوري به طراحان وب کمک مي‌کند که طراحي‌هاي خود را با بالاترين کيفيت و کاربرپسندترين شکل ارائه کنند. پيش از اين، انجام اين کار تنها با فايل‌هاي سنگين گرافيکي قابل انجام بود.


     به جرات مي‌توان گفت که اگر شما بدانيد که با CSS چه کارهايي مي‌توانيد بکنيد، قطعا از آن استفاده خواهيد نمود. امروزه اکثر قريب به اتفاق سايت‌هاي حرفه‌اي از CSS بهره مي‌برند. بنابراين براي يک طراح صفحات وب يادگيري اين زبان بسيار مهم خواهد بود.


     بسياري از طراحان وب در زمينه‌اي که در آن به فعاليت مشغول هستند (يعني طراحي) از اطلاعات ريشه‌اي و پايه‌اي برخوردار نيستند. اکثر آنها با خواندن يک کتاب در مورد HTML و يا JavaScript چيزهايي در مورد اين زبان‌ها مي‌دانند. همچنين بسياري از آنها به نرم‌افزارهايي مانند Photoshop و Flash مسلط هستند. اما تعداد بسيار کمي هستند که تحصيلات دانشگاهي در اين زمينه‌ها دارند. اما CSS براي هر دو گروه (چه آنهايي که تجربي و يا با خواندن يک کتاب طراحي را بلدند و چه آنهايي که به طور پايه‌اي به اين زبان‌ها مسلط هستند) مفيد و شايد لازم است.


اما به راستي با CSS چه کاري مي‌شود کرد؟ به طور خلاصه مي‌توان گفت مهم‌ترين کار آن، راحت‌کردن شما از يک سري کد است که علاوه بر خسته‌کردن شما، باعث پايين‌آمدن سرعت لود صفحات شما مي‌شوند. CSS دست طراحان را به قدري باز گذاشته است که قطعا کسي با بهره‌گيري از CSS تمايلي به استفاده از جداول نخواهد داشت.

CSS زماني کاربرد خود را نشان مي‌دهد که شما صفحه‌اي با حجم نسبتا زيادي از متن و عکس داريد (مانند يک وبلاگ) و نياز است که صفحه زود لود شود. اگر شما از جداول استفاده کنيد، بيننده بايد منتظر شود تا زماني که کل جدول لود شده و به نمايش درآيد. اما با استفاده از CSS، هرچقدر اطلاعات لود شده باشد، در همان لحظه بر روي مانيتور بيننده درج خواهد شد.

 


     اما چرا CSS مانع از خستگي شما در کدنويسي مي‌شود؟ شما با CSS مي‌توانيد ويژگي‌هاي يک بخش را فقط يک‌بار تعريف کنيد و ديگر مجبور نباشيد اين کار را تکرار کنيد. مثلا شما دوست داريد که متون داخل کادري که در همه‌ي صفحات سايتتان وجود دارد، به رنگ قرمز باشد. براي اين کار بدون CSS شما لازم است هربار تگ font را نوشته و ويژگي color را ذکر کنيد. اما با CSS آن‌طور که بعدا خواهيد آموخت، تنها لازم است يک‌بار اين کار را انجام دهيد.

      يادگيري CSS همانند HTML است؛ اما بايد بدانيد که براي يادگيري CSS لازم است که شما HTML را بلد باشيد.

CSS1 تعيين اولين شيوه نامه ، بيش از 50 خاصيت را تعريف مي كند ، و CSS2 بيش از 50 خاصيت ديگر را . CSS2 تسهيلات تغيير مكان كه CSS-P ناميده مي شود را به وجود آورده است . نگارش جديد كه CSS3 نام دارد قصد دارد امكانات ارائه بيشتري را به وجود آورد ، و با فناوري هاي ديگر ، نطير اسكريپت و گرافيك هاي برداري ، بيشتر يكپارچه شود .

 

تعيين الگو و style

هر style بايد براي يک تگ خاص تعريف شود . به محتواي داخل تگي که ميخواهيم يک style نسبت دهيم selector يا انتخاب کننده ميگويند که الگوي تعريف شده در تگ آغاز کننده يک عنصر تا تگ پايان دهنده آن تاثير خواهد داشت.

selector {property: value}


براي تعيين و تعريف يک الگو ابتدا بايد selector را مشخص و بنويسيم مانند h1 سپس خصوصيات(property) و مقادير(value) آنها را بين دو علامت { } بگذاريم که طرز نوشتن خصوصيت و مقدار آن بين { } به اين ترتيب ميباشد:
ابتدا خصوصيت را نوشته سپس علامت : ميگذاريم و بعد مقدار مشخصه آنرا مينويسيم ،

h1 { color:green}

اگر بخواهيم چند خصوصيت را به يک selector نسبت دهيم ، بعد از هر کدام يک ; ميگذاريم.

{h1 { color:green; text-align:center

تعريف الگو از طريق class

بدين ترتيب که بلافاصله بعد از selector يک نقطه ميگذاريد و اسمي(class name) را مينويسيد. پس از اين کار در هر تگي که نياز به آن الگو هست خصوصيت class=”class name “ را مينويسيم و برابر با آن اسم قرار ميدهيم،





……..


 

 

انواع گزينشگر!


گزينشگر هاي کلاس کاذب(Pseudo-Class Selectors) 


برچسب a  در HTML نسبت به بقيه از تنوع بيشتري برخوردار است . با تعيين خصوصيات  Link , Vlivk , Alink  در body  مي توانيد رنگ لينک هاي خود را تغيير دهيد

.

 

مثال :

کد:

a:link { color : #0000ff; }
a:visited  { color : #FF00FF; }
a:hover { color : #00ccff;}
a:active { color : #FF0000; }


گزينشگر هاي کلاس (Class Selectors)


اختصاص دادن سبک ها به برچسب هاي HTML  بسيار خوب است ولي چه اتفاقي خواهد افتاد اگر شما بخواهيد سبک ديگري را به دو برچسب همسان اختصاص دهيد ؟ در اين زمان برچسب هاي css   وارد عمل مي شوند .


مثال : اين تعريف سبک باعث مي شود که تمامي متون پاراگراف هاي داخلي سند به رنگ آبي نمايش يابد :

کد:

P {  color : #0000ff; }

حال اگر شما بخاهيد سطري را به رنگي متمايز نمايش دهيد بايد به آن يک کلاس اختصاص دهيد.

.
براي مثال کلاس slidebar  را اختصاص مي دهيم.در هنگام تعريف يک کلاس ابتدا يک " . " نقطه مي گذاريم و بعد نام کلا س را مي نويسيم.

کد:

P { color : # 0000ff; }
.slidebar  { color : #ffffff; }

 

نحوه استفاده در برچسب HTML  :

کد:

Mambo Is The Best CMS


گزينشگر هاي مفهومي (Contextual Selectors)


اگر بخوايد لينک هاي ستون کانري سايت شما که در کلاس  slidebar  قرار ميگيرند به رنگ متمايز از متن نمايش داده شوند بايد از گزينشگرهاي مفهومي استفاده نماييم .
مثال :

کد:

P { color : #0000ff; }
.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; }

انواع استايلها(Style):

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

 

HTML Code:

 

<tag style="Style Declarations">

 

Example:

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

 

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



۲. Embedded or Global Style: در اين نوع، استايل نوشته شده در تمامي صفحه تاثير خواهد گذاشت.style را ميتوانيم در تگ (<head>head>)  و بين  تگهاي بنويسيم .که به صورت زير نوشته خواهد شد .


HTML Code:

<style>

style>

 

Example:

<head>

<style type="text/css">

style>

head>

 

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


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

HTML Code:

 

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

 

۳. Linked or External style sheet: ارزش واقعي style sheet زماني به چشم ميايد که يکبار آنرا تعريف کنيد و در تمام صفحات از آن بهره ببريد. ، بدين ترتيب که style ها را در برنامه ويرايشگر متن مانند notepad مينويسيد و سپس آن فايل را با پسوند .css ذخيره کرده و در دايرکتوري اصلي  وب سايتتان قرار ميدهيد. css مخفف Cascading Style Sheet است.

 

نکته: دراين روش نيازي به نوشتن تگهاي  نيست و فقط selector ها و خصوصيات را مينويسيد. در صورت رعايت نکردن اين موضوع الگوهاي تعريف شده در آن فايل در صفحات اعمال نخواهند شد.

 

پس از ذخيره فايل style sheet  ميتوانيد براي هر صفحه که ميخواهيد آنرا فراخواني کنيد، براي انجام اين عمل بايد تگ را در قسمت head قرار دهيد و سه خصوصيت مربوط به آنرا وارد کنيد. خصوصيت rel=” “ است که برابر با کلمه stylesheet قرار ميدهيد و سپس type=” " وبا text/css مقداردهي ميشود و در آخر با خصوصيت href=” “ فايل را آدرس دهي ميکنيد.

آدرس فايل “>

اين تگ نيازي به پايان دهنده ندارد

 

<link href="url" rel="relation type" type="link type">

 

Example:

<head>

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

head>

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

 
يکي از مزيتهاي اين نوع استايل اين ميباشد که مي توانيد با داشتن يک فايل استايل براي چندين صفحه استفاده کنيد و از ديگر مزيت هاي آن با اين کار کدهاي قالب را به چند فايل تقسيم کرده و قالب را منظم تر ميشود.

 

 

 

 

اغلب افراد برخي از اين مختصر نويسي ها را مي دانند اما عده کثيري از آن ناآگاهند. با اين راهکار، چندين مشخصه در يک خط خلاصه مي شود. بنابراين نه تنها مختصر نويسي صفت ها و عناصر CSS، موجب کاهش حجم فايل و بارگذاري زودتر آن مي شود، بلکه تا حد قابل ملاحظه ايي از شلوغي و نامرتبي فايل مي کاهد.چندين ويژگي براي مختصر نويسي موجود است. براي جزئيات بيشتر پيشنهاد مي کنم مشخصات W3C CSS را مطالعه کنيد.

 

در اولين مبحث به رنگ ها مي پردازيم. بهترين روش عمومي براي کاربرد رنگ در CSS استفاده از آن در مبناي شانزده (هگزادسيمال) بين 00 تا FF است، که قبل از آن نيز علامت پوند (#) مي آيد. هر رنگ 6 رقم طول دارد، دو رقم براي هر بايت.


دو رقم اول براي درجه رنگ قرمز، دو رقم دوم درجه رنگ سبز و و دو رقم آخر شدت رنگ آبي را نشان مي دهد. نکته اي که بيشتر افراد نمي دانند اين است که هر رنگ مبناي 16 از سه جفت تشکيل شده است، شما مي توانيد يک رقم از هر جفت رنگ امن را حذف کنيد. براي مثال مقدار 336699 با 369 برابر خواهد شد.


همان گونه که مي دانيد تنظيم يک رنگ امن به سادگي با انتخاب ترکيبي از مقدارهاي امن مبناي 16 انجام مي شود. در اين حالت FF9966 يک رنگ امن مبناي 16 است اما DB9370 اين چنين نيست، خوشبختانه اکثر ابزارهاي طراحي وب نظير dreamweaver ماکرومديا داراي سلکتور رنگ هاي امن هستند.

اگربخواهيم عرض و سبک و رنگ را به صورت تک تک به يک آبجکت نسبت دهيم بايد از فرمي مشابه زير استفاده کنيم:

Code:

border-width:1px;

border-style:solid;

border-color:#000;


در حالي که صفت border به طور مختصر مي تواند به شيوه زير به کار رود. فکر کنم تا اينجا متوجه شده باشيد که تا چه اندازه، مختصر نويسي مي تواند در کاهش کدها و مهمتر از آن کاهش سايز فايل موثر باشد.

 

يکي ديگر از مواردي که مي توانيد مختصر نويسي را در آن بکار بريد، پس زمينه يا به عبارتي همان background است.

بجاي آنکه از صفات تکي background-color براي رنگ پس زمينه، background-image براي تصوير پس زمينه، background-repeat براي تعيين اينکه آيا پس زمينه تکرار شود يا خير و چگونه تکرار شود، background-attachment براي تعيين اينکه آيا تصوير پس زمينه در طول سند حرکت کند يا در مکاني ثابت باشد و background-position براي اينکه وقتي تصوير پس زمينه اي تعيين شده باشد، اين صفت محل اوليه را نسبت به کادري که محتويات مولفه را در برگرفته است مشخص مي کند، استفاده کنيم، مي توانيم تمام اين صفات را به طور مختصر در صفت background بگنجانيم.

براي مثال مورد زير را در نظر بگيريد

Code:

background-color:#f00;

background-image:url(bg.gif);

background-repeat:no-repeat;

background-attachment:fixed;

background-position:0 0;
حال مي توان تمام صفت هاي فوق را به طور خلاصه و جمع و جور به شکل زير به کار برد.

Code:

background:#f00 url(bg.gif) no-repeat fixed 0 0;

اين صفات تنها جزئي از اختصارات بود. موارد ديگري براي صفت هايي همچون font، list و outline موجود است که در حوصله اين مقاله نمي گنجد.