HTML5 مقدماتی

آموزش HTML – آشنایی با طراحی ظاهر HTML با CSS

آموزش HTML5
آموزش HTML5

آموزش HTML – آشنایی با طراحی ظاهر HTML با CSS

css از زمان html4 منتشر شده است و برای ارئه و نمایش بهتر عناصر HTML استفاده می شود. هیچ وقت قدرت جادویه css را دسته کم نگیرید.html بدون css در دنیای امروزی یعنی هیچ .
css را می توان به ۳ روش به سند های html معرفی کرد

  • خطی (Inline) – با استفاده از تعریف موجودیت های style در عناصر html به طوری که برای هر عنصر یک سبک خاص طراحی می کنیم.برای استفاده از سبک های خطی برای یک عنصر لازم است دستور <style> را در عنصری که قصد تغیر دادن سبکش را دارید وارد نمایید.لازم به ذکر است بعد از نوشتن دستور <styel> باید تمام خصوصاتی که مایل به تغییر دادنشان هستید را وارد نمایید.
آموزش HTML – آشنایی با طراحی ظاهر HTML با CSS
آموزش HTML – آشنایی با طراحی ظاهر HTML با CSS

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

آموزش HTML – آشنایی با طراحی ظاهر HTML با CSS
آموزش HTML – آشنایی با طراحی ظاهر HTML با CSS
  • داخلی (Internal) – با استفاده از عنصرهای <style> در قسمت  <head> سند html کد های سبک خود را وارد می کنیم . این نوع نوشتن کد های سبک فقط برای ساختن سبک برای یک سند html استفاده می شود.
آموزش HTML – آشنایی با طراحی ظاهر HTML با CSS
آموزش HTML – آشنایی با طراحی ظاهر HTML با CSS

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

آموزش HTML – آشنایی با طراحی ظاهر HTML با CSS
آموزش HTML – آشنایی با طراحی ظاهر HTML با CSS
  • خارجی (External) –  با استفاده از یک فایل css  خارجی سبک کل سند هایی که به این سبک لینک داده می شود  را تغییر می دهیم.این روش در اکثر طراحی های سایت استفاده می شود و به عنوان پر کاربرد ترین روش شناخته میشود. با استفاده از این روش شما می توانید سبک ساخته شده ی خود را به چند سند متصل کنید .با این روش می توانید در هر سند html خود از قسمت هایی از سبک را  که نیاز دارید استفاده کنید.باید این نکته را در نظر داشته باشید زمانی که از این روش استفاده می کنید باید فایل سبک ساخته شده خود را با استفاده از تگ <link> به سند HTML خود وصل کنید .
آموزش HTML – آشنایی با طراحی ظاهر HTML با CSS
آموزش HTML – آشنایی با طراحی ظاهر HTML با CSS

تصویر بالا نحوه اتصال فایل css (سبک) به سند html  می باشد.همچنین تصویر پایین تیکه کدی از یک فایل css می باشد که در آن به تغیرات سند html پرداختیم.

آموزش HTML – آشنایی با طراحی ظاهر HTML با CSS
آموزش HTML – آشنایی با طراحی ظاهر HTML با CSS

البته لازم به ذکر است که بهترین راه برای استفاده از css نوشتن کدهای  css  در یک فایل جداگانه css  می باشد( روش خارجی (External)).

پیروز باشید، طراح باشی


پیروز باشید!
طراح باشی

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

طراح‌باشی

نوشتن دیدگاه

برای نوشتن دیدگاه کلیک کنید

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

پربازدیدها