Style Sheet
استايل شيت ها يکي از مفيد ترين عنصر در وب ميباشند که يکي از مزيتهاي آن ساخت يک فايل و الگوي مشترک و استفاده آن در کليه صفحات سايت مي باشد. همين امر که از تکرار يک سري کد جلوگيري ميکند باعث محبوبيت اين عنصر در نزد طراحان وب شده است.
با استايل شيت چه کارهايي ميتوانيد انجام دهيد؟
با اين عنصر شما ميتوانيد مدل، اندازه، رنگ و نوع آرايش متن ، رنگ زمينه و حاشيه صفحات و جدولها ، تنظيمات ليستها و همچنين عکسها را کنترل کنيد.
تعيين الگو و style
هر style بايد براي يک تگ خاص تعريف شود . به محتواي داخل تگي که ميخواهيم يک style نسبت دهيم selector يا انتخاب کننده ميگويند که ااگوي تعريف شده در تگ آغاز کننده يک عنصر تا تگ پايان دهنده آن تاثير خواهد داشت.
براي تعيين و تعريف يک الگو ابتدا بايد selector را مشخص و بنويسيم مانند h1 سپس خصوصيات و مقادير آنها را بين دو علامت { } بگذاريم که طرز نوشتن خصوصيت و مقدار آن بين { } به اين ترتيب ميباشد:
ابتدا خصوصيت را نوشته سپس علامت : ميگذاريم و بعد مقدار مشخصه آنرا مينويسيم ،
h1 { color:green }
اگر بخواهيم چند خصوصيت را به يک selector نسبت دهيم ، بعد از هر کدام يک ; ميگذاريم،
h1 { color:green; text-align:center }
روشهاي تعريف ااگو و style
Style ها را به سه روش ميتوان تعريف کرد:
- روش اول: به عنوان يک الگوي خارجي که اطلاعات در يک فايل نوشته ميشود و با پسوند .css ذخيره ميشود که در تگ <link> داخل قسمت head آدرس دهي و فراخوانده ميشود.
- روش دوم: style را ميتوانيم در قسمت head نوشته و جاسازي کنيم که با تگهاي<style></style> مشخص ميشوند.
- روش سوم: با قرار دادن style به عنوان خصوصيت در يک تگ و مقدار دهي آن. مانند تگ زير:
<div style=”color:green”>
نکته: اگر براي يک selector به چند روش style تعيين شود، آن الگويي که به تگ نزديکتر است اجرا خواهد شد، پس طبق اين اصل روش سوم نسبت به بقيه موثرتر است. در ضمن هيچ محدوديتي در تعيين selector ها ويا خصوصيات آنها نيست. به مثال زير توجه کنيد:
<style>
body { color:yellow; background-color:red }
h1,h2, h3, p { color:green }
</style>
تعريف الگو از طريق class
گاهي اوقات يک style به روشهاي اول يا دوم تعريف ميشود، اما شما نميخواهيد که آن الگو در همه جا اعمال شود، پس مياييد يک اسم واحد برايselector انتخاب ميکنيد ، بدين ترتيب که بلافاصله بعد از selector يک نقطه ميگذاريد و اسمي را مينويسيد. پس از اين کار در هر تگي که نياز به آن الگو هست خصوصيت class=” “ را مينويسيم و برابر با آن اسم قرار ميدهيم،
<head>
<style>
p.name { color:green }
</style>
</head>
<body>
<p class=”name”>……..</p>
</body>
فراخواني فايل css در تگ <link>
ارزش واقعي style sheet زماني به چشم ميايد که يکبار آنرا تعريف کنيد و در تمام صفحات از آن بهره ببريد. براي اين منظور شما فقط از طريق روش اول ميتوانيد اينکار را انجام دهيد، بدين ترتيب که style ها را در برنامه ويرايشگر متن مانند notepad مينويسيد و سپس آن فايل را با پسوند .css ذخيره کرده و در دايرکتوري اصلي وب سايتتان قرار ميدهيد. css مخفف Cascading Style Sheet است.
نکته: در اين روش نيازي به نوشتن تگهاي<style></style> نيست و فقط selector ها و خصوصيات را مينويسيد. در صورت رعايت نکردن اين موضوع الگوهاي تعريف شده در آن فايل در صفحات اعمال نخواهند شد.
پس از ذخيره فايل style sheet ميتوانيد براي هر صفحه که ميخواهيد آنرا فراخواني کنيد، براي انجام اين عمل بايد تگ <link> را در قسمت head قرار دهيد و سه خصوصيت مربوط به آنرا وارد کنيد. خصوصيت rel=” “ است که برابر با کلمه stylesheet قرار ميدهيد و سپس type=” " وبا text/css مقداردهي ميشود و در آخر با خصوصيت href=” “ فايل را آدرس دهي ميکنيد،
<link rel=”stylesheet” type=”text/css” href=”آدرس فايل “>
اين تگ نيازي به پايان دهنده ندارد.
.....................................................................................................................................................
در اين قسمت ميپردازيم به خصوصيات 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 “
....................................................................................................................................................
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”
نکته: شما ميتوانيد خصوصيات حاشيه و کادر يک طرف را هم تعيين کنيد. بطور مثال فقط حاشيه يک عنصر از بالا يا رنگ کادر در طرف چپ ، که براي اين موضوع کافيست تا خصوصيت را نوشته و يک خط تيره گذاشته و سپس اسم سمت مورد نظر را وارد کنيد و در آخر هم مقدار دهي آن.
margin-top: 40px
padding-left: 100px
border-bottom: dotted
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 شکل ساعت شني براي انتظار را اضافه ميکند.
ICT مرکز آموزشی 
کتاب شاهنامه فردوسی 
سریع- _