استایل درون تگی - Inline Styles
قرار دادن Styleها درون تگ HTML بسیاری از مزیت های CSS را با مخلوط کردن محتوا و چگونگی نمایش از بین می برد، از این روش به ندرت استفاده کنید.
طریقه استفاده به این صورت است که باید Style مورد نظرمان را در تگ مربوطه بیاوریم، مثال زیر نشان می دهد که چگونه رنگ و margin-left تگ <p> را تغییر داده ایم:
مثال: تنظیم رنگ پس زمینه عناصر HTML
خصوصیت background-color رنگ پس زمینه یک عنصر HTML را تنظیم می کند:
مثال (استایل درون تگی - Inline Styles)
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
خصوصیت background-color از خصوصیت قدیمی و منسوخ شده bgcolor ساخته شده است.
خودتان امتحان کنید: تنظیم رنگ پس زمینه با استفاده از روش قدیمی
مثال: تنظیم رنگ و اندازه و فونت عناصر HTML
خصوصیات font-family , color , font-size به ترتیب اندازه، رنگ و فونت متن را تنظیم می کنند:
مثال (استایل درون تگی - Inline Styles)
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
خصوصیات font-family , color , font-size از تگ قدیمی و منسوخ شده <font> ساخته شده اند.
مثال: ترازبندی متن
خصوصیت text-align در جهت محور X یک متن را ترازبندی می کند:
مثال (استایل درون تگی - Inline Styles)
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
خصوصیت text-align از تگ قدیمی و منسوخ شده <center> ساخته شده است.
خودتان امتحان کنید: ترازبندی عنوان با استفاده از روش قدیمی
