امتیاز این آیتم
  • 0.00 / 5 5
(0 امتیاز)

آموزش CSS

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

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

آموزش CSS

آموزش 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 آشنا خواهید شد…

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

دسته مادر افزایش سرعت اینترنت در گوشی های اندروید » روش تغییر تصویر زمینه صفحه ورود در ویندوز 10 » داشتن چندین اکانت تلگرام در کامپیوتر به صورت همزمان » آموزش حرفه ای CSS قسمت دوم » مقایسه ویندوز 8 و ویندوز 7، کدام بهتر است؟ » آموزش تغییر Home Page در نسخه جدید فایرفاکس » نمایش طریقه مرتب سازی و جستجوی داده ها » آموزش ساخت ایمیل در سرویس دهنده Gmail » امنیت کامپیوتر خود را دو برابر کنید » آموزش ثبت دامنه » 6 نکته برای بهبود رتبه الکسا » چگونه در گوگل رتبه بهتری داشته باشیم » اصول استفاده صحیح از اینترنت » توصیف دقیق عملکرد هارد دیسک » آموزش افزودن حساب کاربری جدید در ویندوز 8.1 » قسمت پنجم آموزش Html » ضد پاپ آپ در فایرفاکس » تبادل لینک همیشه مفید است؟ » آشنایی با نرم افزار Adobe Dreamweaver CS6 » قسمت چهارم آموزش HTML » آموزش بهینه سازی تصاویر (کم کردن حجم) » قسمت سوم آموزش HTML » آموزش HTML قسمت دوم » تغییر DNS ها برای بهبود سرعت اینترنت » ساخت کلید میانبر برای پوشه ها و برنامه ها » تغییر فونت دیداری ادیتور وردپرس » آموزش Html به صورت گام به گام » آشنایی با متاتگ ها و کاربرد آن در صفحات وب » آموزش کار با ادیتور (ویرایشگر) وردپرس فارسی » آموزش عوض کردن home page در فایرفاکس » پاک سازی cache (کش) مرورگر فایرفاکس » چطور از صفحه نمایش خودمون عکس بگیریم؟ » چگونگی تغییر IP » تغییر تم منوی استارت ویندوز 8 » مخفی کردن فایل ها در عکس » پشتیبان گیری از فایل ها و پوشه ها » اسب تک شاخ در فایرفاکس 30 » تمام تنظیمات ویندوز 8 در یک پوشه (قابل اجرا در ویندوز 7) » آموزش استفاده از ایمیل (سرویس چاپار) »
پست قبلی آموزش ساخت ایمیل در سرویس دهنده Gmail
پست بعدی شخصی سازی پنل مدیریت وردپرس

9 نظرات

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

  2. Mahdi - 1394-01-02 11:48 واگویه(نقل قول)

    Salam
    Salljadid mobarak

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

    با تشکر

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

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

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

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

پاسخ دهید

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