• آموزش html
  • تهران کد

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

سپتامبر 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

3 دیدگاه. ثبت دیدگاه

css در HTML
سپتامبر 23, 2017 6:15 ب.ظ

[…] به تگ ها در آموزش قبلی به طور کامل مطرح شده برای دیدن آن اینجا کلیک […]

پاسخ
برتر ياب
آوریل 24, 2018 1:03 ب.ظ

عالي

پاسخ
Morteza O2
مارس 6, 2019 9:45 ب.ظ

بسیار خوب و جالب بود…

پاسخ

دیدگاهتان را بنویسید لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

بخش بندی آموزش HTML

  • آموزش html مقدمه
  • شروع کار با HTML در رایانه شخصی
  • مفاهیم پایه‌ای HTML
  • المان های HTML
  • صفت یا اتریبیوت ها در HTML
  • تگ های عنوان در HTML
  • پاراگراف ها در HTML
  • استایل دهی مستقیم به تگ ها
  • فرمت دهی به متن در HTML
  • نقل قول و عناصر استنادی در HTML
  • رنگ ها در html
  • css در HTML
  • لینک ها در HTML
  • عکس ها در HTML
  • جدول ها در HTML
  • لیست ها در html
  • المان های block و inline
  • تگ iframe در html
  • تگ script در HTML
  • تگ head در html
  • صفحه چینی در html
  • HTML واکنشگرا
  • کاراکتر های رزرو شده
  • فرم ها در HTML
  • سایر تگ ها در فرم
  • input type های مختلف در فرم
  • اتریبیوت های فرم
  • ویدیو در HTML
  • پخش صدا در html