آموزش HTML - خصيصه هاي موجود در Style

در مطلب قبلي گفته شد كه Style به شكل كلي زير مي آيد :
style="Attr1:value;Attr2:value..."
بسته به اينكه خصيصه Style در چه تگي بكار رود ، خصيصه هاي مختلفي را در خود جاي مي دهد . البته در اكثر موارد خصيصه هاي يكساني وجود دارد و بسته به مورد خصيصه هاي جديدي به مجموعه اضافه شده يا از آن كم مي شود .


خصيصه font-family :
اين خصيصه براي تعيين نوع خط محتواي تگ استفاده مي شود به عنوان مثال فرض كنيد در مثال مطلب قبلي بخواهيم محتواي پاراگراف با نوع خط tahoma ظاهر شود در اين صورت بايد كد به شكل زير در آيد :

Code:

 <p style="font-family : tahoma">
Hello World !
</p>

در اين مورد بايد توجه داشت يك فونت استاندارد را انتخاب كرد كه بر روي همه كامپيوتر ها وجود داشته باشد . چرا كه فونتي كه اينجا تعيين مي كنيد اگر بر روي سيستم كاربر وجود نداشته باشد محتويات پاراگراف با فونت پيش فرض سيستم (Times New Roman) نمايش داده خواهد شد .
اگر به هر حال مصر هستيد كه از يك نوع فونت خاص مثلا B Nazanin استفاده كنيد مي توانيد اين كار را به شكل زير انجام دهيد :

Code:

<p style="font-family : B Nazanin , tahoma">
Hello World !
</p>

اين كار به مرورگر وب مي گويد براي فونت ، B Nazanin ارجحيت دارد ولي اگر B Nazanin بر روي سيستم كاربر وجود نداشت به سراغ فونت Tahoma برو . هر چند فونتي را كه مي خواهيد مي توانيد به ترتيب در اين ليست اضافه كنيد منتها بايد بدانيد در انتهاي ليست حداقل بايد يك فونت استاندارد وجود داشته باشد تا اتفاق غير منتظره اي براي نمايش صفحه نيفتد .


خصيصه Color :
اين خصيصه براي تعيين رنگ متن محتواي تگ استفاده مي شود . به شكل زير :

Code:

 <p style="font-family : B Nazanin , tahoma ; color:Orange" >
Hello World !
</p>

نتيجه اجراي اين كد به شكل زير خواهد بود :
Hello World!
براي رنگدهي دو روش وجود دارد : 1 - رنگدهي با نام رنگ . 2 - رنگدهي با كد رنگ
1- براي رنگدهي با نام رنگ همانند مثال فوق بايد نام رنگ را نوشت . نكته اينجاست كه به اين روش فقط مي توان رنگ هاي محدودي كه داراي نام هستند را اعمال نمود . اگر بخواهيم رنگ ها را به صورت حرفه اي بكار ببريم بايد حتما از كد آنها استفاده كنيم . برخي رنگ ها كه داراي نام هستند در زير ليست مي شوند :


Color Name Color Color Name Color Color Name Color Color Name Color
Olive Green Lime
Gray
Maroon Red Yellow Black
Teal Purple Fuchsia White
Navy Blue Aqua Silver
2 - براي رنگدهي با كد بايد براساس سيستم RGB اين كار را انجام داد . RGB كه فرم كوتاه عبارت Red Green Blue مي باشد به اين نكته اشاره دارد كه رنگ هاي قرمز ، سبز و آبي سه رنگ اصلي سيستم مي باشند و ساير رنگ ها از تركيب اين سه رنگ (هر يك با وزن خاصي) بدست مي آيند . در اين سيستم وزن هر رنگ از عدد 0 تا 255 تغيير مي كند . مثلا در يك سيستم RGB اگر سهم رنگ هاي آبي و سبز 0 و رنگ قرمز 255 باشد اين رنگ همان رنگ قرمز استاندارد خواهد بود . اما در كد html اين رنگ ها داراي كد مبناي 16 خواهند بود . بر اين اساس حد بالاي وزن رنگ ها از 255 به FF در مبناي 16 تغيير مي كند . چرا كه در مبناي 16 ارقام از 0 تا F (يعني همان 15) تغيير مي كند. (1،0،...،9 ، F ، E ، D ، C ، B ، A) بنابراين اگر 255 را با تقسيمات متوالي بر 16 به مبناي 16 ببريم به همان كد بالا يعني FF مي رسيم . حال براي رنگدهي به محتوا از اين طريق بايد كدي شبيه به زير بنويسيم .

Code:

<p style="font-family : B Nazanin , tahoma ; color:#FF8000" >
Hello World !
</p>

همانطور كه در كد فوق پيداست دو رقم اول از سمت چپ وزن رنگ قرمز ، دو رقم بعد وزن رنگ سبز و دو رقم آخر وزن رنگ آبي مي باشد . بنابراين نتيجه اجراي كد فوق به شكل زير خواهد بود .
Hello World!
براي يافتن رنگ مناسب و متناسب با سليقه شما ، مي توانيد از ابزارهايي مانند ‍Color Picker در برنامه Paint ويندوز يا فوتوشاپ (photoshop) استفاده كرد . البته اين ابزارها كد رنگ را در مبناي 10 به شما مي دهند كه مي توانيد با استفاده از برنامه ماشين حساب ويندوز و انتخاب گزينه HEX به جاي Dec كد را به مبناي 16 تبديل كنيد . منتها بايد ابتدا ماشين حساب در حالت Dec باشد و شما عدد مربوطه را وارد نمائيد و سپس گزينه Hex را انتخاب كنيد .


خصيصه Background : (خصوصیات Background-Repeat ، Background-Image و Background-Color)
این خصیصه در حقیقت نماینده یک مجموعه خصوصیات است که با این نام یعنی Background شروع می شوند . خصوصیاتی مانند Background-color یا Background-image و ... از این مجموعه هستند . به عنوان مثال خصيصه Background-Color مقداري ازجنس نام رنگ يا كد رنگ مي گيرد و رنگ پس زمينه تگ را تنظيم مي كند . اگر اين گزينه را نيز به مثال فوق اضافه كنيم و رنگ متن را به آبي تغيير دهيم (براي خوانايي بيشتر) كد آن به شكل زير در مي آيد :

Code:

<p style="font-family : B Nazanin , tahoma ; color:blue ; Background-Color : yellow" >
Hello World !
</p>

حال می توانستیم به جای عبارت Background-color تنها از عبارت Background استفاده کنیم و دقیقا همین نتیجه را ببینیم . نتيجه اجراي اين كد به شكل زير مي باشد :
Hello World!
یا مثلا می توانیم برای پاراگراف یک عکس به عنوان پس زمینه انتخاب کنیم برای اینکار کافیست برای عبارت Background-image یا Background آدرس یک عکس را مشخص کنیم به شکل زیر :

Code:

 <p style="font-family : B Nazanin , tahoma ; color:red ; Background-Color : yellow;Background-Image: url('/images/preview_f2.png')" >
Hello World !
</p>

نیاز به توضیح نیست که عرض و ارتفاع تگ به عکس اعمال می شود و این طور نیست که اگر عکس بزرگتر باشد عرض و ارتفاع تگ به طور خودکار بزرگتر شود . نحوه تعریف عرض و ارتفاع تگ در ادامه توضیح داده می شود . ضمن اینکه اگر سایز فضای محصور شده بوسیله تگ بیشتر از سایز عکس باشد ، عکس پس زمینه به طور خودکار تکرار می شود . اگر بخواهید جلوی این کار را بگیرید باید بعد از تعیین عکس خصیصه ای با نام background-repeat با مقدار no-repeat را به مجموعه خصوصیات Style اضافه کنید مانند کد زیر :

Code:

 <p style="font-family : B Nazanin , tahoma ; color:red ; Background-Color : yellow;Background-Image: url('/images/preview_f2.png') ; Background-Repeat:no-repeat" >
Hello World !
</p>

خصيصه Width :
اين خصيصه براي تعيين عرض محصور شده بوسيله تگ بكار مي رود . مقياس عرض بر حسب پيكسل يا درصد است :
<p style="font-family : B Nazanin , tahoma ; color:blue ; Background : yellow;Width:200px" >
Hello World !
</p>
همانگونه كه مي بينيد عرض 200 پيكسل تعريف شده و از آنجا كه رنگ پس زمينه زرد است تنها پاراگرافي با پهناي 200 پيكسل زرد شده است . حال اگر بخواهيم عرض را بر حسب درصد بيان كنيم بايد به شكل زير برخورد شود :
خصيصه Height :
اين خصيصه براي تعيين ارتفاعي كه تحت تأثير يك تگ قرار مي گيرد بكار مي رود . نحوه كاربرد آن دقيقا به شكل خصيصه Width است . نكته اي كه بايد در مورد اين دو خصيصه مد نظر داشت اينست كه نبايد عرضي كه انتخاب مي كنيم بيش از عرض استاندارد صفحه نمايش باشد وگرنه اسكرول (Scroll) افقي در صفحه ظاهر مي شود و اگر ارتفاع بيش از ارتفاع استاندارد صفحه نمايش باشد اسكرول عمودي ظاهر خواهد شد :

Code:

 <p style="font-family : B Nazanin , tahoma ; color:blue ; Background : yellow;Width:200px;Height:80px" >
Hello World !
</p>

خصيصه font-size :
اين خصيصه براي تنظيم بزرگي خط بكار مي رود و بر اساس دو مقياس px يا Pixel و pt يا Point بكار مي رود آنچه كه شما در مورد بزرگي خط از نرم افزارهاي واژه پردازي مانند Word در ذهن داريد بر اساس pt يا Point است :

Code:

 <p style="font-family : B Nazanin , tahoma ; color:blue ; Background : yellow;font-size:16pt;" >
Hello World !
</p>

خصيصه font-weight :
اين گزينه فقط يك مقدار ميگيرد و آن هم عبارت bold است . اين گزينه تنها هنگامي بكار مي رود كه بخواهيم متن به صورت تو پر يا bold نوشته شود :

Code:

 <p style="font-family : B Nazanin , tahoma ; color:blue ; Background : yellow;font-size:16pt;font-weight:bold" >
Hello World !
</p>

خصيصه text-align :
با این خصیصه می توان موقعیت افقی چینش محتویات تگ را تعیین نمود . این خصیصه سه مقدار Left ، Center و Right را می گیرد و محتویات تگ را به ترتیب به چپ ، مرکز و راست تنظیم می کند . برای مثال اگر بخواهیم در مثال فوق متن در وسط پاراگراف قرار گیرد کد به شکل زیر تغییر خواهد یافت :

Code:

 <p style="font-family : B Nazanin , tahoma ; color:blue ; Background : yellow;font-size:16pt;font-weight:bold;text-align:center" >
Hello World !
</p>

خصيصه padding :
این خصیصه برای تنظیم یک حاشیه از کناره های فضای محصور شده توسط تگ ، بکار می رود . البته این فضا به 4 قسمت چپ ، راست ، بالا و پائین تقسیم می شود که می توان به ترتیب با خصیصه های padding-left و padding-right و padding-top و padding-bottom این حاشیه ها را به طور جداگانه و مستقل تنظیم کرد ولی اگر بخواهیم همگی به یک شکل و یکسان باشند می توان فقط با تنظیم padding این کار را انجام داد . البته باید به این نکته نیز توجه داشت که تنظیمات نباید با هم ناسازگاری داشته باشند چرا که مثلا نمی توان در پاراگرافی که 200 پیکسل است و متنی به طول 100 پیکسل دارد فاصله از چپ و راست را 40 پیکسل تنظیم کرد چرا که اگر فاصله از چپ 40 پیکسل باشد به صورت خودکار فاصله از راست 60 پیکسل خواهد شد .

Code:

 <p style="font-family : B Nazanin , tahoma ; color:blue ; Background : yellow;width:200px;height:80px;padding:50px" >
Hello World !
</p>

و یا این کد :

Code:

 <p style="font-family : B Nazanin , tahoma ; color:blue ; Background : yellow;width:200px;height:100px;padding-top:70px;padding-left:140px" >
Hello World !
</p>