10 ویژگی‌های قالب‌بندی متن در CSS

CSS (استایل شیوه‌نامه‌ها) شرح می‌دهد که HTML چگونه عناصر را روی صفحه نمایش می‌دهد. CSS می‌تواند با چند خط کد، چیدمان چندین صفحه وب را کنترل کند.

شیوه‌نامه‌های آبشاری (CSS) توصیف می‌کنند که HTML عناصر را روی صفحه چگونه نمایش می‌دهد. CSS می‌تواند چیدمان چندین صفحه وب را با چند خط کد کنترل کند.

CSS دارای ویژگی‌های قالب‌بندی است که بر فاصله، ظاهر و تراز متن تأثیر می‌گذارند. در اینجا برخی از ویژگی‌ها که می‌توانید برای استایل‌دهی به متن در صفحات برنامه‌تان استفاده کنید، آمده است.

1. رنگ متن

ویژگی color رنگ اصلی پیش‌زمینه متن شما را مشخص می‌کند. می‌توانید از نام رنگ از پیش تعریف‌شده‌ای مانند red، white یا green استفاده کنید. همچنین می‌توانید از مقدار هکسا یا سایر واحدها مانند 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%);
}

و متن استایل‌دهی شده به این شکل نمایش داده می‌شود:

2. رنگ پس‌زمینه

می‌توانید از ویژگی 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%);
}

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

مطلب مرتبط: چگونه با React و Firebase یک برنامه چت بسازیم

3. تراز متن

ویژگی 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;
}

در مرورگر، این به این شکل نمایش داده می‌شود:

4. جهت متن

ویژگی 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;
}

نتیجه نهایی به این شکل خواهد بود:

مطلب مرتبط: 3 نوع لیست HTML و نحوه استفاده از آنها

5. تزئین متن

ویژگی text-decoration ظاهر خطوط تزئینی روی متن را تنظیم می‌کند. این یک مخفف برای ویژگی‌های text-decoration-line، text-decoration-color، text-decoration-style و text-decoration-thickness است. اگر نمی‌خواهید این ویژگی روی عناصری که لینک دارند اعمال شود، از 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;
}

و آن‌ها به این شکل نمایش داده می‌شوند:

6. تبدیل متن

ویژگی 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;
}

با نتیجهٔ زیر:

۷. فواصل حرف

ویژگی letter-spacing فاصله بین حروف در متن را تعیین می‌کند. مثال زیر نشان می‌دهد چگونه سبک‌های فاصله مختلف را مشخص کنید.


<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;
}

و متن حاصل کشیده یا فشرده خواهد شد:

۸. فاصله کلمه

ویژگی 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;
}

به وضوح می‌توانید اثر فاصله کلمات را ببینید:

مطلب مرتبط: 13 دستورات و پرس و جوهای اساسی SQL که برنامه نویسان باید بدانند

9. ارتفاع خط

ویژگی 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;
}

می‌توانید نتایج بین هر خط در هر پاراگراف را ببینید:

10. سایه متن

ویژگی text-shadow سایه‌ها را به متن اعمال می‌کند. باید سایه افقی و سایه عمودی را مشخص کنید. 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، CSS3، مفاهیم جدیدی از انیمیشن‌ها تا چیدمان‌های چندستونی معرفی می‌کند. این مفاهیم ایجاد برنامه‌ها و اسناد حرفه‌ای را آسان‌تر می‌سازند.

Tags: سی اس اس طراحی وب سایت