آشنایی با CSS و استایل دهی به صفحات وب

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

CSS مخفف cascading style sheets زبانی است که مکمل زبان های html و php و .. است. یعنی در کنار زبانی مثل html قرار می گیرد تا معنا پیدا کند. برای مثال اگر شما می خواهید رنگ تیتر های سایتتون رو عوض کنید کافیه یک خط کد در css بنویسید و به صفحات سایتتون اعمال کنید.

مزایا استفاده از css: ساختار کدنویسی منسجم تر شود، تغییرات احتمالی خیلی راحت تر اعمال شوند و همچنین کارکردن با آن راحت تر شود.

برای اضافه کردن استایل به کدهای php روش های مختلفی وجود دارد:

  1. در فایل php. ، داخل تگ های php از خصوصیت style استفاده کنیم. این استایل فقط به تگی که در آن به کار رفته اعمال می شود. (می توانیم ویژگی ها را با ; جدا کنیم)
    مثال: در اینجا ما برای تگ b (بولد) استایل تعریف کردیم.

<b style=”color: white; background-color:black” >فرم عضویت</b>

استایل دهی به صفحات وب-ایجاد استایل در تگ

  1. در فایل php. ، تمام کدهای css در تگ <head>  و در داخل تگ <style> نوشته می شوند.

<style>
                نام تگ{
                                تعریف استایل های موردنظر
                }

</style>

مثال:

استایل دهی به صفحات وب-ایجاد استایل با تگ style

  1. بهترین روش برای استایل دهی ، تعریف یک فایل جداگانه با پسوند css. می باشد. سپس برای پیوند بین این فایل css و فایل php ، باید یک لینک در تگ <head> فایل php. اضافه شود. در ادامه این روش را به طور کامل توضیح می دهیم.

نکته: با این روش می توانیم فایل css خود را به هر تعداد صفحه (php) اعمال کنیم.

روش ایجاد فایل CSS

  • برای ایجاد یک فایل css روی file کلیک کرده new را انتخاب کنید در پنجره باز شده css انتخاب کنید. سپس فایل ایجاد شده را در همان پوشه ای که فایل php. را ذخیره کردیم، با نام دلخواه(مثلا test) ذخیره می کنیم.

استایل دهی به صفحات وب-ایجاد css

    روش لینک دهی

  • برای لینک دادن فایل css. به فایل php. خط کد زیر را در فایل php. مدنظر خود قرار می دهیم:

<link rel=”stylesheet”      type=”text/css”    href=”نام فایل سی اس اس.css” />

مثال:

استایل دهی به صفحات وب-ایجاد لینک بین فایل css و php

3 روش استایل دهی در فایل css

  • بعد از تعریف فایل css و برقراری لینک با فایل php، حالانوبت به آن رسیده تا در فایل css هر استایلی مدنظرتان می باشد را تعریف کنید. برای این کار نیز سه روش وجود دارد:
  1. برای تگ ها دونه دونه استایل ایجاد کنیم. 

نام تگ{
        تعریف استایل های مورد نظر

}

مثال:

استایل دهی به صفحات وب-استایل دهی در css

  1. براساس id : همانطور که قبلا گفتیم برای تگ ها id تعریف می کنیم تا در css استفاده کنیم. برای این کار باید ابتدا در فایل css. برای هر id استایل تعریف کنیم.به شکل زیر:
    نکته: هر id با # شروع می شوند.

#نام آی دی به دلخواه {

        تعریف استایل های مورد نظر

}

مثال:

استایل دهی به صفحات وب-استایل دهی در css

سپس باید این id را به تگی که می خواهیم این استایل را داشته باشد بدهیم(در فایل php.) به صورت زیر:

<تگ   id=”نام آی دی”>

استایل دهی به صفحات وب-استایل دهی در css

نکته: id برای هر تگی باید یکتا باشد.پس استایلی که با id تعریف می کنیم فقط به تگی با همان id می توانیم بدهیم.

  1. براساس class:  برای این کار ابتدا باید در فایل css. یک کلاس به شکل زیر تعریف کنیم:
    نکته: هر class با . شروع می شود.

. نام کلاس به دلخواه {

        تعریف استایل های مورد نظر

}

مثال:

استایل دهی به صفحات وب-استایل دهی در css

سپس باید این کلاس را به هر تگی که میخواهیم این استایل ها را داشته باشند بدهیم.(در فایل php.)

 

<تگ  class=”نام کلاس”>

مثلا اگر بخواهیم برای <table> این کلاس را تعریف کنیم، به صورت زیر  اضافه می کنیم:

 

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

 

مدرس: مهندس مهدی نیکخواه

به این مقاله چند تا ستاره میدی؟
[تعداد رای: 3 امتیاز: 3.7]