خواص شیوه نامه ها (راهنمای html)

خاصیت 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-atachment : fixed}

خاصیت background-position. این خاصیت تعیین میکند که چگونه یک تصویر زمینه در فضایی که برای آن منظور شد قرار گیرد.سه روش برای تعیین موقعیت تصویر وجو دارد :
گوشه بالا و سمت چپ تصویر می تواند به عنوان یک فاصله مطلق منظور شود.
موقعیت تصویر می تواند به صورت درصد (افقی یا عمودی )ذکر شود.
استفاده از کلمات کلیدی برای تعیین موقعیت تصویر ، کلمات کلیدی برای بعد افق عبارتند از :
left ,Center و right. کلمات کلیدی در راستای عمودی عبارتند از Center ، top و bottom. وقتی از کلمات کلیدی استفاده می شود، بعدی که تعیین نشده باشد، Center منظور خواهد شد. دستورات زیر را ببینید: 

{background-image : url (arm.gif); background-position : 10px 10 px}
{background-image: url (arm.gif); background-position : 20% 40%}

خاصیت BACKGROUND .با این خاصیت می توان تمام خواص عناصر زمینه را تعیین کرد.ترتیب خواص مهم نیست. هر خاصیتی که تعیین نشده باشد، پیش فرض آن منظور خواهد شد:

{background : while url (arm.gif) repeat-y center}

خواص متنی
خواص متنی موجب می شوند تا متنهای موجود در یک بلوک مثل پاراگراف را تنظیم و صفحه آرایی کرد.
هنگامی که متن یا سایر اشیاء را به وسیله شیوهنامه دستکاری می کنید، باید یک طول یا اندازه را مشخص کنید. بعضی از این واحدها در مورد فونت بیان شد (نقطه، سانتیمتر، اینچ و غیره).
خاصیت Word-Spacing. این خاصیت، فاصله بین کلمات را تعیین میکند. مقدار normal از حالت پیش فرضی مرورگر استفاده می کند. فاصله بین کلمات را می توان با اینچ (pt)، پیکاسی (pc)، میزان (em) و پیکسل (px) تعیین کرد. بسیاری از مرورگرها از این خاصیت پشتیبانی نمی کنند. دستورات زیر را ببینید:

{word-spacing : 1cm)
{word-spacing : 10pt) 

خاصیت Letter-Spacing. این خاصیت میزان فاصله بین حروف را تعیین میکند. مقدار normal این فاصله را به عهده مرورگر می گذارد. فاصله را می توان بر حسب اینچ (in)، سانتیمتر (cm) و سایر مواردی که در Word-spacing گفته شد تعیین کرد:

{letter-spacing : 0.2 em).
{letter-spacing : 2 px}

خاصیت Vertical-align . این خاصیت موقعیت عمودی متن و تصویر را نسبت به خط پایه مشخصی می کند. مقادیری را که این خاصیت می تواند بپذیرد عبارتند از middle ،text-top ،Super ،Sub ،baseline، text-bottom، bottom و مقادیر درصد. این مقادیر را می توانید با صفت ALIGN مربوط به دستور < IMG> مقایسه کنید. مقدار پیش فرضی این خاصیت، baSeline است. دستورات زیر را ببینید:

{vertical-align: text-top}
{vertical-align: sub ; font-size : 75%]

خاصیت text-align. این خاصیت، متن موجود در دستورات بلوکی مثل <P> و <P/> را تنظیم می کند. مقادیر این خاصیت عبارتند از :Center ، right ، left و justify. دستورات زیر را ببینید:

{text-align : justify}
{text-align: center}

خاصیت text-indent. این خاصیت، تورفتگی اولین خط از متن را در دستورات بلوکی مثل <P> تعیین می کند. مقادیر آن برحسب pt ،px ،cm و غیره اند: 

(text-indent: 2°m}
(text-indent: 50px}

این خاصیت می تواند مقادیر منفی را بپذیرد که منجر به بیرون رفتگی متن می شود:

{text-indent : -10px ; background : yellow}

خاصیت ine-heightاین خاصیت فاصله بین خطوط متن را در دستورات بلوکی مثل <P که تعیین می کند. مقادیر این صفت می تواند به صورت تعداد خطوط (1,4)، طول (14pt) یا درصدی از ارتفاع خط بیان شود (مثل %200). بنابراین، برای اینکه فاصله خطوط دو برابر شود از دستورات زیر استفاده میگردد:

{line-height : 2}
{line-height: 200 %} 

خاصیت text-decoration. این خاصیت جلوه ای را بر روی متن ایجاد می کند. مقدار blink متن را چشمک زن می کند، ine-through خطی را بر روی متن رسم می کند، overline خط را بر بالای متن و underline خطی را در زیر متن رسم می کند و none جلوه ای ندارد. معمولا این خاصیت با دستور <A> به کار میرود تا وضعیت پیوند رامشخصی کند: 

{text-decoration : line through)
{text-decoration : blink} 

خاصیت text-transform. این خاصیت حروف متن را به حروف کوچک یا بزرگ تبدیل میکند. مقادیر این خاصیت عبارتند از :lowercase , uppercase , capitalize, NONE.توجه کنید که مقدار capitalizeممکن است تمام کلمات را به حروف بزرگ تبدیل نماید. دستورات زیر را ببینید:

{text-transform : capitalize}
{text-transform : uppercase}

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

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

{margin-top : 20 px}

خاصیت margin-right. این خاصیت حاشیه سمت راست متن را تعیین میکند:

{margin-right: 10 px}

خاصیت nmargin-bottom. این خاصیت حاشیه پایین صفحه وب را تعیین میکند:

{margin-bottom : 2 in).

خاصیت margin-left. این خاصیت حاشیه سمت چپ صفحه وب را تعیین میکند:

{margin-left :2 in)

خاصیت margin. این خاصیت می تواند هر چهار حاشیه (بالا، راست، پایین و چپ) را تعیین کند. دستور زیر را ببینید:

{margin : 1.5 cm}
{margin : 10 px, 5 px, 15 px, 5 px}

دستور اول حاشیه بالا، راست، پایین و چپ را ۱/۵ سانتیمتر تعیین میکند ولی دستور دوم، حاشیه بالا را ۱۰px، حاشیه راست را 5px، حاشیه پایین را 15px و حاشیه چپ را 5px تعیین میکند. دقت کنید که حرکت در جهت عقربه ساعت است. اولین مقدار مربوط به حاشیه بالا، دومین مقدار مربوط به حاشیه راست، سومین مقدار مربوط به حاشیه پایین و چهارمین مقدار مربوط به حاشیه چپ است. هر کدام که تعیین نشود، برابر با حاشیه مقابل آن منظور خواهد شد. به عنوان مثال، اگر حاشیه بالا تعیین شود ولی حاشیه پایین تعیین نشود، حاشیه پایین به اندازه حاشیه بالامنظور خواهد شد.

 

مقالات مرتبط به طراحی سایت :

تنظیم تصویر در صفحه وب (راهنمای html)
چند رسانه ای در وب ( راهنمای html)
خواص لیستها(راهنمای html)
خواص فاصله گذاری(راهنمای html)
خواص مرز کادرها (راهنمای html)
خواص شیوه نامه ها (راهنمای html)
شیوه نامه ها (راهنمای html)
اسکریپت و نقشه های تصویری(راهنمای html)
ایجاد نقشه تصویری کاربر(راهنمای html)
تصاویر و پیوند(راهنمای html)
قرار دادن تصویر در صفحه وب(راهنمای html)
پیوند در HTML (راهنمای جامع html)