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

طراح تخصصی وب سایت،برنامه نویس،طراح و مجری شبکه های مبتنی بر تجهیزات سیسکو و مایکروسافت،MCSE,CCNA

نام:محمد امین نام خانوادگی:عسکری مدرک: مهندسی کامپیوتر-نرم افزار،MCSE،CCNA مهارت و تخصص: برنامه نویسی،طراحی گرافیکی،طراحی صفحات وب ایستا و پویا،طراحی و راه اندازی وب سایت،راه اندازی و پشتیبانی تخصصی انواع شبکه علاقه ی شدید من نسبت به علم کامپیوتر از دوران کودکی باعث شد تا با شور و علاقه وارد این حیطه ی گسترده شوم و روز به روز علاوه بر کسب دانش و مهارت نسبت به قبل بیشتر علاقه مند باشم،هم اکنون نیز علاوه بر فراگیری دوره های مختلف به فعالیت در زمینه ی شبکه و وب مشغولم و همچنین آماده ی همکاری با علاقه مندان در تمام زمینه های مرتبط با کامپیوتر و IT خواهم بود.

آموزش Css قسمت دوم

Posted by م.امین On خرداد - ۲۶ - ۱۳۸۹

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

آموزش CSS, طراحی وب

Add your comment

تنظیمات IIS در ویندوز سرور ۲۰۰۳

Posted by م.امین
اردیبهشت-۱-۱۳۸۹

آموزش تنظیمات ویندوز سرور ۲۰۰۸

Posted by م.امین
فروردین-۱-۱۳۸۹

آموزش کار با Vmware (قسمت اول)

Posted by م.امین
فروردین-۱-۱۳۸۹

آشنایی با ۲۰۰۸ Server Manager

Posted by م.امین
اسفند-۲۱-۱۳۸۸