استایل دهی مستقیم به تگ ها

سپتامبر 21, 2017adminskآموزش html3

در این آموزش به آموزش رنگی کردن متن و همچنین تغیرات در سایز متن و رنک پس زمینه خواهیم پرداخت:

استفاده از css به ۳ صورت امکان پذیر بوده که یکی از آنها استایل دهی مستقیم به تگ ها است در ادامه مباحث پیشرفته تری در مورد css خواهیم آموخت.

<!DOCTYPE html>
<html>
<body>

<p>متن عادی</p>
<p style="color:red;">متن قرمز</p>
<p style="color:blue;">متن آبی</p>
<p style="font-size:36px;">متن بزرگ</p>

</body>
</html>

خروجی کد بالا:

رنگی کردن متن در html

تغییر رنگ پس زمینه

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

<!DOCTYPE html>
<html>
<body style="background-color:lightblue;">

<h1>h1 تیتر</h1>
<p>یک پاراگراف</p>

</body>
</html>

خروجی کد بالا:

تغییر رنگ پس زمینه در html

فونت های HTML

زبان html به صورت پیش فرض از ۲ نوع فونت فارسی پشتیبانی می‌نماید یکی فونت arial و فونت دیگر فونت tahoma می باشد در صورت نیاز به استفاده از فونت های دیگر باید فایل فونت را به سند html پیوند دهیم که در مباحث بعدی به شکل کامل به آن خواهیم پرداخت.

<!DOCTYPE html>
<html>
<body>

<h1>متن بدون فونت</h1>
<h1 style="font-family:arial;">متن با فونت آریال</h1>
<h1 style="font-family:tahoma;">متن با فونت تاهوما</h1>

</body>
</html>

خروجی کد بالا:

آموزش فونت در html

اندازه فونت متن

اندازه فونت را به کمک اتریبیوت زیر می توان به دو مقیاس پیکسلی و درصدی مشخص نمود.

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:300%;">%با اندازه ۳۰۰ h1 سربرگ</h1>
<p style="font-size:90px;">یک پاراگراف با اندازه ۹۰ پیکسل</p>

</body>
</html>

خروجی کد بالا:

فونت سایز در html

تراز بندی متن

یک متن میتواند ۳ تراز مختلف چپ وسط و راست داشته باشد، html به صورت پیش فرض تراز چپ را دارد اما بدلیل اینکه زبان فارسی یک زبان راستچین بوده باید تراز بندی راست را برای المان ها و متون html در نظر بگیریم.

<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:right;">یک سربرگ راستچین</h1>
<p style="text-align:center;">یک پاراگراف وسطچین</p>

<h1>یک سربرگ چپچین </h1>
</body>
</html>

خروجی کد بالا:

تراز بندی متن در html