خصوصيات استايل شيت قسمت دوم

style براي حاشيه margin

margin براي افزودن حاشيه به کناره هاي عناصر داخل صفحه مانند پاراگرافها، عکسها يا حتي خود صفحه بکار ميرود که توسط اين خصوصيت حاشيه را در چهار طرف با دادن مقادير عددي بر حسب پيکسل  و يا درصد ميتوانيد کنترل کنيد. به اين نکته توجه فرماييد که اگر براي هر طرف مقادير متفاوت ميخواهيد بکاربريد پس بايد چهار مقدار با فاصله از هم بنويسيد مانند: margin:20px 45px 40px 100px که اولين عدد از سمت چپ مربوط به حاشيه بالاي عنصر و بترتيب براي راست، پايين و چپ محاسبه ميشود. و يا ميتوانيد دو عدد بکار بريد که مقدار اول حاشيه بالا و پايين و مقدار دوم حاشيه چپ و راست را کنترل ميکند  و همچنين اگر حاشيه ها بايد بمقدار مساوي باشند فقط يک عدد کافي است.

padding اين خصوصيت هم مانند margin عمل ميکند.

  Style  براي کادر border

border اين خصوصيت عناصر صفحه را داخل يک کادر قرار ميدهد که در سه قسمت مقدار دهي ميشود، اولين مقدار مدلهاي مختلف کادر را تعيين ميکند که مقادير آن عبارتند از: none, dotted, dashed, solid, double, groove, ridge, inset, outset  دومين مقدار مربوط به تعيين ضخامت کادر است که با thin,medium,thick و يا با عدد بهمراه  px و آخرين مقدار رنگ کادر را کنترل ميکند، مانند:

style=” border: groove thin green”

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

Style  براي کنترل طول height و عرض width

height, width همانطور که ميدانيد اين دو خصوصيت براي کنترل ابعاد يک عنصر مانند جدول و يا يک عکس بکار ميروند که با عدد بر حسب پيکسل و با علامت مشخصه px و يا با درصد مقدار دهي ميشوند در ضمن شما ميتوانيد مقدار auto هم قرار دهيد که آن عنصردر اندازه حقيقي  خود ظاهر شود.  

Style  براي قرار گرفتن دو عنصر در کنار هم alignment

float اين خصوصيت مانند align عمل ميکند و با none, left, right مقداردهي ميشود محل قرار گيري دو عنصر را در کنار هم کنترل ميکند.

clear اين خصوصيت برعکس float است و مشخص ميکند که در کدام طرف يا در هر دو سمت هيچ عنصري نباشد که با none, left, right, both هم مقداردهي ميشود.

Style براي ليستها lists

list-style-type نوع ترتيب قرارگرفتن ليستها را کنترل ميکند که عدد يا علامت ابتداي هر گزينه در ليست بيايد که ميتوانيد از مقادير none, disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha استفاده کنيد.

list-style-image اگر بخواهيد بجاي مقادير بالا از عکس دلخواه خودتان براي علامتهاي ابتداي گزينه ها استفاده کنيد ميتوانيد اين خصوصيت را بکار بريد.

list-style-image: url ( images/bullet.gif )

list-style-position اين خصوصيت گزينه هاي ليست را دندانه دار ميکند و با inside, outside   مقدار دهي ميشود که بصورت پيش فرض براي ليستها outside در نظر گرفته ميشود.

نکته: بهتر است در اين خصوصيات تگ li را به عنوان selector انتخاب کنيد و همچنين اين سه خصوصيت را ميتوانيد بصورت خلاصه و يکجا بکار بريد

li { list-style: circle url(bullet.gif) inside }

<li style=” list-style: circle url(images/bullet.gif) inside “>

همانطور که مشاهده ميکنيد ترتيب قرار گرفتن مقادير ابتدا type سپس image و در آخر position است.

  Style براي scrollbar

اگر شما بخواهيد رنگ scrollbar مرورگر را تغيير دهيد ميتوانيد style  زير را به قسمت head صفحه اضافه کنيد:

<style type="text/css">

body
{
scrollbar-base-color: orange;
scrollbar-arrow-color: green;
scrollbar-darkshadow-color: blue;
}
</style>

البته متناسب با رنگ آميزي صفحه ميتوانيد نام رنگها را تغيير دهيد. در هر عنصر ديگري که از scrollbar استفاده ميشود هم ميتوانيد با اضافه کردن خصوصيت style=” “ به تگ مربوطه، رنگ آنرا کنترل کنيد. بطور مثال براي تغيير رنگ scrollbar در textarea داخل يک فرم ، بصورت زير عمل ميکنيد:

<form>
<textarea cols="10" rows="10"
style="scrollbar-base-color:pink;scrollbar-arrow-color:purple;">
Text in the box
</textarea>
</form>

Style براي نشانگر موس   cursor

بيشتر مواقع نشانگر موس بصورت يک فلش است که براي تغيير دادن شکل آن در صورت نيازاز خصوصيات زير استفاده کنيد:

cursor: auto  نشانگر بصورت معمول نمايش داده ميشود.

cursor: crosshair بشکل علامت مثبت است.

cursor: default شکل پيش فرض خود را دارد.

cursor: hand مانند لينکها شکل دست بخود ميگيرد.

cursor: e-resize بصورت فلش شرقي غربي است.

cursor: n-resize فلش شمالي جنوبي است.

cursor: ne-resize فلش شمالشرقي به جنوبغربي.

cursor: nw-resize برعکس حالت بالا.

cursor: help يک علامت سوال اضافه ميکند.

cursor: move فلش در چهارجهت .

cursor: text بشکل نشانگر برروي متن است.

cursor: wait شکل ساعت شني براي انتظار را اضافه ميکند.