ما در این بخش می آموزیم که خواص مربوط به CSS ها کدامند و چگونه مقدار می گیرند . خواص CSS ها را می توان به دسته های زیر تقسیم کرد :
1.خواص فونت ها
2.خواص رنگ و زمینه
3.خواص متن
4.خواص کادربندی ، این خواص شامل موارد زیر است :
- خواص مربوط به حاشیه گذاری
- خواص دسته بندی
5.خواص مربوط به فاصله گذاری
- خواص دسته بند ی
- خواص لیست ها
در زیر به شرح این خواص میپردازیم:
1.خواص فونت ها
خواص مربوط به فونت ها برای تعیین خانواده فونت ، سبک اندازه و شکل فونت مورد استفاده قرار می گیرند . علاوه براین ، می توانید قواعد مربوط به رنگ ، زمینه ، حاشیه بندی و فاصله گذاری را ترکیب کنید تا اثر متنی زیبایی را در صفحه ایجاد کنید .
خاصیت font-family این خاصیت برای تعیین خانواده فونت به کار می رود . مقدار آن می تواند یک فونت خاص مثل Arial یا خانواده کلی مثل scan serif باشد . بر اساس استاندارد CSS1 ، خانواده های کلی زیر باید در مرورگرهایی که از CSS1 پشتیبانی می کنند وجود داشته باشد :
Serif ( مثل times ) .
Scan-serif ( مثل helvetica ) .
Cursive ( مثل zaff-chancery ) .
fantasy ( مثل western ) .
moonscape ( مثل courier ) .
همانند دستور < font > ، وقتی از چند خانواده فونت استفاده می کنید ، باید آن ها را به ترتیب اولویت بنویسید و آن ها را با کاما از هم جدا کنید . استفاده از چند خانواده فونت به این دلیل صورت می گیرد که بر روی کامپیوتری یک خانواده فونت موجود نبود ، از خانواده دیگری استفاده شود . دستور {font – family : arial , scans - serif } موجب می شود تا از خانواده فونت Arial استفاده گردد و در صورت عدم وجود این خانواده در یک کامپیوتر ، از خانواده scan-serif استفاده می شود .
خاصیت font size:
با استفاده از این خاصیت می توان اندازه نسبی یا واقعی فونت را تعیین کرد . اندازه فونت را با استفاده از کلمات x-large , large , medium , small , x-small , xx-small و xx-large یا کلمات نسبی مثل larger و smaller تعیین کرد . علاوه بر این ، اندازه فونت بر حسب 5 واحد قابل بیان است : تعداد نقاط ( مثل font-size:12pt ) ، تعداد پیکسل ها ( مثل font-size :30px ) ، اینچ ( مثل font-size:2inch ) ، سانتیمتر مثل ( font-size:2cm ) و درصد ( مثل font-size:200% ) . وقتی اندازه فونت برحسب درصد بیان می شود ، نسبت به اندازه پیش فرض آن سنجیده خواهد شد . دستورات زیر را ببندید :
{ font – size : 18pt }
{font – size : larger }
{ font – size : 200% }
خاصیت font-style:
این خاصیت برای تعیین سبک فونت به کار می رود که می تواند مقادیر normal ، italic یا oblique را بپذیرد . سبک مشابه سبک italic است ولی مرورگر خودش سعی کند میزان اریب بودن متن را تعیین کند :
{ font – style : oblique }
{ font – style : normal }
خاصیت font-weight:
این خاصیت ، وزن فونت یا میزان تاریکی آن را تعیین می کند . مقادیر این خاصیت از 100 تا 900 با افزایش 100 است . از کلمات کلیدی نیز می توان استفاده کرد : bolder , bold و lighter . بعضی از مرورگرها از کلمات کلیدی bold , demi-bold , medium , demi-light , light , extra-light و extera-bold نیز استفاده می کنند . چون خاصیت خانواده فونت نیز می تواند مقدار bold را بپذیرد ، برای جلوگیری از اشتباره بهتر است از مقادیر عددی استفاده شود :
{ font – wight : bolder }
{ font – weight : 900 }
خاصیت font-variant:
این خاصیت ، شکل خاصی از فونت تعیین شده یا فونت پیش فرض را انتخاب می کند . دو شکلی که فعلاً پشتیبانی می شود عبارتند از : small-caps و normal . مقدار small-capsحروف بزرگ را به شکل کوچکی نمایش می دهد و normal کار خاصی انجام نمیدهد :
{ font-variant : small-caps }
خاصیت font:
این خاصیت ، یک روش دقیق برای تعیین تمام خواص فونت با یک خاصیت style است . یکی از صفات خاصیت font برابر با line-height است که فاصله بین دو سط از متن را مشخص می کند . صفات فونت می توانند با فاصله از هم جدا شوند . به جز line-height که با font-size به کار می رود و با اسلش (/) از آن جدا می گردد . شکل کلی قاعده فونت به صورت زیر است :
font: font-style font-variant font-weigh font-size / line-hight font-family
نمونه ای از کاربرد خاصیت فونت به صورت زیر است :
{ font : italic small-caps 600 18pt / 24 " arial , Helvetica" }
[color=#FF0000]خواص رنگ و زمینه[/color]
خواص رنگ و زمینه خواص گوناگونی برای کنترل رنگ ها و زمینه ها در یک سند HTML وجود دارد . با استفاده از CSS ها می توان ناحیه های مختلفی با رنگ زمینه و تصاویر ایجاد کنید . سی اس اس CSS1سه شکل مشخصات رنگ را پشتیباین می کند .
نام رنگ کلمات کلیدی مربوط به رنگ ها عبارتند از aqua ، black ، blue ، fushia ، gray ، green ، lime ، marron ، navy ، olive ، purple ، red ، sliver ، teal ، white و yellow .
مقادیر مبنای 16 از 6 رقم به شکل #0000ff رنگ آبی و #fffff رنگ سفید را مشخص می کند .
مقادیر rgb فرمت rgb به صورت ( r, g ,b ) rgb نمایش داده می شود که r ، g و b در بازه صفر تا 255 هستند . اغلب مرورگرها از این فرمت رنگ پشتیبانی نمی کنند .
خاصیت color این خاصیت برای تعیین رنگ متن مورد استفاده قرار می گیرد . مثال های زیر را ببینید :
{color : green }
{color : #ff0088}
{color : #0f0}
خاصیت background-color این خاصیت ، رنگ زمینه یک دستور را مشخص می کند . مقدار فرضی آن none است و هر محتویاتی بر روی آن قابل نمایش است . این وضعیت با کلمه کلیدی transparent نیز مشخص می شود . این خاصیت همراه با خاصیت color قابل استفاده است .
خاصیت background-image این خاصیت ، تصویری را به عنوان زمینه یک دستور انتخاب می کند . در این خاصیت باید url فایل تصویر را ذکر کرد .
{ background – image : url ( arm.gif) ; background – color : white }
خاصیت background – repeat در حالی که تصویر کوچکتر از فضایی است که در اختیار آن دستور قرار گرفته است ، این خاصیت تعیین می کند تصویر چگونه در آن فضا قرار گیرد . مقدار repeat-x موجب می شود در بعد افقی قرار گیرد و مقدار repeat-y موجب می شود تصویر در امتداد بُعد عمودی قرار گیرد . مقدار no-repeat موجب می شود تا تصویر در زمینه قرار نگیرد . دستور زیر را ببینید :
{background-image : url ( arm.gif ) ; background-repeat : repeat-x }
خاصیت background-attachment این خاصیت تعیین می کند که آیا تصویر زمینه ، همراه جابجای متن ، جابجا شود یا خیر . مقدار فرضی این خاصیت scroll است .مقدار fixed آن را ثابت مگه می دارد :
{ background-image : url ( arm.gif ) ; background-attchment : fixed }
خاصیت background-position این خاصیت تعیین می کند که چگونه یک تصویر زمینه در فضایی که برای آن منظور شد قرار گیرد . سه روش برای تعیین موققعیت تصویر وجود دارد :
گوشه بالا و سمت چپ تصویر می تواند به عنوان یک فاصله مطلق منظور شود .
موقعیت تصور می تواند یه صورت درصد ( افقی یا عمودی ) ذکر شود .
استفاده از کلمات کلیدی برای تعیین موقعیت تصویر ، کلمات کلیدی برای بعد افقی عبارتند از : left ، center و right . کلمات کلیدی در راستای عمودی عبارتند از top ، center و bottom . وقتی از کلمات کلیدی استفاده می شود ، بعدی که تعیین نشده باشد ، center منظور خواهد شد . دستورات زیر را ببینید :
{background-image : url ( arm.gif ) ; background-position : 10 px10 px }
{ background-image : url ( arm.gif ) ; background-position : 20% 40%}
خاصیت background با این خاصیت می توان تمام خواص عناصر زمینه را تعیین کرد . ترتیب خواص ، مهم نیست . هر خاصیتی که تعیین نشده باشد ، پیش فرض آن منظور خواهد شد :
{ background : while url ( arm.gif ) repeat-y center }
3.خواص متنی
خواص متنی موجب می شوند تا متن های موجود در یک بلوک مثل پاراگراف تنظیم و صفحه آرایی کرد . هنگامی که متن یا سایر اشیا را به وسیله CSSدستکاری می کنید ، باید یک طول یا اندازه را مشخص کنید . بعضی از این واحدها در مورد فونت بیان شد ( نقطه ، سانتیمتر ، اینچ و غیره ) .
خاصیت word-spacing این خاصیت ، فاصله بین کلمات را تعیین می کند . مقدار normal از حالت پیش فرض مرورگر استفاده می کند . فاصله بین کلمات می توان با اینچ ( in ) ، ساتیمتر (cm) ، میلی متر (mm) ، نقاط (pt) ، پیکاس (pc) ، میزان (em) وپیکسل (px) تعیین کرد . بسیاری از مرورگرها از این خاصیت پشتیانی نمی کنند . دستورات زیر ببینید :
{ word-spacing : 1cm}
{ word-spacing : 10 pt}
خاصیت letter-spacing این خاصیت میزان فاصله بین حروف را تعیین می کند . مقدار normal این فاصله را به عهده مرور گر می گذارد . فاصله می توان بر حسب اینچ (in) ، سانتیمتر (cm) و سایر مواردی که در word-spacing گفته شد تعیین کرد :
{ letter-spacing : 0.2 em }
{ letter-spacing : 2 px}
خاصیت vertical-align این خاصیت موقعیت عمودی متن و تصویر را نسبت به خط پایه مشخص می کند . مقادیری را که این خاصیت می تواند بپذیرد عبارتند از baseline ، sub ، super ، text-top ، middle ، bottom ، text-battom و مقادیر درصد . این مقادیر را می توانید با صفت align مربوط به دستور <img >مقایسه کنید .مقدار پیش فرض این خاصیت ، baseline است . دستورات زیر را ببینید :
{ vertical-align : text-top }
{ vertical-align : sub ; font-size : 75% }
خاصیت text-align این خاصیت ،متن موجود در دستورات بلوکی مثل< p> و</ p > را تنظیم میکند . مقادیر این خاصیت عبارتند از : left ، right ، center و justify . دستورات زیر را ببینید :
{text – align : justify}
{text – align : center}
خاصیتtext – indent این خاصیت ، تو رفتگی اولین خط از متن را در دستورات بلوکی مثل < p > تعیین می کند . ان بر حسب cm ، px ، pt و غیره اند :
{tex – indent : 2em}
{text – indent : 50px}
این خاصیت می تواند مقادیر منفی را بپذیرد که منجر به بیرون رفتگی متن می شود :
{text – indent : -10px ; background : yellow}
خاصیت line – heighgt این خاصیت فاصله بین خطوط متن را در دستورات بلوکی مثل < p > تعیین می کند . مقادیر این صفت می تواند به صورت تعداد خطوط (4 . 1) ، طول (14 pt) یا در صدی از ارتفاع خط بیان شود (مثل 200%) . بنابراین ، برای اینکه فاصله خطوط دو برابر شود از دستورات زیر استفاده می گردد :
{line – height : 2}
{line – height : 200%}
خاصیت text – decoration این خاصیت جلوه ای را بر روی متن ایجاد می کند . مقدار blink متن را چشمک زن می کند ، lin – through خطی را بر روی متن رسم می کند ، overline خط را بر بالای متن و underline خطی را در زیر متن رسم می کند و none جلوه ای ندارد . معمولا این خاصیت با دستور < a > به کار می رود تا وضعیت پیوند را مشخص کند :
{text – decoration : line through}
{text – decoration : blink}
خاصیت text – transform این خاصیت حروف متن را به حروف کوچک یا بزرگ تبدیل می کند . مقادیر این خاصیت عبارتند از capitaliz ، uppercase ، lowercase و none . توجه کنید که مقدار capitalize ممکن است تمام کلمات را به حروف بزرگ تبدیل نماید . دستورات زیر را ببینید :
{text – transform : capitalize}
{text – transform : uppercase}