نحوه تغییر رنگ یک کلمه با Tag Span و CSS

با استفاده از CSS ، رنگ متن را در یک سند آسان می کند. اگر بخواهید پاراگراف های صفحه خود را در یک رنگ خاص رندر کنید، به سادگی مشخص کنید که در ورق سبک خارجی خود و مرورگر متن شما را در آن رنگ انتخاب کنید. چه اتفاقی می افتد وقتی می خواهید رنگ یک کلمه (یا شاید فقط چند کلمه) را در یک پاراگراف متن تغییر دهید؟ برای این، شما باید از یک عنصر درونگر مانند تگ استفاده کنید.

در نهایت، تغییر رنگ یک کلمه یا یک گروه کوچک از کلمات در یک جمله آسان است با استفاده از CSS، و برچسب ها HTML معتبر هستند، بنابراین نگران این نباشید که یک نوع هک باشد. با استفاده از این روش، شما همچنین از استفاده از برچسب ها و ویژگی های نادان مانند "فونت" اجتناب کنید، که محصولی از عصر HTML گذشته است.

این مقاله برای شروع طراحان وب است که به احتمال زیاد به HTML و CSS جدید هستند. این به شما کمک خواهد کرد که نحوه استفاده از تگ HTML و CSS را برای تغییر رنگ متن خاص در صفحات خود یاد بگیرید. به این معنا که برخی از اشکالات این روش وجود دارد که من در پایان این مقاله را پوشش خواهم داد. در حال حاضر، برای یادگیری مراحل تغییر این رنگ متن را بخوانید! این بسیار آسان است و باید حدود 2 دقیقه طول بکشد.

گام به گام آموزش

  1. صفحه وب را که میخواهید در ویرایشگر HTML متن دلخواه خود بهروزرسانی کنید باز کنید. این می تواند یک برنامه مانند Adobe Dreamweaver یا یک ویرایشگر متن ساده مانند Notepad، Notepad ++، TextEdit، و غیره باشد.
  2. در سند، کلماتی را که میخواهید در یک رنگ متفاوت در صفحه نمایش داده شود، قرار دهید. به خاطر این آموزش، به شما اجازه می دهد تا از برخی از کلمات موجود در پاراگراف بزرگتر متن استفاده کنید. این متن در جفت تگ قرار خواهد گرفت. یکی از دو کلمه را انتخاب کنید که رنگ شما می خواهید ویرایش کنید.
  3. مکان نما خود را قبل از اولین حرف در کلمه یا گروهی از کلمات که می خواهید رنگ را تغییر دهید قرار دهید. به یاد داشته باشید، اگر شما از یک ویرایشگر WYSIWYG مانند Dreamweaver استفاده می کنید، در حال حاضر در «نمای کد» کار می کنید.
  4. اجازه دهید متن را با رنگی که می خواهیم با یک تگ تغییر دهیم، شامل یک ویژگی کلاس می کنیم. کل پاراگراف ممکن است شبیه به این باشد: این متن است که در یک جمله متمرکز شده است.
  5. ما فقط از یک عنصر درونی استفاده کرده ایم که متن خاصی را "قلاب" می دهد که می توانیم در CSS استفاده کنیم. گام بعدی ما این است که برای اضافه کردن یک قانون جدید به فایل خارجی CSS ما بروید.
  1. در فایل CSS ما، اضافه کنیم:
    1. .focus-text {
    2. رنگ: # F00؛
    3. }
    4. the
  2. این قانون عنصر درون خطی را برای نمایش در رنگ قرمز تعیین می کند. اگر ما یک سبک قبلی داشتیم که متن سند ما را به رنگ مشکی تنظیم می کرد، این سبک درونی باعث می شود که متن متن با رنگ های مختلف متمرکز شود و به آن متمرکز شود. ما همچنین می توانیم سبک های دیگر را به این قاعده اضافه کنیم، شاید بتوان متن را به صورت کج کرد یا جسورانه برای تأکید بر آن حتی بیشتر کرد؟
  3. صفحه خود را ذخیره کنید.
  4. صفحه را در مرورگر مورد علاقه خود آزمایش کنید تا تغییرات را در اثر مشاهده کنید.
  5. توجه داشته باشید علاوه بر این، برخی از متخصصان وب تصمیم به استفاده از عناصر دیگر مانند جفت های برچسب یا تگ استفاده می کنند. این تگ ها به طور خاص برای "bold" و "Italic" استفاده می شوند، اما با استفاده از آنها ضعیف شده و جایگزین شده اند. برچسب ها هنوز هم در مرورگرهای مدرن کار می کنند، با این حال، بسیاری از توسعه دهندگان وب از آنها به عنوان قلاب های inline inline استفاده می کنند. این بدترین روش نیست، اما اگر بخواهید از عناصر نادقیق اجتناب کنید، پیشنهاد می کنم با استفاده از برچسب برای این نوع از نیازهای یک ظاهر طراحی شده باقی بمانید.

نکات و چیزهایی که باید مراقب باشید

در حالی که این رویکرد برای نیازهای کوچک یک ظاهر طراحی شده است، مثل اینکه اگر شما فقط یک تکه کوچک از متن را در یک سند تغییر دهید، می توانید سریع از کنترل خارج شوید. اگر متوجه شوید که صفحه شما با عناصر درون خطی پوشیده شده است و همه آنها دارای کلاس های منحصر به فردی هستند که شما در فایل CSS خود استفاده می کنید، ممکن است این کار اشتباه انجام شود، به یاد داشته باشید که بیشتر این برچسب ها در صفحه شما، سخت تر است احتمال دارد این صفحه را حفظ کند. علاوه بر این، تایپوگرافی وب خوب به ندرت دارای انواع مختلفی از رنگ و غیره در سراسر صفحه است!