آموزش سی اس اس | مقدماتی | مشخصه ها یا properties | جلسه پنجم

سلام بر مهندسای جوان و خلاقِ عزیز! عذر خواهی میکنم به دلیل تأخیرهایی که در آموزش سی اس اس پیش میاد! راستش خیلی سرم شلوغه. این جلسه به بیان و تعریفِ ادامه ی مشخصه ها میپردازیم.

میدانیم که در جدول زیر اعدادی که زیرِ حروفِ تعریف شده آمده اند، بیانگر حداقل نسخه ی آن مرورگر  برای پشتیبانی از این ویژگی است.

IE = Internet Explorer

F = FireFox

N = Net Scape

عددی که در ستونِ CSS قرار دارد بیانگر این است که ویژگیی که در آن ردیف قرار دارد در CSS1 و یا CSS2 تعریف شده است.

تنظیمات قلم:

مشخصه	توضیحات	مقدار	IE	F	N	W3C
font	برای تعریف کلیه ی تنظیمات مربوط به قلم از جمله اندازه آن، نوع آن و ... میتوان همه را بطور یکجا تعریف کنید	font-style font-variant font-weight font-size/line-height font-familycaption icon menu message-box small-caption status-bar	4	1	4	1
font-family	برای تعریف قلم هایی که میخواهید در یک بخش از آنها استفاده کنید. برای تعریفِ چند نوع قلم (فونت) از کاما استفاه کنید.	family-name generic-family	3	1	4	1
font-size	تعیین اندازه ی قلم. علاوه بر مقادیرِ روبرو میتوانید از اندازه های مشخص استفاده کنید، به عنوانِ مثال: 12px یا 9px   نکته:(  PX به معنای پیکسل میباشد)	xx-small x-small small medium large x-large xx-large smaller larger length %	3	1	4	1
font-style	تعیینِ حالتِ قلم ( معمولی ، کج و ..)	normal italic oblique	4	1	4	1
font-variant	نمایش قلم به صورت معمولی یا حروف کوچک( در واقع اندازه ی حروف کوچک خواهد شد ولی در زبان انگلیسی حروف بزرگ خواهند بود. میتوان بهتر توضیح داد  که کلیه متن با حروف بزرگ نمایش داده خواهند شد. اما حرف اول بزرگتر از بقیه خواهد بود.)	normal small-caps	4	1	6	1
font-weight	تعیینِ حجمِ قلم. ضخیم، معمولی و ...	normal bold bolder lighter 100 200 300 400 500 600 700 800 900	4	1	4	1

تنظیمات و مشخصه های مربوط به حاشیه ها:

مشخصه	توضیحات	مقادیرِ قایلِ استفاده	IE	F	N	W3C
border	برای تعریف کلیه ی تنظیمات مربوط به 4 حاشیه ی یک بخش از جمله اندازه آن، نوع آن ، رنگ و ... میتوان همه را بطور یکجا تعریف کنید	border-width border-style border-color	4	1	4	1
border-bottom	برای تعریف کلیه ی تنظیمات مربوط به حاشیه ی پایین، از جمله رنگ و اندازه و نوع و ..	border-bottom-width border-style border-color	4	1	6	1
border-bottom-color	تعیین رنگِ حاشیه ی پایین	border-color	4	1	6	2
border-bottom-style	تعیینِ مدلِ حاشیه پایین	border-style	4	1	6	2
border-bottom-width	تعیینِ اندازه ی پهنای حاشیه ی پایین	thin medium thick length	4	1	4	1
border-color	تعیین کلیِ رنگِ حاشیه ها	color	4	1	6	1
border-left	برای تعریف کلیه ی تنظیمات مربوط به حاشیه ی چپ، از جمله رنگ و اندازه و نوع و ..	border-left-width border-style border-color	4	1	6	1
border-left-color	تعیین رنگِ حاشیه ی چپ	border-color	4	1	6	2
border-left-style	تعیینی مدلِ حاشیه چپ	border-style	4	1	6	2
border-left-width	تعیینِ اندازه ی پهنای حاشیه ی چپ	thin medium thick length	4	1	4	1
border-right	برای تعریف کلیه ی تنظیمات مربوط به حاشیه ی راست، از جمله رنگ و اندازه و نوع و ..	border-right-width border-style border-color	4	1	6	1
border-right-color	تعیین رنگِ حاشیه ی راست	border-color	4	1	6	2
border-right-style	تعیینی مدلِ حاشیه راست	border-style	4	1	6	2
border-right-width	تعیینِ اندازه ی پهنای حاشیه ی راست	thin medium thick length	4	1	4	1
border-style	تعیینِ مدلِ حاشیه ها، هر 4 حاشیه.	none hidden dotted dashed solid double groove ridge inset outset	4	1	6	1
border-top	برای تعریف کلیه ی تنظیمات مربوط به حاشیه ی بالا، از جمله رنگ و اندازه و نوع و ..	border-top-width border-style border-color	4	1	6	1
border-top-color	تعیین رنگِ حاشیه ی بالا	border-color	4	1	6	2
border-top-style	تعیینی مدلِ حاشیه بالا	border-style	4	1	6	2
border-top-width	تعیینِ اندازه ی پهنای حاشیه ی بالا	thin medium thick length	4	1	4	1
border-width	تعیین پهنای کلیِ حاشیه ها. هر 4 حاشیه	thin medium thick length	4	1	4	1

بیانِ این مشخصه ها مقدمه ایست برای شروع استفاده از آنها و آموزش کاربردی که در جلسات بعد در اختیارتان قرار خوام داد.

مشتاقانه منتظرِ نظرات سازنده ی شما هستم. با نهایت احترام. م.ر.

لینک فهرست جلسات