فناوری اطلاعات و برنامه نویسی

فناوری اطلاعات و متن باز و برنامه نویسی ویندوز و وب و طراحی وب

فناوری اطلاعات و برنامه نویسی

فناوری اطلاعات و متن باز و برنامه نویسی ویندوز و وب و طراحی وب

آموزش CSS بخش دوم

در ادامه بحث css در این بخش به معرفی کلی کدهای css می پردازیم. در css میشه برای تمام المنت های موجود در صفحه خاصیت های زیادی تعریف کرد، مثلا برای زمینه یا background میشه تصویر، موقعیت، اندازه، رنگ رو تعریف کرد و برای فونت میشه نوع، استایل، اندازه و ... تعریف کرد.

برای تعیین استایل هر تگی چند تا راه داریم.

1.با استفاده از class

2.با استفاده از id

3.برای input ها با استفاده از type یا id

فرض کنید 2 تا پاراگراف داریم که برای یکی id و برای دیگری class تعریف می کنیم.


<p class="classpar">پاراگراف با class</p>
<p id="idpar">پاراگراف با id</p>

حالا موقع تعریف css برای این 2 پاراگراف باید کمی دقت کنیم. برای پاراگرافی که براش کلاس تعریف کردیم موقع تعریف css از " . " استفاده می کنیم و برای پاراگرافی که براش id تعریف کردیم موقع تعریف css از " # " استفاده می کنیم و بعد اسم کلاس یا آی دی رو میاریم مثل زیر :


p.classpar{color:yellow}
p#idpar{color:blue}

با تعریف با هر تگ p که کلاس classpar داشته باشه رنگش زرد و هر تگ p که آی دی idpar داشته باشه رنگش آبی میشه.

نوع سوم رو هروقت به قسمت input ها رسیدیم توضیح میدم.

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

برای تعیین فونت از font-family ، برای تعیین رنگ از color ، استایل متن از font-style ، وزن متن از font-weight، و تعیین چایگاه متن از text-align استفاده می کنیم.

به مثال زیر دقت کنید :

b koodak و tahoma پاراگراف با فونت

پاراگراف رنگ قرمز

پاراگراف با متن کج

پاراگراف با متن توپر

پاراگراف با متن راست چین

		<html>

    <head>

        <style>

            p.ff{font-family:b koodak,tahoma;}

            p.cl{color:red;}

            p.fs{font-style:italic;}

            p.fw{font-wight:bold;}

            p.ta{text-align:right;}

        </style>

    </head>

    <body>

        <div>

            <p class="ff">b koodak و tahoma پاراگراف با فونت 
</p>

            <p class="cl">پاراگراف رنگ قرمز</p>

            <p class="fs">پاراگراف با متن کج</p>

            <p class="fw">پاراگراف با متن توپر</p>

            <p class="ta"> پاراگراف با متن راست چین</p>

        </div>

    </body>

</html>