نویسه جدید وبلاگ

آموزش طراحی سایت


آموزش تخصصی CSS (قسمت اول)

در این سلسله ازمقالات، شما چگونگی استفاده از CSS جهت کنترل style و layout چندین صفحه وب بطور همزمان را یاد خواهید گرفت.

برای یادگیری CSS، شما باید درکی پایه ای از مفاهیم HTML و XHTML داشته باشید.

نمونه از CSS

body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}

 

CSS چیست؟

  • CSS مخفف Cascading Style Sheets است
  • styleها چگونگی نمایش عناصر HTML را تعریف می کنند
  • styleها برای حل یک مشکل به HTML 4.0 اضافه شدند
  • External Style Sheets می تواند در در انجام کار صرفه جویی کند
  • External Style Sheets در فایل های CSS ذخیره می شوند

نمایش CSS

سند HTML را می توان با styleهای مختلف نمایش داد.

Styleها مشکل بزرگی را حل کردند

HTML هرگز به قصد در برگرفتن tag برای فرمت کردن یک سند ایجاد نشد.

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

وقتی tagهایی مانند <font> و attributeهای رنگ به HTML 3.2 اضافه شد، کابوسی برای برنامه نویسان بود. develop کردن وبسایت های بزرگ، که فونت ها و اطلاعات رنگ به هر صفحه مجزا اضافه شدند، فرآیندی طولانی و پرهزینه شد.

برای حل این مشکل، کنسرسیوم World Wide Web، تصمیم گرفت CSS را ایجاد کند.

در HTML 4.0، می توان کل فرمتینگ را از سند HTML حذف کرد، و در فایل CSS جداگانه ای ذخیره کرد.

امروزه، همه مرورگرها CSS را ساپورت می کنند.

CSS، در انجام مقدار زیادی کار صرفه جویی می کند

CSS، تعریف می کند عناصر HTML چگونه نمایش داده می شوند.

معمولاً Styleها در فایلهای .css ذخیره می شوند. style sheetهای خارجی شما راتنها با ویرایش یک فایل قادر به تغییر ظاهر و layout همه صفحات موجود در یک وبسایت می کند.

مثال

فایل HTML زیر، لینکی به یک style sheet خارجی با تگ <link> است:

<html>
<head>
<link rel="stylesheet" 
type="text/css" href="ex1.css" />
</head>

<body>

<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>

<p>This paragraph has a left margin of 50 pixels</p> 

</body>
</html>

 

این، فایل style sheet است:

body
{
background-color:yellow;
}
h1
{
font-size:36pt;
}
h2
{
color:blue;
}
p
{
margin-left:50px;
}

 

سینتکس CSS

قاعده CSS، دارای دو بخش اصلی است: یک selector، و یک یا چندین تعریف (declaration):

clip_image001

selector، معمولاً عنصر HTML است که می خواهید style کنید.

هر declaration، از یک property و یک value تشکیل شده است.

property، استایل اتریبیوتی (style attribute) است که می خواهید تغییر دهید. هر property دارای یک value است.

نمونه از CSS

declarationهای CSS، همیشه با یک نقطه ویرگول (;) تمام می شوند، و گروههای declaration در کمانک {} قرار می گیرند:

p {color:red;text-align:center;}

 

برای اینکه CSS را بیشتر قابل خواندن کنید، می توانید هر declaration را در یک خط قرار دهید، مانند مثال زیر:

 

p
{
color:red;
text-align:center;
}

Commentهای CSS

می توانید ازcommentها برای توضیح کدتان استفاده کنید، و ممکن است هنگامی که source code را ویرایش می کنید، به شما کمک کنند. مرورگرها، کامنت ها را نادیده می گیرند.

 
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

Selectorهای id و class

CSS علاوه بر تنظیم یک style برای عنصر HTML، به شما اجازه تعیین selectorهای خودتان به نام های "id" و "class" را هم می دهد.

سلکتور id

از سلکتور id برای تعیین style برای عنصر واحد و چندگانه استفاده می شود.

سلکتور id از اتریبیوت عنصر HTML استفاده می کند، و با یک "#" تعریف می شود.

قانون style زیر به عنصری با آی دی ="para1" اعمال می شود:

 
#para1
{
text-align:center;
color:red;
}

نام id را با عدد شروع نکنید! زیرا در Mozilla/Firefox کار نمی کند.

سلکتور class

از سلکتور class برای تعیین یک style برای گروهی از عناصر استفاده می شود. برخلاف سلکتور id، سلکتور class اغلب روی چندین عنصر بکار می رود.

این کار به شما اجازه تعیین یک style معین برای هر عنصر HTML با همان کلاس را می دهد.

سلکتور کلاس از اتریبیوت کلاس HTML استفاده می کند، و با یک "." تعریف می شود.

در مثال زیر، همه عناصر HTML با کلاس ""center، وسط چین خواهند شد:

.center {text-align:center;}

هرگز نام یک کلاس را با عدد شروع نکنید! زیرا فقط در Internet Explorer ساپورت می شود.

سه راه برای insert کردن CSS

  • External style sheet
  • Internal style sheet
  • Inline style

Style Sheet خارجی (external)

Style Sheet خارجی، هنگامی که style به صفحات زیادی اعمال می شود، مناسب است. با یک Style Sheet خارجی، می توانید ظاهر کل یک سایت ر با تغییر دادن یک فایل عوض کنید. هر صفحه باید با استفاده از تگ <link> به style sheet لینک شود. تگ <link>، درون بخش head قرارمی گیرد:

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

Style Sheet خارجی، را می توان در یک text editor نوشت. این فایل نباید حاوی هیچ تگ html باشد. style sheet شما باید با پسوند .css ذخیره شود. نمونه ای از یک style sheet در زیر نشان داده شده است:

 
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

فضاهای بین مقدار property و واحدها را خالی نگذارید!

Style Sheet داخلی (internal)

Style Sheet داخلی باید هنگامی مورد استفاده قرار گیرد که یک سند واحد، style منحصر به فردی دارد. styleهای داخلی با استفاده از تگ <style> در بخش head صفحه HTML تعریف می شود، مانند مثال زیر:

 
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Styleهای Inline

استایل inline، با ترکیب کردن contentبا presentation، بسیاری از مزایای style sheetها را از دست می دهد. از این متد باید به ندرت استفاده کرد.

برای استفاده از استایل های inline، باید از اتریبیوت استایل در تگ مربوط استفاده کرد. اتریبیوت استایل ممکن است هر نوع خصوصیت CSS را در بر گیرد. این مثال چگونگی تغییر دادن رنگ و حاشیه چپ یک پاراگراف را نشان می دهد:

 
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Style Sheetهای چندگانه

اگر بعضی از propertyها برای یک selector در style sheetهای مختلف تعیین شده باشد، valueها از style sheet معینی ارث برده خواهند شد.

مثلاً، یک style sheet خارجی دارای propertyهای زیر برای سلکتور h3 است:

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

و یک style sheet داخلی دارای propertyهای زیر برای سلکتور h3 است:

 
h3
{
text-align:right;
font-size:20pt;
}

اگر صفحه ای با style sheet داخلی به یک style sheet خارجی لینک شود، propertyهای h3 اینگونه خواهد بود:

 
color:red;
text-align:right;
font-size:20pt;

رنگ، از style sheet خارجی ارث می برد و text-alignment و اندازه فونت با style sheet داخلی جایگزین می شود.

Styleهای چندگانه به یک استایل cascade می شوند

Styleها را می توان به طرق زیر معین کرد:

  • درون یک عنصر HTML
  • درون بخش head صفحه HTML
  • در یک فایل CSS خارجی

نکته: حتی style sheetهای خارجی چندگانه را نیز می توان درون یک سند HTML واحد reference کرد.

ترتیب cascade کردن

هنگامی که بیش از یک style که برای عنصر HTML تعیین شده، وجود داشته باشد، از کدام style استفاده می شود؟

معمولاً می توان گفت که همه styleها، با قوانین زیر به یک style sheet مجازی cascade می شود، و قانون چهارم بالاترین اولویت را دارد:

  • پبش فرض مرورگر
  • style sheet خارجی
  • style sheet داخلی (در بخش head)
  • استایل inline (درون عنصر HTML)

بنابراین، یک استایل inline، بالاترین اولوین را دارد، که بدین معناست که استایلی را که درون تگ <head> تعریف شده، یا در یک style sheet خارجی، یا در مرورگر را override می کند.

نکته: اگر لینک به style sheet خارجی بعد از style sheet داخلی در HTML <head> داخلی قرار داده شود، style sheet خارجی، style sheet داخلی را override می کند.






نظرات:
متن امنیتی
گزارش تخلف
بعدی