تبلیغات
دنیای تجارت الکترونیک - آموزش مختصر استایل (CSS)
آموزش مختصر استایل (CSS)

به كمك استایل های css به راحتی می توان به سادگی  شكل و قالب كل سایت را مدیریت كرد و تغییر داد .

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

چرا باید بجای جدول از کد CSS استفاده کرد ؟

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

طریقه نوشتن CSS در روش داخلی و خارجی

طریقه نوشتن CSS در روش داخلی و خارجی به یکی از صورتهای عمومی زیر است:
فعلا فرض را بر این می‌گذاریم که or همان تگ HTML است.

 


نکات مورد توجه:

- خصوصیات هر تگ بایستی بین دو علامت {} قرار داده شوند. در ضمن بین هر خصوصیت و مقدار مربوطه به آن علامت ( : ) قرار داده می‌شود.
- می‌توان چند خصوصیت از یک تگ را به یکباره تعریف نمود. در این حالت خصوصیات مختلف را با علامت ( ; ) از هم جدا می‌کنند.
- میتوان خصوصیات چندین تگ را به یکباره تعریف نمود. البته می بایستی هر کدام از تگها را با علامت (, ) از هم جدا نمود.

به عنوان مثال:

 


رنگ فونت هر سه تگ را قرمز می‌کند.

- از آنجا که تمام عناصر موجود در CSS توسط Browser ها شناخته نمی‌شود بهتر است محتویات داخل تگ < style > را بین دو علامت  قرار داده تا مشخصه ‌های تگ در Browserهایی كه این عناصر را نمی‌شناسند به صورت اشتباه نشان داده نشوند.

 

در این مقاله شما یاد میگیرید چگونه بجای جداول از CSS وکلاس های آن استفاده کنید و ظاهر یك صفحه را با استایل كنترل كنید.

ساخت کلاسی برای عناصر تگ

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

div.leftnav{

 

background: white;

 

color: black;

 

/* other display information here */

 

/* add Positioning information here */

 

}

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

موقعیت یابی وابسته ساده :

این بدین معناست که ما فقط هر عنصر را در موقعیتش قرار میدهیم و بدین تعریف کردن جای دقیق آن در صفحه .

div.leftnav{

 

background: white;

 

color: black;

 

/* Other display information here */

 

width: 15%;

 

}

خوب . ما چه انجام دادیم ؟ ما گفتیم که هدایتگر چپ باید در سمت چپ باشه ، جاییکه در صفحه قرار میگیرد . این بد نیست ، اما برای انعطاف بیشتر ممکنه شما به موقعیت یابی مطلقی نیاز داشته باشید .  همچنین این خیلی مهمه که بدونین که چیزی که شما تا حالا انجام دادید موقیت نمایی اصلی نیست . تمام چیزی که تعریف کردید Width بود . بنابرین یک المنت با پهنای 15% ساخته خواهد شد .

 

موقعیت نمایی مطلق . اضافه کردن border و margin :

موقعیت نمایی مطلق به معنای این است که شما بگویید دقیقا المنت های شما کجای صفحه ظاهر شوند . اینکار با تعریف خاصیت های top , bottom, left , right امکان پذیر میشود :

div.content{

 

background: white;

 

color: black;

 

position: absolute; /* Says which positioning we are using */

 

left: 17%; /* 17% from the left side of the screen */

 

width: 69%; /* This is the width */

 

}

نکته اینجاست که در کد بالا فقط خاصیت left تعریف شده، این کافیه ! نیازی نیست که شما تمامی تمام خاصیت هایش را تعریف کنید . اما برای انعطاف پذیری بیشتر ممکنه خودتون بخواهید اینکارو بکنید . بطور مثال ممکنه شما بخواهید یک منو در سمت راست اضافه کنید:

div.rightnav{

 

background: white;

 

color: black;

 

position: absolute;

 

left: 83%;

 

width: 10%;

 

top: 80px; /* 80 pixels from the top */

 

}

اساسا در موقعیت نمایی مطلق این المنت ها معانی زیر را دارند:

Left : فاصله از چپ صفحه ، معمولا بر حسب درصد

Right : فاصله از راست صفحه ، معمولا بر حسب درصد

Top: فاصله از بالای صفحه ، معمولا بر حسب پیکسل

Bottom : فاصله از پایین صفحه ، معمولا بر حسب پیکسل

 

نکته اینکه bottom به ندرت استفاده میشود ، اما گاهی لازم میشود . اگر شما از 4 یا 3 تا پراپرتی با هم استفاده کنید ،باید قادر به قرار دادن تگ DIV  در هر کجا که میخواهید باشید  . همچنین در نظر داشتن این نکته مهم است که راه های بیشتری نیز برای موقعیت نمایی یک المنت در کنار موقعیت نمایی مطلق وجود دارد . اما تمام مرورگر های وب آن راه ها را پشتیبانی نمیکنند .

 

افزودن Border :

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

div.rightnav{

 

background: white;

 

color: black;

 

position: absolute;

 

left: 83%;

 

width: 10%;

 

top: 80px; /* 80 pixels from the top */

 

border-color: white; /* Keep the border invisible */

 

border-style: solid; /* It is a solid invisible line which is fine */

 

border-bottom-width: 2px; /* These attributes are pretty self-explanatory */

 

border-top-width: 2px;

 

border-left-width: 3px;

 

border-right-width: 4px;

 

}

افزودن حاشیه یا margin :

Margin ها ابزار های قدرتمندی در سایت های css میباشند .در مقدمه میبینید که شما میتوانید چیزی را بکمک تعیین فاصله درصدی از طرفین margin ها در وسط قرار دهید .

div.content{

 

background: white;

 

color: black;

 

margin-left: 20%; /* 20% from the left side of the screen */

 

margin-right: 20%; /* 20% from the right side of the screen */

 

}

نقصان وجود پشتیبانی مرورگر ها :

پشتیبانی نشدن تمام دستورات css توسط تمامی مرورگر ها مشکلات زیادی را برای طراحان پیش آورده . Mozilla ( و مرورگر های زیر مجموعه آن مانند FireFox ) و Opera بروز رسانی بسیار خوبی در پشتیبانی دستورات css دارند . اما Internet Explorer کمی عقب مانده است . کد هایی که در این مقاله نوشتیم توسط تمامی مرورگر ها پشتیبانی میشود .

 

ناسازگاری بین مرورگر ها :

بیشتر مردم از آخرین نسخه مرورگرها استفاده می کنند. مرورگر های گوناگون کد css  شما را بگونه های مختلف تفسیر میکنند . اصلی ترین مرورگر در این زمینه IE است که ممکنه کد های border را بگونه دیگری نشان دهد .