آموزش HTML - صفت style
در این فصل با صفت جذاب style آشنا می شوید, صفت style را بعنوان دروازه ورود به css معرفی می کنیم, چند نمونه را مرور می کنیم تا ببینید کار با style چقدر راحت و لذت بخش است, از صفت ها و تگ هایی که بعد از پیدایش style منسوخ شده اند یاد می کنیم, در پایان نیز با چند دستور style دست و پنجه گرم می کنیم
Look! Styles and colors
This text is in Verdana and red
This text is in Times and blue
This text is 30 pixels high
صفت style
HTML 4 به همراه خود یک صفت جالب داشت . یک صفت جدید با قابلیت های فراوان که ترکیب بندی و تغییر اجزای صفحه را براحتی انجام می داد. بطوریکه بسیاری از صفاتی که تا آن زمان برای تغییر رنگ , تغییر فونت , تصویر زمینه و ... استفاده می شد , اکنون با صفت style جایگزین شده بود
صفت style در واقع دروازه ورود به CSS است . از این صفت جهت نوشتن کدهای CSS در تگ های HTML استفاده می شود.
دستورات CSS را هم میتوان بطور مستقیم در صفحه HTML نوشت , هم میتوان آنرا در یک فایل CSS جدا نوشت . برای اینکه دستورات CSS را مستقیما در خود صفحه بنویسیم , از صفت style استفاده می کنیم
از آنجاییکه CSS یک مبحث بزرگ است, آموزش آنرا بطور جداگانه بررسی می کنیم . در این فصل بطور خیلی مختصر با ذکر چند مثال با CSS آشنا می شوید دوره CSS را می توانید پس از پایان دوره آموزش HTML فرا بگیرید.
چند مثال از کاربرد style در HTML
بطور کلی از CSS جهت زیباسازی صفحات HTML استفاده میکنیم :
- style="background-color:yellow"
- style="font-size:10px"
- style="font-family:Times"
- style="text-align:center"
تگ ها و صفات تاریخ گذشته
در HTML 4 تعدادی از تگ ها و صفات به عنوان تاریخ گذشته معرفی شدند . مفهوم تاریخ گذشته به این معنی بود که در نسخه های آینده HTML و XHTML از آنها استفاده نمی شود.
به عبارت دیگر از کاربران خواسته شد تا از این تگ ها و صفات استفاده نکنند
این تگها و صفات عبارت اند از :
| تگ | توضیحات |
|---|---|
| center | محتویات خود را در مرکز صفحه قرار می دهد |
| basefont | برای مشخص کردن فونت صفحه استفاده می شود |
| font | برای مشخص کردن فونت صفحه استفاده می شود |
| strike | یک خط روی عبارت میکشد, (به معنی غلط گیری) |
| s | یک خط روی عبارت میکشد, (به معنی غلط گیری) |
| u | یک خط زیر عبارت میکشد |
| صفت | توضیحات |
|---|---|
| align | موقعیت افقی عبارت را مشخص می کند |
| bgcolor | رنگ پس زمینه را مشخص می کند |
| color | رنگ عبارت را مشخص می کند |
بجای تمام موارد بالا از صفت style استفاده می کنیم
مثال هایی از صفت style
Background Color
<h2 style="background-color:yellow">
صفت style بالا رنگ پس زمینه عنصر h2 را تعیین می کند
خودتان امتحان کنید
Font Family, Color and Size
<p style="font-family:courier new; color:red; font-size:20px">
صفت style بالا فونت عنصر p را تعیین می کند
خودتان امتحان کنید
صفت style استفاده از صفت font را منسوخ کرده است
خودتان امتحان کنید - مثالی از روش قدیمی فونت
Text Alignment
<h1 style="text-align:center">
صفت style بالا فونت عنصر h1 را تعیین می کند
خودتان امتحان کنید - تیتر وسط چین
صفت style استفاده از صفت align را منسوخ کرده است
خودتان امتحان کنید - مثالی از روش قدیمی تیتر وسط چین
