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

با عرض سلام و احترام خدمت شما کاربران و بازدید کنندگان سایت رایانت

با آخرین مطلب سایت رایانت در سال 1393 در خدمت شما عزیزان هستیم!

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

 

آشنایی با زبان CSS

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

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

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

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

CSS داخلی: در CSS های داخلی، دستورات CSS داخل خود صفحه وب نوشته می شوند؛ برای نوشتن دستورات CSS در داخل صفحه وب باید از تگ <style> استفاده کنید.
توجه داشته باشید که تگ <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 آشنا خواهید شد…

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

لطفا برای حفظ حرمت قلم و اندیشه از کپی برداری این مطلب خودداری بفرمایید،در صورتی که فکر می کنید این مطلب مفید است لطفا روی لینک زیر کلیک کنید؛ در غیر این صورت هرگونه کپی برداری حرام می باشد.

روش صحیح کپی برداری

بحث و گفتگو در مورد این مطلب شما نیز مطلب ارسال کنید
سید محمد موسوی

سید محمد موسوی

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

محصولات پیشنهادی فروشگاه رایانت

قالب خبری گود نیوز Good News

قالب خبری گود نیوز Good News

خرید ارزان دو میلیون شماره تلگرامی

خرید ارزان دو میلیون شماره تلگرامی

قالب پورتالی خبری بی تی نیوز (ویژه)

قالب پورتالی خبری بی تی نیوز (ویژه)

شاید این مطالب را هم دوست داشته باشید

۹ پاسخ

  1. طراحی سایت گفت:

    ممنون از مطلب خوبتون…

  2. korosh dustzadeh گفت:

    آره ببخشید اشتباه نوشتم.نه تا اینجا که میدونم میخام بدونم که اون پیغامه که میده واسه چیه

    • سید محمد موسوی گفت:

      سلام کوروش جان
      اگه درست ترجمه کرده باشم، معنی این ارور میشه:
      قادر به اتصال به فیلد یا داده عضو نیست
      موفق باشی

  3. با عرض سلام.من در ویژوال بیسیک به مشکلی بر خوردم زمانی بانک اطلاعاتی رو به اکسس اضافه میکنم و بعد که اجراش میکنم تا نتیجه رو ببینم با پیغام unable to bind to field or data member مواجه میشم چطوری میشه این مشکل رو حل کرد؟

    با تشکر

    • سید محمد موسوی گفت:

      سلام کوروش جان
      من این قسمت از پیام شما رو متوجه نشدم؛ “من در ویژوال بیسیک به مشکلی بر خوردم زمانی بانک اطلاعاتی رو به اکسس اضافه میکنم“، اکسس خودش یه بانک اطلاعاتی هست!
      فک کنم منظور شما این باشه که بانک رو به برنامه خودتون تو ویژوال بیسیک اضافه کردید اما خطا داره…
      اگه منظورتون اینه: باید یک Ado به فرم اضافه کنید بعد از متصل کردن بانک اطلاعاتی، جدول هایی که می خواهید از اون استفاده کنید رو تعیین کنید.
      بعدش اگه تکست باکسی توی فرمتون به Ado متصل نیست باید یک تکست باکس اضافه کنید و اون رو به Ado متصل کنید، سپس اگه نمی خواهید نمایش داده بشه باید اون رو مخفی کنید.
      امیدوارم به خوبی راهنماییتون کرده باشم!
      موفق باشید 🙂

  4. Mahdi گفت:

    Salam
    Salljadid mobarak

  5. برای من که توی برامه نویسی با این زبان مشکل داشتم خیلی کمک کرد

پاسخ دهید

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

*

code