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

آشنایی با CSS در 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 ما در میزفا را مطالعه کنید.

پایانترم

[box type=”info” class=”question-from-users” width=””]

سوال:

از css در چه مواردی استفاده می‌شود و چه مزایایی دارد؟ چند روش برای استفاده از css در HTML وجود دارد؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

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

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

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

فیلم آموزشی asp.net core 2

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

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

3 نظر

3 پاسخ

  1. جواب سوال:
    از css برای استایل دادن به اجزای سند html استفاده می کنیم و همچنین می توانیم حجم کدهای html را کاهش داده و در نتیجه سرعت بارگذاری صفحات در مرورگر را افزایش دهیم و هزینه های نگهداری وبسایت را در در پروژه های بزرگ کاهش دهیم(در اثر کاهش فضای مورد نیاز برای نگهداری فایل های وبسایت) – با توجه به امکان استفاده از css در قسمت ها و صفحات مختلف می توانیم از دوباره نویسی کدهای مربوط به استایل دهی صفحات جلوگیری نموده و در نتیجه در صرف زمان برای کدنویسی صرفه جویی کنیم بعلاوه اینکه یکی دیگر از مزایای css امکانات مربوط به واکنشگرا کردن صفحات است که در دستگاه های مختلف صفحه وب ما کاربرپسند و قابل مصرف باشد
    می توانیم به انواع روش های برخط و داخلی(ثبت با تگ استایل در ذیل تگ هد) و لینک کردن صفحه به فایل css خارجی از css استفاده کرد

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

    1. ممنون ازت علی اکبر، پاسخت درسته. فقط من یه دو نکته رو بگم: کد های HTML به مرور زمان کمتر نمیشن 😃 بلکه استفاده از یک سری صفت ها مثل style کمتر میشه. همون حجم HTML سرجاشه و جایی نمیره. فقط CSS یکم کارش رو سبک تر میکنه.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

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

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=