آموزش HTML: خواص شیوه نامه، رنگ و زمینه

آموزش HTML

آموزش HTML خواص شیوه نامه، رنگ و زمینه
سری آموزش HTML: فصل پنجم

آموزش HTML:شیوه نامه ها انواع و خواص

 

سلام خدمت همراهان عزیز  یکشنبه ها و پنج شنبه ها  با آموزش زبان برنامه نویسی (HTML) همراه شما هستیم.در هفته گذشته فصل جدید دوره آموزشی HTML با عنوان شیوه نامه ها ، انواع و خواص رو برای شما آغاز کردیم. و آموختیم که شیوه نامه ها را به سه روش می توان به صفحات وب اعمال کرد. در این مقاله آموزش خصوصیات رنگ و زمینه را با هم بررسی می کنیم.  برای اطلاعات بیشتر به مقاله ی هفته ی قبل مراجعه فرمایید .

Cover.crop_605x454_1,0

خواص رنگ و زمینه:

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

نام رنگ: کلمات کلیدی مربوط به رنگها عبارتند از :Green ,Gray ,Fushia ,Blue ,Black ,Aqua, Lime, marron, Navy, Olive, Purple, Red, Silver, Teal, White, Yellow
مقادیر مبنای 16:  از 6 رقم به شکلRRGGBB # استفاده می شود . مثلا 0000FF# رنگ آبی و FFFFFF# رنگ سفید را مشخص می کند.
مقادیرRGB : فرمت RGB به صورت (R,G, B) rgb نمایش می شود. که    وB G,R در بازه صفر تا 255 هستند . اغلب مرورگر از این فرمت رنگ پشتیبانی نمی کنند.
خاصیت Color : این خاصیت برای تعیین رنگ متن مورد استفاده قرار می گیرد . مثالها ی زیر را ببینید:
{color :green}

{color: #FF0088}

خاصیت background-color : این خاصیت رنگ زمینه یک دستور را مشخص می کند مقدار فرضی آن none است و هر محتویاتی بر روی آن فایل نمایش است . این وضعیت با کلمه کلیدی transparent نیز مشخص می شود این خاصیت همراه با خاصیت color قابل استفاده است.
background-image: این خاصیت تصویری را به عنوان زمینه یک دستور انتخاب می کند. در این خاصیت باید URL فایل تصویر را ذکر کرد.
{background-image: url (arm-gif); background-color: white}
 background-repeat: در حالی که تصویر کوچکتر از فضایی است که در اختیار آن دستور قرار گرفته است ، این خاصیت تعیین می کند تصویر چگونه در آن فضا قرار گیرد . مقدارx-repeat موجب می شود. در بعد افقی قرار گیرد و مقدار repeat-y موجب می شود تصویر در امتداد بعد عمودی قرار گیرد . مقدار no-repeat موجب می شود تا تصویر در زمینه قرار نگیرد. دستور زیر را ببینید:
{background-image: url (arm-gif); background-repeat: repeat-x}
background-attachment : این خاصیت تعیین می کند که آیا تصویر زمینه همراه با جابجایی متن جابجا شود یا خیر مقدار فرضی این خاصیت scroll است . مقدار fixed آن را ثابت نگه می دارد:
{background-image: url (arm-gif); background-attachment: fixed}
 background-position: این خاصیت تعیین میکند که چگونه یک تصویر زمینه در فضای که برای آن منظور شد قرار گیرد . سه روش برای تعیین موقعیت تصویر وجود دارد:

 

  • گوشه بالا و سمت چپ تصویر می تواند به عنوان یک فاصله مطلق منظور شود.
  • موقعیت تصویر می تواند به صورت درصد (افقی یا عمودی) ذکر شود.
  • استفاده از کلمات کلیدی برای تعیین موقعیت تصویر کلمات کلیدی برای بعد افقی عبارتند از left , ,center right کلمات کلیدی در راستای عمودی عبارتند از : bottom,center,top وقتی از کلمات کلیدی استفاده می شود بعدی که تعیین نشده باشد center منظور خواهد شد. دستورات زیر را ببینید:
{background-image: url (arm-gif); background-position: 10 px 10 px}

{background-image: url (arm-gif); background-position: 20% 40}

خاصیت background: با این خاصیت می توان تمام خواص عناصر زمینه را تعیین کرد . ترتیب خواص، مهم نیست . هر خاصیتی که تعیین نشده باشد، پیش فرض آن منظور خواهد شد:
{background: while url (arm-gif) repeat-y center}
برگرفته از :

کتاب راهنمای جامع (HTML, BHTML, XML)

دکتر عین الله جعفر نژاد قمی

پاسخ به سوال دوستان :

شاید تاکنون به این فکر کرده باشین که چرا باید برای کسب و کار خود وبسایت داشته باشین ؟

دلیل اینکه می‌گوییم باید سایت داشته باشید این آمار است. توجه کنید که ۸۱٪ از افراد قبل از

تصمیم گیری در مورد خرید و فروش در یک کسب وکار یا خدمات، در اینترنت تحقیق می کنند.

یعنی ۲۵.۹۲ میلیون نفر هستند که مشاغل را به صورت آنلاین جستجو می کنند. با این وجود ۴۶% کسب و کارها فکر می‌کنند نیاز به وب سایت ندارند.

توجه داشته باشید که جهان به سمت دیجیتالی شدن پیش می‌رود و نداشتن وب سایت

برای یک شرکت یا هر کسب و کاری، به منزلۀ جا ماندن از گردونۀ روزگار است.

برای اطلاعات بیشتر با همکاران ما در شرکت آراز پردازش در ارتباط باشید

آدرس ایمیل:  info@arazpardazesh.com

اینستاگرام شرکت:   https://instagram.com/araz_pardazesh_kla

تماس با ما:     https://arazpardazesh.com/contact

دیدگاهتان را بنویسید

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

1 × یک =