آموزش طراحی سایت از صفر تا عمل

گام پنجم :

در این مرحله استفاده از تگ های CSS آموزش میدیم

آموزش های این بخش بسیار ابتدایی و صرفا جهت آشنایی و درک بیشتر شما از دنیای برنامه نویسی تحت وب میباشد.
در طول انجام پروژه در فصل های بعدی ، با موراد توضیح داده شده در این فصل بیشتر آشنا خواهید شد.

CSS :

• CSS یا همان Cascading Style Sheet روشی است برای قالب بندی و طراحی اجزای صفحه از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده می شود
• در حقیقت CSS به شما کمک میکند فرمی که طراحی میکنید زیباتر ، کم حجم تر ، خواناتر و دینامیک تر گردد

انواع روشهای استفاده از CSS:

• خاصیت Style تگ ها یا سبک درون خطی ( Inline )
• تگ Style در Head صفحه
• فایل خارجی در پروژه

سبک درون خطی ( Inline ) :

در این روش کدهای CSS را مستقیم داخل تگ های HTML قرار میدهیم. به مثال زیر توجه کنید

                      < p style="background: blue; color: white;"> Test CSS < /p>
                  

با تگ < p> < /p> در گام چهارم آموزش HTML آشنا شدید. با دستور CSS بالا متن داخل تگ < p> رنگ آن سفید و تصویرزمینه(بکگراند) آن آبی میشود.


این روش از نوشتن css دارای بالاترین اولویت اجرا نسبت به دو روش دیگر است. استفاده از این روش تمامی Style های موجود در دو روش دیگر را نادیده میگیرد.
برای اینکه طراحی سایت بهینه تری داشته باشید پیشنهاد میشود که از این روش فقط در مواقع ضروری استفاده کنید .

CSS داخلی :

یکی از روشهای تعریف css استفاده از روش Internal Style Sheet میباشد.
برای استفاده از این روش بایستی کد های CSS را در فایل HTML ، درون تگ< head> قرار دهید.
از این روش فقط در طراحی سایت هایی که تعداد صفحات کمتری دارند ، ولی بهترین روش برای داشتن طراحی سایت حرفه ای استفاده از روش css خارجی میباشد.

در تصویر بالا همان استایل کدهای تگ < p> را انتقال دادیم به داخل تگ Head
همانطور که ملاحظه مینمایید در ایتدا یک < style type="text/css" > < /style> نوشته و سپس کلیه CSS های خود را داخل آن ثبت مینمایید

                       < head>
                            < style>
                               h6 {color:#2B91AF;}
                               p {padding:20px;}
                               body  { background-image:url("images/bg.gif");}
                            < /style>
                        < /head>
                  

توضیحات کدهای بالا :
طبق کد بالا، هر وقت در فرم جاری از تگ h6 استفاده کنید رنگ متن درون آن سبز میشود.
حاشیه ای دور تگ P هایی که در فرم استفاده خواهید کرد می افتد
پس زمینه فرم شما یک عکس خواهد بود

CSS خارجی :

یکی از روشهای تعریف css استفاده از روش External Style Sheet میباشد.
برای داشتن طراحی سایت بهینه پیشنهاد میشود که از این روش استفاده کنید.
از CSS خارجی زمانی استفاده میشود که آن style در بیشتر صفحات استفاده شده باشد.

به عنوان مثال میتوانید کدهایی که در مثال CSS داخلی استفاده کردیم را درون فایلتان تایپ نمایید.

مانند تصویر بالا یک فایل تکست ایجاد کنید و پسوند آن را .CSS ذخیر نمایید
فایل را با برنامه NotePad باز کنید و کدهای Css را در آن وارد کنید. مانند تصویر زیر


نحوه استفاده از فایل Css در فایل های HTML به شکل زیر است

                       < head>
                       < link rel="stylesheet" type="text/css" href="test.css">
                       < /head>
                  

فایل text.css را در تگ Head فایل Html به صورت بالا ثبت میکنید و مقادیر داخل فایل CSS بروی کلیه تگ های فرم HTML تاثیر میگذارد