درس اول

تعریف زبان CSS: زبان css که به آن زبان استایل نویسی نیز گفته می شود، مخفف عبارت Cascading Style Sheets می‌باشد و از هسته های اصلی برای طراحی صفحات وب به شمار می‌آید.

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

در تعریفی ساده برای css می توان گفت در صورتی که بدن انسان html در نظر گرفته شود، css مثل پوست، مو و گوش به بدن انسان شکل خواهد داد.
برای یادگیری طراحی وب به آموزش و یادگیری css نیاز می باشد. پس در صورتی که فردی بخواهد یک برنامه نویس خوب باشد، باید زبان css را یاد بگیرد.
برای یادگیری css آشنایی با html نیاز می باشد. همچنین باید ویرایشگر کد vscode را تا حدودی بشناسیم.
دوره های آموزشی css برای افرادی که قصد یادگیری طراحی وب را دارند، بسیار مناسب می باشد و با آموزش css می توان ظاهری جذاب و کاربردی به وبسایت داد.
سرفصل های متعددی وجود دارند که در دوره css آموزش داده می شوند‌. در ادامه به معرفی برخی از سرفصل های مهم در آموزش css می پردازیم.

انتخاب ‌کنندها

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

باکس مدل

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

بک گراند و تصاویر

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

فونت و متن

روی ظاهر یک وب سایت استایل دادن به فونت ها و متن تأثیر بسیار زیادی دارد. در آموزش css شما با روش های اعمال کردن استایل ها بر روی متن ها و موارد مختلف در این زمینه آشنا می شوید.

موقعیت المنت‌

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

واحد و سایز‌ها

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

انیمیشن و انتقال

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

فرم‌ها

یکی دیگر از موارد تاثیر گذار روی ایجاد وب سایت ها، فرم ها هستند. فرم ها با کاربران بسیار زیادی دارای تعامل هستند، بنابراین داشتن فرم هایی که دارای استایل زیبا و کاربردی باشند، برای یک وب سایت بسیار مهم بوده و موجب می‌شود تا بتوان تعامل راحت و خوبی را به کاربران نهایی داد.

رسپانسیو کردن وب سایت

در صورتی که شما به وب سایتی را طراحی نمایید و با استفاده از ccs به آن استایل داده باشید، ولی نسبت به رسپانسیو بودن صفحات خود بی توجه باشید، وب سایت شما کارایی چندانی ندارد. در دوره های css تلاش می شود در رابطه با رسپانسیو کردن وب سایت در پروژه های واقعی آموزش‌های لازم داده شود.

دوره های آموزشی css برای افرادی که طراحی وب انجام می دهند، بسیار کاربردی است. در دوره آموزشی css می توان به گسترش html پرداخت. از جمله قسمت های پرطرفدار در آموزش cssیادگیری تبدیل فایل های pSD به قالب است. با آموزش این مهارت می توان با تولید قالب های مختلف برای خود درآمد تولید کرد.

اهمیت یادگیری CSS

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

قبل از اینکه بخواهیم در مورد آموزش css را آغاز کنیم، باید با html آشنایی کافی داشته باشیم. در واقع می‌توان گفت که css یک زبان کمکی برای html است و css به تنهایی دارای کاربرد نیست، مگر اینکه آن را در کنار html استفاده کرد.

فرمت کلی دستورات CSS

نخستین قدمی که باید در آموزش برداشت آشنایی پیدا کردن با فرمت کلی دستورات این زبان می باشد. تمامی دستورات داخل تگ style گذاشته می شود. دستورات css به شکل زیر ساخته می شوند:
تگ ابتدایی style
تگ انتهایی style
در انتهای دستورات css باید دقت کرد که حتما تگ style باید بسته شود.
کاربرد زبان css
با استفاده از زبان css می توان یک تصویر یا عکس را داخل یک صفحه وب قرار داد. در صورتی که بخواهیم دور عکس خط بکشیم یا عکس را به شکل دایره در آوریم، ممکن است html به تنهایی قدرت انجام این کار را نداشته باشد و در زمینه استایل یا شکل دهی به صفحات وب هیچ نقشی ندارد. در واقع html فقط می تواند عناصر را در یک صفحه وب قرار داده تا در مرورگر به نمایش درآیند. در این مواقع می توان از css استفاده کرد. با استفاده از این زبان می توان برای تغییر رنگ کلیه قسمت های سایت یا هر تغییری از نظر استایل استفاده نمود.
تفاوت زبان css با html چیست؟
تفاوت بین زبان html و css کاملا مشخص می باشد. زبان html برای ایجاد عناصر در مرورگر به کار برده می شود و زبان css به ان عناصر در مرورگرها استایل خواهد داد.
در زیر مثالی از عناصری که با استفاده از css ایجاد شده اند آمده است. این صفحه جذابیت چندان زیادی ندارد.

<body>

<div>

<h3>سایت آموزشی زبان سی اس اس </h3>
</div>


</body>

در این مثال یک صفحه با html و css آمده است.

<style>
h3{
background-color:#F44336;
color:#fff;
text-align:center;
padding:30px;
}
div{
background-color:#2196F3;
color:#fff;
padding:25px;
border-radius:15px;
}
p{
background-color:#607D8B;
color:#fff;
text-align:center
border:2px solid black;
padding:10px 0;
}

</style>

علت استفاده از css چیست؟

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

1000 کاراکتر باقیمانده است