آموزش مقدماتی HTML و CSS (جلسه 6:آشنایی با CSS –بخش ۲ )
1398/02/15 09:42 , میلاد صاحب نظر

آموزش مقدماتی HTML و CSS (جلسه 6:آشنایی با CSS –بخش ۲ )

در جلسه قبل با مفهوم cascade، وزن‌های خاص selectorها و محاسبه آن‌ها و همچنین با لایه‌بندی استایل‌ها برای تمیز و مرتب نگه داشتن کد و استفاده از استایل‌های بیشتر آشنا شدید. در این جلسه در مورد دیگر ویژگی‌های مرسوم CSS صحبت خواهیم کرد و با اصول ابتدایی CSS به طور کامل آشنا خواهید شد.

۱- ساختن اولین صفحه وب قسمت اول ۷-باز کردن Box Model قسمت اول ۱۳-تنظیمات پشت زمینه قسمت اول ۱۹-ایجاد فرم‌ها قسمت اول
۲-ساختن اولین صفحه وب قسمت دوم ۸-باز کردن Box Model قسمت دوم ۱۴-تنظیمات پشت زمینه قسمت دوم ۲۰-ایجاد فرم‌ها قسمت دوم
۳-آشنایی با HTML  قسمت اول ۹-تنظیم موقعیت محتوا قسمت اول ۱۵-ایجاد لیست‌ها قسمت اول ۲۱-سازماندهی اطلاعات با جداول قسمت اول
۴-آشنایی با HTML قسمت دوم ۱۰-تنظیم موقعیت محتوا قسمت دوم ۱۶-ایجاد لیست‌ها قسمت دوم ۲۲-سازماندهی اطلاعات با جداول قسمت دوم
۵-آشنایی با CSS قسمت اول ۱۱-کار با Typography قسمت اول ۱۷-افزودن رسانه قسمت اول ۲۳-نوشتن بهترین کد
۶-آشنایی با CSS قسمت دوم ۱۲-کار با Typography قسمت دوم ۱۸-افزودن رسانه قسمت دوم  

مقادیر مرسوم propertyها در CSS

تا الآن از برخی مقادیر مرسوم propertyها در CSS استفاده کردیم، مثلاً برای کلیدواژه color از مقادیر Red و green استفاده کردیم. ممکن است زیاد راجع به آن‌ها فکر نکرده باشید.

هیچ اشکالی هم ندارد. حالا وقت می‌گذاریم تا برخی از مقادیر property که قبلاً در طول دوره به کار رفتند و همچنین برخی از مقادیر مرسوم propertyهایی که در آینده مورد استفاده قرار می‌گیرند را بررسی کنیم.

به طور دقیق، قصد داریم به مقادیر property بپردازیم که مرتبط با رنگ‌ها و مقادیر طول متن هستند.

رنگ‌ها

همه مقادیر رنگ‌ها در CSS در فضای رنگ sRGB (یا قرمز، سبز و آبی استاندارد) تعریف شده‌اند. رنگ‌های موجود در این فضا با ترکیب کانال‌های رنگ قرمز، سبز و آبی تشکیل شده‌اند، دقیقه همانند روشی که تلویزیون‌ها و مانیتورها تمام رنگ‌های مختلفی که نمایش می‌دهند را به وجود می‌آورند.

با ترکیب سطح مختلف قرمز، سبز و آبی، می‌توانیم میلیون رنگ ایجاد کرده و تقریباً هر رنگی که می‌خواهید را به وجود آوریم.

در حال حاضر، ۴ روش اصلی برای ارائه رنگ‌های sRGB در CSS وجود دارند: کلیدواژه‌ها، نشانه‌گذاری‌های هگزادسیمال‌ و مقادیر RGB و HSL.

رنگ‌های کلید‌واژه‌ای

مقادیر رنگ کلیدواژه‌ای در واقع اسامی (مانند red، green یا blue) هستند که به یک رنگ خاص اطلاق می‌شوند. این نام‌های کلیدواژه‌ای و رنگ‌های متناظر آن‌ها توسط مشخصات CSS مشخص می‌شوند. اکثر رنگ‌های مرسوم، به همراه چند رنگ عجیب و غریب دیگر، دارای نام‌های کلیدواژه هستند.

جدول ۶.۱: لیست کاملی از رنگ‌ها، کلیدواژه‌ها و مقادیر هگزادسیمال، RGB و HSL

جدول ۶.۱: لیست کاملی از رنگ‌ها، کلیدواژه‌ها و مقادیر هگزادسیمال، RGB و HSL

در کد زیر ما رنگ پشت زمینه maroon را برای هر عنصر دارای اتریبیوت کلاس با مقدار task اعمال می‌کنیم و پشت زمینه yellow را برای هر عنصر دارای اتریبیوت کلاس با مقدار count اعمال می‌کنیم.

.task {
  background: maroon;
}
.count {
  background: yellow;
}

اگرچه مقادیر رنگ کلیدواژه‌ای ذاتاً خیلی ساده هستند، اما گزینه‌های خیلی محدودی فراهم می‌کنند و بنابراین زیاد انتخاب محبوبی برای مقدار رنگ نیستند.

رنگ‌های هگزادسیمال

مقادیر رنگ هگزادسیمال شامل یک علامت هشتگ (#) هستند که به دنبال آن تعداد سه یا ۶ رقم و کاراکتر می‌آیند. رقم‌ها، اعداد بین ۰ تا ۹ و کاراکترها حروف a تا f (حروف بزرگ و کوچک) را شامل می‌شوند. این مقادیر متناظر با کانال‌های رنگ قرمز، سبز و آبی هستند.

در علامت‌گذاری ۶ کاراکتری، دو کاراکتر اول نشان دهنده کانال قرمز، سومین و چهارمین کاراکتر نشان دهنده کانال سبز و دو کاراکتر آخر نشان دهنده کانال آبی هستند. در نشانه‌گذاری ۳ کاراکتری، اولین کاراکتر نشان دهنده کانال قرمز، دومین کاراکتر نشان دهنده کانال سبز  سومین کاراکتر نشان دهنده کانال آبی هستند.

اگر در نشانه‌گذاری ۶ کاراکتری، دو کاراکتر اول یک کاراکتر یکسان باشند، کاراکترهای سوم یک کاراکتر یکسان دیگر و دو کاراکتر آخر هم یک کاراکتر یکسان اما متفاوت با کاراکترهای قبلی باشد، آنگاه می‌توانیم آن را به یک نشانه‌گذاری سه کاراکتری خلاصه کنیم. برای این منظور، هر کدام از کاراکتر‌های تکراری فقط یک بار استفاده می‌شوند.

برای مثال، نوعی نارنجی که با رنگ هگزادسیمال f#ff6600 مشخص می‌شود را می‌توان همچنین به شکل f#f60 نیز نوشت.

تصویر ۶.۱: وقتی کانال‌های رنگ قرمز، سبز و آبی در مقادیر هگزادسیمال ۶ کاراکتری هر کدام دارای یک کاراکتر تکراری باشند، می‌توان آن را به صورت ۳ کاراکتری نوشت.

تصویر ۶.۱: وقتی کانال‌های رنگ قرمز، سبز و آبی در مقادیر هگزادسیمال ۶ کاراکتری هر کدام دارای یک کاراکتر تکراری باشند، می‌توان آن را به صورت ۳ کاراکتری نوشت.

جفت کاراکترها با تبدیل اعداد ۰ تا ۲۵۵ به فرمت ۱۶ بیتی، یا هگزادسیمال به دست می‌آیند. عملیات ریاضی آن کمی گیج کننده است و در مباحث این پست نمی‌گنجد، اما همین که بدانید 0 برابر با مشکی و f برابر با سفید است، به خودی خود خیلی کمک کننده است.

میلیون‌ها رنگ هگزادسیمال

میلیون‌ها رنگ هگزادسیمال وجود دارند، به طور دقیق ۱۶.۷ میلیون رنگ وجود دارند. نحوه به دست آوردن آن‌ها این‌گونه است:

۱۶ گزینه برای هر کاراکتر در یک رنگ هگزادسیمال وجود دارد: از ۰تا ۹ و از a تا f. وقتی کاراکترها به صورت جفتی در کنار یکدیگر قرار می‌گیرند، برای هر جفت ۲۵۶ گزینه رنگ به وجود می‌آید (۱۶ ضربدر ۱۶ یا مربع ۱۶).

و با کنار هم قرار گرفتن سه گزینه ۲۵۶ رنگی، در مجموعه ۱۶.۷ میلیون رنگ به وجود می‌آیند (۲۶ ضربدر ۲۵۶ ضربدر ۲۵۶ یا مکعب ۲۵۶).

برای اینکه بتوانیم با استفاده از روش هگزادسیمال رنگ‌های پشت زمینه maroon و yellow مانند مثال قبلی، می‌توانیم مقادیر رنگ کلیدواژه را با مقادیر رنگ هگزادسیمال جایگزین کنیم، که در کد زیر مشاهده می‌کنید.

.task {
  background: #800000;
}
.count {
  background: #ff0;
}

مقادیر رنگ هگزادسیمال مدت زیادی است که استفاده می‌شوند و بسیار هم محبوب هستند، چون تعداد زیادی انتخاب رنگ برای کاربر فراهم می‌کنند. ولی کار کردن با آن‌ها کمی مشکل است، مخصوصاً اگر زیاد با آن‌ها آشنا نباشید.

خوشبختانه Adobe یک نرم‌افزار رایگان به نام Adobe Kuler ساخته است که یک چرخه رنگ ایجاد می‌کند و به شما کمک می‌کند هر رنگی که می‌خواهید را بیابید و سپس برنامه مقدار هگزادسیمال مترادف آن را به شما ارائه می‌دهد.

شکل ۶.۲. ابزار انتخاب رنگ درون Adobe Photoshop که هر دو مقادیر هگزادسیمال و RGB را نیز نشان می‌دهد.

شکل ۶.۲. ابزار انتخاب رنگ درون Adobe Photoshop که هر دو مقادیر هگزادسیمال و RGB را نیز نشان می‌دهد.

رنگ‌های RGB و RGBa

مقادیر رنگ RGB با استفاده از تابع ()rgb مشخص می‌شوند، که مخفف Green، Red و Blue است. این تابع سه مقدار را می‌پذیرد که با ویرگول از هم مجزا می‌شوند و هر کدام یک عدد صحیح از ۰ تا ۲۵۵ است. مقدار صفر، رنگ مشکی را تشکیل می‌دهد. مقدار ۲۵۵ رنگ سفید را مشخص می‌کند.

همان‌طور که انتظار دارید، اولین مقدار در تابع ()rgb نشان دهنده کانال قرمز، دومین مقدار نشان دهنده کانال سبز و سومین مقدار نشان دهنده کانال آبی است.

اگر بخواهیم رنگ نارنجی در مثال قبلی را به شکل یک مقدار رنگ RGB بازسازی کنیم، به این شکل خواهد شد: (255, 102, 0) rgb.

همچنین، با استفاده از رنگ‌های پشت زمینه maroon و yellow از مثال قبلی، می‌توانیم کلیدواژه یا مقادیر رنگ هگزادسیمال را با مقادیر رنگ RGB جایگزین کنیم.

.task {
  background: rgb(128, 0, 0);
}
.count {
  background: rgb(255, 255, 0);
}

همچنین مقادیر رنگ RGB می‌توانند ا استفاده از تابع ()rgba، شامل یک کانال آلفا یا شفافیت (transparency) نیز باشند. تابع ()rgba به یک مقدار چهارم هم نیاز دارد، که باید یک عدد بین ۰ و ۱ باشد (شامل اعشارها هم می‌شود). مقدار ۰ یک رنگ کاملاً شفاف را ایجاد می‌کند (یعنی رنگ ناپیدا است) و مقدار ۱ یک رنگ مات یا کدر را ایجاد می‌کند.

هر مقدار اعشاری یا دسیمال بین ۰ و ۱، یک رنگ نیمه شفاف ایجاد می‌کند.

اگر بخواهیم طیف نارنجی از مثال قبل دارای شفافیت ۵۰٪ باشد، باید از این مقدار رنگ RGBa استفاده کنیم:

(255, 102, 0, 5)rgba

همچنین می‌توانیم شفافیت رنگ‌های پشت زمینه maroon و yellow را نیز تغییر دهیم. کد زیر شفافیت رنگ پشت زمینه maroon را روی ۲۵% و شفافیت رنگ پشت زمینه yellow را روی همان ۱۰۰٪ نگه می‌دارد.

.task {
  background: rgba(128, 0, 0, .25);
}
.count {
  background: rgba(255, 255, 0, 1);
}

مقادیر رنگ RGB در حال معروف شدن هستند، به خصوص به خاطر قابلیتشان در ایجاد رنگ‌های نیمه شفاف با استفاده از RGBa.

رنگ‌های HSL و HSLa

مقادیر رنگ HSL با استفاده از تابع ()hs1 مشخص می‌شوند، که مخفف hue(رنگ)، saturation (اشباع شدگی) و lightness (روشنی) است. درون پرانتزها، تابع سه مقدار می‌پذیرد که با ویرگول از هم جدا می‌شوند، دقیقه مانند ()rgb.

اولین مقدار، یعنی رنگ، یک عدد بدون واحد از ۰ تا ۳۶۰ است. اعداد ۰ تا ۳۶۰  نشان دهنده چرخه رنگ هستند و مقدار آن درجه و سطح یک رنگ در چرخه رنگ را مشخص می‌کند.

دومین و سومین مقدار، یعنی اشباع شدگی و روشنی، مقادیر درصدی از ۰ تا ۱۰۰ درصد هستند. مقدار اشباع شدگی مشخص می‌کند که رنگ مقدار hue چقدر اشباع شده است، مقدار صفر نشان دهنده سیاه و سفید بدن و مقدار ۱۰۰ درصد نشان دهنده اشباع شدگی کامل است.

روشنی مشخص می‌کند که مقدار hue چقدر تیره یا روشن است، مقدار ۰ کاملاً تیره و مقدار ۱۰۰ درصد کاملاً روشن است.

حالا برگردیم به سراغ طیف نارنجی خودمان، مقدار رنگ HSL آن به این شکل است:

(24, 100%, 50$)hsl

رنگ‌های پشت زمینه maroon و yellow را نیز می‌توان با مقادیر رنگ HSL نوشت که در کد زیر مشاهده می‌کنید.

.task {
  background: hsl(0, 100%, 25%);
}
.count {
  background: hsl(60, 100%, 50%);
}

مقادیر رنگ HSl، همانند RGBa، می‌توانند شامل آلفا یا شفافیت نیز باشند. برای این منظور از تابع ()hsla استفاده می‌شود. رفتار کانال آلفا درست مانند تابع ()rgba است. چهارمین مقدار بین ۰ و ۱ است که شامل اعداد اعشاری نیز می‌شود و برای مشخص کردن سطح شفافیت به تابع اضافه می‌شود.

طیف نارنجی با فرمت رنگ HSLa با شفافیت ۵۰ درصد به شکل زیر نمایش داده می‌شود:

(24, 100%, 50%, 0.5)hsla

رنگ‌های پشت زمینه maroon با شفافیت ۲۵ درصد و yellow با شفافیت صد درصد از مثال قبل با فرمت مقادیر رنگ HSLa همانند کد زیر نمایش داده می‌شوند:

.task {
  background: hsla(0, 100%, 25%, .25);
}
.count {
  background: hsla(60, 100%, 50%, 1);
}

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

در حال حاضر، مقادیر رنگ هگزادسیمال محبوب‌ترین هستند، چون پشتیبانی وسیعی از آن‌ها انجام می‌شود. البته اوقاتی که به یک کانال آلفا برای شفافیت نیاز است، مقادیر رنگ RGBa ترجیح داده می‌شوند. این ترجیحات ممکن است در آینده تغییر کنند، اما فعلاً از مقادیر رنگ هگزادسیمال و RGBa استفاده می‌شود.

طول‌ها

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

اما ما فعلاً فقط به مقادیر مرسوم و ساده می‌پردازیم، چون مقادیر پیچیده‌تر به موضوعات بیشتری نیاز دارند که در این مطلب نمی‌گنجند.

طول‌های مطلق

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

پیکسل‌ها

پیکسل برابر با 1/96 از یک اینچ هستند. بنابراین، در یک اینچ، ۹۶ پیکسل قرار دارد. البته معیار دقیق پیکسل، ممکن است در دستگاه‌ها دارای تراکم زیاد و کم، کمی متفاوت باشد.

پیکسل‌ها مدت زیادی است که به کار می‌روند و معمولاً برای چند ویژگی یا property مختلف به کار می‌روند. کد زیر از پیکسل‌ها برای تنظیم سایز فونت تمام پاراگراف‌ها روی ۱۴ پیکسل استفاده می‌شود.

p {
  font-size: 14px;
}

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

در طول دوره کمی از آن‌ها استفاده خواهیم کرد،‌چون قصد داریم اساس و کلیات اولیه HTML و CSS را بیاموزیم.

طول‌های نسبی

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

درصدها

درصدها که با نشان واحد % نمایش داده می‌شوند، یکی از محبوب‌ترین مقادیر نسبی هستند. طول‌های درصدی مرتبط با طول یک شیء دیگر تعریف می‌شوند.

برای مثال، برای تنظیم عرض یک عنصر روی ۵۰ درصد، باید عرض عنصر پدر (یعنی عنصری که این عنصر درون آن قرار گرفته است) را بدانیم و سپس عرض عنصر پدر را روی ۵۰ درصد تنظیم کنیم.

.col {
  width: 50%;
}

در این کد، ما عرض عنصر دارای اتریبیوت کلاس با مقدار col را روی ۵۰ درصد تنظیم کرده‌ایم. آن ۵۰ درصد در ارتباط با عرض پدر آن عنصر محاسبه می‌شود.

درصدها برای تنظیم مقادیر عنصرهای ارتفاع و عرض و ساخت یک layout از صفحه وب بسیار مفید هستند. در طول دوره گاهی برای کمک به حل مثال‌ها از درصدها استفاده خواهیم کرد.

Em

واحد em نیز یک مقدار نسبی بسیار محبوب است. واحد em با علامت واحد em نشان داده می‌شود و طول آن بر اساس سایز فونت یک عنصر محاسبه می‌شود.

یک واحد em برابر با سایز فونت یک عنصر است. بنابراین، برای مثال، اگر یک عنصر دارای سایز فونت ۱۴ باشد و عرض یا width آن روی 5em تنظیم شده باشد، آنگاه عرض آن برابر با ۷۰ پیکسل می‌شود (۱۴ پیکسل ضربدر ۵).

.banner {
  font-size: 14px;
  width: 5em;
}

وقتی سایز فونت به صورت صریح برای یک عنصر مشخص نشده باشد، واحد em به سایز فونت نزدیک‌ترین عنصر پدر که دارای سایز فونت مشخص شده است،مرتبط می‌شود.

واحد em گاهی برای استایل کردن متن (شامل سایزهای فونت) و همچنین فضای اطراف متن (مانند حاشیه‌ها و پدینگ‌ها) به کار می‌رود. در جلسات ۱۱ و ۱۲ (کار با تایپوگرافی‌ها) بیشتر در مورد متن صحبت خواهیم کرد.

مسلماً نسبت به واحد‌هایی که تا الآن به آن‌ها اشاره شده است، واحد‌های خیلی مطلق و نسبی‌تری برای سنجش وجود دارند. به هر حال، این سه مورد (یعنی پیکسل‌ها، درصدها و emها) محبوب‌ترین‌ها هستند و آن‌هایی هستند که بیشتر مورد استفاده قرار می‌گیرند.

خلاصه

متأسفانه با استفاده از مباحث بیان شده در این جلسه نمی‌توانیم هیچ تغییر خاصی در مثال وبسایت styles conference خود ایجاد کنیم. ما بیشتر بر پایه و اساس CSS تمرکز کردیم و دقیقه نحوه عملکرد CSS و برخی از مقادیر مرسومی که در آن به کار می‌روند را پوشش دادیم.

به صورت خلاصه، مباحثی که در این دو جلسه پوشش دادیم به شرح زیر هستند:

  • چگونگی cascade شدن style sheetها از بالا به پایین یک فایل
  • وزن خاص چیست و چگونه می‌توان آن را محاسبه کرد
  • چگونگی ترکیب Selectorها برای هدف قرار دادن عنصرهای خاص یا گروه‌های عنصرها
  • چگونگی استفاده از چندین کلاس برای یک عنصر، به منظور لایه‌بندی در استایل‌های مختلف و مرتب‌سازی بیشتر کد
  • مقادیر مختلف رنگ موجود برای استفاده در CSS، از جمله کلیدواژه، هگزادسیمال، RGB و HSL
  • مقادیر طولی مختلف موجود برای استفاده در CSS، از جمله واحدهای پیکسل، درصد و em

هنوز مباحث زیادی وجود دارند که باید پوشش داده شوند، اما تا اینجای کار توانستید به طور کامل اساس و اصول HTML و CSS را بیاموزید. در چند جلسه آینده به صحبت در مورد CSS ادامه می‌دهیم و وبسایت پروژه طراحی و ظاهر خوبی به دست خواهد آورد.

منبع: learn.shayhowe

جلسه بعد                                                     جلسه قبل

 مطالب مرتبط

تعامل با فایل‌ها در HTML5
ایجاد یک فرم HTML و قابلیت تکمیل خودکار فرم‌ها
 بهترین قالب‌های رایگان HTML5 و CSS3
۹ چیز که باید در مورد HTML5 بدانید
آموزش گام به گام #C
برنامه نویسی شیءگرا چیست؟

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

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

فرم ارسال نظرات