آشنایی با CSS در HTML
آشنایی با CSS در HTML
زبان css چیست؟ چگونه می‌توانیم از زبانcss درHTML استفاده کنیم؟ چگونه صفحات وب سایتمان را استایل دهی کنیم؟ در این مقاله به صورت جامع به معرفی زبانCSS و استفاده از آن درHTML می‌پردازیم. البته ما در فرازنتورک به معرفی زبان html پرداختیم.
- 1 آشنایی با زبان CSS
- 2 مزایای استفاده از CSS
- 3 استفاده از CSS برخط
- 4 استفاده از CSS داخلی
- 4.1 مثال :
- 5 استفاده از CSS بیرونی
- 5.1 مثال :
آشنایی با زبان 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برخط
از این روش برای اعمال یک استایل خاص بر یک تگ مجزای 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 ما در فرازنتورک را مطالعه کنید.
جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.
جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.
نویسنده:راحله تبریزی
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.