زبان CSS چیست؟ چگونه می‌توانیم از زبان CSS در HTML استفاده کنیم؟ چگونه صفحات وب سایتمان را استایل دهی کنیم؟ در این مقاله به صورت جامع به معرفی زبان CSS و استفاده از آن در HTML می‌پردازیم. البته ما در میزفا به معرفی زبان html پرداختیم.
سرفصل‌های پست
آشنایی با زبان CSS
از زبان CSS برای شرح نحوه نمایش اجزای html در صفحه، کاغذ و یا سایر رسانه ها استفاده می شود. وجود CSS باعث صرفه جویی در انجام بسیاری از کار ها می باشد. CSS می تواند طرح بندی چندین صفحه وب را در لحظه مدیریت کند.
به طور کلی css ابزاری است که یادگیری آن آسان است و کنترل خوبی بر روی نحوه ارائه یک سند html به ما می دهد.
مزایای استفاده از CSS
- صرفه جویی در زمان
یک بار بنویسید و آن را دوباره در هر جا استفاده کنید.
- صفحات سریعتر بارگیری می شوند
اگر از CSS استفاده می کنید، نیاز نیست برای هر تگ html خواص آن را بنویسید. توسط CSS آن را یکبار بنویسید و برای همه تگ ها اعمال کنید.
- نگهداری آسان
برای ایجاد یک تغییر کلی در استایل کافیست یک تغییر در کد های خارجی CSS اعمال کنید. این تغییرات بر روی همه اجزای صفحه تاثیر خواهند گذاشت.
- سازگاری با دستگاه های مختلف
زبان CSS به شما اجازه می دهد تا صفحات وب را برای بیشتر از یک دستگاه سازگار کنید مانند نمایش صفحه وب در موبایل با طرح بندی متفاوت.
- استاندارد های جهانی
هر چه به جلو حرکت می کنیم، خواص موجود در تگ های html بیشتر منسوخ می شوند و کد های CSS جای آن ها را می گیرند.
کد های زبان CSS را به سه طریق می توان به تگ های html اعمال کرد:
- برخط – استفاده کردن از خواص استایل در تگ های html.
- داخلی – استفاده از تگ <style> در بخش <head> سند.
- بیرونی – استفاده از یک فایل css.
رایج ترین راه استفاده از CSS، بارگیری استایل از یک فایل جداگانه است. (روش بیرونی)
استفاده از CSS برخط
از این روش برای اعمال یک استایل خاص بر یک تگ مجزای html استفاده می شود. در این روش کد های زبان CSS داخل خاصیت style تگ html نوشته می شوند.
در مثال زیر رنگ متن داخل تگ h1 به آبی تغییر می کند.
<h1 style="color:blue;">This is a Blue Heading</h1>
یا در مثال زیر، اندازه فونت متن به ۳۰ پیکسل تغییر می کند.
<p style="font-size:30px;">This is a 30px sized paragraph</p>
برای کسب اطلاعات بیشتر می‌توانید مقاله آشنایی با اتصال درون خطی CSS را بخوانید.
استفاده از CSS داخلی
یک قطعه کد زبان css داخلی که برای شکل دهی به یک صفحه استفاده می شود.
تمام کد ها در فایل html. نوشته می شوند.
در این روش یک تگ style در داخل بخش head صفحه قرار می گیرد.
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
برای کسب اطلاعات بیشتر می‌توانید مقاله آشنایی با اتصال داخلی CSS را بخوانید.
استفاده از CSS بیرونی
فراخوانی یک فایل CSS بیرونی که قابل استفاده در چندین صفحه HTML است.
در این روش، کد های زبان CSS در فایل css. و کد های html در فایل html. نوشته می شوند.
با استفاده از یک فایل CSS در طرح بندی یک وبسایت می توانید کنترل راحتی بر روی تغییر چهره وبسایت داشته باشید.
برای فراخوانی فایل CSS کافیست آن را در بخش head صفحه لینک کنید.
مثال :
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
محتوای فایل style.css به شرح زیر است.
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
برای کسب اطلاعات بیشتر در رابطه با اتصال خارجی می‌توانید مقاله آشنایی با اتصال خارجی در CSS ما در میزفا را مطالعه کنید.
پایانترم
[box type=”info” class=”question-from-users” width=””]سوال:
از css در چه مواردی استفاده میشود و چه مزایایی دارد؟ چند روش برای استفاده از css در HTML وجود دارد؟
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
- CSS، زبانی برای استایل دادن به اجزای صفحه وب محسوب می شود.
- زبان CSS به سه طریق متفاوت می تواند بر کد های html تاثیر بگذارد.
- بهترین روش تاثیر CSS بر html، استفاده از فایل css. خارجی است.
- زبان CSS به راحتی می تواند صفحه وب شما را در دسکتاپ و موبایل سازگار کند. (طراحی واکنش گرا)
ما در میزفا به قلم نوید معدن نژاد مقالات آموزشی در رابطه با آموزش CSS تهیه کرده‌ایم، به عنوان یک طراح وب ضروریست که CSS را بیاموزید، نوید عزیز نیز تلاش کرده است تا به ساده ترین شکل ممکن مقالاتی جامع در رابطه با آموزش CSS را آماده کند.
این مقاله نیز به اتمام رسید، امیدوارم استفاده لازم را برده باشید. مثل همیشه اگر سوالی داشتید حتما مطرح کنید و منم در سریع ترین زمان ممکن بهتون پاسخ میدم.
3 پاسخ
جواب سوال:
از css برای استایل دادن به اجزای سند html استفاده می کنیم و همچنین می توانیم حجم کدهای html را کاهش داده و در نتیجه سرعت بارگذاری صفحات در مرورگر را افزایش دهیم و هزینه های نگهداری وبسایت را در در پروژه های بزرگ کاهش دهیم(در اثر کاهش فضای مورد نیاز برای نگهداری فایل های وبسایت) – با توجه به امکان استفاده از css در قسمت ها و صفحات مختلف می توانیم از دوباره نویسی کدهای مربوط به استایل دهی صفحات جلوگیری نموده و در نتیجه در صرف زمان برای کدنویسی صرفه جویی کنیم بعلاوه اینکه یکی دیگر از مزایای css امکانات مربوط به واکنشگرا کردن صفحات است که در دستگاه های مختلف صفحه وب ما کاربرپسند و قابل مصرف باشد
می توانیم به انواع روش های برخط و داخلی(ثبت با تگ استایل در ذیل تگ هد) و لینک کردن صفحه به فایل css خارجی از css استفاده کرد
از زبان CSS برای نحوه نمایش اجزای html در صفحه یا سایر رسانه ها استفاده می شود
صفحات سریعتر بارگزاری می شوند
خیلی راحته فقط کافیه یک استایل درست کنیم و ان را روی تگ های مختلف جایگذاری کنیم
می توانیم برای هر دستگاهی صفحه وب طراحی کنیم
در زمانمون صرفه جویی میشود
هر چه جلو تر میرویم کد های html کمتر وجاشو نو به cssمیدهد
سه روش
بر خط
داخلی
بیرونی
ممنون ازت علی اکبر، پاسخت درسته. فقط من یه دو نکته رو بگم: کد های HTML به مرور زمان کمتر نمیشن ? بلکه استفاده از یک سری صفت ها مثل style کمتر میشه. همون حجم HTML سرجاشه و جایی نمیره. فقط CSS یکم کارش رو سبک تر میکنه.