جستجو برای:
  • صفحه نخست
  • مقالات آموزشی
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
  • قالب رایگان وردپرس
    • قالب فروشگاهی
    • قالب ویژه مشاغل
    • قالب آموزشی
    • قالب پزشکی
    • قالب شرکتی
    • قالب نمونه کار
    • قالب وبلاگی
    • قالب مجله خبری
    • قالب چند منظوره
    • قالب تک صفحه ای
  • افزونه وردپرس
    • آموزش رایگان المنتور
    • آموزش های ووکامرس
  • دوره های آموزشی
    • آموزش کسب درآمد اینترنتی
    • آموزش طراحی سایت با المنتور
    • آموزش جامع وردپرس
    • آموزش فارسی سازی قالب وردپرس
    • آموزش HTML-CSS مقدماتی
    • آموزش ووکامرس مقدماتی
 
افق وب
  • صفحه نخست
  • مقالات آموزشی
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
  • قالب رایگان وردپرس
    • قالب فروشگاهی
    • قالب ویژه مشاغل
    • قالب آموزشی
    • قالب پزشکی
    • قالب شرکتی
    • قالب نمونه کار
    • قالب وبلاگی
    • قالب مجله خبری
    • قالب چند منظوره
    • قالب تک صفحه ای
  • افزونه وردپرس
    • آموزش رایگان المنتور
    • آموزش های ووکامرس
  • دوره های آموزشی
    • آموزش کسب درآمد اینترنتی
    • آموزش طراحی سایت با المنتور
    • آموزش جامع وردپرس
    • آموزش فارسی سازی قالب وردپرس
    • آموزش HTML-CSS مقدماتی
    • آموزش ووکامرس مقدماتی
ورود / عضویت

وبلاگ

افق وب > بلاگ > مقالات آموزشی > برنامه نویسی > HTML-CSS > آموزش رایگان CSS – جلسه 4

آموزش رایگان CSS – جلسه 4

تیر 27, 1400
HTML-CSS, برنامه نویسی

در این جلسه قصد داریم به Commenting یا کامنت گذاری در CSS بپردازیم. کامنت گذاری به معنی نوشتن یک متن در مورد کدهایی است که در CSS می نویسیم. در واقع این توضیحات قرار است کار ما و کسی که بعدا قصد دارد این کدها را بخواند راحت کند.

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

چطور توضیحات را در کدها بنویسیم؟

گفتیم که با توضیح نویسی یا کامنت گذاری در CSS نحوه ی کار و ویژگی کد نوشته شده را بیان می کنیم. البته این کار مزایا و معایبی دارد که در همین جلسه به آن خواهیم پرداخت.
برای نوشتن توضیحات لازم است که در کنار کد مورد نظر و در بین علامت زیر توضیحات بیان شود؛

/* توضیحات لازم باید اینجا نوشته شود */

مزایای کامنت گذاری در CSS

آموزش رایگان css- جلسه 4| توضیح نویسی در css
مزایای کامنت گذاری در CSS / کامنت گذاری در CSS

استفاده از این ویژگی مزایایی دارد که در زیر به آن اشاره می کنیم؛

ایده ها و نکات مهم

اول این که, گاهی ممکن است ایده ای جذاب و منحصر به فرد در حین کد نویسی به ذهنمان برسد. این ایده را در همان لحظه به کدها اضافه می کنیم و از نتیجه بسیار هم راضی خواهیم بود. اما اگر پس از گذشت یک مدت که مجدد به آن کد مراجعه کنیم متوجه نمی شویم, چه نوشته ایم, ایده چه بود و چه کار کرده ایم!! در اینجاست که توضیحات به کمک ما می آیند.

در حین نوشتن ایده و کدهای مربوط به آن میتوانیم در توضیحات هرآنچه که لازم است را بیان کنیم تا در آینده و زمانی که نیاز به یادآوری بود با خواندن آنها همه چیز در ذهنمان مرور شود.

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

کدهای نوشته شده گاهی ممکن است در اختیار سایر توسعه دهندگان قرار بگیرند. در این موارد توضیحات میتواند کمک کند تا آنها بتوانند به راحتی کدها را با استفاده از توضیحات آنها بشناسند و متوجه کاربرد آنها شوند.

یادداشت های شخصی

مزیت دیگر استفاده از کامنت گذاری در CSS یادداشت هایی است که برای خودتان قرار خواهید داد. برخی قسمت هایی که در حال کدنویسی آن هستید بعدا نیاز به تغییر و تصحیح دارد. در این موارد می توانید با عبارت هایی مانند ” بعدا اصلاح شود ” , ” نیاز به اصلاح بیشتر” , ” کامل نشد ” یا هر چیزی که یک نوع یادآوری و یادداشت برای خودتان باشد از کامنت گذاری استفاده کنید.

مثالی از این مورد؛

/* TODO: Remember to remove this rule :*/
/* KLUDGE: Setting a small negative margin but it’s not pretty: */
/* BUG: Rule breaks in IE 5.2 Mac : */

غیر فعال کردن کدهای CSS

آموزش رایگان css- جلسه 4| توضیح نویسی در css
غیر فعال کردن کدهای CSS / کامنت گذاری در CSS

گاهی ممکن است بخواهیم کدهایی که نوشتیم برای مدتی اجرا نشود و در زمان دیگری از آن ها استفاده کنیم یا برای تست کردن آن را غیرفعال کنیم در این مواقع نیز می توانیم از توضیحات استفاده کنیم.هر قسمتی که مورد نیاز نیست را در بین علامت /* */ قرار می دهیم.

p {
/* color: white;*/
background-color: #2594A4;
}

یا

/*p {
color: white;
background-color: #2594A4;
}*/

 

دوره ی آموزش html و css

 

معایب کامنت گذاری

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

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

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

چند مثال؛

مثال اول؛

<style>
/*———————– Header Styles ————————–*/
header{
background-color:blue; /*رنگ پس زمینه ی هدر آبی می شود*/
box-shadow: 0px 7px 15px -9px grey;/*برای کادر هدر سایه ایجاد میکند*/
}

مثال دوم؛

/********استایل بدنه*****/
body{
/* رنگ پس زمینه سبز روشن میشود */
background-color: lightgreen;
/* تنظیم سایز فونت*/
font-size: 62.5% /* 1em = 10px */
}

مثال سوم؛

p {
color: white; /* رنگ متن را سفید می کند*/
background-color: gray;
/* رنگ پس زمینه متن طوسی می شود */
}

مثال چهارم؛

a{
color:black;
}
a:hover{
color:red; /*وقتی ماوس روی لینک رفت رنگ آن قرمز شود*/
}

مثال پنجم؛

/*—————–mobile responsive—————-*/
@media (min-width:320px){
p {
font-size:14px; /*سایز فونت متن در حالت موبایل*/
}
}
</style>

 

✌😊🚀از بقیه‌ی جلسات آموزشی HTML  و CSS جا نمونید.✌😊🚀

 

5/5 - (2 امتیاز)
برچسب ها: CssCSS چیستآشنایی با cssآموزش رایگان CSSکامنت گذاری در css
درباره پروین رستمی

عضو تیم تحریریه افق وب

جدیدتر قالب حسابداری Business Trade
قبلی دانلود رایگان قالب عکاسی Photograph

1 Comment

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

  • محسن گفت:
    مرداد 24, 1400 در 5:01 ب.ظ

    سلام
    چرا با دوتا // یا # نمیشه کامنت گذاشت؟

    پاسخ

دیدگاهتان را بنویسید لغو پاسخ

تازه های آموزش
  • تقویم محتوا چیست؟ (جلسه 33)
  • استراتژی تولید محتوا (جلسه 32)
  • عادت‌ نویسندگان مشهور و سرشناس (جلسه 31)
  • راهنمای کامل تغذیه محتوا نویس (جلسه 30)
  • چگونه یک محتوای تصویری خوب بسازیم؟ (جلسه 29)
  • 10 تکنیک برای افزایش فالوور اینستاگرام (جلسه 28)
  • راه اندازی کمپین در شبکه های اجتماعی (جلسه 27)
  • آموزش 0 تا 100 ایمیل نویسی (جلسه 26)
آموزش رایگان ووکامرس
آموزش رایگان المنتور
آموزش رایگان html -css
درباره افق وب

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

دسترسی بیشتر
  • قوانین و شرایط
  • ارتباط با ما
  • استخدام
  • تدریس خصوصی وردپرس
ارتباط با ما
  • تهران، رباط کریم، مجتمع اداری پردیسان
  • 02156434684
  • info@ofoghweb.com
تمامی حقوق برای افق وب محفوظ می باشد.
اشتراک گذاری در شبکه های اجتماعی
ارسال به ایمیل
https://ofoghweb.com/?p=13656
ورود به سیستم ×

ورود با کد یکبارمصرف
واتساپ
ارسال مجدد کد یکبار مصرف(00:30)
آیا حساب کاربری ندارید؟
نام‌نویسی

ارسال مجدد کد یکبار مصرف (00:30)
برگشت به صفحه ورود به سایت
  • (+98) جمهوری اسلامی ایران
مرورگر شما از HTML5 پشتیبانی نمی کند.