به زبان ساده : ما هر چیزی را که در داخل تگ <style> اینجا </style> و یا در فایلهای css می بینیم استایل شیت است.
پس مکان ذخیره استایل شیتها یا در بین تگ استایل است و یا در فایلی با پسوند css ذخیره کرده و به صفحه لینک می دهیم.
مثل : <link rel="stylesheet" type="text/css" href=" http://www.js4ir.com/style.css">
id="xname" class="xname" ...
اینها فراخوانندگان استایل ( خصوصیات صفحه هستند ) و از تکرار خصوصیات جلوگیری می کنند.
اول class , id را توضیح می دهم و بعد استایل شیت ها را معرفی می کنم.
class و id دو خصوصیت تگ <style> می باشند .
این تگ مربوط به افکت ها و ترسیم خصوصیات بدنه است. و مکان آن :
<head>
<style>
. class name { class{ quality
# id name { id quality}
<style/>
</head>
» class:
class در تگ <Style> به صورت شروع با نقطه می باشد مثال:
.btn {border:1px dotted #c0c0c0;height:20; font-size:11;font-family: Tahoma; color:#444444;}
که در مثال بالا نام class که بعد از نقطه نوشته شده btn می باشد و مقدار آن که در { اینجا } آمده همان استایل شیت است
ما خصوصیت داخل {} را با نوشتن class=btn می توانیم برای تعداد نا محدودی دکمه تکرار کنیم.
مثال عملی:
کد زیر دکمه ساده ای را به وجود می آورد
<input type="button" value="butten">
اما با کپی کد زیر در تگ <style> .
.btn {border:1px dotted #c0c0c0;height:20;FONT-SIZE: 11; FONT-FAMILY: Tahoma; color:#ff0000}
و جایگذاری کد آن در بدنه صفحه (<body>) به صورت:
<"input class="btn" type="button" value="butten> .
به صورت : ظاهر می شود.
»id:
id نیز همانند classعمل می کند شاید دو تفاوت اساسی این دو را از هم مجزا کرده و آن هم این است که:
class به صورت نقطه (.) اما id به صورت نامبر (#) شروع می شود.
خوب حالا که class و id را هم شناختید استایل شیت ها را برای شما معرفی می کنم
خوب در ابتدا من استایل شیت ها را معرفی می کنم و توضیحی در کنارشان می نویسم.
»» استایل شیت ها باید در کروشه با شند
و بین هر خصوصیت تا خصوصیت بعدی باید یک فاصله و سیمیکولن باشد.( ; )
»» ممکن است استایل شیت را با class و id نشان ندهیم و به صورت کلی در نظر بگیریم مثل :
body {} ,table {} , butten{} ,input{}
که متون داخل کروشه برای تمام صفحه صدق می کند
مثلا کیفیت داخل کروشه table به همه جدول ها نسبت داده می شود و ...
margin:0 00 0 تعیین فاصله صفحه از بالا و چپ و پایین و بالا
font-family: Tahoma نشان دهنده فونت صفحه مثلا تاهما
font-size: 8pt نشان دهنده اندازه فونت صفحه مثلا سایز هشت پی تی
COLOR:#000000 نشان دهنده رنگ متن که در اینجا کد رنگ مشکی است
TEXT-DECORATION:none نشاندهنده بدون زیر خط بودن نوشته
نشان دهنده فاصله
padding:5px padding-right:5px
( اولی کلی می باشد و دومی فقط از راست )به پیکسل
border:1px dotted #000000 نشان دهنده کادر است که اندازه ، نوع ، و رنگ آن را مشخص می کند
border-top: 3px dashed #000000 فقط در بالا صدق کرده و خط چین بزرگتر است
background-color:#000000 رنگ زمینه مورد نظر را مشخص می کند که در اینجا مشکی است
width: 18% مقدار عرض که ممکن است به پیکسل و یا در صد باشد
height:115px مقدار طول که ممکن است به پیکسل و یا در صد باشد
top: 847px مقدار فاصله از بالا که ممکن است به پیکسل و یا در صد باشد
left: 4% مقدار فاصله از چپ که ممکن است به پیکسل و یا در صد باشد
نشان دهنده یک نوع افکت که در اینجا نوع آن ، و در داخل پرانتز رنگ و شدت آن مشخص گردیده است
filter:glow(Color=000000,Strength=4)
text-align:center مکان نوشته ها که در اینجا وسط چین است
Overflow: Scroll برای اسکرول کردن لایه ها و یا دایو ها
background-image: url(' your file adress ') آوردن پس زمینه
background-repeat: no-repeat تکرار شدن یا نشدن پس زمینه که در اینجا تکرار نشدن است
background-position: left center مکان قرار گرفتن پس زمینه که در اینجا سمت چپ مرکز است
»»اما بعضی استایل شیت ها با هم می آیند :
1. برای کل لینک های صفحه به رنگ آبی در هنگام باز شدن صفحه
و به رنگ قرمز در هنگام رفتن بر روی آنها
body a {COLOR:#0000ff; TEXT-DECORATION:none}
a:hover { COLOR:#ff0000; TEXT-DECORATION:none; }
2. رنگی کردن اسکرول از خانواده رنگ خاکستری :
body {SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR:#9AABE7 ; SCROLLBAR-BASE-COLOR: #D6DFF7; scrollbar-dark-shadow-color: #000000}
|
