کار کردن با زمينه و رنگها
خواص رنگها:
رنگها را مي توان به چند حالت در استايلها تعريف کرد. براي مثال:

body { color: teal }
body { color: #008080 }
body { color: rgb(0, 128, 128) }
body { color: rgb(0%, 50%, 50%) }

همانطوري که در بالا مشاهده کرديد به چهار روش مي توانيد رنگها را تعريف کنيد. در روش اول شما مي توانيد اسم رنگهايي که توسط HTML پشتيباني ميشوند را بنويسيد. در روش دوم رنگها را به صورت اعداد هگزا استفاده شده اند و در دو روش بعد که مقادير سه رنگ قرمز، سبز و آبي را به صورت ارقام و درصد استفاده شده اند.

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

background-image: url(IMAGE)

در اينجا IMAGE آدرس عکس ميباشد براي مثال:

B { background-image: url(d:\tem\images\bold_bg.gif) }

در مثال بالا شما زماني که تگ BOLD به کار برديد عکس زمينه براي آن تگ bold_bg.gif خواهد بود.
تکرار عکس در صفحه:

background-repeat: repeat_value

در اينجا مقدار repeat_value مي توان گزينه هاي از قبيل repeat, repeat-x, repeat-y, no-repeat باشند. مثال:

body {
 background-image: url(d:\tem\images\eagles.jpg);
 background-image: repeat }

body {
 background-image: url(d:\tem\images\eagles.jpg);
 background-image: repeat-x }

body {
 background-image: url(d:\tem\images\eagles.jpg);
 background-image: repeat-y }

body {
 background-image: url(d:\tem\images\eagles.jpg);
 background-image: no-repeat }

در مثالهاي بالا به ترتيب به صورتهاي مختلف نمايش داده ميشوند.: ۱. تکرار عکس در تمامي صفحه، ۲. تکرار عکس در جهت محور xها (افقي)، ۳. تکرار عکس در جهت محور yها (عمودي)، و ۴. بدون تکرار ميباشد. که به صورت شکل زير ميباشند.

موقيعت عکس در زمينه:
در مبحث قبلي شما مي توانستيد عکس را به چهار صورت نمايش دهيد حال اگر بخواهيد موقيعت عکس را در صفحه نمايش دهيد مي توان از فرمول زير استفاده کنيد:

background-position: horizontal_value vertical_value

به جاي horizontal_value, vertical_value مي توان از عدد، درصد، و يا اسم جهتهاي top, center, bottom, right, left استفاده کرد. براي مثال:

شناور شدن متن بروي عکس:
براي اينکار مي توانيد از فرمول زير استفاده کنيد:

background-attachment: attach

به جاي کلمه attach مي توان از scroll و يا fixed استفاده کرد. در حالت اول که به صورت پيش فرض ميباشد و در حالت دون متن بروي تصوير شناور ميباشد.
فرمول کلي براي زمينه (background) به صورت زير ميباشد:

background:  background-color background-image background-repeat
  background-attachment background-postion

براي مثال:

body { background: balck url(d:\tem\images\eagles.jpg) no-repeat fixed center center }

در مثال بالا رنگ زمينه سياه، و عکس eagles.jpg در وسط صفحه قرار خواهد گرفت که بدون تکرار ميباشد و متن بروي اين عکس شناور خواهد بود.

* منظور از شناور بودن متن بروي عکس اين ميباشد که عکس ثابت و متن بروي آن حرکت مي کند اما در حالت پيش فرض عکس به اندازه ارتفاع متن تکرار ميشود.

فونتها و خواص آنها:
۱. خانواده فونتها (Font-families)
خواص font-family اين ميباشد که مي توانيد فونت صفحه خود را انتخاب کنيد. استايلها با دو نوع فونت کار خواهند کرد:
- فونتهاي خاص (Specific): اين فونتهاي عبارتند از: Arial, Garamond, Times New Roman. اين فونتها در واقع بروي کامپيوتر اشخاص به صورت پيش فرض موجود ميباشد.
- فونتهاي عام (Generic): اين فونتها عبارتند از: Serif, Sans-serif, monospace, cursive, & fantasy که اين فونتها توسط استايلها ساپورت ميشوند.
براي تعريف صورت (اشکال) فونتها در استايلها از فرمول زير استفاده ميشوند:

font-family: font_name1, font_name2, ...

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

font-family: tahoma, times new roman, arial, serif

۲. اندازه فونتها (Font Size)
در حالت استاندارد براي کنترل اندازه فونتها در HTML، با استفاده از SIZE دز تگ <FONT> ميباشد. در استايلهاي براي تعريف اندازه فونتها بايد از فرمول زير استفاده کنيد:

font-size: size

براي تعريف واحد در فونتهاي به چهار روش استفاده ميشوند:
- واحدهاي طول(Unit of length): اين واحدها عبارتند از: mm, cm, in, pt, pc, em, ex
-  توضيحات کليدي (Keyword Description): اين واحدها عبارتند از: xx-small, x-small, small, large, x-large, xx-large
- واحد به صورت درصد (٪)
- نوع آخر بيان کردن حالتهاي کليدي در آن همانند: larger, smaller
حال اين اندازه ها به دو حالت منطقي (Absolute) و نسبي (Relative) تقسيم ميشوند. تفاوت اين دو نوع در اين ميباشد که در حالت منطقي اندازهاي را برحسب واحدهاي استاندارد اندازه گيري ميباشد اين اندازه مي اندازه را به صورت عدد و يا اعشاري تعيين کرد و واحدها در اين نوع عبارتند از: mm(millimeter), cm(centimeter), in(inch), pt(point), pc(pica) در حالت نسبي اندازه فونتها برحسب نوع کارکترها (حروف) ميباشد. براي اين حالت تنها دو واحد em, ex ميباشند. که اندازه em معادل حرف بزرگ M و ex معادل حرف کوچک x ميباشند.
بهترين نوع واحدها در اندازه گيري فونتها px ميباشد که برحسب تعداد پيکسلهاي مانيتور ميباشد.

۳. فاصله در بين کلمات، حروف و خطها
با استفاده از فومولهاي زير مي توانيد سه حالت بالايي رو مشخص کنيد:

word-spacing: size
letter-spacing: size
line-height: size

در حالتهاي بالا به ترتيب فاصله بين دو کلمه، فاصله بين دو حرف، فاصله بين دو خط را مشخص مي کنيد.

۴. جهتهاي افقي و عمودي متنها:

text-align: alignment
vertical-align: alignment

در حالت اولي (حالت افقي) جهتها عبارتند از: left, center, right و در حالت دومي (حالت عمودي) جهتها عبارتند از: baseline, bottom, middle, sub, super, text-top, text-bottom, top

۵. حالتهاي خاص

1. text-decoration: decoration
decoration: blink, line-throught, overline, underline, none

2. text-transform: transform
transform: capitalize, lowercase, uppercase, none

3. font-variant: variant
variant: small-caps, none

۶. خواص فونتهاي
خواص فونتها در حالت کلي به صورت زير ميباشد:

font:font-style; font-variant; font-weight; font-size/line-height; font-family

براي مثال اينرا مي توانيد به حالت زير بنويسيد:

h2 {
 font-style: italic;
 font-variant: small-caps;
 font-weight: bold;
 font-size: 3em;
 line-height: 0.5em;
 font-family: Times New Roman, Serif
 }

h2 { font: italic small-caps bold 3em/0.5em Times New Roman, serif }

استايل (CSS) چيست؟
 - CSS مخفف کلمه Cascading Style Sheets ميباشند.
 - اولين ورژن استايلها در سال ۱۹۹۶ ساخته شد. که اولين ورژن آن CSS1 بود.
 - ديگر وژن آن CSS2 مي باشد که در سال ۱۹۹۸ ساخته شد که بيشتر براي ويرايش صفحات، نحوه نمايشها تگها و ... کاربرد دارد.
 - فايل استايلها با فرمت CSS ذخيره ميشوند.
 
انواع استايلها:
 همانطوري که قبلا نوشتم استايلها بر سه نوع ميباشند:
 ۱. Inline Style: اين نوع استايل در داخل تگهاي HTML به كار گرفته ميشوند، و اين استايل فقط بروي همان تگ به خصوص تاثير خواهد گذاشت و به صورت زير نوشته خواهد شد.

<tag style="Style Declarations">

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

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

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

<style>
<!--
Style Declaration
-->
</style>

Example:
<head>
<style type="text/css">
<!--
p { color: red; text-align: left; font-size: 8pt }
-->
</style>
</head>

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

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

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

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

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

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

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

<tag style="Style Declarations">

*Style declarations: حالتهاي و نوع استايلهاي هستش.

براي مثال:

<h2 style="color:red; font-family:arial">Bolghan Tools</h2>

Bolghan Tools

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

<style>
Style Declaration
</style>

براي مثال:

<style>
h1 {color: gold; font-family: Times New Roman}
</style>

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

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

* URL: آدرس فايل استايل | *Relation type: برابر با stylesheet هست | *link type: هم با text/css برابر ميباشد.

براي مثال:

<link href="http://tools.bolghan.com/test.css" rel="stylesheet" type="text/css">

براي تغيير رنگ اسکرول بار کدهاي زير را بين <head></head> قرار دهيد:

<style type="text/css">
<!--
body {
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #808080;
scrollbar-darkshadow-color: #000000;
}
-->
</style>

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