در جلسه قبل از آموزش CSS با ویژگی فونت در CSS آشنا شدید. در این بخش قصد داریم شما را با نحوه فرمت بندی متن در CSS را آموزش بدیم.
فرمت بندی متن با CSS به شما اجازه می دهد سبک های مختلف متنی همچون رنگ، تراز بندی، فاصله(spacing) ،جلوه های بصری متن( decoration) و غیره را تعریف نمایید.
فرمت بندی متن با CSS:
زبان CSS خصوصیت های زیادی برای تعریف سبک متون دارد. این خصوصیت ها به شما اجازه می دهد کنترل دقیقی بر روی ظاهر بصری کاراکترها، فضای بین آن ها، کلمات و پاراگراف ها داشته باشید.
شما می توانید خصوصیت های زیر را برای متن یک المان تنظیم کنید:
خصوصیت Color:
رنگ متن توسط خصوصیت Color تعریف می شود.
|
1 2 3 4 5 6 |
h1 { color: #ff0000; } p { color: green; } |
نکته: اگرچه رنگ متن به نظر می رسد بخشی از متن باشد اما در واقع یک خصوصیت واحد و جداگانه در زبان CSS است.
ترازبندی متن:
خصوصیت text-align برای تنظیم تراز افقی متن مورد استفاده قرار می گیرد. مقادیری که می توان در این خصوصیت به کار برد شامل موارد زیر است:
leftrightcenterjustifyinherit
|
1 2 3 4 5 6 |
h1 { text-align: center; } p { text-align: justify; } |
نکته: زمانی که خصوصیت text-align بر روی justify تنظیم می شود، هر خط کشیده خواهد شد تا هر کدام از آن ها عرض یکسانی داشته باشند و حاشیه های راست و چپ مستقیم باشد.
نکته دوم: مقدار inherit در هر استایلی به معنی ارث بری مقدار همان استایل از تگ پدر سلکتور است.
خصوصیت Text Decoration:
خصوصیت text-decoration برای تنظیم یا حذف جلوه های بصری از متن مورد استفاده قرار می گیرد. مقادیری که می توان در این خصوصیت به کار برد شامل موارد زیر است:
none– حذف خط زیرینunderline– قرار دادن خط زیرین (پیش فرض لینک ها)overline– قرار دادن خط بالای متنline-through– کشیدن خط وسط متنblink– چشمک زدنinherit
بهتر است از خط دار کردن متونی که لینک نیستند خودداری کنید. اینکار باعث سردرگمی کاربران می شود.
|
1 2 3 4 5 6 7 8 9 |
h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; } |
هشدار: مقدار Blink برای خصوصیت text-decoration توسط بیشتر مرورگرها پشتیبانی نمی شود. باید از به کار بردن این مقدار خودداری کنید.
حذف Underline پیش فرض از لینک ها:
خصوصیت text-decoration عموما برای حذف خط های زیر متن (underline) پیش فرضی به کار می رود که در هایپرلینک ها دیده می شود.
حذف کامل underline می تواند باعث سردرگمی کاربران شود. اگر سایر نشانه های بصری را فراهم می کنید می توانید ان را حذف کنید در غیر اینصورت بهتر است اجازه دهید در همین حالت باقی بماند.
به عنوان مثال شما می توانید از نقطه برای خط دار کردن لینک خود استفاده کنید. به مثال زیر توجه کنید:
|
1 2 3 4 |
a { text-decoration: none; border-bottom: 1px dotted; } |
نکته: زمانی که لینک HTML را ایجاد می کنید، مرورگرها به طور خودکار ان را خط دار می کنند. این موضوع به کاربران کمک می کند متنی که قابل کلیک است را تشخیص دهند.
خصوصیت text-transform:
خصوصیت text-transform برای تعیین کوچکی و بزرگی حروف مورد استفاده قرار می گیرد.همچنین می توان از این خصوصیت برای تنظیم بزرگ بودن اولین حرف از هر کلمه نیز استفاده کرد.
مقادیری که می توان در این خصوصیت به کار برد در برگیرنده موارد زیر است:
none, capitalize, uppercase, lowercase و inherit.
|
1 2 3 4 5 6 7 8 9 |
p.up { text-transform: uppercase; } p.cap { text-transform: capitalize; } p.low { text-transform: lowercase; } |
تنظیم تورفتگی متن با خصوصیت text-indent:
خصوصیت text-indent برای تنظیم تورفتگی اولین خط از متن مورد استفاده قرار می گیرد. این خصوصیت مقادیری همچون percentage ( بر حسب درصد)، Length( تعیین کننده فضای تورفتگی ) یا Inherit را اتخاذ می کند.
مثال زیر نحوه تو رفتگی اولین خط از پاراگراف را مشخص می کند.
|
1 2 3 |
p { text-indent: 100px; } |
نکته: تورفتگی از چپ یا راست به جهت متن در داخل المان بستگی دارد و با خصوصیت direction تعریف می گردد.
فاصله بین کلمات:
خصوصیت word-spacing برای تعیین و تنظیم فاصله بین کلمات مورد استفاده قرار می گیرد.
- فاصله بین کلمات ممکن است بر اساس تراز متن تعیین گردد.
- زمانی که فضاهای سفید حفظ می شوند همه کاراکترهای Space تحت تاثیر فاصله بین کلمات خواهند بود.
مقادیر محتمل برای این خصوصیت در برگیرنده Length( مشخص کردن فضایی که باید بین کلمات قرار گیرد)، Normal و Inherit است.
|
1 2 3 4 5 6 7 8 9 10 11 |
p.one { word-spacing: 20px; } p.two { word-spacing: 20px; text-align: justify; } p.three { word-spacing: 20px; white-space: pre; } |
فاصله بین کاراکترها:
خصوصیت letter-spacing برای تنظیم فاصله بین کاراکترهای متن مورد استفاده قرار می گیرد. مقادیری که این خصوصیت اتخاذ می کند در برگیرنده موارد زیر است:
length، normal and inherit.
|
1 2 3 4 5 6 |
h1 { letter-spacing: -3px; } p { letter-spacing: 10px; } |
خصوصیت line-height:
این خصوصیت ارتفاع خطوط یک متن را تعریف می کندو برای متون طولانی بسیار استفاده می شود و خوانایی متن را به شدت بالا می برد.
مقادیری که این خصوصیت اتخاذ می کند شامل موارد زیر است:
percentage (%), length, number, normal and inherit.
|
1 2 3 |
p { line-height: 1.2; } |
زمانی که مقدار به کار رفته عدد باشد، ارتفاع خط با ضرب کردن اندازه فونت المان در عدد به دست می اید. این در حالیست که مقادیر درصدی به اندازه فونت المان مرتبط اند.
مثلا اگر فونت ۱۶px باشد و مقدار line-height را ۱٫۵ قرار بدیم به این معنی که ۱٫۵ در ۱۶px ضرب می شود و مقدار ۲۲px بین خطوط فاصله ایجاد می شود.
نکته: مقادیر منفی در این خصوصیت نباید مورد استفاده قرار گیرند.
اگر مقدار خصوصیت line-height بزرگتر از مقدار خصوصیت Font-size همان المان باشد، این اختلاف نصف می شود و به صورت مساوی در بالا و پایین جعبه Inline توزیع می گردد.
|
1 2 3 4 5 |
p { font-size: 14px; line-height: 20px; background-color: #f0e68c; } |
امیدوارم در این بخش آموزش CSS, از فرمت بندی متن با CSS نهایت استفاده را برده باشید.
در بخش بعدی با انواع خصوصیات استایل دهی لینک ها در CSS آشنا می شویم.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
