آموزش رایگان CSS | آموزش جامع سی اس اس برای دانشجویان

آموزش رایگان CSS | آموزش جامع سی اس اس برای دانشجویان

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

کدهایی که در این جلسه به شما می گوییم
می‌توانند رنگ اندازه و فاصله متن یا هر شعر دیگری را مشخص کنند و به وب سایت شما ظاهر زیبا تری بدهد برخی از کد هایی که در این مطلب قرار است به شما آموزش دهیم عبارتند از :
در این جلسه قصد داریم به شما آموزش سی اس اس را ارائه دهیم

شما در این جلسه قرار است با اکثر کدهای css آشنا شوید

برخی از کدها ممکن است گفته نشوند اما سعی می کنیم تمام کد های کاربردی را به شما آموزش دهیم.

همانطور که می دانید CSS مخفف کلمه Cascading Style Sheets هست یا ورق هایی به سبک آبشاری و چرا به آن آبشاری گفته می شود به این خاطر که شما در کد های سی اس اس معمولا در ابتدای طراحی یک سایت همچین چیزی را میبینید :

سلکتور {

رنگ : آبی;

فونت : یکان;

اندازه : ۱۳پیکسل;

}

همانطور که میبینید متن های فوق مانند یک آبشار از یک جایی شروع و در جایی هم ختم شده اند.

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

سی اس اس ها چیستند؟

سی اس اس ها چیستند؟ html

دستوراتی هستن که توسط اون‌ها می‌تونیم تمامی خصوصیات ظاهری صفحه وب‌سایت رو تعیین کنیم.

بنابراین شما توسط کدهای HTML، اسکلت صفحه وب سایت خودتون رو پیاده سازی می ‌کنید.

و با کدهای CSS مشخص می‌کنین هر عنصر چه خصوصیات ظاهری‌ای باید داشته باشه. به اصطلاحی رنگش می‌کنید و کلی ویژگی دیگه بهش اضافه می‌کنید.

انواع سی اس اس :

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

۱- دستوری (Inline css)

مثال :

<h1 style=”color:blue;text-align:center;”>This is a heading</h1>
<p style=”color:red;”>This is a paragraph.</p>

۲- داخلی

تذکر : برای استفاده از سی اس اس به شیوه داخلی باید از تگ استایل داخل هد استفاده کرد و دستورات سی اس اس را در آن قرار داد.

مثال

۳- خارجی

تذکر : برای استفاده از یک سی اس اس خارجی در داخل یک صفحه وب HTML می بایست کد زیر را در داخل هد افزود :

<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>t

برای مشاهده دستورات و بازی با آنها می توانید از سایت W3 استفاده کنید و یا روی لینک زیر کلیک کنید

مثال اجرای دستورات در W3

تفاوت انواع سی اس اس ها :

از سی اس اس دستوری معمولا در داخل مطالب استفاده می شود و نه در طراحی سایت

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

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

دستورات سی اس اس خارجی در یک فایل مجزا درج می شوند و به همین خاطر هم در بهبود سرعت لود سایت موثر هستند، چرا که ابتدا فایل html لود می شود و سپس فایل استایل سایت

نکته : معمولا بالاترین قدرت کد نویسی سی اس اس را سی اس اس های خارجی دارند و میتوان هر دستوری را برای هر سلکتوری در آن ها اجرا و آن را مشاهده کرد، و تمام دستورات معمولا در سی اس اس های دستوری و داخلی جوابگو نیستند و درست اجرا نخواهند شد. البته در برخی از موارد نادر دستوراتی هستند که در سی اس اس داخلی بهتر اجرا می شوند.

خب و اما سلکتور در سی اس اس چیست؟

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

تذکر : برخی از دستورات حالت عمومی دارند و برای آن ها از سلکتور های ریست استفاده می کنیم

به عنوان مثال :

*{direction:rtl}

p{

font-size:20px

}

دو نمونه دستور بالایی هر دو سی اس اس ریست هستند دستور اولی برای تمام اشیاء داخل HTML ما دایرکشن مشخص میکند و به آنها میگوید که از راست به چپ مرتب شوند (برای سایت های فارسی از این دستور استفاده میشود و * یعنی تمام المنت ها و یا اشیاء داخل صفحه ما) و دستور دومی هم برای تگ های پاراگراف در کل صفحه سایت ما اندازه متن را ۲۰ پیکسل مشخص می کند.

ریست کد های بیشتری از سی اس اس را می توانید اینجا مطالعه کنید : Reset CSS

کلاس و آی دی چیست؟

کلاس و آی دی دو صفت برای هر شئ هستند که اگر بخواهیم به شئ مشخصی دستو سی اس اس را نسبت دهیم لازم است آن شئ کلاس یا آی دی منحصربفردی داشته باشد

مثال :

<p class=”matn”>salam</p>

<p id=”matn”>salam</p>

توجه : دو پاراگراف فوق یکی از خصوصیت آی دی و دیگری از خصوصیت کلاس matn تبعیت میکند و دستورات برایش اجرا می شود.

نحوه اعمال دستورات به دو پاراگراف فوق در مثال زیر آمده است :

.matn{

font-size:30px

}

#matn{

font-size:20px

}

دو دستوری بالا در سی اس اس اولی برای کلاس اعمال می شود و دومی برای آی دی، در واقع برای دسترسی به کلاس مدنظرمان باید از نقطه (.) استفاده کنیم و برای اعمال دستوراتی به شئ دارنده آی دی مشخص از (#) یا شارپ استفاده می شود.

id in html —>> # in css

class in html –>> . in css

تذکر : متنی که آی دی گرفته اندازه اش ۲۰ و متنی که کلاس دارد اندازه اش ۳۰ می شود پس از اجرای کد های فوق.

 

ارث بری در سی اس اس چیست؟

گاهی اوقات لازم است ما به یک شئ خصوصیاتی را نسبت دهیم مانند رنگ اندازه و… اما آن شئ آدرس مشخصی ندارد و از کلاس و یا آی دی هم استفاده نمی کند تا بتوانیم در دستورات سی اس اس بگوییم فلان شئ با فلان آی دی و کلاس را به این رنگ در بیار و یا سایزشو تغییر بده. در این حالت باید از شئ بالا دستی آن استفاده کنیم که آن شئ یا بخش دارای کلاس مشخصی است و شئ مد نظرمان درون آن قرار دارد.

مثال :

<div class=”barcode”>

<ul>

<li>

login

</li>

<li>

logout

</li>

</ul>

</div>

به عنوان مثال در کد های اچ تی ام ال فوق قصد داریم تا لوگین و لوگ آوت رو در یک خط کنار هم نمایش دهیم و برای آن ها از دستور display:inline-block استفاده کنیم تا این کار انجام شود.

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

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

مثال ارث بری برای کنار هم قرار دادن دو منوی لاگین و لاگ اوت :

div.barcode > ul > li{

display:inline-block

}

در کد بالا گفته ایم که منوی ما (هر Li که داخل Ul هست) که در داخل دایوی با کلاس مشخص بارکد هست را کنار هم نمایش بده..

تذکر : از علامت کوچکتر و بزرگتر برای ارث بری استفاده می شود و معنی داخل را می دهد.

 

کدهایی که در این جلسه به شما می گوییم
می‌توانند رنگ اندازه و فاصله متن یا هر شعر دیگری را مشخص کنند و به وب سایت شما ظاهر زیبا تری بدهد برخی از کد هایی که در این مطلب قرار است به شما آموزش دهیم عبارتند از :
background-color
color

دو دستور فوق که مشخص است چه کاری انجام میدهند، بک گراند کالر رنگ پس زمینه هر شئ را عوض میکند و کالر هم رنگ متن را عوض میکند.

font-size
font-family
font-weight

سه کد فوق نیز اولی اندازه متن دومی نوع فونت متن و سومی قطر متن را مشخص میکند.direction
text-align

دستور بالا تراز متن را مشخص می کند.

border
border-radius

دو دستور بالا حاشیه میدهند به اشیاء و بیشتر برای دایو از آنها استفاده میشود.

تذکر : بوردر سه قسمت دارد اول نوع آن دوم رنگ آن و سوم اندازه آن

به مثال توجه کنید :

border : solid #eee 2px;

دستور فوق یک حاشیه و کادر خطی به قطر ۲ پیکسل و رنگ خاکستری دور دایو های شما ایجاد خواهد کرد.

بجای solid میتوان از dotted و dashed هم استفاده کرد که به ترتیب حاشیه نقطه چین و خط چین میدهند.

مثال های بیشتر در این خصوص در w3 :

مشاهده مثال اول

مشاهده مثال دوم

display

نحوه نمایش را مشخص می کند و بیشتر برای منو ها استفاده می شود.

مشاهده مثال در w3

مثال های بیشتر
position

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

مثال های مربوط با پوزیشن در W3

Margin
Padding

مارجین شئ مدنظر شما را از بقیه فاصله میدهد و پدینگ محتوای داخل شئ شما را از لبه های آن فاصله میدهد.

مثال های مارجین و پدینگ در W3
float

فلوت یا شناور شدن بیشتر برای دایو ( Div ) ها استفاده می شود و دایو های شما را در صفحه سایتتان به سمت چپ یا راست منتقل می کند.

مثال های فلوت سی اس اس در W3
width
height

دو مولفه فوق نیز طول و عرض هر شئ را مشخص می کنند.

@font-face

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

نوشته شده توسط : saeed eshaghzadeh

مدیر وب سایت عصر اطلاعات به نشانی کوتاه شده : i32.ir

سایر مطالب مرتبط با آموزش رایگان CSS | آموزش جامع سی اس اس برای دانشجویان

تاریخ : اردیبهشت ۲۰, ۱۳۹۹ ساعت : ۶:۱۹ ب٫ظ
اشتراک گذاری در شبکه های اجتماعی
Digg* twitter* Facebook* cloob* Delicious* Stumble Upon* Google Reader* Google plus* Facenama

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

کلیه مطلب سایت سئو 6 متعلق به مرکز نرم افزاری عصر اطلاعات است لذا از کپی آنها بدون لینک به مطلب اصلی خودداری نمایید