کدهای CSS
#1
Note 
ما در این بخش می آموزیم که خواص مربوط به 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" }


خواص رنگ و زمینه

خواص رنگ و زمینه خواص گوناگونی برای کنترل رنگ ها و زمینه ها در یک سند 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}

پاسخ
#2
Note 
4.خواص کادرها

می توان این طور تصور کرد که دستورات بلوکی مثل < p > یک کادر مستطیلی را در صفحه نمایش اشغال می کنند . سه جنبه از این کادرها را می توان به وسیله خواص CSS کنترل کرد که عبارتند از : خواص حاشیه گذاری ، خواص مرکز کادری که متن را در بر می گیرد و خواص ارتفاع ، پهنا و موقعیت .


خواص حاشیه گذاری

در طراحی صفحات باید دقت داشته باشید که عناصر و متن های صفحه باید طوری تنظیم شوند که چشم خواننده از عنصری به عنصر دیگر هدایت شود . بخش های خالی صفحه باید طوری باشد که چشم بیننده خسته نشود . بنابراین ، حاشیه گذاری می تواند در زیبایی صفحه موثر باشد . اندازه حاشیه را می توان بر حسب نقطه یا اینچ ، سانتیمتر و پیکسل تعیین کرد .

خاصیت margin – top این خاصیت حاشیه بالای صفحه وب را تعیین می کند :

{mergin – top : 20 px}
خاصیت mergin – right این خاصیت حاشیه سمت راست متن را تعیین می کند :

{mergin – right : 10 px}
خاصیت mergin – bottom این خاصیت حاشیه پایین صفحه وب را تعیین می کند :

{mergin – bottom : 2 in}
خاصیت mergin – left این خاصیت حاشیه سمت چپ صفحه وب را تعیین می کند :

{mergin – left : 2 in}
خاصیت margin این خاصیت می تواند هر چهار حاشیه (بالا ، راست ، پایین و چپ) را تعیین کند . دستور زیر را ببینید :

{margin : 1 . 5 cm}
{Mergin : 10 px , 5 px , 15 px , 5 px}
دستور اول حاشیه بالا ، راست ، پایین و چپ را 5/1 سانتیمتر تعیین می کند ولی دستور دوم ، حاشیه بالا را 10 px ، حاشیه راست را 5 px ، حاشیه پایین را 15 px و حاشیه چپ را 5 px تعیین می کند . دقت کنید که حرکت در جهت عقربه ساعت است . اولین مقدار مربوط به حاشیه بالا ، دومین مقدار مربوط به حاشیه راست ، سومین مقدار مربوط به حاشیه پایین و چهارمین مقدار مربوط به حاشیه چپ است . هر کدام که تعیین نشود ، برابر با حاشیه مقابل ان منظور خواهد شد . به عنوان مثال ، اگر حاشیه بالا تعیین شود ولی حاشیه پایین نعیین نشود ، حاشیه پایین به اندازه حاشیه بالا منظور خواهد شد .

خواص مرز کادرها

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


خاصیت border – style این خاصیت ، سبک ظاهری مرزها را تعیین می کند . مقدار پیش فرض ان none است و معنایش این است که مرزی رسم نشود .

خاصیت border-style مرزهای هر چهار طرف کادر را تعیین می کند . برای تعیین هر چهار طرف کادر به طور جداگانه ، می توان از سبک های border-top-style ( برای بالا ) ، border- bottom- style ( برای پایین ) ، border-left-style ( برای سمت چپ ) و border-right-style ( برای سمت راست ) استفاده کرد .

در خاصیت border- style می توان نوع مرز هر چهار طرف را تعیین کرد . اولین مقدار مربوط به سمت بالا ، دومین مقدار مربوط به سمت راست ، سومین مقدار رمبوط به پایین و چهار مین مقدار مربوط به سمت چپ است . وقتی مقادیری که ذکر می شوند کمتر از 4 باشند ، مرز مقابل ، به طور خودکار مقدار می گیرد . به عنوان مثال ، اگر سبک مرز بالایی تعیین شود ولی سبک مرز پایینی تعیین نشود ، سبک مرز پایینی مثل سبک مرز بالایی منظور خواهد شد . هر کدام از دستورات زیر ، مرز های دو خطی را در بالا و پایین کادر منظور می کنند :

{border- style: double none}
{border- style: double none double none }
border –bottom – style : double ; border - left ; {border- style: double
style : none; border –right-style:none;}


خاصیت border – width خواص گوناگونی برای تعیین پهنای مرزها به کار می روند . صفت border - width پهنای هر چهار طرف کادر را مشخص می کند و رفتار ان مثل border- style است . برای تعیین هر کدام از چهار طرف کادر به طور جداگانه ، از خواص border – top - width ( برای پهنای بالا ) ، border – right- width ( برای پهنای سمت راست ) border – bottom-width ( برای پهنای پایین ) و border – left – width ( برای پهنای سمت چپ ) استفاده می شود.

پهنای مرزها را با کلمات کلیدی thick , medium, thin یا با استفاده از مقادیری مثل 5 , 10 و غیره تعیین کرد . دستورات زیر را ببینید :

{border- style: Solid ; border – width; 10 px}
{border- style:double ;border – width : thick}
{border- styleConfusedolid;border – width : thick thin}
{border- style:double;border – width : thick}


خاصیت border-color این خاصیت رنگ مرزها را تعیین می کند. رنگ ها را می توان با نام یا اعداد مبنای 16 بیان کرد . این خاصیت ، رنگ هر چهار طرف کادر را تعیین می کند و از یک تا چهار مقدار را می پذیرد .
مقادیر ذکر شده ، در جهت چرخش عقربه های ساعت ( رنگ بالا ، پایین و سمت چپ ) اعمال می شوند . برای تعیین رنگ هر مرز به طور جداگانه ، از خواص border- right – color, border, border – top- color border – left- color , border – bottom –color استفاده می شود . دستورا زیر را ببینید :

{border – style: soild; border-color: green}
border- style : solid ; border- top – color ; green ; border –right – color:}
ff0000; border – bottom –color : yellow ; border –left –color :blue}


خواص فاصله گذاری
فاصله بین کادر یک دستور و محتویات آن با استفاده از خواص فاصله گذاری تعیین می شود. این خواص عبارتند از : padding- left, padding – bottom, padding- right , padding – top به جای همه این ها می توان از خاصیت padding استفاده کرد که فاصله هر چهار طرف را تعیین می کند. این خاصیت از یک تا چهار مقدار می پذیرد که با شروع از بالای کادر ، در جهت حرکت عقربه های ساعت مورد استفاده قرار می گیرند . هر کدام از مقادیر که ذکر نشود ، همانند طرف مقابل خودش خواهد بود. مثلاً اگر فاصله سمت راست تعیین شود ولی سمت چپ تعیین نشود ، فاصله سمت مانند فاصله سمت راست تنظیم می شود. دستورات زیر را ببینید :

{padding- top : 1cm}
{border – style : solid; padding – left :20mm; padding – right :50mm}
{ border- style: soild ; padding : 1 cm }
{ padding : 2mm 4mm

دستور سوم یک خط ضخیم دور کادر رسم می کند و فاصله هر طرف با محتویات ان یک سانتیمتر است . دستور چهارم فاصله از بالا و پایین را 2 میلیمتر و فاصله از سمت راست و چپ را 4 میلیمتر در نظر می گیرد .


خواص width و height خاصیت width پهنای ناحیه محتویات دستورات را تعیین می کند و خاصیت height ارتفاع ناحیه محتویات دستورات را مشخص می کند . دستورات زیر را ببینید :


{ width : 300px ; padding : 10px ; background : yellow ; color : black }
{ height : 10cm ; width 10% }
{height : 100px ; width : 300px }


خواص float و clear تنظیم افقی دستورات را تحت تأثیر قرار می دهد و موجب می شود به سمت چپ یا راست ناحیه دستور حرکت کنند . این خاصیت برای درج اشیایی مثل تصویر در صفحه وب مفید است . مقادیر flot عبارتند از left ، right و non مقدار پیش فرض است . دستور زیر را ببینید :

{ ma { float : right }

اما وقتی محل تصویر یا هر شی ء دیگری که توسط float تعیین شد ، متن های آن عنصر چگونه تنظیم می شوند ؟ این کار توسط خاتصیت clear انجام می گیرد . مقدار left , سمت چپ اشیاء مقدارright سمت راست اشیا و مقدار both هر طرحی را بزرگ تر بود پاک می کند . مقدار پیش فرض آن none است.

{ width : 150 ; height : 150 ; float : right }
{ clear : both }


5.خواص دسته بندی

CSS های آبشاری شامل چندین خواص دسته بندی نمایش یک دستور را مشخص میکند بعضی از این خواص در زیر بررسی می شوند :


خاصیت disply مدل CSS سه نوع عناصر نمایشی را تشخیص می دهد : عناصر بلوکی ، عناصر دستوری و لیست ها . خاصیت disply موجب می شود تا نوع نمایش یک عنصر به یکی از این 4 مقدار تغییر کند : block (بلوکی) ، inline(دستوری)، list – item(لیست) و none . مقدار none موجب می شود که عنصر نمایش داده نشود و یائ از فضا استفاده نکند . دستورات زیر را ببینید :

{display : none}
{display : inline}



خاصیت white – space این خاصیت تعیین می کند که کارکترهای فضای خالی ، tab و خط جدید چگونه در یک دستور ظاهر شوند . مقدار پیش فرض ان normal است که همة کارکترهای فضای خالی به یک فضای خالی تبدیل می شوند و خطوط به طور خودکار شکسته می شوند . مقدار pre برای این خاصیت مشخص می کند که تمام کارکترهای فضای خالی منظور شوند (مثل دستور <pre> در HTML) . مقدار nowrapموجب می شود تا در صورتی که طول خطوط از پهنای محتویات بیشتر شد ، شکسته نشود . دستور زیر را ببینید :

{white – space : pre}
توجه کنید که مقادیر pre و nowrap از خاصیت white – space ، در بسیاری از مرورگرها پشتیبانی نمی شوند .


6.خواص لیست ها

HTML از سه نوع لیست پشتیبانی می کند :لیست های مرتب- لیست های نا مرتب و لیست های تعریفی . CSS های ابشاری ، امکاناتی را برای دستکاری لیست ها فراهم می کنند . یعنی خواصی وجود دارند که در مورد لیست ها به کار می روند : type – style – list ، image – style – list و position – style – list . خاصیت کلی style – list به جای هر سه خاصیت دیگر قابل استفاده است .



خاصیت type – style – list بر اساس نوع لیست ، عناصر لیست با شماره یا شکل های خاصی مثل دایره تو پر ، تو خالی و غیره مشخص می شوند . شش مقدار برای لیست های مرتب مناسب اند : decimal(اعداد دهدهی) ، roman – lower(حروف کوچک رومی) ، roman – upper (حروف بزرگ رومی) ، alpha – lower(حروف کوچک) ، و alpha – upper(حروف بزرگ) . مقادیر مناسب برای لیست های نا مرتب عبارتند از disk(دایره تو پر) ، circle(دایره) ، و square(مربع) . مقدار none موجب جلوگیری از بر چسب عناصر لیست می شود . دستورات زیر را ببینید :

{list – style – type : upper – roman}
{list – style – type : square}


خاصیت image – style – list این خاصیت می تواند تصویر گرافیکی را به عنوان بر چسب عناصر لیست انتخاب کند . مقادیر این خاصیت ، url تصویر یا none است . دستور زیر را ببینید :

{list – style – Image : url ("arm . gif")}


خاصیت position – type – list این خاصیت تعیین می کند که بر چسب عناصر لیست نسبت به کادر دستورات ، چگونه قرار گیرد . مقادیر این خاصیت عبارتند از : inside و outside . مقدار inside موجب می شود تا برد چسب در داخل کادر و مقدار outside موجب می شود تا بر چسب در خارج کادر قرار گیرد . مقدار پیش فرض outsid است . دستور زیر را ببینید :


{list – style position : hnside}

پاسخ
ایجاد موضوع جدید   پاسخ به موضوع  

کاربرانِ درحال بازدید از این موضوع:   1 مهمان