۱۰ کد برای تنظیم متن در css
متن در وب مهم است، با این ویژگی های CSS متن خود را در صفحات وب تنظیم و زیباسازی نمایید.
کدهای CSS نحوه نمایش عناصر را در HTML توضیح میدهند. CSS می تواند طرح بندی چندین صفحه وب را با چند خط کد کنترل کند.
CSS دارای ویژگی های قالب بندی است که بر فاصله، ظاهر و تراز متن تأثیر می گذارد. در اینجا چند ویژگی وجود دارد که می توانید از آنها برای استایل دادن به متن در صفحات برنامه خود استفاده کنید.
۱. رنگ متن در CSS
ویژگی color رنگ اصلی پیش زمینه متن شما را مشخص می کند. می توانید از یک نام رنگ از پیش تعریف شده مانند قرمز ، سفید یا سبز استفاده کنید . همچنین می توانید از مقدار هگز یا واحدهای دیگری مانند RGB، HSL و RGBA استفاده کنید.
فریمورک های CSS مانند Tailwind CSS دارای یک ویژگی رنگ داخلی هستند که سایه های مختلفی را نشان می دهد. این کار انتخاب سایه دلخواه را برای شما آسان تر می کند. بیایید رنگ عناوین زیر را با استفاده از برخی از این ویژگی ها تغییر دهیم:
<body> <h1>Change My Color</h1> <h2>Change My Color</h2> <h3>Change My Color</h3> <h4>Change My Color</h4> </body>
کد CSS به شکل زیر خواهد بود:
h1 { color: orange; } h2 { color: #ff6600; } h3 { color: rgb(255, 102, 0); } h4 { color: hsl(24, 100%, 50%); }
و متن استایل شده به شکل زیر ظاهر می شود:
۲. رنگ پس زمینه
می توانید از ویژگی background-color برای ایجاد پس زمینه های جذاب استفاده کنید . در این آموزش ما از آن برای تنظیم پسزمینههای مختلف برای عناوین زیر استفاده میکنیم:
<body> <h1>Change My Background Color</h1> <h2>Change My Background Color</h2> <h3>Change My Background Color</h3> <h4>Change My Background Color</h4> </body>
با CSS زیر:
h1 { background-color: orange; } h2 { background-color: #009900; } h3 { background-color: rgb(204, 0, 0); } h4 { background-color: hsl(60, 100%, 50%); }
وقتی مرورگر شما این صفحه را رندر می کند، خروجی چیزی شبیه به این خواهد بود :
۳. تراز بندی متن در css
ویژگی text -align تراز افقی متن را تنظیم می کند. این مقدار می تواند left, right, center, یا justify شود .
مقدار justify هر خط متن را گسترش می دهد، بنابراین همه آنها در حاشیه سمت راست و چپ عرض یکسانی می گیرند. برای بررسی این چهار مقدار از کد نمونه زیر استفاده کنید:
<body> <h1>Align Me Left</h1> <h2> Align Me Right</h2> <h3>Align Me center</h3> <p class="ex4"><strong>Align me justified</strong>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p> <p><strong>No alignment </strong>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p> </body>
برای اعمال ترازهای مختلف از CSS زیر استفاده کنید:
h1 { text-align: left; } h2 { text-align: right; } h3 { text-align: center; } .ex4{ text-align: justify; }
خروچی در مرورگر به صورت زیر ظاهر می شود :
۴. تنظیم جهت متن در css
ویژگی text -direction جهت متن را مشخص می کند. جهت را با استفاده از خواص rtl (راست به چپ) یا ltr (از چپ به راست) تعریف کنید. این دو مشخص می کنند که می خواهید متن در کدام جهت جریان داشته باشد.
به عنوان مثال، هنگام کار با زبان هایی که از راست به چپ نوشته شده اند، مانند فارسی یا عربی، از rtl استفاده کنید . شما از ltr برای زبان هایی که از چپ به راست نوشته می شوند مانند انگلیسی استفاده می کنید.
بیایید این کد را با مثال زیر نشان دهیم:
<body> <div> <p class='ex1'>This paragraph goes from right to left. The cursor moves from right to left when you type more information on the page.</p> <p id="ex2">This paragraph goes from left to right. The cursor moves from left to write when you type more information on the page!</p> </div> </body>
با این CSS همراه:
.ex1 { direction: rtl; } #ex2 { direction: ltr; }
نتیجه نهایی چیزی شبیه به این خواهد بود:
۵. تزیین متن
ویژگی text-decoration ظاهر خطوط تزئینی را روی متن تنظیم می کند. این ویژگی شامل text-decoration-line، text-decoration-color، text-decoration-style و text-decoration-thightness است. اگر نمی خواهید این ویژگی را روی عناصری که دارای پیوند هستند داشته باشید، از text-decoration استفاده کنید: none ;
تصویر زیر چند نمونه را در کد نشان می دهد:
<body> <h1>Overline text decoration</h1> <h2>Line-through text decoration</h2> <h3>Underline text decoration</h3> <p class="ex">Overline and underline text decoration.</p> <p><a href="default.asp">This is a link</a></p> </body>
با این CSS می توانید جلوه های تزئینی مختلفی اعمال کنید:
h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; } p.ex { text-decoration: overline underline; } a { text-decoration: none; }
و خروجی چیزی شبیه به این را نمایش می دهند:
۶. تبدیل متن
ویژگی text -transform نوع ظاهر حروف را مشخص می کند. می تواند با حروف بزرگ یا کوچک باشد. همچنین می توانید از آن برای بزرگ کردن حرف اول هر کلمه استفاده کنید:
مثال زیر نحوه انجام آن را در کد نشان می دهد:
<body> <h1>Examples of text-transform property</h1> <p class="uppercase">This sentence is in uppercase.</p> <p class="lowercase">This sentence is in lower case.</p> <p class="capitalize">Capitalize this text.</p> </body>
فایل CSS :
p.uppercase { text-transform: uppercase; } p.lowercase { text-transform: lowercase; } p.capitalize { text-transform: capitalize; }
با نتیجه زیر:
۷. فاصله حروف در CSS
خصوصیت فاصله بین حروف، فاصله بین حروف را در متن مشخص می کند. مثال زیر نحوه تعیین سبک های فاصله گذاری مختلف را نشان می دهد.
<body> <h1>Examples of Letter-spacing</h1> <h2>This is heading 1</h2> <h3>This is heading 2</h3> </body>
کدهای CSS :
h2 { letter-spacing: 7px; } h3 { letter-spacing: -2px; }
و متن حاصل کشیده یا فشرده می شود:
۸. تنظیم فاصله بین کلمات در CSS
ویژگی word -spacing فاصله بین کلمات یک متن را مشخص می کند. مرورگرها یک طول استاندارد برای فاصله بین کلمات دارند، اما شما می توانید طول موردنظر خود را تنظیم کنید. مثال زیر نحوه افزایش یا کاهش فاصله بین کلمات را نشان می دهد:
<body> <h1>Examples of the Word-spacing Property</h1> <p>Normal word spacing.</p> <p class="ex1">Large word spacing.</p> <p class="ex2">Small word spacing.</p> </body>
با استفاده از این CSS:
p.ex1 { word-spacing: 1rem; } p.ex2 { word-spacing: -0.3rem; }
شما می توانید به وضوح تأثیر فاصله بین کلمات را ببینید :
۹. ارتفاع متن در CSS
ویژگی line-height فاصله بین خطوط در یک پاراگراف را مشخص می کند. ارتفاع خط استاندارد و پیش فرض در اکثر مرورگرها حدود ۱۱۰ تا ۱۲۰ درصد است. کد زیر نحوه تغییر آن را نشان می دهد:
<body> <h1>Using line-height</h1> <p> Standard line-height. Standard line-height. </p> <p class="small"> Small small line-height. Small line-height </p> <p class="big"> Bigger line-height. Bigger line-height. </p> </body>
با استفاده از CSS زیر:
p.small { line-height: 0.7; } p.big { line-height: 1.8; }
می توانید نتایج را بین هر خط در هر پاراگراف مشاهده کنید:
۱۰. سایه متن در CSS
ویژگی text-shadow سایه ها را روی متن اعمال می کند. باید سایه افقی و سایه عمودی را مشخص کنید. سایه متن می تواند شامل رنگ و شعاع تاری باشد.
<body> <h1>Examples of Text-shadow effect.</h1> <h1 class="ex1">Text-shadow with color</h1> <h1 class="ex2">Text-shadow with blur effect.</h1> </body>
با این CSS:
h1 { text-shadow: 2px 2px; } .ex1 { text-shadow: 2px 2px orange; } .ex2 { text-shadow: 2px 2px 10px red; }
خروجی جلوه های غیرمعمول و جالبی را ایجاد می کند:
- مطالب مرتبط : خفن ترین قابلیت های جدید CSS
چرا ویژگی های تنظیم متن در css را یاد بگیریم؟
CSS ستون فقرات طراحی وب مدرن است. عملکرد اصلی خصوصیات CSS یکسان است. تسلط بر ویژگی های قالب بندی متن به شما این امکان را می دهد که رابط های کاربری جذاب و خواندنی ایجاد کنید.
دیدگاه ها