وبلاگ شخصی محمد امین عسکری

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 شکل ساعت شنی برای انتظار را اضافه میکند.

منبع:http://www.iranw3.com/CSStut/css02.asp

• 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 و یا با اعداد بین ۱۰۰ تا ۹۰۰ .
• font-size اندازه حروف را به سه مدل کنترل میکند : در مدل absolute sizes از کلمات  xxsmall, small, medium, large, xlarge, xxlarge  در مدل relative sizes از smaller, larger استفاده میکنیم و در مدل font-point-size اعداد ۱ تا ۱۲  قرار میدهیم که بعد از عدد 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 مینامند مینویسید برای هر رنگ از عدد ۰  تا عدد ۲۵۵ در نظر گرفته شده است. Style=”background-color: rgb(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 “

منبع:http://iranw3.com/CSStut/css01.asp

در طراحی صفحات وب یکی از نکات حائز اهمیت انتخاب و قراردهی مناسب یک پس زمینه یا Background میباشد،در این مطلب به معرفی کد های پس زمینه و کاربرد هریک در فایل Css خواهم پرداخت.

رنگ پس زمینه

کد مربوط به رنگ پس زمینه در قسمت body قرار خواهد داشت:

رنگ پس زمینه میتواند شامل موارد زیر باشد:

• name – a color name, like “red”
• RGB – an RGB value, like “rgb(255,0,0)”
• Hex – a hex value, like “#ff0000″

تصویر پس زمینه

به صورت پیش فرض تصویر انتخابی شما آنقدر تکرا میشود تا محل مورد نظر را پوشش دهد.

تصویر پس زمینه ی یک صفحه میتواند مانند مثال زیر تنظیم شود:

تکرار و موقعیت پس زمینه

به صورت پیش فرض تصویر پس زمینه در هر دو حالت افقی و عمدی تکرار خواهد شد.

برخی تصاویر را باید فقط افقی یا عمودی تکرار کرد و در صورت رعایت نکردن این موضوع تصاویر گنگ و مبهمی خواهیم داشت،مانند مثال زیر:

اگر تصویر را فقط افقی تکرار کنیم(repeat-x) پس زمینه ی ما نمای بهتری خواهد داشت:

تصویر پس زمینه-تعیین موقعیت-بدون تکرار

نمایش یک تصویر پس زمینه بدون تکرار:

تعیین موقعیت قرار گیری تصویر پس زمینه بدون تکرار:

رنگ و تصویر پس زمینه

گاهی اوقات که شما از تصاویری با زمینه ی محو استفاده میکنید لازم است تا رنگ پس زمینه هم انتخاب شود،مانند مثال زیر:

تمام تنظیمات پس زمینه در CSS

استایل شیت ها یکی از مفید ترین عناصر وب میباشند که یکی از مزیتهای آن ساخت یک فایل و الگوی مشترک و استفاده آن در کلیه صفحات سایت می باشد. همین امر که از تکرار یک سری کد جلوگیری میکند باعث محبوبیت این عنصر در نزد طراحان وب شده است.

با استایل شیت چه کارهایی میتوانید انجام دهید؟

با این عنصر شما میتوانید مدل، اندازه، رنگ و نوع آرایش متن ، رنگ زمینه و حاشیه صفحات و جدولها ، تنظیمات لیستها و همچنین عکسها را کنترل کنید.

تعیین الگو و 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 ها ویا خصوصیات آنها نیست. به مثال زیر توجه کنید:

تعریف الگو از طریق class

گاهی اوقات یک style به روشهای اول یا دوم تعریف میشود، اما شما نمیخواهید که آن الگو در همه جا اعمال شود، پس میایید یک اسم واحد برایselector  انتخاب میکنید ، بدین ترتیب که بلافاصله بعد از selector یک نقطه میگذارید و اسمی را مینویسید. پس از این کار در هر تگی که نیاز به آن الگو هست خصوصیت class=” “ را مینویسیم و برابر با آن اسم قرار میدهیم،

فراخوانی فایل 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=”آدرس فایل “>

این تگ نیازی به پایان دهنده ندارد.

منبع:http://www.iranw3.com/CSStut/