Khollan Vafa : اخوان صفا: استایل شیت و اچ تی ام ال از سایت کارپرداز اصفهان

(( آموزش HTML - ساختن فرم 1 ))

حتماً وقتی نام فرم را می شنوید برگه ای را به یاد می آورید که باید برای آگاهی فرد دیگری، اطلاعاتی را در آن وارد کنید و یا به سئوالهایی پاسخ دهید . در اینترنت هم فرم دقیقاً به همین منظور ساخته می شود، اما با منطقۀ نفوذ بسیار وسیعتر و هزینه بسیار کمتر .
از طریق فرم شما می توانید اطلاعاتی را از کاربر دریافت کنید، که این اطلاعات یا به صورت گزینه ای است و کاربر فقط با کلیک کردن، گزینه ای را انتخاب می کند، و یا به صورت متنی، که کاربر باید ابتدا اطلاعاتی را در آن وارد کرده و سپس آنرا ارسال نماید .
فرم ها نیز با استفاده از تگ های مربوط به آنها ساخته می شوند، که به آنها می پردازیم .

با استفاده از این تگ یک دکمه در صفحه نمایش داده می شود که کارآیی آن به وسیله خصوصیات تعیین می شود . عبارت یا کلمه ای که برروی این دکمه باید نمایش داده شود، در بین تگ نوشته می شود .
خصوصیات این تگ عبارتند از :

name="...." با استفاده از این خصوصیت می توانید دکمه را نامگذاری کنید تا هنگام استفاده قابل شناسایی باشد .

type="...." این خصوصیت کاربرد دکمه را تعیین می کند و دارای مقادیر زیر می باشد :

submit با استفاده از این مقدار دکمه عمل ارسال را انجام می دهد .

reset با استفاده از این مقدار دکمه عمل پاک کردن را انجام می دهد .

این تگ برای ساختن فرم به کارمیرود، اما شکل و نوع فرم ایجاد شده در صفحه بستگی به خصوصیات و مقادیری که به این تگ می دهید دارد . این تگ پایان دهنده ندارد .

خصوصیات این تگ عبارتند از :

name="...." با این خصوصیت آشنا هستید . کاربرد آن نامگذاری فرمی است که می سازید .

type="...." این خصوصیت کاربرد فرم را مشخص می کند، که این کاربرد به واسطه مقداری که به این خصوصیت می دهید تعیین می شود . این مقادیر در نوع فرمی که ایجاد می کنید اهمیت زیادی دارد، به همین دلیل هر کدام از مقادیر را به صورت جداگانه بررسی می کنیم .

submit با استفاده از این مقدار شما می توانید یک دکمه ارسال (submit) در صفحه ایجاد کنید .

reset با استفاده از این مقدار شما می توانید یک دکمه پاک کردن (reset) در صفحه ایجاد کنید .

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

اگر بخواهید زمانی که کاربر صفحه را لود می کند یکی از گزینه ها به صورت پیش فرض انتخاب شده باشد، فقط کافیست واژه checked را داخل تگ هر کدام از گزینه ها که مورد نظرتان است بنویسید .

radio با استفاده از این مقدار شما می توانید یک دکمه انتخاب تک گزینه ای در صفحه ایجاد کنید، اما چون این دکمه ها برای انتخاب یک گزینه از بین گزینه ها توسط کابر به کارمیروند، تعداد تگ های به کاررفته در این فرم هم حداقل باید دو تگ و یا بیشتر باشد . این نوع از فرم به انتخاب تک گزینه ای معروف است .
به این نکته توجه داشته باشید که همۀ تگ ها در این فرم مربوط به یک فرم واحد می شوند، پس همۀ آنها با یک نام در خصوصیت name مقداردهی می شوند، در غیر این صورت فرم به شکل تک گزینه ای عمل نخواهد کرد .

text با استفاده از این مقدار یک کادر متنی در صفحه نمایش داده می شود که کاربر هر چیزی به وسیله کیبورد در آن وارد کند عیناً در کادر نمایش داده می شود .

password با استفاده از این مقدار یک کادر متنی با کاربرد ورود پسورد در صفحه نمایش داده می شود که کاربر هر چیزی به وسیله کیبورد در آن وارد کند به صورت ستاره در کادر نمایش داده می شود . این حالت نمایش به خاطر امنیت اطلاعات کاربر می باشد .

file با استفاده از این مقدار یک کادر متنی به همراه یک کلید جستجو در صفحه نمایش داده می شود که کاربر می تواند به وسیله آن فایلی را در کامپیوتر خود جستجو کند . این فرم زمانی مورد استفاده قرارمی گیرد که کاربر به همراه اطلاعات فرم، باید یک فایل هم به سرور ارسال کند و یا اطلاعاتی را از فایل به فرم منتقل کند .

hidden این مقدار زمانی مورد استفاده قرارمی گیرد که بخواهید اطلاعاتی از فرم به سرور فرستاده شود ولی در مرورگر نمایش داده نشود . در واقع این مقدار برای دریافت اطلاعات به صورت hidden fields کاربرد دارد .

size="...." این خصوصیت عرض کادرهای متنی را مشخص می کند و با عدد مقداردهی می شود .

maxlength="...." این خصوصیت حداکثر تعداد حروفی را که کاربر مجاز به وارد کردن در کادر میباشد را تعیین می کند، و با عدد مقداردهی میشود .

value="...." این خصوصیت به نسبت مقداری که به خصوصیت type می دهید سه نوع کاربرد دارد .
اگر خصوصیت type را با submit و یا reset مقداردهی کنید، با استفاده از این خصوصیت می توانید نوشته روی دکمه را به انتخاب خودتان تغییر دهید، یعنی هر چه به عنوان مقدار برای این خصوصیت بنویسید برروی دکمه نمایش داده خواهد شد .
اگر خصوصیت type را با checkbox و یا radio مقداردهی کنید، سرور به واسطه این خصوصیت گزینه انتخاب شده به وسیله کاربر را شناسایی می کند، و نوشتن آن داخل تگ الزامی است، در غیر این صورت گزینه انتخابی برای سرور قابل شناسایی نخواهد بود .
اما در مورد کادرهای متنی، هر چه به عنوان مقدار برای این خصوصیت بنویسید، به صورت پیش فرض در کادر نمایش داده می شود . البته کاربر قادر به تغییر متن پیش فرض داخل کادر خواهد بود .

readonly با نوشتن این واژه در داخل تگ کادرهای متنی، کاربر قادر به تغییر متنی که به وسیله خصوصیت value به صورت پیش فرض در کادر وارد کرده اید نخواهد بود .

در قسمت قبل دیدید که چگونه می توان دکمه ها و کادرهای متنی را در صفحه ایجاد کرد . در این بخش ادامه بحث فرم ها را پی می گیریم .

کادرهایی که در قسمت قبل ساختید همگی برای ورود اطلاعات
کوتاه قابل استفاده بود، اما گاهی اوقات کادری نیاز دارید که کاربر بتواند متنی
بلندتر را در آن وارد کند . برای این منظور باید از این تگ استفاده کنید . متنی که
بین این تگ نوشته شود به صورت پیش فرض در کادر نمایش داده می شود .  
این تگ دارای خصوصیات زیر است :<o:p></o:p>

 name="...."  
این خصوصیت فرم را نامگذاری می کند .<o:p></o:p>
<div class="MsoNormal" align="right" dir="LTR" style="margin: 0cm 0cm 0.0001pt; direction: ltr; unicode-bidi: embed;">

</div>

 disabled   <span lang="AR-SA" dir="RTL" style="font-size: 8pt; line-height: 115%; font-family: Tahoma, sans-serif; background-color: rgb(195, 195, 195); background-position: initial initial; background-repeat: initial initial;">ممکن است در صفحه شما تعدادی فرم وجود داشته باشد که به
هر دلیلی بخواهید برای مدتی یک یا چند فرم غیرفعال و از دسترس کاربران خارج باشد،
با نوشتن این واژه در هر کدام از تگ های فرم، آن فرم به صورت غیر فعال در صفحه
ظاهر میشود .  
<span lang="AR-SA" dir="RTL" style="font-size: 8pt; line-height: 115%; font-family: Tahoma, sans-serif; background-color: rgb(195, 195, 195); background-position: initial initial; background-repeat: initial initial;">ممکن است فکر کنید اگر
قراراست فرم غیر فعال باشد می توان آنرا حذف کرد . اما این واژه موارد استفاده خود
را دارد . به طور مثال اگر شما تعدادی کالا برای فروش در یک لیست انتخاب قرارداده
اید و در مدت زمانی یکی از کالاهای شما موجود نیست، با استفاده از این واژه هم
کاربران از وجود چنین کالایی در لیست شما مطلع می شوند، و در دو قسمت قبل دیدید که
چگونه می توان انواع فرم را در صفحه ایجاد کرد . حالا باید اطلاعاتی که کاربر در
فرم وارد کرده است به وب سرور یا آدرس ایمیل شما ارسال شود تا شما بتوانید آنرا
دریافت کنید . در این مبحث نحوه دریافت اطلاعات را بررسی می کنیم .<o:p></o:p>
<div class="MsoNormal" align="right" dir="LTR" style="margin: 0cm 0cm 0.0001pt; direction: ltr; unicode-bidi: embed;">

</div>

 _blank   با
این مقدار صفحه action در یک
پنجره جدید باز میشود .هم شما می توانید با
موجود شدن آن کالا، گزینه را دومرتبه فعال کنید .<o:p></o:p>

شما
می توانید صفحه خود را با استفاده از فریم بسازید . فریم ها به شما کمک می کنند تا
مجبور نباشید قسمتهایی را که باید به صورت تکراری در صفحه های مختلف قرارمی گیرند
مکرراً بنویسید . کافیست آن قسمتها را یک بار نوشته و با فرمت html ذخیره
کنید، سپس در هر صفحه ای که به آن نیاز دارید با استفاده از فریم آنرا آدرس دهی
کنید و در صفحه خود قراردهید . البته در فریم هر عنصر دیگری که قابل نمایش در صفحه
باشد را هم می توانید قراردهید .<o:p></o:p>
<div class="MsoNormal" align="right" dir="LTR" style="margin: 0cm 0cm 0.0001pt; direction: ltr; unicode-bidi: embed;">

</div>

 name="...."  
این خصوصیت نام فریم را تعیین می کند و کاربرد آن زمانی
مشخص می شود که در فریم از لینک استفاده شده باشد . می توانید آنرا با هر نامی
مقداردهی کنید، ولی به دلیل کابرد آن، بهتر است مقدار آن، محل قرارگیری فریم باشد،
مانند : left ، right ، up ، down  
لینک هایی که در صفحات حاوی فریم قراردارند با استفاده
از خصوصیت target و مقداردهی آن با محل باز شدن لینک، می توانند در کل
صفحه و یا در فریم خاصی باز شوند که برای این منظور باید نام آن فریم در مقدار
خصوصیت target در تگ لینک قرارگیرد .<o:p></o:p>
<div class="MsoNormal" align="right" dir="LTR" style="margin: 0cm 0cm 0.0001pt; direction: ltr; unicode-bidi: embed;">

</div>

با
اصول کلی ساخت فریم آشنا شدید، اما صفحاتی که دارای فریم هستند دو حالت ممکن است
داشته باشند . یا اینکه تمام صفحه از تعدادی فریم تشکیل شده باشد و هیچ عنصر دیگری
به غیر از این فریم ها در صفحه وجود نداشته باشد، و یا اینکه صفحه ترکیبی از فریم
ها و عناصر دیگری مثل متن، عکس، لینک و یا چیزهای دیگر باشد و فریم ها بخشهایی از
صفحه را تشکیل دهند .  
نوشتن صفحه در هر یک از این دو حالت تفاوتهایی با هم
دارد که آن را بررسی می کنیم :<o:p></o:p>

 <frameset>  
در صورتی که تمام صفحه شما فقط از فریم تشکیل شده باشد،
این تگ به جای تگ
body نوشته می شود و فریم ها در بین این تگ قرارمی گیرند .
یعنی صفحه اصلی شما فقط تشکیل شده از چند فریم که عناصر صفحه در این چند فریم آدرس
دهی شده اند و اگر این آدرسها را حذف کنید هیچ چیز دیگری در صفحه نمایش داده
نخواهد شد . الگوی کلی این صفحه به صورت زیر است :<o:p></o:p>
<p class="MsoNormal" dir="LTR" style="margin-top:3.15pt;margin-right:3.15pt;
margin-bottom:0cm;margin-left:0cm;margin-bottom:.0001pt;text-align:left;
line-height:13.35pt;background:#CCFFFF;direction:ltr;unicode-bidi:embed">
<html>  
<head>  
<title> .... </tilte>  
</head>  
<frameset>  
...... some frame ......  
</frameset>  
</html><o:p></o:p>

به
این صفحه frameset گفته می شود . اما تگ frameset خصوصیاتی هم دارد که
عبارتند از :<o:p></o:p>

 cols="...."  
این خصوصیت فریم ها را به صورت عمودی در کنار هم قرارمی
دهد و با درصد مقداردهی می شود . به طور مثال اگر صفحه شما از دو فریم تشکیل شده
که می خواهید یکی از آنها سی درصد و دیگری هفتاد درصد صفحه را تشکیل دهد، باید
آنرا به شکل زیر بنویسید :<o:p></o:p>
<p class="MsoNormal" dir="LTR" style="margin-top:3.15pt;margin-right:3.15pt;
margin-bottom:0cm;margin-left:0cm;margin-bottom:.0001pt;text-align:left;
line-height:13.35pt;background:#CCFFFF;direction:ltr;unicode-bidi:embed">
<html>  
<head>  
<title> .... </tilte>  
</head>  
<frameset cols="30%, 70%">  
<frame name="left" src="...." ...... >  
<frame name="right" src="...." ...... >  
</frameset>  
</html><o:p></o:p>
<div class="MsoNormal" align="right" dir="LTR" style="margin: 0cm 0cm 0.0001pt; direction: ltr; unicode-bidi: embed;">

</div>

 <iframe>  
این تگ در حالت دوم که صفحه شما ترکیبی از فریم با عناصر
دیگر است مورد استفاده قرارمی گیرد، در این حالت باید صفحه را به صورت همیشگی
بنویسید، یعنی با استفاده از تگ body و فریم ها را مثل هر
عنصر دیگری در صفحه قراردهید، فقط برای نوشتن فریم به جای تگ frame باید از این تگ استفاده
کنید و فریم داخلی یا به اصطلاح ( inter frame ) بسازید
. این تگ برخلاف تگ
frame پایان دهنده دارد و باید حتماً آنرا بنویسید .<o:p></o:p>

این
تگ علاوه بر خصوصیات تگ
frame دو خصوصیت دیگر هم دارد که عبارتند از :<o:p></o:p>

 width="...."  
این خصوصیت عرض iframe را مشخص می کند و با عدد
در مقیاس پیکسل و یا درصد مقداردهی می شود .<o:p></o:p>
<div class="MsoNormal" align="right" dir="LTR" style="margin: 0cm 0cm 0.0001pt; direction: ltr; unicode-bidi: embed;">

</div>

 <meta>   این
تگ در بین تگ head نوشته
میشود و همانطور که بیان شد اطلاعات مورد نیاز موتورهای جستجو توسط خصوصیات این تگ
در اختیارشان قرارمی گیرد .<o:p></o:p>

اطلاعاتی
که متا تگ ها در اختیار این جستجوگرها قرارمی دهند عبارتند از :<o:p></o:p>

1.     شرح کوتاهی در مورد سایت یا
Description<o:p></o:p>

2.     معرفی کلمات کلیدی یا
Keywords<o:p></o:p>

3.     معرفی برنامه ای که سایت بوسیله آن ساخته شده است یا Generator<o:p></o:p>

4.     معرفی نویسنده سایت یا
Author<o:p></o:p>

5.     زبان مورد استفاده در صفحه طراحی شده یا Language<o:p></o:p>

6.     تعیین محدوده جغرافیایی مورد استفاده برای جستجوی صفحه
توسط کاربران یا Geography<o:p></o:p>

7.     تعیین کشور مورد استفاده برای جستجوی صفحه توسط کاربران
یا Country<o:p></o:p>

8.     تعیین تاریخ انقضای صفحه<o:p></o:p>

به
جز موارد فوق، موارد زیاد دیگری جهت اطلاع رسانی وجود دارد که در خصوصیات متاتگ ها
استفاده می شود، اما از میان تمام این اطلاعات، دو مورد
keywords و Description در
رتبه بندی صفحه شما در لیست جستجوگرها نقش مهمی دارند و حتماً از این دو باید در
صفحه خود استفاده کنید . نوشتن بقیه متاتگ ها اختیاری است . البته متاتگ ها به غیر
از اطلاعاتی که در اختیار جستجوگرها قرارمی دهند، استفاده های دیگری هم دارند که
با آنها نیز آشنا خواهید شد .<o:p></o:p>

تگ meta پایان دهنده ندارد و دارای خصوصیاتی است که
به نسبت مقادیری که به این خصوصیات داده می شود کاربرد تگ مشخص می شود . خصوصیات
این تگ عبارتند از :<o:p></o:p>
<div align="right" dir="ltr">

<table class="MsoNormalTable" border="0" cellspacing="10" cellpadding="0" width="100%" style="width:100.0%;mso-cellspacing:7.5pt;mso-yfti-tbllook:1184;mso-padding-alt:
 0cm 0cm 0cm 0cm">
 <tbody>
<tr>
 <td width="33%" style="width:33.0%;border:dotted #003300 1.5pt;background:
 #CCFFFF;padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
http-equiv="...."<o:p></o:p>
</td>
 <td width="33%" style="width:33.0%;border:dotted #003300 1.5pt;background:
 #CCFFFF;padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
name="...."<o:p></o:p>
</td>
 <td width="33%" style="width:33.0%;border:dotted #003300 1.5pt;background:
 #CCFFFF;padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
content="...."<o:p></o:p>
</td>
 </tr>
</tbody></table>
</div>

به
عنوان مثال متا تگ معرفی کلمات کلیدی به صورت زیر نوشته می شود، فقط به این نکته
توجه داشته باشید که کلمات کلیدی به کاررفته در تگ باید به صفحه شما مربوط باشند و
از تکرار آنها هم خودداری کنید و نیز آنها را با کاما از یکدیگر جدا کنید .<o:p></o:p>
<p class="MsoNormal" dir="LTR" style="margin-top:3.15pt;margin-right:3.15pt;
margin-bottom:0cm;margin-left:0cm;margin-bottom:.0001pt;text-align:left;
line-height:13.35pt;background:#CCFFFF;direction:ltr;unicode-bidi:embed">
<meta
name="Keywords" content=" html , web , meta , carpardaz
"><o:p></o:p>
<div class="MsoNormal" align="center" dir="LTR" style="margin:0cm;margin-bottom:.0001pt;
text-align:center;line-height:13.35pt;direction:ltr;unicode-bidi:embed">

</div>

برای
اینکه مرورگر کاربر قادر به تشخیص فارسی نویس بودن صفحه باشد، خصوصیت http-equiv را با
Content-Type مقداردهی کنید و در مقدار خصوصیت
Content واژه
text/html; charset=utf-8 را بنویسید .<o:p></o:p>
<p class="MsoNormal" dir="LTR" style="margin-top:3.15pt;margin-right:3.15pt;
margin-bottom:0cm;margin-left:0cm;margin-bottom:.0001pt;text-align:left;
line-height:13.35pt;background:#CCFFFF;direction:ltr;unicode-bidi:embed">
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8"><o:p></o:p>
<div class="MsoNormal" align="center" dir="LTR" style="margin:0cm;margin-bottom:.0001pt;
text-align:center;line-height:13.35pt;direction:ltr;unicode-bidi:embed">

</div>

اگر
به هر دلیلی صفحه شما در سایت جابجا شده باشد و بخواهید با تغییر مسیر، بازدید
کنند گان را به آدرس جدید هدایت کنید، تگ زیر را باید قبل از تگ title بنویسید و آنرا آدرس دهی کنید . در این صورت
می توانید مقدار تگ title را
عنوانی برای جابجا شدن صفحه قراردهید و در بین تگ
body علت
جابجا شدن صفحه و آدرس صفحه جدید را برای کاربرانی که مرورگر آنها به صورت
اتوماتیک به آدرس جدید هدایت نمی شود بنویسید تا بتوانند به صورت دستی به صفحه شما
مراجعه کنند .<o:p></o:p>
<p class="MsoNormal" dir="LTR" style="margin-top:3.15pt;margin-right:3.15pt;
margin-bottom:0cm;margin-left:0cm;margin-bottom:.0001pt;text-align:left;
line-height:13.35pt;background:#CCFFFF;direction:ltr;unicode-bidi:embed">
<meta
http-equiv="refresh" Content="5;
url=http://www.site_name.com"><o:p></o:p>
<div class="MsoNormal" align="center" dir="LTR" style="margin:0cm;margin-bottom:.0001pt;
text-align:center;line-height:13.35pt;direction:ltr;unicode-bidi:embed">

</div>

اگرمحتویات
صفحه شما مکرراً در حال تغییر است، مثل اعلان لحظه به لحظه قیمت های بورس، و می
خواهید صفحه شما مرتباً تجدید شود، خصوصیت
http-equiv را با
Refresh مقداردهی کنید و در مقدار خصوصیت
content زمان این تجدید را به عدد و برحسب ثانیه بنویسید .<o:p></o:p>

 

 
<div class="MsoNormal" align="right" dir="LTR" style="margin: 0cm 0cm 0.0001pt; direction: ltr; unicode-bidi: embed;">

</div>

((
آموزش CSS - استایل شیت چیست ؟
))<o:p></o:p>

CSS از
حروف اول واژه Cascading Style
Sheets گرفته
شده است . استایل شیت یا همان کدهای
CSS را
شاید بتوان امدادگر کدهای HTML بیان
کرد، چرا که با استفاده از استایل شیت کد نویسی بسیار ساده تر، خلاصه ترو راحت تر
انجام می شود . در واقع کدهای CSS کامل
کننده کدهای HTML است، به این صورت که
عناصر به وسیله تگ های HTML در
صفحه قرارمی گیرند و خصویات آنها مانند رنگ، اندازه، فونت، پس زمینه و بسیاری
خصوصیات دیگر با استفاده از کدهای
CSS تعیین
می شود .  
در
بخش مربوط به فریم در HTML دیدید
که چگونه می توانید با استفاده از فریم بخشهای تکراری صفحات را بدون دوباره نویسی
در صفحه خود قراردهید . کدهای CSS کاری
مشابه، اما برای خصوصیات انجام می دهد، یعنی شما یک بار خصوصیات مورد نظر را نوشته
و ذخیره می کنید، و در هر کجا به آن نیاز داشتید آنرا فراخوانی کرده و به تکرار از
آن استفاده می کنید . در این حالت صفحه اصلی شما بسیار خلاصه و منظم خواهد شد .<o:p></o:p>

الگوی
کلی کدهای استایل شیت از سه قسمت اصلی تشکیل شده اند . اول
selector که در واقع همان تگ های
HTML است
اما بدون کاراکتر < > . سپس
خصوصیت آن تگ، و در آخر مقدار این خصوصیت، که این دو در داخل آکلاد { } نوشته می
شوند و بین آنها دو نقطه قرارمی گیرد . یعنی به صورت زیر :<o:p></o:p>
<p class="MsoNormal" align="center" dir="LTR" style="margin-top:3.15pt;margin-right:
3.15pt;margin-bottom:0cm;margin-left:0cm;margin-bottom:.0001pt;text-align:center;
line-height:13.35pt;background:#CCFFFF;direction:ltr;unicode-bidi:embed">
selector{ property :
value }<o:p></o:p>

به
این دو نکته توجه داشته باشید که اولاً الگوی فوق تنها شکل نوشتن کدهای CSS نیست، و دیگر اینکه تگ های HTML از نزدیک ترین کد
CSS به
آنها تأثیر می گیرند . معنی این دو نکته با توضیح در مورد نحوه نوشتن کدهای CSS قابل فهم تر خواهد بود .<o:p></o:p>

کدهای CSS را به سه روش می توان نوشت که توصیه می کنم
این سه روش را خوب به خاطر بسپارید، چرا که در تمامی مباحث مربوط به CSS باید از این روشها استفاده کنید . ضمن اینکه
این سه روش در مورد کدهای جاوااسکریپت هم به شکل مشابه مورد استفاده قرارمی گیرند .  
اولین
روش به این صورت است که با استفاده از الگوی فوق، آنها را در یک فایل جداگانه با
استفاده از نرم افزار Notepad بنویسید
و به جای پسوند html آنرا
با پسوند css ذخیره کنید . همانطور که
از پسوند این فایل مشخص است، این یک فایل
css است،
نه html . یعنی از تگ های
title ، head ، html ، body
و
یا هر تگ دیگری در آن خبری نیست، و کدهای
CSS به
تنهایی در صفحه نوشته و ذخیره می شوند .  
سپس
در بین تگ head در صفحه اصلی یا همان
صفحه HTML باید فایل
css را
به شکل زیر آدرس دهی و به صفحه متصل کنید :<o:p></o:p>
<p class="MsoNormal" dir="LTR" style="margin-top:3.15pt;margin-right:3.15pt;
margin-bottom:0cm;margin-left:0cm;margin-bottom:.0001pt;text-align:left;
line-height:13.35pt;background:#CCFFFF;direction:ltr;unicode-bidi:embed">
<link href
="...." rel ="stylesheet" type ="text/css"><o:p></o:p>

همانطور
که می دانید آدرس محل قرارگرفتن فایل
css در
مقدار خصوصیت href نوشته
می شود .  
در
فضای کامپیوتر شما می توانید فایل
CSS را
در کنار فایل HTML قراردهید
و در آدرس href ابتدا نامی که برای فایل
انتخاب کرده اید و سپس فرمت آن یعنی همان
css را
پس از گذاشتن یک نقطه در ادامه نام بنویسید .<o:p></o:p>
<div class="MsoNormal" align="center" dir="LTR" style="margin:0cm;margin-bottom:.0001pt;
text-align:center;line-height:13.35pt;direction:ltr;unicode-bidi:embed">

</div>

در CSS بجز تگ
style از
تگ دیگری خبری نیست، تمام کدهای CSS
با
استفاده از خصوصیات نوشته می شود که این خصوصیات همانطور که دیدید با مقدار آن
خصوصیت همراه است و بین آنها دو نقطه قرارگرفته است . اگر این خصوصیات به دو روش
اول نوشته شود در بین آکلاد قرارمی گیرد و اگر به روش سوم نوشته شود در بین کوتیشن
. این خصوصیات را در قسمت بعد بررسی می کنیم .<o:p></o:p>

((
آموزش CSS - خصوصیات متن 1
))<o:p></o:p>

در
بخش قبل دیدید که کدهای CSS را
به سه روش می توان نوشت . همچنین یاد گرفتید که این کدها به طور کلی به چه شکل
نوشته می شوند . همانطور که بیان شد این کدها عموماً به شکل خصوصیت نوشته می شوند
. در این بخش کدهایی که برروی متن اثرگذار هستند را بررسی می کنیم .  
در
چند کد اول هرسه روش نوشتن آنها را توضیح خواهم داد، اما در کدهای بعدی فقط یک روش
آنرا بررسی می کنیم و دو روش دیگر نوشتن آنرا خودتان باید با الگوبرداری از
مثالهای اولیه آزمایش کنید و تأثیر آنرا ببینید .  
در
کل همانطور که در بخش HTML هم
بیان شد، بهترین روش یادگیری این است که همواره نرم افزار
Notepad را باز نگه دارید و هر مطلبی را که فرامی گیرید با نوشتن
در این نرم افزار آزمایش کنید و نتیجه آنرا خودتان ببینید و یاد گیری تئوری و عملی
را با هم انجام دهید .<o:p></o:p>
<div class="MsoNormal" align="center" dir="LTR" style="margin:0cm;margin-bottom:.0001pt;
text-align:center;line-height:13.35pt;direction:ltr;unicode-bidi:embed">

</div>
<div align="right" dir="ltr">

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100.0%;mso-cellspacing:0cm;mso-yfti-tbllook:1184;mso-padding-alt:
 0cm 0cm 0cm 0cm">
 <tbody>
<tr>
 <td style="background:#FFDDDD;padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
Example<o:p></o:p>
</td>
 </tr>
<tr>
 <td valign="top" style="border:dotted #990000 1.5pt;background:#FFDDDD;
 padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
em{color: blue;}<o:p></o:p>
</td>
 </tr>
<tr>
 <td valign="top" style="border:dotted #003300 1.5pt;background:#CCFFFF;
 padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
 This is an Example .
   
   
 Bold text with red color . <o:p></o:p>
</td>
 </tr>
<tr>
 <td valign="top" style="border:dotted #990000 1.5pt;background:#CCFFCC;
 padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
This
 is an Example .  
 Bold
 text with red color .<o:p></o:p>
</td>
 </tr>
</tbody></table>
</div>
<div class="MsoNormal" align="center" dir="LTR" style="margin:0cm;margin-bottom:.0001pt;
text-align:center;line-height:13.35pt;direction:ltr;unicode-bidi:embed">

</div>

در
مثال بالا اگر بخواهید کدهای استایل شیت را در قسمت
head صفحه HTML بنویسید، الگوی کلی آن به شکل زیر می باشد .<o:p></o:p>
<p class="MsoNormal" dir="LTR" style="margin-top:3.15pt;margin-right:3.15pt;
margin-bottom:0cm;margin-left:0cm;margin-bottom:.0001pt;text-align:left;
line-height:13.35pt;background:#CCFFFF;direction:ltr;unicode-bidi:embed">
<html>  
<head>  
<style type="text/css">  
em{color: blue;}  
<head>  
<body>  
 This is an Example .   
</body>  
</html><o:p></o:p>
<div class="MsoNormal" align="center" dir="LTR" style="margin:0cm;margin-bottom:.0001pt;
text-align:center;line-height:13.35pt;direction:ltr;unicode-bidi:embed">

</div>
<div align="right" dir="ltr">

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100.0%;mso-cellspacing:0cm;mso-yfti-tbllook:1184;mso-padding-alt:
 0cm 0cm 0cm 0cm">
 <tbody>
<tr>
 <td style="background:#FFDDDD;padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
Example<o:p></o:p>
</td>
 </tr>
<tr>
 <td valign="top" style="border:dotted #990000 1.5pt;background:#FFDDDD;
 padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
div{text-align: center;}<o:p></o:p>
</td>
 </tr>
<tr>
 <td valign="top" style="border:dotted #003300 1.5pt;background:#CCFFFF;
 padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
<div>
 This is a Text with center
 alignment . </div>
  
 <div style="text-align: right;">
 This is a Text with right
 alignment . </div>
<o:p></o:p>
</td>
 </tr>
<tr>
 <td valign="top" style="border:dotted #990000 1.5pt;background:#CCFFCC;
 padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
This is a Text with
 center alignment .<o:p></o:p>

This is a Text with
 right alignment .<o:p></o:p>
</td>
 </tr>
</tbody></table>
</div>
<div class="MsoNormal" align="center" dir="LTR" style="margin:0cm;margin-bottom:.0001pt;
text-align:center;line-height:13.35pt;direction:ltr;unicode-bidi:embed">

</div>
<div align="right" dir="ltr">

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100.0%;mso-cellspacing:0cm;mso-yfti-tbllook:1184;mso-padding-alt:
 0cm 0cm 0cm 0cm">
 <tbody>
<tr>
 <td style="background:#FFDDDD;padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
Example<o:p></o:p>
</td>
 </tr>
<tr>
 <td valign="top" style="border:dotted #990000 1.5pt;background:#FFDDDD;
 padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
div{text-indent: 30;}<o:p></o:p>
</td>
 </tr>
<tr>
 <td valign="top" style="border:dotted #003300 1.5pt;background:#CCFFFF;
 padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
<div>
 This is a Text with 30
 Indent . </div>
  
 <div style="text-indent: 60;">
 This is a Text with 60 Indent
 . </div>
<o:p></o:p>
</td>
 </tr>
<tr>
 <td valign="top" style="border:dotted #990000 1.5pt;background:#CCFFCC;
 padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
This is a Text with 30
 Indent .<o:p></o:p>

This is a Text with 60
 Indent .<o:p></o:p>
</td>
 </tr>
</tbody></table>
</div>

در
بخش قبل تعدادی از خصوصیات اثرگذار برروی متن را بررسی کردیم . در این قسمت برخی
دیگر از این دسته خصوصیات را مورد بررسی قرارمی دهیم .<o:p></o:p>
<div class="MsoNormal" align="right" dir="LTR" style="margin: 0cm 0cm 0.0001pt; direction: ltr; unicode-bidi: embed;">

</div>

در
قسمت قبل خصوصیت استایل شیت که به روش اول یا دوم نوشته می شدند به یک تگ نسبت
داده شده بود . به این ترتیب در صفحه HTML هر کجا از آن تگ استفاده
کنید با خصوصیت استایل شیت نمایش داده می شود، مگر اینکه با استفاده از style در
داخل تگ، خصوصیات آنرا تغییر دهید . اما ممکن است در صفحه ای که شما طراحی می کنید
بخواهید فقط بعضی از این تگ ها با خصوصیت استایل شیت نمایش داده شوند و برخی دیگر
بدون آن خصوصیت .  
برای این منظور باید کد استایل شیت را نامگذاری کنید،
یعنی ابتدا تگ را نوشته، سپس با گذاشتن نقطه، یک نام به انتخاب خودتان بنویسید و
در ادامه خصوصیت و مقدارش را در داخل آکلاد قراردهید . شما هر نامی را می توانید
انتخاب کنید، اما بهتر است نامی که انتخاب می کنید به خصوصیتی که برای کد می
نویسید مرتبط باشد تا با زیاد شدن کدهایی که می نویسید سردرگم نشوید .  
به این نکته مهم توجه داشته باشید که حرف اول نامی که
انتخاب می کنید نباید عدد، کاراکتر و یا خط باشد، ولی استفاده از عدد یا خط اندیس
در حروف دوم به بعد اشکالی ندارد . دیگر اینکه این نام در مجموع باید یک واژه
باشد، یعنی در بین حروف نباید فاصله وجود داشته باشد .  
حالا باید تگی را که در صفحه HTML می نویسید و می خواهید
با خصوصیت استایل شیت نمایش داده شود، با استفاده از خصوصیت class و مقداردهی آن با نامی
که انتخاب کرده اید به کد استایل شیت ارتباط دهید . بقیه تگ ها که در آنها خصوصیت class بکار
نرفته، به صورت عادی در صفحه نمایش داده می شود .  
الگوی کلی این روش به شکل زیر می باشد :<o:p></o:p>
<p class="MsoNormal" align="center" dir="LTR" style="margin-top:3.15pt;margin-right:
3.15pt;margin-bottom:0cm;margin-left:0cm;margin-bottom:.0001pt;text-align:center;
line-height:13.35pt;background:#CCFFFF;direction:ltr;unicode-bidi:embed">
tag.name{property :
value}<o:p></o:p>
<div class="MsoNormal" align="right" dir="LTR" style="margin: 0cm 0cm 0.0001pt; direction: ltr; unicode-bidi: embed;">

</div>
<div align="left" dir="ltr">

</div>
<div align="left" dir="ltr">

</div>
<div align="left" dir="ltr">

</div>
<div align="left" dir="ltr">

</div>
<div align="left" dir="ltr">

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100.0%;mso-cellspacing:0cm;background:#C3C3C3;mso-yfti-tbllook:
 1184;mso-padding-alt:0cm 0cm 0cm 0cm">
 <tbody>
<tr>
 <td style="background:#CCFFFF;padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
Example<o:p></o:p>
</td>
 </tr>
<tr>
 <td valign="top" style="border:dotted #003300 1.5pt;background:#CCFFFF;
 padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
<div style="color: blue;
 text-align: center;">
  
 The Text with blue and center Properties .  
 </div>
<o:p></o:p>
</td>
 </tr>
<tr>
 <td valign="top" style="border:dotted #990000 1.5pt;background:#CCFFCC;
 padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
The Text with blue and
 center Properties .<o:p></o:p>
</td>
 </tr>
</tbody></table>
</div>

((
آموزش CSS - خصوصیات متن 3
))<o:p></o:p>

در
بخش قبل تعدادی از خصوصیات اثرگذار برروی متن را بررسی کردیم . در این قسمت برخی
دیگر از این دسته خصوصیات را مورد بررسی قرارمی دهیم .<o:p></o:p>
<div class="MsoNormal" align="center" dir="LTR" style="margin:0cm;margin-bottom:.0001pt;
text-align:center;line-height:13.35pt;direction:ltr;unicode-bidi:embed">

</div>

خصوصیاتی
که پس از این در مثال ها بررسی می کنیم، به روش سوم نوشته شده است، اما شما می
توانید با الگوبرداری از مثال های قبلی آنها را با استفاده از روش اول و یا دوم
بنویسید و نتیجه آنرا ببینید .<o:p></o:p>
<div class="MsoNormal" align="center" dir="LTR" style="margin:0cm;margin-bottom:.0001pt;
text-align:center;line-height:13.35pt;direction:ltr;unicode-bidi:embed">

</div>
<div align="right" dir="ltr">

</div>
<div align="right" dir="ltr">

</div>
<div align="right" dir="ltr">

</div>
<div align="right" dir="ltr">

</div>

این
خصوصیت در لینک ها هم مورد استفاده قرارمی گیرد، که در جای خود به آن می پردازیم .<o:p></o:p>
<div class="MsoNormal" align="center" dir="LTR" style="margin:0cm;margin-bottom:.0001pt;
text-align:center;line-height:13.35pt;direction:ltr;unicode-bidi:embed">

</div>
<div align="right" dir="ltr">

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100.0%;mso-cellspacing:0cm;mso-yfti-tbllook:1184;mso-padding-alt:
 0cm 0cm 0cm 0cm">
 <tbody>
<tr>
 <td style="background:#CCFFFF;padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
Example<o:p></o:p>
</td>
 </tr>
<tr>
 <td valign="top" style="border:dotted #003300 1.5pt;background:#CCFFFF;
 padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
<div style="text-transform:
 uppercase;">
 uppercase text transform . </div>
  
 <div style="text-transform: capitalize;">
 capitalize text
 transform . </div>
<o:p></o:p>
</td>
 </tr>
<tr>
 <td valign="top" style="border:dotted #990000 1.5pt;background:#CCFFCC;
 padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
UPPERCASE TEXT
 TRANSFORM .<o:p></o:p>

Capitalize Text Transform .<o:p></o:p>
</td>
 </tr>
</tbody></table>
</div>

در
بخش قبل تعدادی از خصوصیات اثرگذار برروی متن را بررسی کردیم . در این قسمت برخی
دیگر از این دسته خصوصیات را مورد بررسی قرارمی دهیم .<o:p></o:p>
<div class="MsoNormal" align="right" dir="LTR" style="margin: 0cm 0cm 0.0001pt; direction: ltr; unicode-bidi: embed;">

</div>
<div align="left" dir="ltr">

</div>
<div align="left" dir="ltr">

</div>
<div align="left" dir="ltr">

</div>
<div align="left" dir="ltr">

</div>
<div align="left" dir="ltr">

</div>
<div align="left" dir="ltr">

</div>
<div align="left" dir="ltr">

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100.0%;mso-cellspacing:0cm;background:#C3C3C3;mso-yfti-tbllook:
 1184;mso-padding-alt:0cm 0cm 0cm 0cm">
 <tbody>
<tr>
 <td style="background:#CCFFFF;padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
Example<o:p></o:p>
</td>
 </tr>
<tr>
 <td valign="top" style="border:dotted #003300 1.5pt;background:#CCFFFF;
 padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
This is a List whit Upper-roman Type .  
 <ul style="list-style-type: upper-roman;">  
<li> Item 1 </li>
  
<li> Item 2 </li>
  
<li> Item 3 </li>
  
 </ul>
<o:p></o:p>
</td>
 </tr>
<tr>
 <td valign="top" style="border:dotted #990000 1.5pt;background:#CCFFCC;
 padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
This is a List whit Upper-roman Type .<o:p></o:p>

         
 I.         
 Item 1<o:p></o:p>

      
 II.         
 Item 2<o:p></o:p>

    
 III.         
 Item 3<o:p></o:p>
</td>
 </tr>
</tbody></table>
</div>
<div class="MsoNormal" align="right" dir="LTR" style="margin: 0cm 0cm 0.0001pt; direction: ltr; unicode-bidi: embed;">

</div>
<div align="left" dir="ltr">

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100.0%;mso-cellspacing:0cm;background:#C3C3C3;mso-yfti-tbllook:
 1184;mso-padding-alt:0cm 0cm 0cm 0cm">
 <tbody>
<tr>
 <td style="background:#CCFFFF;padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
Example<o:p></o:p>
</td>
 </tr>
<tr>
 <td valign="top" style="border:dotted #003300 1.5pt;background:#CCFFFF;
 padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
This is a List whit Image Type .  
 <ul style="list-style-image: url(rose.gif);">  
<li> Item 1 </li>
  
<li> Item 2 </li>
  
<li> Item 3 </li>
  
 </ul>
<o:p></o:p>
</td>
 </tr>
<tr>
 <td valign="top" style="border:dotted #990000 1.5pt;background:#CCFFCC;
 padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
This is a List whit Image Type .<o:p></o:p>

·      
 Item 1<o:p></o:p>

·      
 Item 2<o:p></o:p>

·      
 Item 3<o:p></o:p>
</td>
 </tr>
</tbody></table>
</div>
<div class="MsoNormal" align="right" dir="LTR" style="margin: 0cm 0cm 0.0001pt; direction: ltr; unicode-bidi: embed;">

</div>
<div align="left" dir="ltr">

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100.0%;mso-cellspacing:0cm;background:#C3C3C3;mso-yfti-tbllook:
 1184;mso-padding-alt:0cm 0cm 0cm 0cm">
 <tbody>
<tr>
 <td style="background:#CCFFFF;padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
Example<o:p></o:p>
</td>
 </tr>
<tr>
 <td valign="top" style="border:dotted #003300 1.5pt;background:#CCFFFF;
 padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
This is a List whit Inside position .  
 <ul style="list-style-position: inside;">  
<li> Item 1 </li>
  
<li> Item 2 </li>
  
<li> Item 3 </li>
  
 </ul>
<o:p></o:p>
</td>
 </tr>
<tr>
 <td valign="top" style="border:dotted #990000 1.5pt;background:#CCFFCC;
 padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
This is a List whit Inside position .<o:p></o:p>

·      
 Item 1<o:p></o:p>

·      
 Item 2<o:p></o:p>

·      
 Item 3<o:p></o:p>
</td>
 </tr>
</tbody></table>
</div>

در
بخش قبل دیدید که چگونه می شود با استفاده از خصوصیات CSS برروی متن تغییر ایجاد
کرد، در این بخش می خواهیم کار برروی عناصر پس زمینه را بررسی کنیم .<o:p></o:p>
<div class="MsoNormal" align="right" dir="LTR" style="margin: 0cm 0cm 0.0001pt; direction: ltr; unicode-bidi: embed;">

</div>

 background-color:
....   این
خصوصیت رنگ پس زمینه را تعیین می کند . تفاوتی ندارد که شما بخواهید رنگ پس زمینه
کل صفحه را تغییر دهید و یا هر یک از عناصر داخل صفحه را، با استفاده از این
خصوصیت این کار امکان پذیر است .  
مقداردهی این خصوصیت به سه روش انجام می شود . با دو روش
آن آشنا هستید، یعنی نام رنگ و کد هگز رنگ . اما روش سوم به شما امکان کنترل دقیق
تری برروی رنگ می دهد .  
در این روش با نوشتن rgb در ابتدا، مقدار سه رنگ
اصلی قرمز، سبز و آبی را به عدد جلو آن داخل پرانتز می نویسید . مقدار عددی هر
کدام از این رنگها، عددی بین 0 و 255 است و اعداد باید به وسیله کاما از یکدیگر جدا شوند .  
الگوی کلی این روش به شکل زیر است :<o:p></o:p>
<p class="MsoNormal" align="center" dir="LTR" style="margin-top:3.15pt;margin-right:
3.15pt;margin-bottom:0cm;margin-left:0cm;margin-bottom:.0001pt;text-align:center;
line-height:13.35pt;background:#CCFFFF;direction:ltr;unicode-bidi:embed">
background-color:
rgb(..., ..., ...);<o:p></o:p>
<div class="MsoNormal" align="right" dir="LTR" style="margin: 0cm 0cm 0.0001pt; direction: ltr; unicode-bidi: embed;">

</div>

 background-attachment:
....   با
استفاده از این خصوصیت می توانید نوع scroll عکس را تعیین کنید .<o:p></o:p>

مقادیر
آن عبارتند از :<o:p></o:p>

 fixed  
این مقدار باعث می شود زمانی که کاربر صفحه را scroll می
کند تمامی عناصر حرکت کنند بجز عکس . یعنی عکس scroll نمی شود و به صورت ثابت
در صفحه نمایش داده می شود .<o:p></o:p>
<div class="MsoNormal" align="right" dir="LTR" style="margin: 0cm 0cm 0.0001pt; direction: ltr; unicode-bidi: embed;">

</div>

خصوصیاتی
که برای background مورد استفاده قرارمی گیرند را می توانید به شکل خلاصه هم
بنویسید، فقط باید ترتیب نوشتن آنها را رعایت کنید و بین هر مقدار با مقدار بعد یک
فاصله بگذارید .  
ترتیب نوشتن آنها به شکل زیر است :<o:p></o:p>
<p class="MsoNormal" align="center" dir="LTR" style="margin-top:3.15pt;margin-right:
3.15pt;margin-bottom:0cm;margin-left:0cm;margin-bottom:.0001pt;text-align:center;
line-height:13.35pt;background:#CCFFFF;direction:ltr;unicode-bidi:embed">
color   image_url
  repeat   attachment   position<o:p></o:p>

به
طور مثال اگر می خواهید رنگ پس زمینه صفحه شما مانند این صفحه قهوه ای باشد، و یک
عکس در صفحه قراردهید که تکرارنشود، با scroll حرکت کند و در عرض چهل و
ارتفاع سی پیکسل قرارداشته باشد، شکل کلی کد در دو روش اول و دوم به صورت زیر است :<o:p></o:p>
<p class="MsoNormal" dir="LTR" style="margin-top:3.15pt;margin-right:3.15pt;
margin-bottom:0cm;margin-left:0cm;margin-bottom:.0001pt;text-align:left;
line-height:13.35pt;background:#CCFFFF;direction:ltr;unicode-bidi:embed">
background{rgb(90, 75, 61)
url(....) no-repeat scroll 40px 30px;}<o:p></o:p>

کد
بالا در روش سوم به صورت زیر نوشته می شود :<o:p></o:p>
<p class="MsoNormal" align="center" dir="LTR" style="margin-top:3.15pt;margin-right:
3.15pt;margin-bottom:0cm;margin-left:0cm;margin-bottom:.0001pt;text-align:center;
line-height:13.35pt;background:#CCFFFF;direction:ltr;unicode-bidi:embed">
style="background:
rgb(90, 75, 61) url(....) no-repeat scroll 40px 30px;"<o:p></o:p>

در
بخش قبل با خصوصیاتی که پس زمینه را تغییر می دهند آشنا شدید . در این بخش می
خواهیم با برخی دیگر از خصوصیات استایل شیت آشنا شویم .  
در زیر این خصوصیات را بررسی می کنیم .<o:p></o:p>
<div class="MsoNormal" align="right" dir="LTR" style="margin: 0cm 0cm 0.0001pt; direction: ltr; unicode-bidi: embed;">

</div>
<div align="left" dir="ltr">

</div>
<div align="left" dir="ltr">

</div>
<div align="left" dir="ltr">

</div>
<div align="left" dir="ltr">

</div>
<div align="left" dir="ltr">

</div>

برای این خصوصیت نیز
مانند margin می
توانید با نوشتن یکی از جهت ها، فقط حاشیه همان جهت را تعیین کنید .<o:p></o:p>

در
بخش قبل با تعدادی از خصوصیات استایل شیت آشنا شدید . در این بخش می خواهیم با
برخی دیگر از این خصوصیات آشنا شویم .  
در زیر این خصوصیات را بررسی می کنیم .<o:p></o:p>
<div class="MsoNormal" align="right" dir="LTR" style="margin: 0cm 0cm 0.0001pt; direction: ltr; unicode-bidi: embed;">

</div>
<div align="left" dir="ltr">

</div>
<div align="left" dir="ltr">

</div>
<div align="left" dir="ltr">

</div>
<div align="left" dir="ltr">

</div>
<div align="left" dir="ltr">

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100.0%;mso-cellspacing:0cm;background:#C3C3C3;mso-yfti-tbllook:
 1184;mso-padding-alt:0cm 0cm 0cm 0cm">
 <tbody>
<tr>
 <td style="background:#CCFFFF;padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
Example<o:p></o:p>
</td>
 </tr>
<tr>
 <td valign="top" style="border:dotted #003300 1.5pt;background:#CCFFFF;
 padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
<div style="width: 200px;
 white-space: nowrap; overflow: scroll;">
  
 This is a Division with 200px width and Scroll Overflow Property  
 </div>
<o:p></o:p>
</td>
 </tr>
<tr>
 <td style="border:dotted #990000 1.5pt;background:#CCFFCC;padding:1.9pt 1.9pt 1.9pt 1.9pt">
 
This is a Division with 200px w<o:p></o:p>
</td>
 </tr>
</tbody></table>
</div>

((
آموزش CSS - خصوصیات استایل شیت 3
))<o:p></o:p>

در
بخش قبل با تعدادی از خصوصیات استایل شیت آشنا شدید . در این بخش می خواهیم با
برخی دیگر از این خصوصیات آشنا شویم .  
در
زیر این خصوصیات را بررسی می کنیم .<o:p></o:p>
<div class="MsoNormal" align="center" dir="LTR" style="margin:0cm;margin-bottom:.0001pt;
text-align:center;line-height:13.35pt;direction:ltr;unicode-bidi:embed">

</div>

به
چند نکته در مورد این خصوصیت حتماً توجه داشته باشید .  
اول
اینکه این خصوصیت توسط بعضی از مرورگرها مانند Internet
Explorer پشتیبانی نمی شود .  
دوم
اینکه محل قرار گرفتن عنصری که با استفاده از این خصوصیت در صفحه قرارداده می شود
در همه مرورگرها یکسان نیست و محل نمایش آن متفاوت است .  
دیگر
اینکه اگر صفحه شما در فریم قرارداشته باشد، وخصوصیت
scrolling را در تگ فریم با no
مقداردهی
کرده باشید، از این خصوصیت با مقدار
fixed نمی
توانید استفاده کنید . یعنی این مقدار در فریم کارآیی خود را از دست می دهد .  
در
کل از این خصوصیت بیشتر برای کادرهای تبلیغاتی که می خواهند کاربر حتماً آنرا
ببیند استفاده می شود، اما این گونه کادرهای تبلیغاتی اگر قابل بسته شدن نباشد فقط
یک عنصر مزاحم برای کاربر خواهد بود .<o:p></o:p>
<div class="MsoNormal" align="center" dir="LTR" style="margin:0cm;margin-bottom:.0001pt;
text-align:center;line-height:13.35pt;direction:ltr;unicode-bidi:embed">

</div>

همانطور
که می دانید لینک ها به صورت پیش فرض با یک خط زیر آنها نمایش داده می شود . شما
می توانید با نوشتن یکی از خصوصیات متن، خط زیر لینک را حذف کنید . این خصوصیت
آشنا، text-decoration: .... می
باشد که باید آنرا با none مقداردهی
کنید .<o:p></o:p>
<div class="MsoNormal" align="center" dir="LTR" style="margin:0cm;margin-bottom:.0001pt;
text-align:center;line-height:13.35pt;direction:ltr;unicode-bidi:embed">

</div>

یکی
از حالت هایی که برای لینک مورد استفاده قرارمی گیرد در تگ های دیگر هم قابل
استفاده است . این حالت hover می
باشد که با استفاده از آن زمانی که کاربر نشانگر ماوس را برروی محدوده تگی که با
استفاده از خصوصیت class به
خصوصیات حالت hover مرتبط
شده است قرارمی دهد، آن خصوصیات نمایش داده می شود .  
برای
استفاده از این حالت در تگ های دیگر نیز باید تگ مورد نظر را در بین یک تگ دیگر
قراردهید و خصوصیت class را
در تگ اول بنویسید .<o:p></o:p>
<div class="MsoNormal" align="center" dir="LTR" style="margin:0cm;margin-bottom:.0001pt;
text-align:center;line-height:13.35pt;direction:ltr;unicode-bidi:embed">

</div>

خصوصیاتی
که تا اینجا بررسی کردیم برروی عناصر صفحه اثرگذار بودند، اما خصوصیتی هم وجود
دارد که شکل نشانگر ماوس را کنترل می کند . به صورت پیش فرض نشانگر ماوس به شکل یک
فلش در صفحه نمایش داده می شود، اما با استفاده از این خصوصیت شما می توانید حالت
پیش فرض آنرا تغییر دهید .<o:p></o:p>

این
خصوصیت عبارت است از :<o:p></o:p>

 cursor
: ....  
برای
تعیین شکل نشانگر ماوس، می توانید با نوشتن این خصوصیت به روش اول یا دوم، و با
استفاده از خصوصیت class ، و یا با قراردادن آن به عنوان
مقدار خصوصیت style در
تگ HTML از آن استفاده کنید . این خصوصیت باید با
یکی از مقادیری که در جدول زیر می بینید مقداردهی شود . توضیحات مربوط به هر مقدار
را در جدول برای شما قرارداده ام، همچنین شما می توانید با قراردادن نشانگر ماوس
برروی هر قسمت، تغییر شکل آنرا هم مشاهده کنید .<o:p></o:p>
<div align="right" dir="ltr">

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100.0%;mso-cellspacing:0cm;background:#EEFFFF;mso-yfti-tbllook:
 1184;mso-padding-alt:2.25pt 2.25pt 2.25pt 2.25pt">
 <tbody>
<tr>
 <td width="80%" style="width:80.0%;background:#EEEEEE;padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
توضیح<o:p></o:p>
</td>
 <td width="20%" style="width:20.0%;background:#EEEEEE;padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
مقدار<o:p></o:p>
</td>
 </tr>
<tr>
 <td style="background:#DDFFDD;padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
این
 مقدار نشانگر ماوس را با توجه به تنظیمات مرورگر کاربر تغییر می دهد<o:p></o:p>
</td>
 <td style="background:#DDFFDD;padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
auto<o:p></o:p>
</td>
 </tr>
<tr>
 <td style="padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
نشانگر
 ماوس به صورت همان فلش همیشگی نمایش داده می شود<o:p></o:p>
</td>
 <td style="padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
default<o:p></o:p>
</td>
 </tr>
<tr>
 <td style="background:#DDFFDD;padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
نشانگر
 به شکل دست نمایش داده می شود<o:p></o:p>
</td>
 <td style="background:#DDFFDD;padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
pointer<o:p></o:p>
</td>
 </tr>
<tr>
 <td style="padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
به
 شکل ساعت شنی نمایش داده می شود<o:p></o:p>
</td>
 <td style="padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
wait<o:p></o:p>
</td>
 </tr>
<tr>
 <td style="background:#DDFFDD;padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
به
 شکلی نمایش داده می شود که بر روی متنها به خود می گیرد<o:p></o:p>
</td>
 <td style="background:#DDFFDD;padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
text<o:p></o:p>
</td>
 </tr>
<tr>
 <td style="padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
یک
 علامت سؤال کنار نشانگر ماوس نمایش داده می شود<o:p></o:p>
</td>
 <td style="padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
help<o:p></o:p>
</td>
 </tr>
<tr>
 <td style="background:#DDFFDD;padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
نشانگر
 ماوس به شکل به علاوه نمایش داده می شود<o:p></o:p>
</td>
 <td style="background:#DDFFDD;padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
crosshair<o:p></o:p>
</td>
 </tr>
<tr>
 <td style="padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
نشانگر
 به شکل صلیب نمایش داده می شود<o:p></o:p>
</td>
 <td style="padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
move<o:p></o:p>
</td>
 </tr>
<tr>
 <td style="background:#DDFFDD;padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
یک
 فلش دو طرفه به سمت شمال - جنوب نمایش داده می شود<o:p></o:p>
</td>
 <td style="background:#DDFFDD;padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
n-resize<o:p></o:p>
</td>
 </tr>
<tr>
 <td style="padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
یک
 فلش دو طرفه به سمت شمال - جنوب نمایش داده می شود<o:p></o:p>
</td>
 <td style="padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
s-resize<o:p></o:p>
</td>
 </tr>
<tr>
 <td style="background:#DDFFDD;padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
یک
 فلش دو طرفه به سمت مشرق - مغرب نمایش داده می شود<o:p></o:p>
</td>
 <td style="background:#DDFFDD;padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
e-resize<o:p></o:p>
</td>
 </tr>
<tr>
 <td style="padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
یک
 فلش دو طرفه به سمت مشرق - مغرب نمایش داده می شود<o:p></o:p>
</td>
 <td style="padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
w-resize<o:p></o:p>
</td>
 </tr>
<tr>
 <td style="background:#DDFFDD;padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
یک
 فلش دو طرفه به سمت شمال شرقی - جنوب غربی نمایش داده می شود<o:p></o:p>
</td>
 <td style="background:#DDFFDD;padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
ne-resize<o:p></o:p>
</td>
 </tr>
<tr>
 <td style="padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
یک
 فلش دو طرفه به سمت شمال شرقی - جنوب غربی نمایش داده می شود<o:p></o:p>
</td>
 <td style="padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
sw-resize<o:p></o:p>
</td>
 </tr>
<tr>
 <td style="background:#DDFFDD;padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
یک
 فلش دو طرفه به سمت شمال غربی - جنوب شرقی نمایش داده می شود<o:p></o:p>
</td>
 <td style="background:#DDFFDD;padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
nw-resize<o:p></o:p>
</td>
 </tr>
<tr>
 <td style="padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
یک
 فلش دو طرفه به سمت شمال غربی - جنوب شرقی نمایش داده می شود<o:p></o:p>
</td>
 <td style="padding:2.25pt 2.25pt 2.25pt 2.25pt">
 
se-resize<o:p></o:p>
</td>
 </tr>
</tbody></table>
</div>
<div class="MsoNormal" align="center" dir="LTR" style="margin:0cm;margin-bottom:.0001pt;
text-align:center;line-height:13.35pt;direction:ltr;unicode-bidi:embed">

Khollan Vafa : اخوان صفا

۱۳۹۲ تیر ۳, دوشنبه

استایل شیت و اچ تی ام ال از سایت کارپرداز اصفهان

دنبال کننده ها

بايگانی وبلاگ

درباره من