بایگانی برچسب: s

HTML و CSS

آموزش برنامه نویسی Align – CSS در CSS

درود
تراز افقی CSS

در CSS، چندین خاصیت برای تراز عناصر به صورت افقی مورد استفاده قرار می گیرد.
تراز عناصر بلوک
عنصر بلوک ، عنصری است که عرض کامل را در دسترس قرار می دهد ، و یک پرش به سطر بعد ، قبل و بعد از آن دارد.
نمونه هایی از عناصر بلوک:

برای تراز متن، فصل متن CSS را مطالعه کنید.
در این فصل ما به شما چگونگی تراز عناصر بلوک به صورت افقی برای اهداف طرح بندی را نشان خواهیم داد.
تراز وسط با استفاده از خاصیت margin
عناصر بلوک می توانند با تنظیم حاشیه های چپ و راست بر روی “auto” تراز شوند.
توجه: استفاده از margin:auto در IE8 و نسخه های قبل از آن کار نخواهد کرد ، مگر اینکه یک DOCTYPE! بیان شود.
تنظیم حاشیه های چپ و راست بر روی خودکار مشخص می کند که آنها باید حاشیه موجود را به طور مساوی تقسیم کنند. نتیجه یک عنصر با تراز مرکزی است:

نکته: اگر عرض ۱۰۰٪ باشد ، هماهنگی دیگر اثر ندارد.
توجه: در IE5 یک باگ حاشیه برای عناصر بلوک وجود دارد. برای اینکه نمونه بالا در IE5 کار کند، چند کد بیشتر اضافه کنید : مشاهده نتیجه
تراز چپ و راست با استفاده از خاصیت position
یکی از روش های تراز عناصر استفاده از موقعیت مطلق است:

وجه داشته باشید: موقعیت مطلق عناصر از جریان عادی خارج شده است، و می تواند عناصر را با یکدیگر همپوشانی دهد.
مسئله سازگاری Crossbrowser
هنگام تراز عناصری شبیه به این ، تعریف از پیش تعیین شده margin و padding برای عنصر ، همیشه یک ایده خوب است. این برای جلوگیری از تفاوت های بصری در مرورگرهای مختلف است.
هنگامی که از خاصیت position استفاده می کنیم ، مشکلی در IE8 و قبل از آن وجود دارد. اگر یک عنصر ظرف (در مورد ما ) عرض مشخصی داشته باشد ، و بیانیه DOCTYPE! از دست رفته باشد، IE8 و نسخه های قبلی یک حاشیه ۱۷px در سمت راست اضافه خواهد کرد. این به نظر می رسد که فضای محفوظی برای اسکرول است. همیشه بیانیه DOCTYPE! در هنگام استفاده از خاصیت position تنظیم کنید :

تراز چپ و راست با استفاده از خاصیت float
یکی از روش های تراز عناصر استفاده از خاصیت float است :

مسئله سازگاری Crossbrowser
هنگام تراز عناصری شبیه به این ، تعریف از پیش تعیین شده margin و padding برای عنصر ، همیشه یک ایده خوب است. این برای جلوگیری از تفاوت های بصری در مرورگرهای مختلف است.
هنگامی که از خاصیت float استفاده می کنیم ، مشکلی در IE8 و قبل از آن وجود دارد. اگر بیانیه DOCTYPE! از دست رفته باشد، IE8 و نسخه های قبلی یک حاشیه ۱۷px در سمت راست اضافه خواهد کرد. این به نظر می رسد که فضای محفوظی برای اسکرول است. همیشه بیانیه DOCTYPE! در هنگام استفاده از خاصیت float تنظیم کنید:

و بار دیگر خیلی ممنون که به وبسایت پنگوئن اومدید و وقت گران بهاتون در اختیار ما گذاشته اید.
تا درودی دیگر بدرود.

HTML و CSS

آموزش برنامه نویسی HTML – خاصیت align در تگ img

سلام ! با یکی دیگر از سری پست های آموزشی زبان HTML در خدمت شما هستیم.
نکته: برای فراگیری این بخش از آموزش لازم است شما با تگ img آشنایی داشته باشید در صورت آشنا نبود به مطالب مرتبط این صفحه مراجعه کرده تا شما را به پست آشنایی با تگ img منتقل کند.
در پست یا جلسه قبل ما یک تصویر داشتیم که انواع حالت هابی اون رو در HTML و تگ بسیار پر کاربرد img بررسی کردیم اما یک حالت مهم که یکی از پر کابرد ترین خاصیت برای تگ img به شمار می رود خاصیت align هست align عنوان خاصیتی فوقالعاده حیاطی در زمینه HTML هست با آن در ادامه آشنا می شیم.
align تگی است که با قرار گرفتن رون عکس می تواند آن را به چپ و راست متن یا پایین و بالای متن و حتی هم خط با متن قرار دهد که به تک تک این خاصیت ها می پردازیم. توجه داشته باشید که این تگ مهم در بسیاری از سایت ها نادیده و کم اهمیت جلوه داده شده که ما به مراتب یادگیری ان را لازم می دانیم.
align left
این خاصیت متن در سمت راست تصویر و به صورت روزنامه ای قرار می گیرد. یعنی تصویر به سمت چپ منتقل شده و جایگیری می کند. برای درگ بهتر این مطلب به تصویر زیر که همراه با کد در ویژوال و مرورگر سافاری نمایش داده شده است.
آموزش برنامه نویسی HTML - خاصیت align در تگ img

align right
این خاصیت متن در سمت چپ تصویر و به صورت روزنامه ای قرار می گیرد. یعنی تصویر به سمت راست منتقل شده و جایگیری می کند.
آموزش برنامه نویسی HTML - خاصیت align در تگ img

align bottom
در این خاصیت اولین خط از متن در سمت کنار و پایین عکس قرار می گیرد. برای دقت این مطلب به تصویر زیر دقت کنید.
آموزش برنامه نویسی HTML - خاصیت align در تگ img

 

align top
اولین خط از متن در بالا و کنار عکس شروع به خودنمایی می کند. برای درک بهتر منظور تصویر زیر را مشاهده کنید.
آموزش برنامه نویسی HTML - خاصیت align در تگ img

align middle
این خاصیت از خاصیت های align که متن را به وسط و کنار تصویر منتقل می کند از این روش مامولا برای متن های موتا و تک خطی استفاده می شود. به تصویر زیر دقت کنید.
آموزش برنامه نویسی HTML - خاصیت align در تگ img