ویژگی border-bottom در css

ویژگی border-bottom در css حاشیه پایینی تگ html

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد ویژگی کاربردی border-bottom در زبان css توضیحاتی را ارائه نماییم.

ویژگی کاربردی border-bottom در اولین نسخه زبان طراحی css یعنی CSS1 معرفی شده است.

ویژگی border-bottom در css حاشیه پایینی تگ html - سایت آموزی

معرفی ویژگی کاربردی border-bottom در زبان طراحی سی اس اس

توسط خاصیت border-bottom می توانید یک حاشیه یا border در قسمت پایینی تگ html مربوطه تعیین کنید.

مقادیر صفت کاربردی border-bottom در زبان طراحی css

صفت کاربردی border-bottom که در زبان طراحی CSS1 معرفی شده است، 5 مقدار می پذیرد که عبارتند از:

  1. مقدار border-bottom-width
  2. مقدار border-bottom-style
  3. مقدار border-bottom-color
  4. مقدار initial
  5. مقدار inherit

مقدار border-bottom-width درون خاصیت border-bottom در زبان سی اس اس

اگر خاصیت border-bottom را برابر با مقدار border-bottom-width قرار دهیم، در حقیقت مقدار عرض حاشیه پایینی یا مقدار عرض border پایینی را در تگ html مربوطه تعیین می نماییم.

مثال براساس مقدار border-bottom-width برای خاصیت border-bottom

[html]div{border-bottom-width:2px;}[/html]

مقدار border-bottom-style درون خاصیت border-bottom در زبان css

اگر خاصیت border-bottom را برابر با مقدار border-bottom-style قرار دهیم، در حقیقت سبک یا استایل حاشیه پایینی یا سبک یا استایل border پایینی را در تگ html مربوطه تعیین می نماییم.

مثال براساس مقدار border-bottom-style برای خاصیت border-bottom

[html]div{border-bottom-style:solid;}[/html]

مقدار border-bottom-color درون خاصیت border-bottom در زبان سی اس اس

اگر خاصیت border-bottom را برابر با مقدار border-bottom-color قرار دهیم، در حقیقت رنگ حاشیه پایینی یا رنگ border پایینی را در تگ html مربوطه تعیین می نماییم.

مثال براساس مقدار border-bottom-color برای خاصیت border-bottom

[html]div{border-bottom-color:orange;}[/html]

مقدار initial درون خاصیت border-bottom در زبان css

اگر خاصیت border-bottom را برابر با مقدار initial تعریف کنیم، در حقیقت همان مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

مقدار inherit درون خاصیت border-bottom در زبان سی اس اس

اگر خاصیت border-bottom را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه ، خصوصیت مذکور را از والد پدری خود به ارث می برد.

مثال براساس مقادیر ترکیبی برای خاصیت border-bottom

[html]div{border-bottom:2px solid red;}[/html]

ویژگی border-bottom در css حاشیه پایینی تگ html - سایت آموزی

بررسی خاصیت border-bottom از نظر نسخه زبان طراحی سی اس اس

ویژگی کاربردی border-bottom در اولین نسخه زبان طراحی css یعنی CSS1 معرفی شده است.

بررسی ساختاری خصوصیت border-bottom

پشتیبانی مرورگرهای اینترنتی از خاصیت border-bottom در زبان طراحی سی اس اس

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

ویژگی border-bottom در css حاشیه پایینی تگ html – اختصاصی سایت آموزی

ویژگی background-origin در css

ویژگی background-origin در css ناحیه شروع پس زمینه

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد ویژگی جدید background-origin در زبان css توضیحاتی را ارائه نماییم.

ویژگی کاربردی background-origin در آخرین نسخه زبان طراحی css یعنی CSS3 معرفی شده است.

ویژگی background-origin در css ناحیه شروع پس زمینه

معرفی و کاربرد ویژگی جدید background-origin در زبان طراحی css

توسط خاصیت background-origin ، می توانیم تعیین کنیم که شروع ترسیم پس زمینه تگ html در کدام ناحیه باشد.

اگر ویژگی background-attachment برای یک تگ html برابر با مقدار fixed باشد، خاصیت background-origin برای آن تگ html  نادیده گرفته می شود و تاثیری نخواهد داشت.

همان طور که در قسمت های قبلی آموزش بک گراند در زبان css خدمت شما عزیزان عرض کرده بودیم، هر تگ html از لحاظ مدل قسمت بندی دارای 4 ناحیه است.

که این نواحی 4 گانه عبارتندار:

  1. ناحیه محتوا ( content-box )
  2. ناحیه فاصله داخلی ( padding-box )
  3. ناحیه حاشیه ( border-box )
  4. ناحیه فاصله خارجی ( margin-box )

ویژگی background-origin در css ناحیه شروع پس زمینه

مقادیر صفت جدید background-origin در زبان طراحی سی اس اس

صفت جدید background-origin که در زبان طراحی CSS3 معرفی شده است، 5 مقدار می پذیرد که عبارتند از:

  1. مقدار padding-box
  2. مقدار border-box
  3. مقدار content-box
  4. مقدار initial
  5. مقدار inherit

مقدار padding-box درون خاصیت background-origin در زبان css

اگر خاصیت background-origin را برابر با مقدار padding-box قرار دهیم، در این حالت شروع ترسیم پس زمینه در تگ html از گوشه بالا و سمت چپ ناحیه فاصله داخلی یا از قسمت padding شروع می شود.

در حقیقت مقدار padding-box به عنوان مقدار پیش فرض این ویژگی می باشد.

مثال براساس مقدار padding-box برای خاصیت background-origin

[html]div{background-origin:padding-box;}[/html]

شکل بک گراند در مقدار padding-box برای خاصیت background-origin

ویژگی background-origin در css ناحیه شروع پس زمینه

مقدار border-box درون خاصیت background-origin در زبان سی اس اس

اگر خاصیت background-origin را برابر با مقدار border-box قرار دهیم، در این حالت شروع ترسیم پس زمینه در تگ html از گوشه بالا و سمت چپ ناحیه حاشیه بیرونی یا از قسمت border شروع می شود.

مثال براساس مقدار border-box برای خاصیت background-origin

[html]div{background-origin:border-box;}[/html]

شکل بک گراند در مقدار border-box برای خاصیت background-origin

ویژگی background-origin در css ناحیه شروع پس زمینه

مقدار content-box درون خاصیت background-origin در زبان css

اگر خاصیت background-origin را برابر با مقدار content-box قرار دهیم، در این حالت شروع ترسیم پس زمینه در تگ html از گوشه بالا و سمت چپ ناحیه محتوا یا از قسمت content شروع می شود.

مثال براساس مقدار content-box برای خاصیت background-origin

[html]div{background-origin:content-box;}[/html]

شکل بک گراند در مقدار content-box برای خاصیت background-origin

ویژگی background-origin در css ناحیه شروع پس زمینه

مقدار initial درون خاصیت background-origin در زبان سی اس اس

اگر خاصیت background-origin را برابر با مقدار initial تعریف کنیم، در حقیقت همان مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

مقدار inherit درون خاصیت background-origin در زبان css

اگر خاصیت background-origin را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه ، خصوصیت مذکور را از والد پدری خود به ارث می برد.

ویژگی background-origin در css ناحیه شروع پس زمینه

بررسی خاصیت background-origin از نظر نسخه زبان طراحی سی اس اس

ویژگی کاربردی background-origin در آخرین نسخه زبان طراحی css یعنی CSS3 معرفی شده است.

بررسی ساختاری خصوصیت background-origin

پشتیبانی مرورگرهای اینترنتی از خاصیت background-origin در زبان طراحی سی اس اس

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

ویژگی background-origin در css ناحیه شروع پس زمینه – اختصاصی سایت آموزی

دسته بندی زبان های برنامه نویسی

دسته بندی زبان های برنامه نویسی زبان برنامه نویسی

دسته بندی زبان های برنامه نویسی را در این مقاله برای شما همراهان سایت آموزی توضیح میدهیم.

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

دسته بندی زبان های برنامه نویسی زبان برنامه نویسی - سایت آموزی

زبان های برنامه نویسی مطابق شکل بالا به دو دسته جامع دسته بندی می شوند:

  1. Low Level Language ( زبان های برنامه نویسی سطح پایین )

  2. High Level Language ( زبان های برنامه نویسی سطح بالا )

Low Level Language زبانهای برنامه نویسی سطح پایین

زبان های برنامه نویسی سطح پایین به دو دسته جامع طبقه بندی می شوند:

  1. Machine Language ( زبان ماشین )

  2. Assembly Language ( زبان اسمبلی )

دسته بندی زبان های برنامه نویسی

Machine Languageزبان ماشین ) 

در زبان های برنامه نویسی سطح پایین ، زبان ماشین به عنوان اولین زبانهای برنامه نویسی شناخته می شود.

زبان ماشین که یکی از مشکل ترین و پیچیده ترین زبانهای برنامه نویسی می باشد، بر پایه صفر و یک ابداع شد.

به عبارت دیگر معمولا زبان های ماشین از رشته هایی عددی تشکیل شده که نهایتا به 1 و 0 ها تبدیل میشوند.

مفهوم عدد 0 در این نوع زبان برنامه نویسی به معنی خاموش و معنی عدد 1 به معنی روشن است.

دسته بندی زبان های برنامه نویسی زبان برنامه نویسی - سایت آموزی

پردازنده های کامپیوتر از میلیون ها سوییچ بسیار کوچک که هر کدام می تواند خاموش یا روشن باشند، تشکیل شده اند.

زبان ماشین علی رغم سختی و پیچیدگی بسیار زیاد برای برنامه نویس ، تنها زبانی است که برای کامپیوتر قابل درک می باشد.

پیچیدگی بسیار زیاد این زبان ها برای برنامه نویس باعث شد ، که زبان های اسمبلی ایجاد شوند.

Assembly Language ( زبان های اسمبلی )

برنامه نویسی زبان ماشین بسیار کند بوده و برای برنامه نویسان خسته کننده و با خطای فراوان همراه بود.

دانشمندان کامپیوتر به همین خاطر به فکر ساخت یک مترجم برای پروسه برنامه نویسی شدند.

مترجم ها را اسمبلر ( Assembler ) می نامند. مترجم ها از کلمات اختصاری انگلیسی استفاده می کردند، که این کلمات اختصاری برای زبان کامپیوتر قابل شناسایی باشد.

دسته بندی زبان های برنامه نویسی

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

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

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

اما همچنان نیازمند دستورهایی بود تا بتواند حتی ساده ترین کارها را انجام دهد

High Level Language زبانهای برنامه نویسی سطح بالا

علی رغم ساده تر شدن فرآیند برنامه نویسی کامپیوتر با پیدایش زبان اسمبلی اما همچنان این زبان پیچیدگی ها و کمبودهای زیادی برای برنامه نویسان داشت.

به همین منظور زبانهای برنامه نویسی سطح بالا متولد شدند. که کارها را باز هم برای برنامه نویس ساده تر شود.

در حقیقت این نوع زبان ها بایستی دو سیکل ترجمه را طی کنند.

اولین سیکل ترجمه نوعی مترجم به نام کامپایلر است، که زبان مورد نظر را به زبان اسمبلی ترجمه می کند.

و سیکل دوم ترجمه هم تبدیل زبان اسمبلی به زبان قابل درک برای کامپیوتر ( زبان ماشین ) می باشد.

شکل زیر سیکل ترجمه زبان های سطح بالا جهت تبدیل به زبان ماشین را برای کامپیوتر نشان می دهد:

دسته بندی زبان های برنامه نویسی

زبان های برنامه نویسی سطح بالا دامنه وسیعی از زبان ها را شامل می شوند.

این نوع زبانهای برنامه نویسی جهت سرعت بخشیدن به فرآیند برنامه نویسی ایجاد شده اند.

و هر یک از دستورات آن ها میتواند کارهای اصلی را انجام دهد.

زبان های مایکروسافت دات نت net. مانند:  C++  .net  C#  Visual Basic  Delphi و  Java در میان زبان های سطح بالا قوی ترین و پرکاربردترین زبان های برنامه نویسی محسوب میشوند.

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

دسته بندی زبان های برنامه نویسی

زبان های برنامه نویسی طراحی سایت نیز در طبقه زبان های سطح بالا قرار دارند.

زبانهای برنامه نویسی طراحی سایت

زبانهای برنامه نویسی تحت وب همچون Javascript و PHP در دسته زبان های سطح بالا قرار می گیرند.

زبان برنامه نویسی Javascript به عنوان یک زبان سمت مشتری ( Client side ) ، شی گرا ( OOP ) ، سطح بالاHigh Level Language ) و اسکریپتی می باشد.

دسته بندی زبان های برنامه نویسی زبان برنامه نویسی - سایت آموزی

زبان برنامه نویسی PHP نیز به عنوان یک زبان سمت سرور ( Server Side ) ، مفسری ، متن باز ( Open source ) ، شی گرا ( OOP ) و سطح بالاHigh Level Language ) می باشد.

دسته بندی زبان های برنامه نویسی زبان برنامه نویسی - سایت آموزی

پیوندهای کاربردی و مفید

تگ های اچ تی ام ال در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های اچ تی ام ال در سایت آموزی

تگ های منسوخ شده HTML در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های اچ تی ام ال در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

دسته بندی زبان های برنامه نویسی زبان برنامه نویسی – اختصاصی سایت آموزی

آموزش تصویری HTML5 جلسه هفتم

[fusion_builder_container admin_label=”” hundred_percent=”no” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” border_size=”” border_color=”” border_style=”solid” margin_top=”30px” margin_bottom=”” padding_top=”” padding_right=”30px” padding_bottom=”” padding_left=”30px”][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” border_position=”all” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” center_content=”no” last=”no” min_height=”” hover_type=”none” link=””][fusion_text]

آموزش تصویری HTML5 جلسه هفتم | menuitem | خاصیت contextmenu

آموزش تصویری HTML5 جلسه هفتم

آموزش تصویری HTML5 جلسه هفتم | menuitem | خاصیت contextmenu
آموزش تصویری HTML5 جلسه هفتم | menuitem | خاصیت contextmenu

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

در این جلسه نیز شما را با یکی دیگر از خاصیت های عمومی جدید در HTML5 آشنا کردیم.

آموزش تصویری HTML5 جلسه هفتم
آموزش تصویری HTML5 جلسه هفتم

خاصیت جدید contextmenu رو همراه با همه متعلقاتش در این جلسه براتون شرح دادم.

با دیدن این آموزش تصویری به راحتی یاد میگیرید که چطور یک منو رو با خاصیت contextmenu مدیریت کنید.

میتونید منوی آبشاری رو با قابلیت کلیک راست تولید کنید. و اون رو به صفحه مورد نظر خودتون مسیردهی کنید.

شما در این آموزش تصویری کاربردی با انواع تگ های منو مثل menu و menuitem آشنا میشید.

این تگ ها در html5 اضافه شدن. که ما رو در ساخت انواع منوها کمک بیشتری بدن.

همچنین تو این آموزش تصویری یاد میگیرید با رویداد onclick چطور منوی خودتون رو در پنجره جدید باز کنید.

این جلسه رو از دست ندید چون با یک عملیات کاربردی در جاوااسکریپت هم آشنا میشید.

و میتونید با تابع window.open کاری کنید که با مدل BOM در جاوااسکریپت رویداد در پنجره مرورگرتون بسازید.

این فیلم رو ببینید تا با تگ کاربردی button که در html5 اضافه شده شما رو آشنا کنیم.

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

ما در این آموزش از یک تگ و یک Attribute هم گذرا رد نمیشیم. کلیه متعلقات این زبان رو براتون تک به تک تدریس می کنیم.

و نکته مثبتش اینه شما قدری جاوااسکریپت و css3 هم مجبور میشید یاد بگیرید تا برای دوره های پیشرفته تر سایت آموزی مهیا بشید.

در ادامه می تونید جلسه هفتم آموزش رو از ویدیوی زیر تماشا کنید :

با کلیک بر روی لینک های زیر به قسمت های بعدی آموزش تصویری HTML5 بروید:

آموزش تصویری HTML5 جلسه اول آموزش تصویری HTML5 جلسه دوم 

 آموزش تصویری HTML5 جلسه سوم | آموزش تصویری HTML5 جلسه چهارم

 آموزش تصویری HTML5 جلسه پنجم | آموزش تصویری HTML5 جلسه ششم

آموزش تصویری HTML5 جلسه هشتم | آموزش تصویری HTML5 جلسه نهم

آموزش تصویری HTML5 جلسه دهم | آموزش تصویری HTML5 جلسه یازدهم

آموزش تصویری HTML5 جلسه دوازدهم | آموزش تصویری HTML5 جلسه سیزدهم

 آموزش تصویری HTML5 جلسه چهاردهم | آموزش تصویری HTML5 جلسه پانزدهم

آموزش تصویری HTML5 جلسه هفتم | menuitem | خاصیت contextmenu – اختصاصی سایت آموزی

[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

رویداد ها ، ویژگی های اختصاصی و عمومی تگ img

رویداد ها و ویژگی های تگ img تمام صفات عنصر img

در این مقاله از سایت آموزی به معرفی کلیه رویداد ها و ویژگی های عنصر img پرداختیم.

رویداد ها و ویژگی های عنصر img

رویداد ها و ویژگی های تگ img را در قالب یک جدول برای شما تدارک دیده ایم.

در مقالات کاربردی آموزش html در سایت آموزی قصد داریم ، کلیه تگ های html5 را به تفکیک رویداد ها ، ویژگی های اختصاصی و عمومی را جهت ساخت یک منبع غنی برای شما کاربران گرامی گردآوری کنیم.

رویداد ها و ویژگی های تگ img تمام صفات عنصر img - سایت آموزی

تگ img ، یکی از پرکاربردترین ترین تگ ها در زبان html به حساب میاد.

شما اگر بخواهید در مرورگرتون عکسی به نمایش در بیاد ، باید از تگ img استفاده کنید.

img از جمله تگ های self closing tag یا تگ تکی محسوب میشه. که در مقاله مفهوم تگ در زبان html توضیح دادم.

تگ پرکابرد img دارای چندین اسم خصوصیت ( ATTRIBUTE NAME ) و مقدار خصوصیت ها ( ATTRIBUTE VALUE ) هستش.

یکی از مهمترین اسم خصوصیت های این تگ ، خصیصه src هست.

در ادامه جدول کلیه رویدادها ، ویژگی های اختصاصی و عمومی عنصر img در یک سند html5 را ملاحظه می کنید:

 

معرفی کلیه رویدادها ، ویژگی های اختصاصی و عمومی تگ img در یک سند html5

alt (صفت اختصاصی)
-aria ( صفت عمومی)
Class ( صفت عمومی)
contenteditable ( صفت عمومی)
contextmenu ( صفت عمومی)
controls (صفت اختصاصی)
-data (صفت عمومی)
dir (صفت عمومی)
dragable (صفت عمومی)
dropzone (صفت عمومی)
dynsrc (صفت اختصاصی)
height (صفت اختصاصی)
hidden (صفت عمومی)
ice:repeating (صفت اختصاصی)
id (صفت عمومی)
ismap (صفت اختصاصی)
lang (صفت عمومی)
longdesc (صفت اختصاصی)
loop (صفت اختصاصی)
lowsrc (صفت اختصاصی)
name (صفت اختصاصی)
onclick (رویداد عمومی موس)
onDblClick (رویداد عمومی موس)
onKeyDown (رویداد عمومی کیبورد)

رویداد ها و ویژگی های تگ img تمام صفات عنصر img

onKeyPress (رویداد عمومی کیبورد)
onKeyUp (رویداد عمومی کیبورد)
onMouseDown (رویداد عمومی موس)
onMouseMove (رویداد عمومی موس)
onMouseOut (رویداد عمومی موس)
onMouseOver (صفت اختصاصی)
onMouseUp (صفت اختصاصی)
role (صفت عمومی)
spellcheck (صفت عمومی)
spry (صفت اختصاصی)
src  (صفت اختصاصی)
start (صفت اختصاصی)
style (صفت عمومی)
title (صفت عمومی)
translate (صفت عمومی)
usemap (صفت اختصاصی)
width  (صفت اختصاصی)

در مقالات آموزشی بعدی در مورد رویدادها و کلیه Attribute های هر تگ توضیحات کاملی ارائه خواهد شد.

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

رویداد ها و ویژگی های تگ img تمام صفات عنصر img – اختصاصی سایت آموزی