Css

|

اموزش سی اس اس

برای اضافه کردن استایل هایا همان کد های css به 3روش میتوان عمل کرد. استایل های داخل صفحه که شامل استفاده از استایل در خود تگ و استفاده از استایل در head میباشد. و همچنین استایل خارجی که خارج از صفحه html نوشته میشود.

استایل در تگ:

یکی از ساده ترین راه ها برای اضافه کردن style به یک صفحه استفاده از style در خود تگ html میباشد. نحوه ی نوشتن استایل داخل یک تگ به شکل زیر میباشد.

<div style="property:value">

بطور مثال اگر بخواهیم به یک div رنگ زمینه سبز بدهیم به این شکل استایل مورد نظر را در داخل تگ اضافه میکنیم:

<div style="background-color:green"></div>

ممکن است بخواهیم بیشتر از یک ویژگی را به یک تگ نسبت بدهیم برای این کار ویژگی ها را با سمی کالن (;) از هم جدا میکنیم. به مثال زیر توجه کنید:

<div/>متن مورد نظر<"div style="color:blue; font-weight:bold; font-size:10px; text-align:center>

که حاصل این کد به این شکل نمایش خواهد داده شد:

متن مورد نظر

استایل ها ی داخلی

نوع دوم استایل ها ی داخلی استایل هایی است که داخل تگ header نوشته میشود. این نوع استایل دادن از تکرار کد های css جلوگیری میکند. برای نوشتن استایل ها در header باید از تگ style استفاده کرد.کد های css باید بین تگ style باز (<style>) و style بسته (<style/>) نوشته شوند.

برای مثال برای دادن ویژگی به تگ های پاراگراف صفحه به این شکل کد نویسی میکنیم:

<head>

<style>

P{

Color:red;

}

</style>

</head>

این کد تمامی پاراگراف های صفحه را قرمز رنگ نمایش میدهد.

استایل خارجی

توضیحات بالا تماما برای استایل هایی بودند که برای صفحه ای که در آن کد های html را مینوشتیم قرار داشتند. اما اگر بخواهیم یک استایل را برای چندین صفحه html به کار ببریم باید کد هایی یکسان را بار ها برای صفحات تکرار کنیم. به جای تکرار کد ها میتوان از style خارجی استفاده کرد. برای این کار ابتدا در notepad شروع به نوشتن استایل ها میکنیم.

مثلا استایل های زیر را به صفحه اضافه میکنیم:

Div

{

Color:red;

}

بعد از وارد کردن متن بالا در notepad آن را با پسوند css. ذخیره کنید.

مثلا test.css

برای استفاده از فایل ساخته شده باید آن را به صفحه ی html پیوست داد. برای این کار از تگ <link> استفاده میکنیم. تگ لینک داخل header نوشته میشود:

<link rel="stylesheet" type="text/css" href="URL">

Stylesheet اعلام میکند که یک فایل شما یک استایل است.

text/css به مرورگر اعلام میکند که نوع متن فایل لینک شده چیست.

در قسمت url آدرس فایل متنی که به عنوان استایل خارجی ذخیره شده است را مینویسیم.

برای استفاده از استایل ها در هر صفحه ای که میخواهید باید آن را پیوست دهید.

حاصل استایل خارجی بالا به شکل زیر میباشد.

تمامی نوشته های این صفحه به رنگ قرمز در می آید.

در مقاله بعدی در مورد عرض و ارتفاع در css توضیح خواهم داد.

css اموزش css

دریافت آخرین مطالب وبلاگ در کانال داتینه

بهاره شهسواری

بهاره شهسواری ، کارشناس نرم افزار هستم .
از سال 91 مشغول به یادگیری زبان های css ,html , javascript و jquery شدم
و از سال 93 به صورت اختصاصی به فعالیت در حوزه css و html پرداختم. علاوه بر کد نویسی به گرافیک هم علاقه مند هستم.

نظرات
a
amirabbas
00:45 1394/08/08

سلام اگه pdf این مطالبم بذارید عالیه

داتینه
بهار شهسواری
23:45 1394/08/08

با سلام دوست عزیز هدف فعلی وبلاگ انتشار مطالب بر روی وبلاگ می باشد اما در آینده نزدیک سعی می کنیم pdf و ویدیو مطالب را هم بگذاریم با تشکر

نظر بدهید