• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید تا کنون 6334 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

Syntax و قواعد نوشتاری زبان CSS

24126 ۲۴ شهریور ۸۹

:: منظور از Syntax یک زبان برنامه نویسی چیست ؟

Syntax در واقع قواعد نحوی و نوشتاری یک زبان برنامه نویسی است . یعنی اینکه دستورات یک زبان برنامه نویسی به چه شکلی باید نوشته بشه . در ظاهر امر ، بارزترین تفاوت زبانهای برنامه نویسی همین تفاوت Syntax اونها هستش . و اگر در هنگام برنامه نویسی جایی به پیامی با عنوان "Syntax Error" برخورد کردید بدونید که توی کدی که نوشتید ، یک مشکل نوشتاری وجود داره و نه مشکل منطقی .

در این مطلب ما با زبانی ساده به شما آموزش میدیم که کدهای CSS رو به چه شکلی باید بنویسید .

تو پرانتز :  از کسایی که توی برنامه نویسی حرفه ای ترند معذرت می خوام ، شاید بیان ساده ی این گونه مطالب برای اونها یه کم خسته کننده باشه ، ولی شعار 7Learn.com ، آموزش ساده و روان طراحی وب برای همه هستش و ما به این شعار پایبندیم . پس مطالب در حد امکان حتی برای کسانی که هیچ اطلاعی از طراحی وب ندارند ، ساده و قابل فهم بیان میشه .

:: CSS Syntax

Syntax زبان CSS بسیار ساده است و از سه قسمت مهم زیر تشکیل میشه :

1. Selector's (انتخابگرها) : نامی است که شما برای یک دسته از تنظیمات CSS انتخاب می کنید . بعدها هر تگ html که بخواهد این تنظیمات را رو خود اعمال کند ، به این Selector نیازمند است .

2. Property's (ویژگیها) : ویژگی های Selector ها هستند که می خواهید روی تگها اعمال شوند  . مثل رنگ و اندازه متن ، عکس پس زمینه و ...

3. Value's (مقدارها) : مقادیری است که شما برای هر کدام از Property ها یا همون ویژگی های یک Selector تعیین میکنید . مثلا مقدار red برای ویژگی color ، یا مقدار 7px برای ویژگی font-size .

:: به صورت کلی فرم نوشتاری یک بلاک (دسته) تنظیمات CSS به شکل زیره :

Selector {
   property1
: value1 ;
   property2
: value2 ;
   ...
}


برای خواندن این مقاله به صورت کامل و دانلود PDF آن به ادامه ی مطلب مراجعه کنید ...



نکات قابل توجه :

هر دسته از تنظیمات CSS با Selector اون شناخته میشه که در اول اون دسته نوشته میشه .
نام سلکتور نباید با رقم های 0 تا 9 شروع شود .
هر تعداد از ویژگی های CSS رو که میخواید با هم باشند ، درون آکولاد باز و بسته { } قرار میدید .
اگر خواستید بیش از یک ویژگی CSS رو درون یک Selector بیارید ، حتما باید اونها رو با کاراکتر ; (سمیکولن) از هم جدا کنید . مثل بالا .
برای دادن مقدار به یک ویژگی ، پس از نوشتن نام ویژگی، یک کاراکتر : قرار داده و بعد مقدار مورد نظر رو می نویسید .
برای سادگی در خواندن کد ، سعی کنید هر ویژگی را در یک سطر بنویسید . مثل بالا .
 

:: توجه : در آینده در مورد تمامی ویژگی CSS بحث خواهیم کرد . در زیر صرفا برای تفهیم بیشتر ، در مثال های استفاده شده ، از ویژگی های color و font-size بهره بردیم که برای تعیین رنگ و اندازه ی متن استفاده می شوند .

 
مثال1) با قرار دادن selector زیر در تگ <style>  ، رنگ متن درون تمامی پاراگراف ها (تگ <p>) ، سبز و اندازه ی متن آنها 12 پیکسل میشود .

p {
   color
:green;
   font-size
:12px;
}

در این مثال Selector ما p است ، دو ویژگی color و font-size هم با مقادیر green و 12px داریم .

حالا اگه بخواهیم این رنگ و اندازه فقط بر روی پاراگراف خاصی اعمال شه ، باید چه کار کنیم ؟

:: انواع Selector ها

:: در اینباره باید بگم که Selector ها به صورت کلی دو نوعند :
1) سلکتورهای عمومی : ویژگیهای این نوع سلکتورها ، بر روی همه تگهای هم نام Selector اعمال میشود .  این سلکتور ها دقیقا هم نام تگ های html هستند . مثل مثال بالا که سلکنور p با تگ <p> همنام است .
2) سلکتورهای اختصاصی : Selector های اختصاصی رو خودتون می تونید روی تگ خاصی اعمال کنید. در اول نام سلکتورهای اختصاصی باید یک علامت نقطه قرار دهید .

مثلا اگر سلکتوری با یکی از نام های p , a , table  تعریف کنید ، تنظیمات اونها به ترتیب روی تمامی تگهای <table> (جدول) و <a> (تگ لینک دادن) و <p> (تگ پاراگراف)  که در اون صفحه html قرار دارند ، اعمال می شوند .
پس نتیجه می گیریم اگر خواستید توی وب سایتتون تمامی جداول ، لینکها ، لیست ها ، متن ها و ... همگی به یک شکل نمایش داده بشن ، باید یک سلکتور عمومی با نام تگ مربوطه تعریف کنید و ویژگی ها و تنظیمات مورد نظرتون رو درون اون قرار بدید .

مثال2) همونطور که گفتیم در اول نام سلکتورهای اختصاصی باید یک علامت نقطه قرار دهید :

.myParagraph {
   color
: blue;
   font-size
:10px;
}

و حالا اگر خواستید یک سلکتور  اختصاصی را روی تگ خاصی اعمال کنید باید نام آن سلکتور را (بدون نقطه ی ابتدایی) به عنوان مقدار ویژگی class آن تگ قرار دهید . مثلا برای اعمال تنظیمات سلکتور اختصاصی myParagraph. (که در بالا تعریف کردیم) روی یک پاراگراف خاص به شکل زیر عمل می کنیم .

<p class="myParagraph" >a Paragraph from 7Learn.com</p>

:: ویژگی class برای همه ی تگ های html تعریف شده است و به عنوان مقدار نام یک یا چند سلکتور را می تواند در خود بگیرد . و وظیفه آن اعمال ویژگی های این سلکتورها روی تگ مربوطه است .

:: استفاده ترکیبی از چند Selector

 شما می توانید تنظیمات چندین سلکتور را بر روی  یک تگ html اعمال کنید . برای این کار باید نام سلکتورها را با یک علامت space از همدیگر جدا کنید .

مثال3) فرض کنید میخوایم دو نوع پاراگراف داشته باشیم که پس زمینه ی هر دو سفید باشه ، رنگ متن اولی قرمز و دومی آبی باشه . اندازه متن پاراگراف دومی هم 15 پیکسل باشه .

استایل های مورد نظر به صورت زیر میتونه باشه .

.p1 {
   color:red;
}
.p2 {
   font-size:15px;
   color:blue;
}
.myBG {
   background-color:white;
}

دو پارگراف رو هم به این شکل تعریف می کنیم :

<p class="myBG p1" >Paragraph one</p>

<p class="myBG p2" >Paragraph two</p>

می بینید که برای استفاده ترکیبی از سلکتور ها ، نام اونها رو با یه space از همدیگه جدا کردیم .

شما می تونید همانند مثال فوق ویژگی های مشترک تگها رو (در مثال بالا رنگ پس زمینه) در یک سلکتور جداگانه بیارید و به صورت ترکیبی از سلکتورها استفاده کنید .  این کار سبب جلوگیری از نوشتن کدهای تکراری میشه . مثلا در مثال فوق شما میتونید سلکتور myBG رو کاملا حذف کرده و ویژگی background-color رو در هر دو سلکتور p1 , p2 بیارید که در این صورت کد تکراری و اضافه تری نوشتید .

نکته : شما میتونید در اول اسم سلکتورهای اختصاصی به جای علامت نقطه از علامت # استفاده کنید که در این صورت برای استفاده در تگها باید نام سلکتور را در ویژگی id تگ بیارید . در ویژگی id شما فقط یک سلکتور رو میتونید بیارید . مثال :

#myLink {
   color
: blue;
   font-size
:9px;
}
<a href="http://www.7Learn.com" id="myLink">7Learn WebDesign</p>

معمولا ویژگی id برای هر تگ یکتاست . اگر استفاده ی خاصی ندارید بهتره برای جلوگیری از تکرار id های یکسان در تگهای مختلف از همون روش قبلی (نام سلکتور با نقطه شروع شود و در ویژگی class آورده شود) برای سلکتور های اختصاصی استفاده کنید .

:: تعریف یک سری ویژگی های مشترک برای گروهی از Selectorها

شما میتونید چندین سلکتور را به صورت گروهی با یک دسته تنظیمات بکار ببرید . برای این کار باید نام سلکتور ها را با علامت کاما , از هم جدا کنید . مثلا فرض کنید شما میخواهید رنگ تمام لینکها ، متن های درون پاراگراف و جداول سبز باشه . می تونید به شکل زیر عمل کنید :

a, p, table {
   color
: green;
}

 و دیگه نیازی نیست برای هر کدوم از سلکتورها این تنظیمات رو جداگانه بنویسید .

:: تعریف سلکتور عمومی برای تگهایی که یک ویژگی با مقداری خاص دارند:

شما می تونید تنظیماتی عمومی رو روی تگهایی که ویژگی خاصی دارند ، اعمال کنید . مثلا رنگ همه دکمه ها (تگهای  <input> که ویژگی type  آنها مقدار button رو داره) سیاه باشه :

input[type="button"] {
   color
: black;
}

 تگ input در html یک ویژگی type داره که نوع ورودی رو مشخص میکنه و مقادیری چون text , button , password و ... رو میگیره که مشخص کننده دکمه ، ورودی پسورد  ، ورودی متن و ... هست .

:: در مقاله آینده در مورد شیوه های مختلف استفاده از CSS در صفحات html بحث میکنیم که شامل سه روش زیر میباشد :
1- استفاده از ویژگی های CSS درون تگ مورد مورد نظر
2- تعریف سلکتورها درون تگ <style>
3- تعریف سلکتورها درون فایل جداگانه

همچنان با ما باشید .

دریافت این مقاله به فرمت PDF





:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 44 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏
    مینا(۷ مهر ۱۳۹۰)

    واقعا ممنون ،استفاده کردم

  • ‏‏

    درود بی پایان بر شما
    میشه لطف کنین در همین زمینه منو کشویی اگه مقاله ای نوشتین یا جایی هست راهنماییمون کنید که چطوری میتونیم این امکانات رو در وبمون داشته باشیم !

  • ‏‏

    وبلاگ عاشقانه و بسیار زیبا مطمئن باشد نگاه کنید ضرر نمی کنید

  • ‏‏

    ممنون از سایت بسیار خوبتون

  • ‏‏

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

  • ‏‏

    من یک ناشی کامل هستم که خیلی وقته به دنبال یک سایت میگرده تا بتون به وسیله ی اون برای خودش وبلاگ طراحی کنه آیا میشه یا کار من نیست اگه میشه آموزش بدین؟

    • ‏‏
      لقمان آوند(۱۸ دی ۱۳۹۰)

      عزیز اگه منظورت سرویس های وبلاگ دهیه اینا رو ببین :
      mihanblog.com
      blogfa.com
      persianblog.com

  • ‏‏

    اه دیدی یادم رفت پسخش را هم اینجا و هم تو ایمیلم بگین!!!،،،اگر میـــــی شـــــه

  • ‏‏

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

    راستی پیج رنکم 3 می باشد !

  • ‏‏

    ❓ salam, man tazekar hastam, mikhastam bedoonam baraye tarahi site bayad ba che narmafzari kar kard? ba php kar mikonam

    • ‏‏
      لقمان آوند(۱۸ بهمن ۱۳۹۰)

      سلام آقا نیما . اول اینکه برای طراحی سایت به ترتیب باید بری سراغ Javascript , CSS , Html . بعدشم یه زبون مثل PHP . برای نوشتن کدهای این زبون ها برنامه های زیادی وجود داره که من خودم به شخصه PhpStorm رو خیلی دوست دارم و می پسندم . یه محیط فوق العاده برای حرفه ای ها داره و خیلی امکانات مفید و کاربردی …
      می تونی از زیر دانلودش کنی :

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram