استایل در HTML

استایل در HTML

برای دادن استایل به HTML از CSS استفاده میکنیم. CSS مخفف عبارت Cascading Style Sheets  میباشد که شیوه نامه ای است  برای هر آنچه که در سایت از طریق HTML نمایش میدهید. در HTML4 میتوانید CSS را به ۳ روش زیر اضافه کنید.

  • درون خطی – از صفات در HTML استفاده کنید.
  • داخلی – با استفاده از تگ style در بخش head هر آنچه که میخواهید را تعریف کنید
  • خارجی – از یک فایل css خارجی استفاده کنید و با استفاده از تگ link آن را دربخش head معرفی کنید

بهترین روش برای افزودن استایل در HTML استفاده از فایل خارجی است. که در HTML5 این روش اجباری شده است. اگر چه در این درس چگونگی نوشتن استایل با استفاده از صفات را توضیح خواهیم داد.

استایل درون خطی

به طور معمول استایل های درون خطی زمانی استفاده میشوند که بخواهیم به یک تگ خاص استایل بدهیم. صفت استایل میتواند هر css اس که میخواهید را بنویسید. مثال زیر یک تگ p است که با استفاده از صفت استایل رنگ نوشته و فاصله آن از حاشیه چپ را مشخص میکند.

 استایل در HTML – رنگ پس زمینه

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

خروجی مثال به صورت زیر خواهد بود:

این یک عنوان است

این یک پاراگراف است .

 استایل در HTML – فونت، رنگ، اندازه

برای مشخص کردن فونت متن از font-family، برای رنگ فونت از color و برای مشخص کردن اندازه فونت از Font-size استفاده میشود. به مثال زیر توجه کنید:

خروجی این مثال به صورت زیر است:

A heading

A paragraph.

استایل در HTML – تراز متن

میتوانید با text-align جایگاه متن را مشخص کنید.

خروجی مثال به صورت زیر است:

عنوان وسط چین

این یک متن است.

استایل داخلی

این استایل در بخش head تعریف میشود و میتوانید برای هر تگی که استفاده میکنید یک استایل تعریف کنید. به مثال زیر تعریف کنید:

 استایل خارجی

برای استفاده از CSS به این روش یک فایل جداگانه با فرمت css. ایجاد کرده و هر css ای که میخواهید داشته باشید را در این فایل تعریف میکنید سپس باید این فایل را به فایل HTML نوشته شده مرتبط کنید برای ایجاد این ارتباط از تگ link در بخش head استفاده کرده و آدرس فایل را آنجا مشخص میکنیم.

 

 

 

3 نظرات شما

  • hossain

    فروردین ۶, ۱۳۹۳ at ۱:۵۳ ب.ظ
    سلام...سال نو مبارک... موفق باشی... ولی سلسله مراتبی رو رعایت نکردیااا...
    • بهاران بنی اسدی

      فروردین ۶, ۱۳۹۳ at ۱:۵۸ ب.ظ
      سلام ممنونم سال نو شما هم مبارک
  • مهدی

    فروردین ۶, ۱۳۹۳ at ۵:۰۲ ب.ظ
    خدایش خیلی مبتدی بودش اما کامل و مفید بودش . بسیار ممنونم . سال نو تون هم مبارک باشه . امیدوارم تو این سال جدید رتبه رنک شما تو گوگل برسه به سه یا چهار . براتون تو این سال جدید آرزوی موفقیت و بهترین ها رو دارم . سال نوتون هم مبارک ....

پاسخ دهید

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


© 2013 Mobtadi. All rights reserved.
کلیه حقوق مادی و معنوی برای وبسایت مبتدی محفوظ است.