✗ Moltafet Team ✗
سلام دوست عزیز
به انجمن ملتفت تیم خوش آمد
برای استفاده از انجمن و مشاهده لینک ها جهت دانلود باید ثبت نام کنید
ثبت نام شما کمتر از 1 دقیقه طول خواهد کشید و بعداز ثبت نام نیاز به فعالسازی از طریق ایمیل ندارید پس از ثبت نام میتونید به قسمت لاگین مراجعه کنید و با وارد کردن نام کاربری و رمز عبور وارد انجمن شوید

Hello Dear
Wellcome To Moltafet Team Forum
Find Links To The Forum, You Must Register To Download And Using Of Forum .

Mohamad~kf@nimbuzz.com
Latest topics
» افتتاح سایت جدید (Www.LightCoder.iR)
by Mohamad Karami 31/7/2015, 20:52

» bot servers
by єmρty 23/7/2015, 15:56

» 3ex Bot Room v1 Coded By Mohamad~kf@n.c
by єmρty 22/7/2015, 10:21

» hitler shekan
by єmρty 21/7/2015, 20:43

» toxic-mod.jar
by єmρty 21/7/2015, 20:37

» server bot spy 2015
by wathk 21/7/2015, 03:42

» اموزش استفاده از سورس کد
by Mohamad Karami 14/7/2015, 10:41

» BlueStacks/اجرای برنامه های اندروید در ویندوز
by Mohamad Karami 14/7/2015, 10:34

» درخواست بوت
by daniyal93018 13/7/2015, 10:10

» نیمباز فوت کرد
by Mohamad Karami 3/7/2015, 20:30

» تایپیک جامع برنامه های پولی بازار
by mohammads 3/7/2015, 20:26

» برنامه پولی بازار در رابطه با بازی کلش آف کلنز
by mohammads 3/7/2015, 19:13

» add 24*7 online server bots
by mr.minor 3/7/2015, 19:10

» .NET Framework 3.5Win8 / مشکل نت فرامورک در ویندوز۸
by Farshad.k 3/7/2015, 02:05

» انیمیشن نبرد راشل کوری 2
by Farshad.k 3/7/2015, 01:58

» ChrisTV Online Premium Edition 11.12 + Portable تلویزیون اینترنتی
by Farshad.k 3/7/2015, 01:51

» LINE Free Calls & Messages 5.2.3 مسنجر LINE برای اندروید
by Farshad.k 3/7/2015, 01:48

» LINE Desktop Free Calls & Messages 4.0.3.369 مسنجر LINE ویندوز
by Farshad.k 3/7/2015, 01:44

» Bot Server Flooder Room (Pvflood+addflood) + Advertiser (Tabligh) + Anti's
by Mohamad Karami 21/6/2015, 12:03

» bulk Mail Sender / ارسال ایمیل انبوه
by Mohamad Karami 21/6/2015, 11:40

» Moltafet PassWord List Maker / ساخت پسورد لیست
by Mohamad Karami 21/6/2015, 11:21

» best mobile server v.1.0.0 persian edition
by best-mobile-server 19/6/2015, 08:07

» Amozeshe Tasviri B4a Mobtadi By King-Team
by meyti 16/6/2015, 09:12

» King Team Splash Design In C#
by meyti 13/5/2015, 16:34

» Hibernation Kardane Androidi Ha
by meyti 17/4/2015, 16:57

» آموزش ساخت ترول
by saeid 5/4/2015, 17:33

» عید مبارک :/
by Mohamad Karami 5/4/2015, 16:36

» (C#) آموزش مقدماتی تا پیشرفته برنامه نویسی سی شارپ
by Farshad.k 1/4/2015, 05:30

» Loaris tr0jan Remover 1.3.7.0 پاکسازی ویندوز از تروجان ها
by Farshad.k 1/4/2015, 05:22

» Coolutils Total PDF Converter 5.1.59 / به سایر فرمت ها PDF مبدل فایل
by Farshad.k 1/4/2015, 05:04

Search
 
 

Display results as :
 


Rechercher Advanced Search

Keywords


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

View previous topic View next topic Go down

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

Post by ~.~punisher~.~ on 7/10/2014, 02:29

در مطلب قبلي گفته شد كه 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>
avatar
~.~punisher~.~

Posts : 60
Thanks : 2
Join date : 2014-09-30
Nimbuzz ID : ~.~punisher~.~@nimbuzz.com

View user profile

Back to top Go down

View previous topic View next topic Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum