سينتکس هاي Css از سه قسمت تشکيل شده اند، Selector,Property,Value
يک Selector معمولاً يک المان يا تگي از HTML است که مي خواهيد تعيين کنيد. Property يک صفت خاصه اي است که شما آن را تغيير مي دهيد، و هر خصوصيت داراي يک مقدار است. Property و مقدار آن با يک ( : ) از هم جدا شده اند و درنهايت در يک { } قرار دارند.
نکته :
در صورتيکه مقادير از چندين کلمه تشکيل شده آنرا در کوتيشن قرار دهيد.
نکته :
در صورتيکه مي خواهيد بيش از يک خصوصيت را معين کنيد، بايد هر خصوصيت را با سمي کالن (;) از هم جدا کنيد. مثال زير نشان مي دهد که چطور يک پاراگرافي که در وسط قرار دارد (Center Aigned) و رنگ آن هم قرمز باشد، را تنظيم کنيد.
در صورتي که بخواهيد خوانايي برنامه بالا رود بايد هر خصوصيت را در يک خط قرار دهيد، چيزي شبيه به :
Grouping :
شما مي توانيد، Selector ها را گروه بندي کنيد و هر کدام از آنها را با کاما جدا کنيد. در مثال زير ما تمام المانهاي Header را گروه بندي کرده ايم. تمام المانهاي هدر با رنگ سبز نشان داده خواهند شد:
The Class Selector :
با Class Selector شما مي توانيد style هاي متفاوت براي المانهاي مشابه HTML داشته باشيد.
براي مثال، شما مايل هستيد دو نوع پاراگراف درسند خود داشته باشيد، يکي با خصوصيت Right-aligned و ديگري Center-aligned. روش انجام اين کار را مي توانيد در زير مشاهده کنيد.
شما بايد از صفت خاصه کلاس، در سندHtml خود استفاده کنيد :
جهت ايجاد بيش از يک کلاس براي المانهاي ارائه شده، سينتکس ها به شکل زير خواهند بود:
پاراگراف فوق با کلاس “center” و”Bold” تنظيم خواهد شد .
شما مي توانيد نام تگ را، که جهت تعيين کردن يک Style، در تمام المانهاي HTML استفاده مي شود، در Selector حذف کنيد. در مثال زير تمام المانهاي HTML که با کلاس “center” هستند، به صورت Center-aligned تنظيم خواهند شد.
در کدهاي زير هردو المان p و h1 داراي کلاس با خصوصيت “center” هستند. اين به اين معني است که هر دو المان از قوانين سلکتور “.center” استفاده خواهند کرد.
هيچ وقت نام کلاس را با يک عدد شروع نکنيد! چون در Mozila, Firefox اجرا نخواهد شد.
اضافه کردن يک Style به المانها بوسيله صفت هاي خاصه :
همچنين شما مي توانيد style ها را به المانهاي Html با صفات خاصه اضافه کنيد .
قانون Style که در زير آمده با تمام المانهاي ورودي که صفت Type، با مقدار “text” دارند، سازگارند.
ID selector :
همچنين شما مي توانيد المانهاي HTML را با Id selector مشخص کنيد. که با # مشخص مي شود.
قانون Style زير با الماني که صفت ID داشته ومقدار آن برابر “green” باشد ، سازگار است.
قانون style زير با المان p که داراي Id و مقدار “Para1” است، نظير مي شود.
نام Id را با عدد شروع نکنيد! چون در Mozila, FireFox اجرا نخواهد شد.
CSS Comments :
Comment ها يا توضيحات استفاده مي شوند تا کدهاي شما را توضيح دهند، و مي توانند به شما کمک کنند که کدهاي اصلي را در آينده راحتتر ويرايش کنيد. توضيحات بوسيله مرورگرها ناديده گرفته مي شوند. يک Css Comment با “/*” شروع و با “*/” خاتمه مي يابد :
معرفي سايت مرتبط با اين مقاله