post

آموزش CSS – بخش دو (ساختار)

در پست قبل با کلیات CSS  و انواع استایل دهی آشنا شدیم، امروز قصد دارم ساختار کدنویسی CSS رو براتون تشریح کنم؛ بعد به سراغ رنگها میریم انواع روشهای به کاربردن رنگ در استایل رو تحلیل می کنیم؛ پس در ادامه با من همراه باشید.

ساختار کدنویسی در CSS

میخوام ساختار کدنویسی CSS رو هم با یک مثال براتون تشریح کنم.

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

حالا فرض کنید میخوایم به دوستمون جناب آقای p (پاراگراف) اطلاع بدیم که سایز فونتش ۱۲px و رنگ نوشته هاش black (مشکی) باشه، پس باهاش تماس میگیریم ، گوشی رو برمیداره، صحبتهای ما رو میشنوه و بعد گوشی رو میذاره، پس داریم:

p {

font-size : 12px;

color: black;

}

به همین سادگی و به همین خوشمزگی 🙂

نکته: همیشه سعی کنید دستورات رو بصورت منظم بنویسید و در هر خط فقط یک دستور بکار ببرید. بعد از نوشتن نام ویژگی مورد نظرتون : (دونقطه) رو فراموش نکنید و در پایان هر خط دستوری حتما از ; (سمیکالن یا نقطه ویرگول انگلیسی) استفاده کنید.

رنگ ها در CSS

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

برای استفاده از رنگ در CSS از روش های مختلفی استفاده میشه:

  • نوشتن نام انگلیسی رنگ : این روش جزو آسونترین روش هاست اما چون تمامی طیف های رنگی دارای اسم نیستند، چندان کاربردی نداره و فقط مواقعی  به کار برده میشه که میخوایم از طیف های اصلی رنگ مثل red , green , black و … استفاده کنیم.
  • استفاده از کد رنگ بصورت Hex یا ۶a5acd# : فکر نمی کنم این روش چندان نیاز به معرفی داشته باشه چرا که اکثر شما داخل فتوشاپ و سایر ویرایشگرهای تصویر از این کد رنگ استفاده کردید. این کد دارای ۶ کاراکتره که بصورت دو کاراکتر دو کاراکتر از چپ نمایانگر رنگ قرمز، سبز و آبیه (rrggbb#) و مقادیری بین ۰۰ تا ff رو قبول می کنه.
  • استفاده از کد رنگ بصورت rgb یا rgb(255, 166, 19) : این روش هم تقریبا مشابه روش قبله با این تفاوت که سه رنگ قرمز و سبز و آبی بجای اینکه پشت سر هم نوشته بشن داخل پرانتز  و به اون صورت که می بینید در کنار هم قرار میگیرن. هر بخش مقداری بین ۰ تا ۲۵۵ رو قبول می کنه.
  • استفاده از کد رنگ بصورت rgba یا rgba(255, 99, 71, 1) : کاملا مشابه روش rgb  هست با این تفاوت که اون a آخر بیانگر میزان کدورت (opacity) رنگ مورد نظر ماست و مقادیری بین ۰ تا ۱ رو قبول می کنه(۰ به معنای محو بودن و ۱ به معنای کاملا پر رنگ).
  • استفاده از کد رنگ بصورت hsl یا hsl(248, 53%, 58%) : پارامتر اول بیانگر طیف رنگه و مقادیری بین ۰ تا ۳۶۰ رو قبول میکنه (۰-۱۱۹ قرمز، ۱۲۰-۱۳۹ سبز و ۲۴۰-۳۵۹ آبی). پارامتر دوم بیانگر میزان اشباع بودن یا به لفظ بهتر غلظت رنگه و مقادیری بین ۰% تا ۱۰۰% رو قبول می کنه، پارامتر آخر هم میزان روشنایی و درخشندگی رنگه (۰ مشکی و تاریک، ۵۰ تقریبا خاکستری و ۱۰۰ سفید).
  • استفاده از کد رنگ بصورت hsla یا hsla(9, 100%, 64%, 1) : کاملا مشابه روش قبلیه با این تفاوت که اون a آخر بیانگر میزان کدورت (opacity) رنگ مورد نظر ماست و مقادیری بین ۰ تا ۱ رو قبول می کنه.

 

جمع بندی

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

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

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