انجمن پارسی لند
بازگشت   پارسی لند > برنامه نویسی > PHP, ASP & ASP.Net, Html, Css, Perl, Python > Css & Css2

سایت پارسی لند | Parsiland Forums




  

آموزش استایلها 7 بهمن 1387   #1
Z3R0


Z3R0 آواتار ها

کاربر فعال انجمن
 
Z3R0 آنلاین نیست.

آموزش استایلها آموزش استایلها

آموزش استایلها 1


استايل (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 دخيره کرده و سپس با استفاده از فرمول بالا آن فايل را به قالب لينک دهيد.
يکي از مزيتهاي اين نوع استايل اين ميباشد که مي توانيد با داشتن يک فايل استايل براي چندين صفحه استفاده کنيد و از ديگر مزيت هاي آن با اين کار کدهاي قالب را به چند فايل تقسيم کرده و قالب را منظم تر ميشود.



این مطلب با زحمات کاربرای این سایت جمع آوری شده است
اخلاق حکم می کند در صورت برداشت از سایت منبع را ذکر کنید!

 
آموزش استایلها 7 بهمن 1387   #2
Z3R0


Z3R0 آواتار ها

کاربر فعال انجمن
 
Z3R0 آنلاین نیست.


آموزش استایلها 2


فونتها و خواص آنها:
۱. خانواده فونتها (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 }

 
برچسب ها
آموزش, استایلها

  



کاربران در حال دیدن موضوع: 1 نفر (0 عضو و 1 مهمان)
 
ابزارهای موضوع
نحوه نمایش امتیاز به این موضوع
امتیاز به این موضوع:

انتخاب سریع یک انجمن

دانلود فایل,مقاله, سورس کد

Powered by vBulletin, Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
All right reserved ©2009 - 2018, Parsiland.com
کپی برداری از این سایت به هر نحو ممنوع می باشد!