خوش آمدید

با استفاده از ویژگی word-spacing می توان فاصله بین کلمات را در متن یک عنصر کنترل کرد.

اگر عددی برای این ویژگی مقداری تعیین شود، فاصله کلمات نسبت به اندازه ای که به این ویژگی داده شده است از همان مقدار پیشفرضی که دارند شروع به زیاد یا کم شدن می کند.

این ویژگی فقط مخصوص متن و کلمات نمی باشد بلکه با استفاده از آن می توان فاصله بین عناصر inline و inline-block داخل یک عنصر را نیز کنترل کرد.

منظور اندازه حروف نیست بلکه صحبت از حروف کوچک و بزرگ مثلا زبانی مثل زبان انگلیسی می باشد.

با استفاده از ویژگی text-decoration می توان خطی بر روی نوشته یک عنصر یا بالای آن و یا پایین آن کشید. همینطور می توان خط کشیده شده را از متن عنصر حذف کرد.

همانطور که در نرم افزارهای ویرایش متن مثل ورد می توان بر روی چیدمان نوشته کنترل داشت در سی اس اس نیز این امکان وجود دارد که با مقادیری مثل left، right، center و یا justify عناصر خطی را تراز کنیم.

در مقابل زبان هایی که جهت نوشتن آنها از چپ به راست (LTR) می باشد زبان هایی مثل زبان شیرین فارسی و زبان های عربی و عبری از راست به چپ (RTL) نوشته می شوند.

با کمک از این ویژگی می توان شرایط مناسب را برای نوشتن در هر دو جهت فراهم کرد.

از تابع hsla() برای اعمال رنگ با فرمت HSL با قابلیت تنظیم شفافیت استفاده می شود.

همانطور که برای تابع rgb مکملی به نام rgba وجود دارد برای تابع hsl نیز مکمل hsla وجود دارد که علاوه بر مقادیر Hue, Saturation و Lightness مقدار چهارمی به نام آلفا می پذیرد که با استفاده از آن می توان به رنگ حالت شیشه ای بودن را اضافه کرد.

این تابع سه مقدار که توسط ویرگول از هم جدا می شوند می پذیرد. این سه مقدار به ترتیب گرمای رنگ (Hue), اشباع رنگ (Saturation) و درخشندگی یا روشنایی رنگ (Lightness) می باشند.

از rgba() برای اعمال رنگ از طریق ترکیب رنگ های قرمز(r), سبز(g) و آبی(b) و آلفا برای خاصیت شفافیت استفاده می شود.

rgba() همان ()rgb است با این تفاوت که به جای سه مقدار چهار مقدار می پذیرد. که مقدار چهارم همان آلفا می باشد که برای تنظیم مقدار شفافیت به کار گرفته می شود. (یعنی همان شیشه ای کردن رنگ ها)

مقدار آلفا می تواند یک عدد بین 0 تا 1 باشد, بطوریکه 0 نشانگر شفافیت کامل است (یک شیشه خیلی تمیز که دیده نمیشه :) ) و 1 نمایانگر خود رنگ بدون هیچگونه شفافیت است.

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

rgba(255, 0, 0, 0.5)

که نتیجه بصورت زیر خواهد بود:

در مثال زیر عنصری با پس زمینه نیمه شفاف بنفش و رنگ متن سفید را داریم:

.element {
  color: rgba(255, 255, 255, 1);
  background-color: rgba(255, 0, 255, 0.5);
}

دموی زیر را بررسی کنید و با تغییر رنگ ها بهتر با این تابع آشنا شوید:
 

پشتیبانی مرورگر ها

مقادیر رنگی در تمام مرورگرهای اصلی پشتیبانی می شود.

اما hsl(), hsla(), rgba(), transparentو currentColor از اینترنت اکسپلورر نسخه 9 به بعد (شامل 9) پشتیبانی می شوند.