|
خصوصيات استايل شيت قسمت اول
در اين قسمت ميپردازيم به خصوصيات
style ها که ابتدا از عنصر متن شروع ميکنيم که در تگهاي
<p><div><span>
بيشتر کاربرد دارد.
Style
براي عنصر متن
-
text-align محل قرارگيري
متن در يک سطر را کنترل ميکند و با justify, left, center, right
مقداردهي ميشود.
-
text-indent براي
دندانه دار کردن متن بکار ميرود و با عدد مقدار دهي ميشود
که اگر در مقياس پيکسل باشد بعد از عدد بايد
px نوشته شود مانند:
text-indent:20px و اگر با درصد مقداردهي
شود بايد علامت % را بگذاريد.
-
letter-spacing
اندازه بين حروف را کنترل ميکند که براي حروف فارسي
مناسب نيست و با عدد مقداردهي ميشود که بعد از عدد
px يا em
نوشته ميشود که در em بين حروف
فاصله اي به اندازه حرف m
توليد ميشود.
-
line-height
براي کنترل فاصله خطوط از هم بکار ميرود و با عدد سپس px
مقداردهي ميشود.
-
font-family براي
تعيين نوع فونت بکار ميرود که در اين خصوصيت ميتوانيد چندين فونت را قرار دهيد که
اگر سيستم بيننده سايت يک از آن فونتها را نداشت از ديگري استفاده کند، بدين
صورت:font-family:Arial,
Tahoma, Times New Roman
-
font-style آرايش فونت را از
لحاظ اريب بودن تعيين ميکند که ميتوانيد از normal, italic, oblique
استفاده کنيد.
-
font-weight آرايش حروف را از
لحاظ ضخامت تعيين ميکند که به دو روش مقدار ميدهيد ، با کلمات
lighter, normal, bold, bolder و يا با اعداد بين
100 تا 900
.
-
font-size اندازه حروف را به سه
مدل کنترل ميکند : در مدل absolute sizes
از کلمات xxsmall, small, medium, large, xlarge,
xxlarge در مدل relative sizes
از smaller, larger استفاده
ميکنيم و در مدل font-point-size
اعداد 1 تا
12 قرار ميدهيم که بعد از عدد
pt بايد بنويسيم .
نکته: شما
ميتوانيد چند خصوصيت بالا را که مربوط به font
ميباشد را يکجا بصورت خلاصه تعريف کنيد که در اين حالت نيازي به نوشتن خصوصيات نيست
و فقط مقادير آنها را به ترتيب زير مينويسم:
font-style,font-weight,font-size,font-family
کلمه font
را به عنوان selector مينويسيم و
مقاديرخصوصيات را به ترتيب بالا با رعايت فاصله دربين { }
قرار ميدهيم،
font { italic bold 20pt “Arial” Tahoma }
-
Color رنگ متن را تعيين ميکند که
هم اسم رنگ و يا کد هگز رنگ را مينويسيد.
-
text-decoration اين خصوصيت
وظيفه کشيدن خط براي حروف را دارد که ميتوان از underline
براي کشيدن خط زير حروف، از overline
در بالاي حروف، line-through
بر روي حروف استفاده کرد و اگر نيازي
به کشيدن خط نيست از
none استفاده ميشود، همچنين blink
که براي چشمک زدن حروف بکار ميرود ولي
مرورگر اينترنت اکسپلورر آنرا نمايش نميدهد.
-
text-transform اين خصوصيت حروف
را براي بعضي از زبانها مانند انگليسي
کوچک و بزرگ ميکند و کاربردي براي
فارسي ندارد. مقادير مربوط به آن none, capitalize, uppercase,
lowercase است.
Style
براي زمينه صفحه و يا جدولها
-
background-color توسط اين
خصوصيت رنگ زمينه را کنترل ميکنيد که اسم رنگ يا مقدار مخلوط سه رنگ قرمز،
سبزوآبي را که
rgb مينامند مينويسيد براي
هر رنگ از عدد 0 تا عدد
255 در نظر گرفته شده است.
Style=”background-color: rgb(10,255,0)”
داخل پرانتز عدد 10
نمايانگر رنگ قرمز و 255 رنگ سبز
و 0 رنگ آبي
است که شما هم بايد به همين ترتيب بنويسيد.
-
background-image توسط اين
خصوصيت ميتوانيد يک عکس به زمينه صفحه يا جدول اضافه کنيد.
background-image: { url ( www.sitename.com/images/image.gif
) }
-
background-repeat زمانيکه
بوسيله خصوصيت بالا يک عکس به زمينه صفحه يا يک جدول اضافه ميکنيد، آن عکس نسبت
به اندازه اي که دارد آنقدر تکرار ميشود تا زمينه صفحه را پر کند اما توسط اين
خصوصيت ميتوانيد تکرار آن را کنترل کنيد که اگر مقدار را repeat-x
قرار دهيد فقط يک رديف بصورت افقي
تکرار ميشود و اگر
repeat-y باشد بصورت عمودي
و
no-repeat باشد همان عکس فقط ديده ميشود
بدون تکرار.
-
background-attachment اگر مقدار
اين خصوصيت را fixed قرار دهيد
عکسي که در زمينه صفحه است ثابت ميماند و عناصر و محتواي
صفحه با
scroll کردن بالا و پايين خواهند شد ولي
اگر مقدار را scroll بگذاريم
همراه با بقيه عناصر حرکت ميکند.
-
background-position به کمک اين
خصوصيت محل قرارگيري
عکس در زمينه صفحه را تعيين ميکنيد که مقادير آن عبارتند از،
top,bottom,center,left,right
نکته: شما
ميتوانيد همه خصوصيات مربوط به زمينه background
يا چند تا از آنها را بطور يکجا تعريف کنيد که با اين موضوع آشنا هستيد. و اما
ترتيب قرار گرفتن آنها بدين صورت است،
background-color,background-image,background-repeat,
background-attachment,background-position
به مثال زير دقت بفرماييد:
background: {
green url(image.gif) no-repeat fixed bottom }
style=”
background: green url(image.gif) no-repeat scroll bottom right “
ابتدای صفحه
نسخه چاپی اين صفحه
|