فهرست محتوای این مقاله
خصوصیت direction
این خاصیت مشابه صفت dir در تگهای HTML میباشد و برای تراز متن استفاده میشود، و یکی از 2 مقدار زیر را میپذیرد:
- ltr : مقدار پیشفرض و متن را چپ چین میکند و معمولا برای متون انگلیسی است
- rtl : متن را راست چین میکند. و معمولا برای متون فارسی است
خاصیت line-height
با استفاده از این خاصیت میتوان فاصله عمودی بین خطوط یک متن را کنترل کرد. و مقداری که میپذیرد، عدد اس و واحد آن em میباشد. در ضمن اندازه ای آن به اندازه فونت بستگی دارد.
مثال:
p { line-height: 2; }
همانطور که گفتیم اندازه ی line-height به اندازه فونت بستگی دارد، به طور مثال اگر اندازه فونت تگ p در مثال بالا 10px باشد مقدار 2 برای خصوصیت line-height برابر با 20px خواهد شد..
توصیه میشود که از خصوصیت line-height فقط برای تگ body استفاده شود، زیرا در صورت استفاده آن برای دیگر تگ ها، در صورت تغییر اندازه فونت، اندازه line- height نیز تغییر خواهد کرد، اما در تگ body این صور نیست و با تغییر اندازه ی فونت، line-height همه ی عناصر یکسان خواهد بود.
با تخصیص مقدار به line-height مقدار به دو قسمت مساوی تقسیم شده و نصف آن به فضای خالی بالای خط و نصف دیگر به فضای خالی پایین خط اختصاص داده میشود.
مثال :
<p> 7Learn.com: Javascript and Web Design Tutorials </p>
و کد css :
p { line-height: 3; }
نتیجه در مرورگر:
خصوصیت letter-spacing
خاصیت letter spacing یک فضای خالی اضافی بین کاراکترها ایجاد میکند. برای این خاصیت دو مقدار عددی مثبت و منفی مجاز میباشد که استفاده از مقادیر منفی باعث تو رفتگی و به هم ریختگی حروف میشود.
مثال:
<p class="p1"> 7Learn.com: Javascript and Web Design Tutorials </p> <p class="p2"> 7Learn.com: Javascript and Web Design Tutorials </p>
و کد css زیر:
.p1 { letter-spacing: 2px; } .p2 { letter-spacing: -2px; }
خصوصیت word-spacing
خاصیت word-spacing یک مقدار فضای خالی اضافی برای فاصله بین لغات تعیین میکن. این مقدار نیز میتواند هم منفی و هم مثبت باشد.
مثال:
<p class="p1"> 7Learn.com: Javascript and Web Design Tutorials </p> <p class="p2"> 7Learn.com: Javascript and Web Design Tutorials </p>
و کد css زیر:
.p1 { word-spacing: 5px; } .p2 { word-spacing: -5px; }
خصوصیت text-indent
این خاصیت مقدار تو رفتگی اولین خط از عنصر را تعریف میکند و به طور معمول برای ایجاد تو رفتگی در اولین خط یک پاراگراف استفاده میشود
خصوصیت text-align
این خاصیت مشابه صفت align در تگهای HTML میباشد و برای تراز بندی افقی متن استفاده میشود، و یکی از چهار زیر را میپذیرد:
- Left : مقدار پیشفرض و متن را از چپ تراز میکند.
- Right : متن را از سمت راست تراز میکند.
- Center : متن را از وسط تراز میکند.
- Justify : متن را از دو طرف تراز میکند.
مثال: استفاده از خاصیتهای text-indent و text-align
کد html :
<h2> 7Learn.com </h2> <p> Javascript and Web Design Tutorials/ Javascript and Web Design Tutorials/ Javascript and Web Design Tutorials</p>
و کد css زیر :
h2 { text-align: center; } p { text-indent: 20px; text-align: justify; }
خصوصیت text-decoration
از این خاصیت برای underline (زیرخط دار) کردن متون و یا برداشتن underline از لینک ها، استفاده میشود و از 5 مقدار زیر را میپذیرد:
- Underline : یک خط زیر متن میکشد.
- Overline : یک خط بالای متن میکشد.
- Line-through : یک خط روی متن میکشد.
- Blink : متن را به صورت چشمک زن نمایش میدهد و معادل تگ <blink> در HTML است.
- None : مقدار پیشفرض و برای از بین بردن خط ها.
درضمن میتوان به طور همزمان از 4 مقدار اول، استفاده کرد.
مثال :
<h2> 7Learn.com </h2> <p> Javascript and Web Design Tutorials </p>
و کد css :
h2 { text-decoration: underline overline; } p { text-decoration: line-through; }
بسیار خب تا به اینجا با 6 خصوصیت قالب بندی متن آشنا شدید، در جلسه دوم شما را با بقیه خصوصیات قالب بندی متن آشنا خواهیم کرد.
جناب یه سوال چطور میشه این همه کد رو حفظ کرد و قاطی نکرد روشی شما سراغ دارید من کد های پی اچ پی و html رو راحت یاد می گیریم ولی سی اس اس یه خورده اذیت می کنه
از نرم افزارهایی استفاده کنید که قابلیت auto-completion کدهای css رو داشته باشه ، تو این نرم افزار ها در حین تایپ کدها خودش موارد مربوطه رو پیشنهاد میده (معمولا در حین نوشتن با زدن کلیدهای ctrl+space پیشنهاد ها نمایش داده میشه). من phpStorm رو پینهاد می کنم برای همه ی زبون های تحت وب …
بله با تشکر فراوان خدمت شما استاد محترم جناب مهندس لقمانوند.