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

تعداد نظرات 9 عدد برچسب ها: , , , , , , , , , , ,

آموزش CSS

آموزش CSS

با عرض سلام و احترام خدمت شما کاربران و بازدید کنندگان سایت استونت، با آخرین مطلب سایت استورنت در سال 1393 در خدمت شما عزیزان هستیم!

امروز می خواهیم شما را با زبان شیرین CSS آشنا کنیم، امیدواریم این مطلب که در ساعات پایانی سال 1393 برای شما عزیزان آماده می شود، مفید واقع شود!

 

آموزش CSS

CSS، مخفف عبارت Cascading style sheets است!
از این زبان برای استایل دهی به شیء های مورد نظر در یک صفحه وب استفاه می شود؛ برای استفاده از CSS یادگیری HTML الزامی است، آموزش گام به گام HTML در سایت استورنت موجود است! آموزش CSS
از زبان CSS بیشتر برای زیبا سازی، گروه بندی، مدیریت و… اشیاء در صفحات وب استفاده می شود.

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

به طور کلی به سه روش می توان از CSS در صفحات وب استفاده کرد:

1- CSS داخلی
2- CSS خارجی
3- استفاده CSS در یک خط

CSS داخلی: در CSS های داخلی، دستورات CSS داخل خود صفحه وب نوشته می شوند؛ برای نوشتن دستورات CSS در داخل صفحه وب باید از تگ <style> استفاده کنید. آموزش CSS
توجه داشته باشید که تگ <style> باید در داخل تگ <head> نوشته شود؛ به عبارتی دیگر قبل از تگ پایان <head/> قرار گیرد؛ برای مثال:

<html>
<head>
<style>
دستورات 
</style>
</head>
<body>
</body>
</html>

CSS خارجی: در CSS های خارجی، دستورات CSS داخل یک فایل متنی جدا با پسوند css ذخیره می شود! (برای مثال test.css)
پس از نوشتن دستورات در فایل مورد نظر باید آن را در فضایی در اینترنت آپلود کنید، سپس با استفاده از تگ <link> فایل را در صفحه وب خود وارد کنیم. (یا به اصطلاح لود(باز کردن – بارگزاری) کنیم)
شیوه استفاده از تگ <link> را در پایین مشاهده می کنید:

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

عبارت address محل قرار گیری آدرس فایل آپلود شده است و دو عبارت stylesheet و text/css نشان دهنده این است که این فایل از نوع CSS است.

استفاده CSS در یک خط: در این روش، با استفاده از خصوصیت style هر تگ می توان دستورات CSS را مخصوص به همان تگ، تنظیم کرد.
پس از یادگیری دستورات CSS در این مورد بیشتر صحبت می کنیم؛ اکنون به این مثال توجه کنید:

<p style="Dastoor">Hello!!</p>

 آشنایی با ساختار CSS

در CSS می توان در دو قالب دستورات را نوشت، قالب اول به صورت ID و قالب دوم به صورت Class؛ برای نوشتن دستورات به صورت ID، باید از علامت #  در اول نام ID استفاده کنید.
برای نوشتن دستورات به صورت Class باید قبل از اسم کلاس، از علامت نقطه (.) استفاده کنید. (البته این دو قالب تفاوت زیادی با هم ندارند و اکثر کدنویسان از قالب Class استفاده می کنند)

برای کد نویسی به زبان CSS می توان به دو صورت زیر عمل کرد؛ روش اول، کدنویسی در یک خط:

 .classname OR #IDname { دستورات }

کد نویسی با روش دوم مرسوم تر است:

.className OR #IDName {
     دستورات
}

پس از اینکه دستورات خود را در کلاس یا یک ID تایپ کردیم، باید آن را فراخوانی کنیم!
هر تگ دارای خصوصیت Class یا ID است، اگر نوع قالب بندی دستوارت شما از کلاس باشد باید به صورت زیر عمل کنید:

<p class="ClassName">Hello!!</p>

و در صورتی که از قالب ID  استفاده کرده باشیم باید به جای خصوصیت Class در بالا از خصوصیت id استفاده کنیم.

آشنایی با دستورات CSS

در این قسمت به صورت کوتاه  5 دستور مهم CSS را معرفی می کنیم، در انتها یک مثال برای شما کدنویسی می کنیم!

دستور Color:  این دستور کد رنگ مورد نظر را دریافت می کند و سپس رنگ متن را تعیین می کند.
دستور Background: این دستور رنگ یا آدرس یک تصویر را دریافت می کند و آن را به عنوان رنگ زمینه یا تصویر زمینه تعیین می کند.
دستور Font: این دستور نام فونت یا اندازه و یا استایل متن را تعیین می کند.
دستور margin: این دستور میزان فاصله اطراف یک شیء را نسبت به سایر اشیاء تعیین می کند؛ معمولا این فاصله را بر حسب پیکسل تعیین می کنند که از مخفف px استفاده می شود.
دستور padding: این دستور میزان فاصله اشیاء درون یک شیء را تعیین می کند، به عبارت دیگر فاصله داخلی را تنظیم می کند؛ معمولا این فاصله را بر حسب پیکسل تعیین می کنند که از مخفف px استفاده می شود.

توجه داشته باشید معرفی همه دستورات CSS در این مطلب نمی گنجد، اما در مطالب آینده شما را با دستورات دیگر CSS آشنا خواهیم کرد.

نکته: پس از هر دستور باید آن را با علامت ; سمی کالن ببندید، برای درک بهتر به مثال زیر توجه کنید:

.Test{
    color: #F00;
    Font: Tahoma;
    background: #CCC;
}

سپس کلاس Test را فراخوانی می کنیم، لطفا توجه داشته باشید که CSS نسبت به بزرگی یا کوچکی حروف حساس نیست!

<p class="test">www.wser.ir</p>

نتیجه: www.wser.ir

همان طور که مشاهده می کنید ما می توانیم کارهای مفیدی با زبان CSS انجام دهیم!
البته آموزش تمامی مباحث CSS در یک مطلب مقدور نیست، در مطالب بعدی با مباحث جدیدتر CSS آشنا خواهید شد…

امیدواریم این مطلب نیز برای شما مفید بوده باشد، لطفا ما را از نظرات ارزشمند خود آگاه سازید.

نظرات (9)

لطفا نظر خود را مطرح کنید

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