آموزش رایگان CSS | آموزش جامع سی اس اس برای دانشجویان
در این مقاله قصد داریم به شما آموزش سی اس اس را ارائه دهیم، شما در این جلسه قرار است با اکثر کدهای css آشنا شوید، برخی از کدها ممکن است گفته نشوند اما سعی می کنیم تمام کد های کاربردی را به شما آموزش دهیم.
از حق نگذریم آشنایی کامل با کدنویسی Css می تواند بسیار راه گشا باشد و به جرات میتوانم بگویم که بدون دانستن کدنویسی استایل قالب شما قادر نخواهید بود تجربه کاربری خوبی را روی سایت پیاده سازی کنید به همین خاطر این آموزش را در دسته تجربه کاربری تقدیم حضورتان می کنیم.
کدهایی که در این جلسه به شما می گوییم
می‌توانند رنگ اندازه و فاصله متن یا هر شعر دیگری را مشخص کنند و به وب سایت شما ظاهر زیبا تری بدهد برخی از کد هایی که در این مطلب قرار است به شما آموزش دهیم عبارتند از :
در این جلسه قصد داریم به شما آموزش سی اس اس را ارائه دهیم
شما در این جلسه قرار است با اکثر کدهای css آشنا شوید
برخی از کدها ممکن است گفته نشوند اما سعی می کنیم تمام کد های کاربردی را به شما آموزش دهیم.
همانطور که می دانید CSS مخفف کلمه Cascading Style Sheets هست یا ورق هایی به سبک آبشاری و چرا به آن آبشاری گفته می شود به این خاطر که شما در کد های سی اس اس معمولا در ابتدای طراحی یک سایت همچین چیزی را میبینید :
سلکتور {
رنگ : آبی;
فونت : یکان;
اندازه : ۱۳پیکسل;
}
همانطور که میبینید متن های فوق مانند یک آبشار از یک جایی شروع و در جایی هم ختم شده اند.
قبل از آغاز بحث لازم است تا کمی توضیح بیشتر در خصوص کد های سی اس اس و لزوم استفاده از آنها بدهیم.
سی اس اس ها چیستند؟
دستوراتی هستن که توسط اون‌ها می‌تونیم تمامی خصوصیات ظاهری صفحه وب‌سایت رو تعیین کنیم.
بنابراین شما توسط کدهای HTML، اسکلت صفحه وب سایت خودتون رو پیاده سازی می کنید.
و با کدهای CSS مشخص می‌کنین هر عنصر چه خصوصیات ظاهری‌ای باید داشته باشه. به اصطلاحی رنگش می‌کنید و کلی ویژگی دیگه بهش اضافه می‌کنید.
انواع سی اس اس :
دستورات سی اس اس به سه شکل در صفحات وب قابل استفاده هستند..این سه شکل در زیر آمده اند.
۱- دستوری (Inline css)
مثال :
۲- داخلی
تذکر : برای استفاده از سی اس اس به شیوه داخلی باید از تگ استایل داخل هد استفاده کرد و دستورات سی اس اس را در آن قرار داد.
۳- خارجی
تذکر : برای استفاده از یک سی اس اس خارجی در داخل یک صفحه وب HTML می بایست کد زیر را در داخل هد افزود :
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>t
برای مشاهده دستورات و بازی با آنها می توانید از سایت 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
نحوه نمایش را مشخص می کند و بیشتر برای منو ها استفاده می شود.
مثال های بیشتر
position
موقعیت قرارگریری دایو ها را با این دستور مشخص میکنند که انواع مختلف دارد و توضیح مفهومی آن برای مبتدیان هم کمی پیچیده است و بهتر است در عمل متوجه تفاوت های آن ها شوید..
مثال های مربوط با پوزیشن در W3
Margin
Padding
مارجین شئ مدنظر شما را از بقیه فاصله میدهد و پدینگ محتوای داخل شئ شما را از لبه های آن فاصله میدهد.
مثال های مارجین و پدینگ در W3
float
فلوت یا شناور شدن بیشتر برای دایو ( Div ) ها استفاده می شود و دایو های شما را در صفحه سایتتان به سمت چپ یا راست منتقل می کند.
مثال های فلوت سی اس اس در W3
width
height
دو مولفه فوق نیز طول و عرض هر شئ را مشخص می کنند.
@font-face
و در آخر فونت فیس میتواند یک فایل خارجی فونت دلخواه شما را به سایت معرفی کند و به شما امکان استفاده از فونت دلخواهتان در داخل سایت را بدهد که البته هر فایل خارجی که در داخل سایت لود شود سرعت لود سایت شما را کاهش خواهد داد و این زیاد مطلوب نیست.
