نویسنده: محسن منوریان

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

none
با استفاده از این مقدار تعیین می کنیم که نمی خواهیم کادر داشته باشیم. در صورتی که مقداری غیر از none تعیین شود کادر خواهیم داشت.

solid
dashed
dotted
double
groove
hidden
inset
outset
ridge

این مقادیر را امتحان کنید تا متوجه نتیجه آنها شوید …

ما باید همیشه عرض کادر هم مشخص کنیم
مثال از روش استفاده :

کد:

<div style=”width:300px; border-style:solid”> برای این کادر عرض 300 پیکسل تعیین شده است .</div>

border-width
این پارامتر به ما اجازه می دهد تا میزان ضخامت کادرها را تعیین کنیم. این پارامتر می تواند مقادیر زیر را داشته باشد:

مقدار عددی بر حسب پیکسل
در این روش می توانیم مقدار ضخامت کادر را بر حسب پیکسل تعیین کنیم. به مثال زیر توجه کنید:

کد:

<div style=”border-style:solid; border-width:10px”> این کادر 10 پیکسل ضخامت دارد </div>

thin
این مقدار باعث خواهد شد تا کادر ما باریک باشد. مانند زیر:

کد:

<div style=”border-style:solid; border-width:thin”> ضخامت این کادر thin در نظر گرفته شده است .</div>

thick
این مقدار به ما یک کادر ضخیم خواهد داد. به مثال زیر توجه کنید:

کد:

<div style=”border-style:solid; border-width:thick”> ضخامت این کادر thick در نظر گرفته شده است .</div>

border-color
شما می توانید در صورت تمایل رنگ کادرهای خود را تغییر دهید. برای این کار باید از پارامتر border-color استفاده کنید. برای مقدار این پارامتر می توانید از نام رنگها استفاده کنید. در صورتی که از نام رنگها استفاده کنید فقط می توانید از تعداد کمی از رنگها استفاده کنید. راه دیگری که برای انتخاب رنگ وجود دارد استفاده از معادل هگزادسیمال رنگها است که نسبت به نام رنگها انعطاف پذیری بیشتری دارد.

برای بدست آوردن کد رنگ ها میتوانید از یک نرم افزار گرافیکی مثل فتوشاپ استفاده نمایید . همچنین میتوانید از جدول موجود در آدرس http://www.w3schools.com/tags/ref_colornames.asp استفاده نمایید و کد رنگ مورد نظر و یا نام رنگ را انتخاب نمایید.

به یک نمونه برای تغییر رنگ کادر توجه کنید:

استفاده از نام رنگها:

کد:

<div style=”border-style:solid; border-color:green”> این کادر به رنگ سبز خواهد بود .</div>

استفاده از معادل هگزا دسیمال رنگها:

کد:

<div style=”border-style:solid; border-color:#008000″> این کادر به رنگ سبز خواهد بود .</div>

 

عرض و ارتفاع :

width
این مشخصه به ما امکان می دهد تا عرض یک بخش از صفحه را تعیین کنیم. برای مثال می توانیم با آن عرض یک DIV را تعیین کنیم. در مثال زیر برای DIV عرضی معادل 200 پیکسل تعیین می کنیم:

کد:

<div style=”width:200px”> این جمله پس از اینکه عرض آن از 200 پیکسل بیشتر شد در سطرهای بعدی ادامه پیدا می کن د.</div>

نتیجه به صورت زیر خواهد بود:
این جمله پس از اینکه عرض آن از 200
پیکسل بیشتر شد در سطرهای بعدی
ادامه پیدا می کند.

مقادیری که برای پارامتر width قرار می دهید می تواند بر اساس پیکسل باشد که در این صورت باید پس از مقدار مربوطه حروف px که نشانه پیکسل است را بنویسید. مقادیر ممکن است بر اساس درصد باشند که در آن صورت باید علامت درصد ( % ) را پس از مقدار قرار دهید.

height
این پارامتر به ما اجازه می دهد تا ارتفاع بخش مشخصی را تعیین کنیم. برای مثال وقتی که ما این پارامتر را برای یک DIV استفاده می کنیم و مقدار آن را 100 پیکسل قرار می دهیم تا وقتی که متن موجود در DIV از 100 پیکسل کمتر ارتفاع دارد ارتفاع DIV 100 پیکسل خواهد بود. ولی وقتی که متن داخل DIV زیاد باشد و از 100 پیکسل بیشتر شود در نتیجه ارتفاع DVI هم از 100 تجاوز خواهد کرد تا همه متن موجود قابل خواندن باشد. به مثال زیر توجه کنید:

ابتدا هنگامی که ارتفاع متن از ارتفاع DIV کمتر است:

کد:

<div style=”height:100px”> ارتفاع این متن از 100 پیکسل کمتر است .</div>

حالا هنگامی که ارتفاع متن از ارتفاع DIV بیشتر است:

کد:

<div style=”height:100px”> ارتفاع<br>این<br>متن از<br>100<br>پیکسل <br>کمتر<br>است .</div>

نکته : حتما این کد ها که براتون اینجا نتیجه براشون گذاشته نشده ، خودتون تست کنید و نتیجه را ببینید ( به علت محدودیت در نمایش کد های java و html بعضی از کد ها را نمی توان برای شما اینجا نمایش داد )

اگر بخواهیم ارتفاع DIV همان 100 پیکسل بماند و تغییر نکند باید از پارامتر overflow در استایل استفاده کنیم. این پارامتر به ما این امکان را می دهد که تعیین کنیم وقتی محتویات DIV از عرض یا ارتفاع DIV بزرگتر می شود چگونه نمایش داده شود. در اینجا برای پارامتر overflow از مقدار hidden استفاده می کنیم که تعیین می کند هر چیزی بزرگتر از عرض یا ارتفاع DIV نمایش داده نشود. به مثال زیر توجه کنید:

کد:

<div style=”height:100px;overflow:hidden”> ارتفاع<br>این<br>متن از<br>100<br>پیکسل <br>کمتر<br>است .</div>

مقادیری که برای پارامتر height قرار می دهید می تواند بر اساس پیکسل باشد که در این صورت باید پس از مقدار مربوطه حروف px که نشانه پیکسل است را بنویسید. مقادیر ممکن است بر اساس درصد باشند که در آن صورت باید علامت درصد ( % ) را پس از مقدار قرار دهید.

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

کد:

<div style=”width:200px; overflow:hidden”><nobr> طول این سطر بیشتر از عرض DIV است ولی با استفاده از overflow قسمتهای بیشتر ز عرض DIV دیده نمی شون د.</nobr></div>

به طور کلی چند مقدار را می توانیم برای پارامتر overflow استفاده کنیم:

1. visible
یا قرار دادن این مقدار برای overflow همه محتویاتی که طول یا عرض بیش از اندازه داشته اند نمایش داده خواهند شد.
2. hidden
این مقدار باعث خواهد شد تا محتویات با طول یا عرض بیش از اندازه نمایش داده نشوند.
3. scroll
این مقدار باعث خواهد شد تا در صورتی که محتویات اندازه ای بیش از طول و عرض لازم دارند با استفاده از اسکرول بار قابل مشاهده باشند.

به یک مثال توجه کنید:

کد:

<div style=”width:200px; overflow:scroll; border:dashed 1px #3399FF; white-space:nowrap”> طول این سطر بیشتر از عرض DIV است ولی با استفاده از overflow قسمتهای بیشتر از عرض DIV دیده نمی شوند. </div>

برای مثال در صفحه اصلی سایت ، در قسمت کابران حاضر ، در صورتی که تعداد کاربران حاضر در سایت زیاد باشد Scroll نمایش داده میشود ، تا لیست کاربران طولانی و طویل نباشد و باعث اشغال صفحه نشود .

و یا همچنین در کادر مخصوص کد ها که در تاپیک ها قرار دارد ، مانند همین کادر کد بالا ، هر گاه که کد ها بیش از 2 یا 3 خط باشد Scroll نمایش داده میشود .

 

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

برای شروع با استفاده از یک ویرایشگر متن مانند Notepad در ویندوز یک فایل متنی ایجاد کنید. سپس اطلاعات زیر را در این فایل وارد کنید:

کد:

div { font-family:Tahoma } .redtext { color:red }

حالا این متن را با نام example.css ذخیره کنید ( شما می توانید از هر نامی که می خواهید برای ذخیره کردن فایل استفاده کنید، فقط به خاطر داشته باشید که پسوند فایل باید css. باشد. )

برای پیوند دادن یک فایل استایل خارجی به صفحه HTML باید از تگ <LINK> استفاده کنیم که در بخش HEAD در متن HTML قرار می گیرد. یک نمونه از این تگ را می توانید در اینجا ببینید:

کد:

<link rel=”stylesheet” type=”text/css” href=”URL”>

شناسه “rel=”stylesheet مشخص می کند که فایل مورد نظر شما یک استایل است.

شناسه “type=”text/css مشخص کننده نوع متن فایل برای مرورگر است.

شناسه ” “=href مشخص کننده محل قرار گرفتن فایل استایل شماست. شما می توانید از آدرس کامل فایل استفاده کنید و یا اگر فایل شما در همان پوشه ای است که متن HTML شما قرار دارد می توانید تنها از نام فایل استفاده کنید.

حالا متن HTML مورد نظر که می خواهید استایل به آن افزوده شود را باز کنید . خط زیر را بین تگ <HEAD> و <HEAD/> وارد کنید. مطمئن شوید که آدرس فایل CSS را درست وارد کرده اید:

کد:

<link rel=”stylesheet” type=”text/css” href=”http://www.monavarian.com/css/example.css”> یا به صورت تعریف نسبی : <link rel=”stylesheet” type=”text/css” href=”css/example.css”>

دقت کنید که روش دوم روش صحیح تری است چون در هر آدرسی جواب خواهد داد ( در روش دوم فایل example.css در همان مسیر فایل html شما و در دایرکتوری Css قرار دارد . )

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

حالا هر تگ DIV که در صفحات مورد نظر شما وجود داشته باشد محتویاتی با فونت Tahomaخواهد داشت.

( به فایل exampl.css که ابتدای این آموزش نوشته شده دقت کنید )

کد:

<div> این متن با فونت tahoma نمایش داده خواهد شد. </div>

همچنین وقتی که از کلاس redtext در تگها استفاده شود متن به رنگ قرمز نمایش داده می شود:

کد:

<p class=”redtext”> این متن به رنگ قرمز نمایش داده خواهد شد .<p>

نتیجه به این صورت خواهد بود:

این متن به رنگ قرمز نمایش داده خواهد شد.

در قسمت بعدی در مورد Class و ID بحث می کنیم

 

استفاده از استایلها می تواند به ما کمک کند تا از دوباره نویسی فرمانها جلوگیری کنیم. برای انجام این کار ما می توانیم یک Style را در بخش HEAD در متن HTML خود تعریف کنیم. یک استایل در HEAD با تگ <STYLE> آغاز می شود و با <STYLE/> به پایان می رسد. در قسمت زیر می توانید یک نمونه از استایل را که مشخصاتی را برای تگ <SPAN> تعریف می کند مشاهده کنید که در بخش HEAD در متن قرار گرفته است.

کد:

<head> <style> <!– span { color:red; font-style:italic } –> </style> </head>

همانطور که می بینید استایل با تگ <style> آغاز می شود. سپس یک کامنت را شروع می کنیم تا مرورگرهایی که از CSS پشتیبانی نمی کنند استایل را نادیده بگیرند و در صفحه به نمایش در نیاورند. در قسمت بعد این خط را مشاهده می کنید:

کد:

span { color:red; font-style:italic }

ین خط مشخص می کند که هر بار که در صفحه از تگهای <SPAN> <SPAN/> استفاده می شود. متن بین آنها به رنگ قرمز و به صورت ایتالیک نمایش داده می شود. در نوشتن استایل باید در نظر داشته باشید که نباید از علامتهای کوچکتر و بزرگتر ( < و > ) که در اطراف تگهای HTML استفاده می شود، استفاده کنید. همچنین به جای استفاده از علامتهای نقل قول ( ” ” ) که در متن HTML استفاده می شود از آکولاد ( { } ) در اطراف خواص استایل استفاده می کنیم. خواص مختلف یک استایل هم به وسیله یک نقطه ویرگول ( ; ) از هم جدا می شوند.

وقتی ما استایلی را در بخش HEAD متن خود برای یک تگ خاص تعریف می کنیم برای محتویات همه تگهایی که استایل برای آن تعریف شده در صفحه مورد استفاده قرار می گیرد. برای مثال وقتی که ما کد بالا را در HEAD متن خود قرار دادیم، هر تگ <SPAN> که در صفحه استفاده شود دارای متنی قرمز و ایتالیک است و نیاز ندارید هر بار دوباره مشخصات متن مورد نظر را تعریف شود.

با این روش ما می توانیم تقریباً خواص همه تگهای HTML را کنترل کنیم، اما این کافی نیست. در قسمتهای بعدی روشهایی را معرفی می کنیم که یک استایل مشخص به وسیله تگهای مختلفی مورد استفاده قرار بگیرد. این کا را با استفاده از CLASS و ID انجام می دهیم که به آن خواهیم پرداخت.

 

برای استفاده از CSS به صورت کلی 3 حالت داریم ( در مقدمه به آنها اشاره شد)
که در آموزش های بعدی با اونها آشنا میشید
ساده ترین راه برای افزودن استایل به یک صفحه استفاده از شناسه style در تگهای HTML است. که به این روش روش خطی (inline ) می گویند.

برای افزودن استایل به یک تگ باید عبارت ” “=style را وارد تگ مربوطه کنیم و ویژگیهای مورد نیاز خود را بین دو دابل کوت ( ” ) وارد می کنیم. مثلاً فرض کنید می خواهیم به یک تگ DIV استایل اضافه کنیم. در این صورت تگ DIV به صورت زیر در می آید

کد:

<div style=”property:value”

برای نمونه وقتی بخواهیم متن داخل یک DIV به رنگ سبز نمایش داده شود می توانیم به صورت زیر تگ DIV را بنویسیم:

کد DIV:

<div style=”color:green”> متن داخل </div>

توجه کنید که بین ویژگی color و رنگ سبز ( green ) از علامت دو نقطه ( : ) استفاده شده نه از علامت مساوی که در تگهای HTML استفاده می شود. همچنین لازم نیست مقادیر مورد نظر را بین علامت های نقل قول ( ” ) قرار دهیم. می توانید نتیجه به کارگیری کد بالا را در سطر زیر مشاهده کنید:

متن داخل DIV

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

این امکان نیز وجود دارد که به یک تگ HTML بیش از یک ویژگی افزوده شود. تنها کافی است بین ویژگیهای مختلف از یک نقطه ویرگول ( ; ) استفاده کنیم. برای مثال اگر بخواهیم متنی که در یک DIV قرار دارد به رنگ قرمز و به صورت ایتالیک باشد می توانیم به صورت زیر کد DIV را بنویسیم:

کد:

<div style=”color:red; font-style:italic”> این متن قرمز رنگ و ایتالیک است .</div>

نتیجه به صورت زیر خواهد بود:

این متن قرمز رنگ و ایتالیک است.

در این روش می توانیم به هر تعداد که لازم باشد از ویژگیهای مختلف درون یک تگ HTML استفاده کنیم. به مثال زیر توجه کنید:

کد:

<div style=”color:blue; font-style:italic; font-weight:bold; font-size:12pt; text-align:center”> متن مورد نظر اینجا قرار می گیرد .</div>

در این مثال ما متنی را با رنگ آبی، ایتالیک، ضخیم، اندازه فونت 12pt و در وسط صفحه خواهیم داشت:

متن مورد نظر اینجا قرار می گیرد.

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

روش های دیگر استفاده از Style بهینه تر هستند ، اما گاهی اوقات نیاز به استفاده از این روش ضروری می باشد
در قسمت های بعد روش های دیگر استفاده از Style را هم بررسی می کنیم

اصول نوشتن استایل :
یک دستور CSS از سه قسمت تشکیل شده است: سلکتور یا انتخابگر (selector)، ویژگی (property) و مقدار (value). این سه قسمت در CSS به صورت زیر نوشته می شوند:

کد:

selector {property: value}

سلکتور معمولاً یکی از تگهای HTML یا سایر عناصر صفحه است که می خواهیم ویژگیهایی را برای آن تعریف کنیم. ویژگی ها مشخصاتی هستند که ما می خواهیم آنها را تغییر دهیم و مقادیر هم مقدار آن ویژگی را تعیین می کنند که ممکن است یک اندازه برای تعیین ارتفاع، یک رنگ، آدرس یک تصویر و … باشند. برای جدا کردن ویژگی ها از مقادیر آنها از علامت دو نقطه ( : ) استفاده می کنیم و ویژگیها و مقادیر را درون آکولاد ( {} ) قرار می دهیم تا از سلکتور مجزا باشند. برای مثال دستور زیر برای مشخص کردن رنگ متن در صفحه استفاده می شود:

کد:

body {color: black}

تذکر: اگر مقداری که استفاده می کنید از چند کلمه مجزا تشکیل شده است از علامت دابل کوت ( ” ” ) در اطراف آن استفاده کنید:

کد:

body {font-family: “Times New Roman”}

تذکر : اگر از چند ویژگی برای یک سلکتور استفاده می کنید باید ویژگیها را با یک نقطه ویرگول ( ; ) از هم جدا کنید. برای نمونه در مثال زیر یک پاراگراف با متن وسط چین و آبی رنگ را تعریف می کند:

کد:

p { text-align: center; color:blue }

برای اینکه استایلی که می نویسید قابل فهم تر باشد می توانید هر ویژگی را در یک سطر جداگانه بنویسید. مانند زیر:

کد:

p { font-family: Tahoma; font-size: 10pt; color: black }

گروه بندی سلکتورها :
شما می توانید از یک ویژگی برای چندین سلکتور استفاده کنید بدون آنکه نیازی باشد برای هر سلکتور کد جداگانه ای بنویسید. برای این کا باید نام همه سلکتور ها را به دنبال هم بنویسید اما به خاطر داشته باشید که سلکتور ها باید به وسیله یک کاما از هم جدا شده باشند. در مثال زیر رنگ متن را برای 5 تگ متفاوت HTML مشخص می کنیم:

کد:

p,h1,h2,div,table { color: blue }

نکته: نباید بعد از آخرین سلکتور از کاما استفاده شود. این باعث می شود تا بعضی مرورگرها از استایل چشم پوشی کنند.

برای مثال نمونه زیر غلط است:

کد:

p, a, h1, { color: #333333 }

ولی نمونه زیر صحیح است:

کد:

p, a, h1 { color: #333333 }

چند کلاس و id نیز قابلیت گروهبندی دارند که بعداً به نحوه گروهبندی آنها می پردازیم.

کامنتها در CSS :
کامنت شامل توضیحاتی است که در مورد کد داده می شود و هنگامی که بعد از اینکه مدتی از نوشتن یک کد گذشت قصد ویرایش آنرا داشته باشید به شما در فهمیدن کدها کمک می کند. کامنتها توسط مرورگر خوانده نمی شوند و در صفحه نمایش داده نمی شوند. یک کامنت در CSS با علامت ( */ ) آغاز می شود وبا علامت ( /* ) پا می یابد. مثال زیر یک کامنت را در CSS نشان می دهد:

کد:

*/این یک کامنت است /*