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


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

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



تعیین الگو و style:

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

برای تعیین و تعریف یک الگو ابتدا باید selector را مشخص و بنویسیم مانند h1 سپس خصوصیات و مقادیر آنها را بین دو علامت { } بگذاریم که طرز نوشتن خصوصیت و مقدار آن بین { } به این ترتیب میباشد:

ابتدا خصوصیت را نوشته سپس علامت : میگذاریم و بعد مقدار مشخصه آنرا مینویسیم ،
[HTML]
h1 { color:green }
[/HTML]
اگر بخواهیم چند خصوصیت را به یک selector نسبت دهیم ، بعد از هر کدام یک ; میگذاریم،
[HTML]
h1 { color:green; text-align:center }
[/HTML]


روشهای تعریف الگو و style:


Style ها را به سه روش میتوان تعریف کرد:

روش اول: به عنوان یک الگوی خارجی که اطلاعات در یک فایل نوشته میشود و با پسوند .css ذخیره میشود که در تگ <link> داخل قسمت head آدرس دهی و فراخوانده میشود.
روش دوم: style را میتوانیم در قسمت head نوشته و جاسازی کنیم که با تگهای<style></style> مشخص میشوند.
روش سوم: با قرار دادن style به عنوان خصوصیت در یک تگ و مقدار دهی آن. مانند تگ زیر:

[HTML]<div style=”color:green”>[/HTML]

نکته: اگر برای یک selector به چند روش style تعیین شود، آن الگویی که به تگ نزدیکتر است اجرا خواهد شد، پس طبق این اصل روش سوم نسبت به بقیه مؤثرتر است. در ضمن هیچ محدودیتی در تعیین selector ها ویا خصوصیات آنها نیست. به مثال زیر توجه کنید:
[HTML]
<style>
body { color:yellow; background-color:red }
h1,h2, h3, p { color:green }
</style>[/HTML]


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

گاهی اوقات یک style به روشهای اول یا دوم تعریف میشود، اما شما نمیخواهید که آن الگو در همه جا اعمال شود، پس میایید یک اسم واحد برایselector انتخاب میکنید ، بدین ترتیب که بلافاصله بعد از selector یک نقطه میگذارید و اسمی را مینویسید. پس از این کار در هر تگی که نیاز به آن الگو هست خصوصیت class=” “ را مینویسیم و برابر با آن اسم قرار میدهیم،
[HTML]
<head>
<style>
p.name { color:green }
</style>
</head>
<body>
<p class=”name”>……..</p>
</body>[/HTML]

فراخوانی فایل css در تگ <link>

ارزش واقعی style sheet زمانی به چشم میاید که یکبار آنرا تعریف کنید و در تمام صفحات از آن بهره ببرید. برای این منظور شما فقط از طریق روش اول میتوانید اینکار را انجام دهید، بدین ترتیب که style ها را در برنامه ویرایشگر متن مانند notepad مینویسید و سپس آن فایل را با پسوند .css ذخیره کرده و در دایرکتوری اصلی وب سایتتان قرار میدهید. css مخفف Cascading Style Sheet است.



نکته: دراین روش نیازی به نوشتن تگهای<style></style> نیست و فقط selector ها و خصوصیات را مینویسید. در صورت رعایت نکردن این موضوع الگوهای تعریف شده در آن فایل در صفحات اعمال نخواهند شد.



پس از ذخیره فایل style sheet میتوانید برای هر صفحه که میخواهید آنرا فراخوانی کنید، برای انجام این عمل باید تگ <link> را در قسمت head قرار دهید و سه خصوصیت مربوط به آنرا وارد کنید. خصوصیت rel=” “ است که برابر با کلمه stylesheet قرار میدهید و سپس type=” " وبا text/css مقداردهی میشود و در آخر با خصوصیت href=” “ فایل را آدرس دهی میکنید،
[HTML]
<link rel=”stylesheet” type=”text/css” href=”آدرس فایل “>
[/HTML]
این تگ نیازی به پایان دهنده ندارد.

iranw3.com

پاسخ
#2
Note 
در اين قسمت ميپردازيم به خصوصيات 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 براي تعيين نوع فونت بکار ميرود که در اين خصوصيت ميتوانيد چندين فونت را قرار دهيد که اگر سيستم بيننده سايت يک از آن فونتها را نداشت از ديگري استفاده کند، بدين صورت:
[HTML]
font-family:Arial, Tahoma, Times New Roman
[/HTML]
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 ميباشد را يکجا بصورت خلاصه تعريف کنيد که در اين حالت نيازي به نوشتن خصوصيات نيست و فقط مقادير آنها را به ترتيب زير مينويسم:
[HTML]
font-style,font-weight,font-size,font-family
[/HTML]
کلمه font را به عنوان selector مينويسيم و مقاديرخصوصيات را به ترتيب بالا با رعايت فاصله دربين { } قرار ميدهيم،
[HTML]
font { italic bold 20pt “Arial” Tahoma }
[/HTML]
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 توسط اين خصوصيت ميتوانيد يک عکس به زمينه صفحه يا جدول اضافه کنيد.
[HTML]
background-image: { url ( ) }
[/HTML]
background-repeat زمانيکه بوسيله خصوصيت بالا يک عکس به زمينه صفحه يا يک جدول اضافه ميکنيد، آن عکس نسبت به اندازه اي که دارد آنقدر تکرار ميشود تا زمينه صفحه را پر کند اما توسط اين خصوصيت ميتوانيد تکرار آن را کنترل کنيد که اگر مقدار را repeat-x قرار دهيد فقط يک رديف بصورت افقي تکرار ميشود و اگر repeat-y باشد بصورت عمودي و no-repeat باشد همان عکس فقط ديده ميشود بدون تکرار.
background-attachment اگر مقدار اين خصوصيت را fixed قرار دهيد عکسي که در زمينه صفحه است ثابت ميماند و عناصر و محتواي صفحه با scroll کردن بالا و پايين خواهند شد ولي اگر مقدار را scroll بگذاريم همراه با بقيه عناصر حرکت ميکند.
background-position به کمک اين خصوصيت محل قرارگيري عکس در زمينه صفحه را تعيين ميکنيد که مقادير آن عبارتند از، top,bottom,center,left,right
نکته: شما ميتوانيد همه خصوصيات مربوط به زمينه background يا چند تا از آنها را بطور يکجا تعريف کنيد که با اين موضوع آشنا هستيد. و اما ترتيب قرار گرفتن آنها بدين صورت است،
[HTML]
background-color,background-image,background-repeat,

background-attachment,background-position
[/HTML]
به مثال زير دقت بفرماييد:
[HTML]
background: { green url(image.gif) no-repeat fixed bottom }

style=” background: green url(image.gif) no-repeat scroll bottom right “

[/HTML]

پاسخ
#3
Note 
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 و آخرين مقدار رنگ کادر را کنترل ميکند، مانند:
[HTML]
style=” border: groove thin green”
[/HTML]
نکته: شما ميتوانيد خصوصيات حاشيه و کادر يک طرف را هم تعيين کنيد. بطور مثال فقط حاشيه يک عنصر از بالا يا رنگ کادر در طرف چپ ، که براي اين موضوع کافيست تا خصوصيت را نوشته و يک خط تيره گذاشته و سپس اسم سمت مورد نظر را وارد کنيد و در آخر هم مقدار دهي آن.
[HTML]
margin-top: 40px
padding-left: 100px
border-bottom: dotted
Style براي کنترل طول height و عرض width
[/HTML]
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 اگر بخواهيد بجاي مقادير بالا از عکس دلخواه خودتان براي علامتهاي ابتداي گزينه ها استفاده کنيد ميتوانيد اين خصوصيت را بکار بريد.
[HTML]
list-style-image: url ( images/bullet.gif )
[/HTML]
list-style-position اين خصوصيت گزينه هاي ليست را دندانه دار ميکند و با inside, outside مقدار دهي ميشود که بصورت پيش فرض براي ليستها outside در نظر گرفته ميشود.

نکته: بهتر است در اين خصوصيات تگ li را به عنوان selector انتخاب کنيد و همچنين اين سه خصوصيت را ميتوانيد بصورت خلاصه و يکجا بکار بريد
[HTML]
li { list-style: circle url(bullet.gif) inside }

<li style=” list-style: circle url(images/bullet.gif) inside “>
[/HTML]
همانطور که مشاهده ميکنيد ترتيب قرار گرفتن مقادير ابتدا type سپس image و در آخر position است.



Style براي scrollbar:

اگر شما بخواهيد رنگ scrollbar مرورگر را تغيير دهيد ميتوانيد style زير را به قسمت head صفحه اضافه کنيد:
[HTML]
<style type="text/css">

body
{
scrollbar-base-color: orange;
scrollbar-arrow-color: green;
scrollbar-darkshadow-color: blue;
}
</style>
[/HTML]
البته متناسب با رنگ آميزي صفحه ميتوانيد نام رنگها را تغيير دهيد. در هر عنصر ديگري که از scrollbar استفاده ميشود هم ميتوانيد با اضافه کردن خصوصيت style=” “ به تگ مربوطه، رنگ آنرا کنترل کنيد. بطور مثال براي تغيير رنگ scrollbar در textarea داخل يک فرم ، بصورت زير عمل ميکنيد:
[HTML]
<form>
<textarea cols="10" rows="10"
style="scrollbar-base-color:pink;scrollbar-arrow-color:purple;">
Text in the box
</textarea>
</form>
[/HTML]

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

پاسخ
ایجاد موضوع جدید   پاسخ به موضوع  

موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
Note انتخاب المنتی که هر دو کلاس رو دارد <Script> 1 333 20-01-2014 ساعت 18:01
آخرین ارسال: C0der
Note آموزش سلکتورهای CSS Hamid67 0 539 14-09-2013 ساعت 11:19
آخرین ارسال: Hamid67
Note آموزش ایجاد سایه منحنی با CSS SOFTAFZAR 1 650 10-08-2013 ساعت 11:46
آخرین ارسال: ehsanerfani
Note کتاب آموزش CSS Comodo 0 365 22-10-2012 ساعت 11:41
آخرین ارسال: Comodo

کاربرانِ درحال بازدید از این موضوع:   1 مهمان