آموزش جامع و كاربردي كدنويسي استايل شت,css - قسمت سوم - استفاده از Style در تگهای HTML : ( روش خطی )
برای استفاده از CSS به صورت کلی ۳ حالت داریم( در مقدمه به آنها اشاره شد)
که در آموزش های بعدی با اونها آشنا میشید
ساده ترین راه برای افزودن استایل به یک صفحه استفاده از شناسه style در تگهای HTML است. که به این روش روش خطی (inline ) می گویند.
برای افزودن استایل به یک تگ باید عبارت ” “=style را وارد تگ مربوطه کنیمو ویژگیهای مورد نیاز خود را بین دو دابل کوت ( ” ) وارد می کنیم. مثلاًفرض کنید می خواهیم به یک تگ DIV استایل اضافه کنیم. در این صورت تگ DIV به صورت زیر در می آید
:
کد:
<div style=”property:value”
برای نمونه وقتی بخواهیم متن داخل یک DIV به رنگ سبز نمایش داده شود می توانیم به صورت زیر تگ DIV را بنویسیم:
کدDIV:
کد:
<div style=”color:green”>
متن داخل
توجه کنید که بین ویژگی 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:۱۲pt; text-align:center”>
متن مورد نظر اینجا قرار می گیرد
.</div>
در این مثال ما متنی را با رنگ آبی، ایتالیک، ضخیم، اندازه فونت ۱۲pt و در وسط صفحه خواهیم داشت:
متن مورد نظر اینجا قرار می گیرد.
در قسمتهای بعدی لیستی را از ویژگیهای مختلفی که با استایل می توانیمآنها را کنترل کنیم خواهیم آورد. در اینجا فقط قصد آموزش نحوه قرارگیریاستایل در تگهای HTML را داشتیم
روش های دیگر استفاده از Style بهینه تر هستند ، اما گاهی اوقات نیاز به استفاده از این روش ضروری می باشد
در قسمت های بعد روش های دیگر استفاده از Style را هم بررسی می کنیم
