از پراپرتی color برای تعریف رنگ ها در سی اس اس استفاده می شود. رنگ ها می توانند یک کلمه کلیدی باشند, یا دسته ای از اعداد و یا آنها را می توان از طریق فرمت های متفاوت که در ادامه آمده اند معرفی کرد. می توان از یک رنگ با استفاده از کلمه کلیدی تعریف شده برای آن در سی اس اس استفاده کرد.به عنوان نمونه کلمات کلیدی balck, white و غیره… در رنگهای RGB که کوتاه شده کلمات قرمز, سبز و آبی می باشد.
از ویژگی font برای خلاصه نویسی چندین ویژگی مربوط به فونت و متن در سی اس اس استفاده می شود. سیستم عامل ها برای قسمت های مختلف سیستم از فونت و استایل های مختلفی استفاده می کنند. مثلا برای منوها از فونت مخصوص برای منوها و برای نوارهای حالت از استایل دیگر و غیره… نکته مهم اینکه این کلمات کلیدی فقط برای ویژگی font تعیین می شوند و نمی توان از ویژگی font-family برای استفاده کردن از این فونت ها استفاده کنیم.
با استفاده از ویژگی text-align می توان تصمیم گرفت که چیدمان محتوای خطی (مثل متن یا تصویر) داخل یک عنصر بلاک به چه صورت باشد. همانطور که در نرم افزارهای ویرایش متن مثل ورد می توان بر روی چیدمان نوشته کنترل داشت در سی اس اس نیز این امکان وجود دارد که با مقادیری مثل left، right، center و یا justify عناصر خطی را تراز کنیم.
ویژگی text-transform مشخص کننده این است که کلمات و حروف از نظر کوچک و بزرگی در چه حالتی نمایش داده شوند. منظور اندازه حروف نیست بلکه صحبت از حروف کوچک و بزرگ مثلا زبانی مثل زبان انگلیسی می باشد. در حالت capitalizeحرف اول هر کلمه بزرگ می شود و حروف دیگر کلمه همانطور که در HTML نوشته شده اند باقی می مانند.
ویژگی text-indent تعیین می کند که خط اول محتوای یک عنصر بلاک چقدر فاصله افقی با لبه عنصر داشته باشد. به بیان دیگر این ویژگی مقدار تورفتگی خط اول محتوا را مشخص می کند. اگر جهت عنصر از راست به چپ باشد (direction: rtl;) فضای خالی بین محتوا و لبه سمت راست بوجود می آید و اگر جهت از چپ به راست باشد محتوا از لبه سمت چپ فاصله می گیرد.
در قسمت قبل به بعضی از خاصیت های پراپرتی Display پرداختیم در این قسمت با استفاده از مقدار none می توانید یک عنصر را از صفحه حذف کنید. اما توجه داشته باشید که این کار عنصر را از DOM حذف نمی کند اما اثری از عنصر در صفحه باقی نمی ماند و فضایی که گرفته بود کاملا خالی می شود و عناصر مجاور جای آن را پر می کنند. زمانی که عنصر حذف شود تمام فرزندان آن (عناصر داخل) نیز حذف خواهند شد. نکته مهم اینکه وقتی عنصری را با این روش حذف کنید ربات های صفحه خوان و موتورهای جستجو به آن عنصر دسترسی نخواهند داشت. این موارد را با مثال و بصورت کامل در ویدیو آموزشی ببینید.
از پراپرتی color برای تعریف رنگ ها در سی اس اس استفاده می شود. رنگ ها می توانند یک کلمه کلیدی باشند, یا دسته ای از اعداد و یا آنها را می توان از طریق فرمت های متفاوت که در ادامه آمده اند معرفی کرد. می توان از یک رنگ با استفاده از کلمه کلیدی تعریف شده برای آن در سی اس اس استفاده کرد.به عنوان نمونه کلمات کلیدی balck, white و غیره… در رنگهای RGB که کوتاه شده کلمات قرمز, سبز و آبی می باشد.
ویژگی text-indent تعیین می کند که خط اول محتوای یک عنصر بلاک چقدر فاصله افقی با لبه عنصر داشته باشد. به بیان دیگر این ویژگی مقدار تورفتگی خط اول محتوا را مشخص می کند. اگر جهت عنصر از راست به چپ باشد (direction: rtl;) فضای خالی بین محتوا و لبه سمت راست بوجود می آید و اگر جهت از چپ به راست باشد محتوا از لبه سمت چپ فاصله می گیرد.
در قسمت قبل به بعضی از خاصیت های پراپرتی Display پرداختیم در این قسمت با استفاده از مقدار none می توانید یک عنصر را از صفحه حذف کنید. اما توجه داشته باشید که این کار عنصر را از DOM حذف نمی کند اما اثری از عنصر در صفحه باقی نمی ماند و فضایی که گرفته بود کاملا خالی می شود و عناصر مجاور جای آن را پر می کنند. زمانی که عنصر حذف شود تمام فرزندان آن (عناصر داخل) نیز حذف خواهند شد. نکته مهم اینکه وقتی عنصری را با این روش حذف کنید ربات های صفحه خوان و موتورهای جستجو به آن عنصر دسترسی نخواهند داشت. این موارد را با مثال و بصورت کامل در ویدیو آموزشی ببینید.
از ویژگی display برای تعیین نوع ساختار یک عنصر استفاده می شود. هر عنصری در صفحات وب یک مستطیل محسوب می شود و نوع ساختار هر عنصر رفتار آن عنصر را در یک صفحه مشخص می کند. در CSS دو نوع چارچوب اصلی وجود دارند: inline و block. اگر عنصری دارای چارچوبی از نوع inline باشد زمانی که در ادامه یک خط قرار می گیرد, آن خط شکسته نمی شود و عنصر به خط بعدی نخواهد رفت و عناصر بعد از آن هم اگر از همین نوع باشند در ادامه آن عنصر در همان خط قرار خواهند گرفت. در مقابل عناصر خطی, عناصری که چارچوب block دارند در حالت پیشفرض در یک خط با عناصر دیگر قرار نمی گیرند و کل فضای افقی را می گیرند عناصر block در مقابل با عناصر inline می توانند هر نوع عنصری (block و inline) را درون خود داشته باشند.
وبلاگ حسین محمودی «iHMahmoodi» | طراح رابط کاربری UI/UX 