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

دسته بندی: آموزش
زمان مطالعه: 8 دقیقه
۲۴ شهریور ۱۳۸۹

:: منظور از 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="https://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

 

چه امتیازی به این مقاله می دید؟
نویسنده لقمان آوند
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.
ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 

نظرات کاربران

nima

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

لقمان آوند

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

ehsan

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

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

*****

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

*****

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

لقمان آوند

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

طه

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

طه

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

طه

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

mehran

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

مینا

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

mehran

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

ممنون

لقمان آوند

خیر دوست عزیز
ربطی به داشتن دامنه نداره . و در همون قالب وبلاگتون هم می تونید اینکارو بکنید .

pejman

جناب آقای آوند از شما برای زحمت بسیارتان جهت تهیه فایل های آموزشی css به صورت pdf از طرف خودم و بسیاری دیگر صمیمانه سپاسگذاری می کنم . من برای یاد گرفتن css به خیلی سایت ها سر زدم و با فایل های شما به سادگی یاد گرفتم . ممنونم

ghadir

نرم افزاری هست بتونم این کارو بکنم؟
ممنون از این که جواب دادین

ghadir

سلام خسته نباشی.سایتت عالیه.یک سوال داشتم.
من میخوام یک منو عکسی درست کنم برای وبلاگم در بلاگفا این منو که میگم نمونشو میتونی در سایت www.irib.ir ببینی که سه بعدی هم هست.
این وبلاگم متعلق به مسجد موسبن جعفر (ع)است.
انشاا… ثوابش برسه به روح پدرتون.
لطفا کمکم کنید

لقمان آوند

سلام دوست عزیز
اون یک منوی فلش هست و نه کد html .
باید بلد باشی درست کنی .

saharmoeenfard

از سايت خوبنون ممنون

کامران

خیلی خیلی ممنون از اینکه به سوالم جواب دادید

طراحی سایت

با سلام
جالب بود..!
ممنون از وبسایت پرمحتواتون، اطلاع رسانیتون عالیه…