آموزش طراحی سایتآموزش HTML

آشنایی با CSS در HTML

زبان CSS چیست؟ چگونه می‌توانیم از زبان CSS در HTML استفاده کنیم؟ چگونه صفحات وب سایتمان را استایل دهی کنیم؟ در این مقاله به صورت جامع به معرفی زبان CSS و استفاده از آن در HTML می‌پردازیم. البته ما در میزفا به معرفی زبان html پرداختیم.

آشنایی با زبان CSS

از زبان CSS برای شرح نحوه نمایش اجزای html در صفحه، کاغذ و یا سایر رسانه ها استفاده می شود. وجود CSS باعث صرفه جویی در انجام بسیاری از کار ها می باشد. CSS می تواند طرح بندی چندین صفحه وب را در لحظه مدیریت کند.

به طور کلی css ابزاری است که یادگیری آن آسان است و کنترل خوبی بر روی نحوه ارائه یک سند html به ما می دهد.

مزایای استفاده از CSS

  • صرفه جویی در زمان

یک بار بنویسید و آن را دوباره در هر جا استفاده کنید.

  • صفحات سریعتر بارگیری می شوند

اگر از CSS استفاده می کنید، نیاز نیست برای هر تگ html خواص آن را بنویسید. توسط CSS آن را یکبار بنویسید و برای همه تگ ها اعمال کنید.

  • نگهداری آسان

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

  • سازگاری با دستگاه های مختلف

زبان CSS به شما اجازه می دهد تا صفحات وب را برای بیشتر از یک دستگاه سازگار کنید مانند نمایش صفحه وب در موبایل با طرح بندی متفاوت.

  • استاندارد های جهانی

هر چه به جلو حرکت می کنیم، خواص موجود در تگ های html بیشتر منسوخ می شوند و کد های CSS جای آن ها را می گیرند.

 

کد های زبان CSS را به سه طریق می توان به تگ های html اعمال کرد:

  1. برخط – استفاده کردن از خواص استایل در تگ های html.
  2. داخلی – استفاده از تگ <style> در بخش <head> سند.
  3. بیرونی – استفاده از یک فایل 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 ما در میزفا را مطالعه کنید.

نتیجه گیری

  • CSS، زبانی برای استایل دادن به اجزای صفحه وب محسوب می شود.
  • زبان CSS به سه طریق متفاوت می تواند بر کد های html تاثیر بگذارد.
  • بهترین روش تاثیر CSS بر html، استفاده از فایل css. خارجی است.
  • زبان CSS به راحتی می تواند صفحه وب شما را در دسکتاپ و موبایل سازگار کند. (طراحی واکنش گرا)

ما در میزفا به قلم نوید معدن نژاد مقالات آموزشی در رابطه با آموزش CSS تهیه کرده‌ایم، به عنوان یک طراح وب ضروریست که CSS را بیاموزید، نوید عزیز نیز تلاش کرده است تا به ساده ترین شکل ممکن مقالاتی جامع در رابطه با آموزش CSS را آماده کند.

این مقاله نیز به اتمام رسید، امیدوارم استفاده لازم را برده باشید. مثل همیشه اگر سوالی داشتید حتما مطرح کنید و منم در سریع ترین زمان ممکن بهتون پاسخ میدم.

برچسب ها

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

پاسخی بگذارید

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


حداکثر حجم فایل برای آپلود: 1 MB.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

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

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر