متن درcss

استایل عناصر در CSS

در این جلسه، باهم خصوصیاتی رو یاد می‌گیریم که می‌تونیم توسط اون ها، فرم ظاهری حروف و کلمات رو دستکاری کنیم.

رنگ متن (Text Color)

خاصیت رنگ یا color property همان طور که از اسم آن پیدا است، ویژه ی انتخاب رنگ نوشته یا متن مورد نظر مورد استفاده قرار می گیرد .

در CSS ، رنگ غالبا توسط مقادیر فهرست شده در زیر تعیین می شود:

• اسم رنگ (color name) مانند “red”
• مقدار HEX (شانزده شانزدهی) مثل “#ff0000”
• مقدار RGB  مانند “(255.0.0)”

رنگ پیش فرض برای یک صفحه در بدنه ی انتخاب گر( body selector ) تعریف می گردد . به مثال زیر توجه کنید :

body {

color: blue;

}

h1 {

color: #00ff00;

}

h2 {

color: rgb(255,0,0);

}

تراز بندی متن ( text alignment)

خصوصیت text-align در واقع یک متن را به صورت افقی تراز می کند (جهت چيدمان نوشته را در صفحه بانمای افقی تنظیم میکند)نوشته می تواند در وسط صفحه قرار گیرد (وسط چین شود)، همچنین در سمت چپ یا راست قرار داده شود و یاحتی از هر دو سمت راست و چپ تراز ( justify ) شود .

زمانی که خصوصیت text-align روی “justify” تنظیم می شود، هر خط تا آنجایی کشیده شده یا بسط داده میشود که از نظر پهنا (width ) با هم برابر شوند، حاشیه های سمت چپ و راست نیز درست مشابه مجله یاروزنامه هر دو کاملا باید راست و مستقیم باشند .

h1 {

text-align: center;

}

p.date {

text-align: right;

}

p.main {

text-align: justify;

}

اعمال جلوه های بصری به متن (Text Decoratio)

خاصیت text-decoration به منظور اعمال جلوه های تصویری به متن یا حذف آن ها از نوشته ی مورد نظر بکارگرفته می شوند .خاصیت text-decoration عمدتا جهت حذف زیرخط ( underline )از لینک ها برای مقاصد طراحی مورد استفاده قرار می گیرد.

a {

text-decoration: none;

}

از آن همچنین برای افزودن جلوه های بصری ( decoration ) به نوشته نیز استفاده می شود، به مثال زیر توجه کنید:

h1 {

text-decoration: overline;

}

h2 { text-decoration: line-through;

}

h3 { text-decoration: underline;

}

  توجه: توصیه می شود از کشیدن خط زیر متنی که لینک نیست خودداری کنید، زیرا با انجام این کار کاربر دچار سردرگمی می شود

تبدیل نوع متن از حروف کوچک به بزرگ و بالعکس ( Text Transformation )

خاصیت text-transform به منظور تعیین کوچکی و بزرگی حروف )مدیریت اندازه ی حروف( در متن استفاده می شود .از آن می توان برای تبدیل هر نوشته ی به حروف بزرگ یا کوچک استفاده کرد و یا حتی به کمک آن حروف اول هر کلمه را به حرف بزرگ تبدیل کرد. مثال

p.uppercase {

text-transform: uppercase;

}

p.lowercase {

text-transform: lowercase;

}

p.capitalize {

text-transform: capitalize;

}

تنظیم تو رفتگی متن ( Text Indentation)

خاصیت text-indent را می توان به منظور تنظیم و مدیریت میزان تو رفتگی اولین خط متن مورد استفاده قرار داد (ميزان تو رفتگی و نقطه شروع اولين خط از يک پاراگراف نوشته را اداره می کند)

p {

text-indent: 50px;

}

فاصله ی بین حروف (letter spacing)

برای تعیین فضای بین کاراکترهای یک متن استفاده می شود.مثال :

h1 {

letter-spacing: 3px;

}

h2 {

letter-spacing: -3px;

}

ارتفاع خط (Line Height)

برای تعیین فضای بین خطوط استفاده می شود . مثال:

p.small {

line-height: 0.8;

}

p.big {

line-height: 1.8;

}

فاصله ی بین کلمات (Word Spacing)

برای تعیین فضای بین کلمات در یک متن استفاده می شود. مثال زیر نشان می دهد که چگونه میتوان  فضای بین کلمات را افزایش یاکاهش داد :

h1 {

word-spacing: 10px;

}

h2 word-spacing: -5px ;

}

سایه متن (Text Shadow)

این قابلیت سایه را به متن اضافه میکند . در زیر مثالی را مشاهده میکنید که به ترتیب موقعیت سایه افقی (3 پیکسل)، موقعیت سایه عمودی (2 پیکسل) و رنگ سایه (قرمز) را تعیین میکند .

h1 {

text-shadow: 3px 2px red;

}

خاصیت color

ممکنه در ابتدای آموزش، تصور کرده باشین که این خاصیت، برای رنگ دادن به عناصر به کار می‌ره.

اما کاربرد این خاصیت، اختصاص دادن رنگ به متن ها و نوشته هاست.

به مثال زیر توجه کنین:

کد HTML:

<p> faraznetwork CSS tutorial </p>

کد CSS:

p{
   color:red;
}

مقدار این خاصیت، مثل خاصیت های دیگه ای که مربوط به رنگ می‌شدن، مثل background-color و border-color، می‌تونه توسط ۶ نوع مقدار مختلفی که در مقاله های رنگ در CSS یاد گرفتیم تعیین بشه.

برای نمونه، استفاده از تابع ()rgb:

کد CSS:

p{ color: rgb(0, 210, 0);

}

خاصیت text-decoration-line

این خاصیت می‌تونه مقادیر زیر رو قبول کنه:

• none: هیچ دکور خاصی به متن نمیده.
• line-through: روی متن، یه خط صاف می‌کشه.
• underline: زیر متن، یه خط صاف می‌کشه.
• overline: بالای متن، یه خط صاف می‌کشه.

برای درک بهتر، به عملکرد هر کدوم از مقادیر توجه کنین:

مقدار underline:

کد CSS:

p{

color: green;

text-decoration: underline;

}

مقدار overline:

کد CSS:

p{

color: green;

text-decoration: overline;

}

مقدار line-through:

کد CSS:

p{

color: green;

text-decoration: line-through;

}

خاصیت text-decoration-color

توسط این خاصیت، می‌تونیم رنگ دکور مربوط به متنمون رو تغییر بدیم.

رنگ مورد نظر، می‌تونه مقادیر شامل رنگ های پیشفرض، HEX و ()rgb داشته باشه.

به مثال زیر توجه کنین:

کد CSS

p{

color:green;

text-decoration-line:underline;

text-decoration-color: rgb( 0, 0, 255 );

}

خاصیت text-decoration-style

خاصیت border-style رو در مقاله border ها یادتون میاد؟ این خاصیت هم دقیقا مثل همونه

توسط این خاصیت، می‌تونیم فرم خط درگیر با متن رو تعیین کنیم. خاصیت مورد نظر، مقادیر زیر رو قبول می‌کنه:

• solid: خط ممتد
• dotted: نقطه چین
• dashed: خط چین
• wavy: موج گونه
• double: دو خط موازی

به مثال زیر توجه کنید:

کد CSS

p{

color: green;

text-decoration-line:underline;

text-decoration-color: rgb( 0, 0, 255 );

text-decoration-style: wavy;

}

خاصیت text-decoration-skip

توسط این خاصیت، می‌تونیم مشخص کنیم که خط دکور ما، در چه جاهایی باید بشکنه و ادامه پیدا نکنه.

مقادیر زیر، مورد قبول این خاصیت هستن:

• object: هرجا که متن، به عکس و یا عناصر inline دیگه‌ای به جز متن رسید، قطع میشه.
• spaces: هر جا که به فاصله بین کلمات رسید، قطع میشه.
• edges: از ابتدای متن شروع و تا انتهای اون ادامه میابه. برای متن های نزدیک به هم به کار میره و بیشتر، تو زبان هایی مثل چینی کاربرد داره.
• ink: ساده بگیم، تو یه جمله ی مثلا انگلیسی، پای حروفی مثل g و p رو رد می‌کنه و بهشون برخورد نمی‌کنه.

به مثال زیر توجه کنین:

کد HTML:

<p>faraznetwork </p>

کد CSS:

p{

color: green;

text-decoration-line: underline;

text-decoration-color: rgb( 0, 0, 255 );

text-decoration-skip: ink;

}

خاصیت text-decoration

این خاصیت، برای خلاصه کردن و کوتاه تر کردن عملیات کدنویسی ما به کار می‌ره و عملکردی مشابه با خاصیت border و margin داره.

می‌تونیم به جای استفاده کردن از ۳ خاصیت text-decoration-color، text-decoration-style و text-decoration-line، مستقیما از خاصیت کوتاه شده ی مورد نظر استفاده کنیم.

برای مثال به کد تقریبا طولانی زیر توجه کنین:

p{

color: green;

text-decoration-line: underline;

text-decoration-color: rgb( 0, 0, 255 );

text-decoration-style: wavy;

}

کد فوق رو به شکل کوتاه شده زیر می‌تونیم بنویسیم:

p{

color: green;

text-decoration: underline wavy rgb(0,0,255);

}

خاصیت text-align

مقادیری که خاصیت text-align قبول می‌کنه به شرح زیر هستن:

• center
• left
• right
• justify
• start
• end

وسط چین – Center

این مقدار، متن رو به وسط محدوده هدایت می‌کنه.

div{ text-align: center; }

چپ چین – Left

این مقدار، متن رو به سمت چپ محدوده هدایت می‌کنه.

div{ text-align: left; }

راست چین – right

این مقدار، متن رو به سمت راست محدوده هدایت می‌کنه.

div{ text-align: right; }

تراز کردن – justify

این مقدار باعث می شود تا برای تمام خطوط به جز خط آخر هرچه فضای خالی بین لبه سمت راست و چپ عنصر وجود دارد طوری بین کلمات توزیع شود تا محتوا سراسر خط را از لبه سمت راست تا چپ پر کند.

div{ text-align: justify; }

شروع خط – start

اگر جهت عنصر rtl (راست به چپ ) باشد، رفتار این مقدار با right یکسان خواهد بود و اگر جهت عنصر ltr باشد رفتارش مشابه رفتار مقدار left می شود.

div{ text-align: start; }

پایان خط – end

اگر جهت عنصر rtl ( راست به چپ ) باشد، رفتار این مقدار با left یکسان خواهد بود. و اگر جهت عنصر ltr باشد رفتارش مشابه رفتار مقدار right می شود.

div{ text-align: end; }

 

نتیجه گیری

تو این مقاله، با استایل دهی اولیه به متن آشنا شدیم.

یاد گرفتیم که چطور با استفاده از خاصیت color، می‌تونیم رنگ متن رو تغییر بدیم و چطور با استفاده از خاصیت های مربوطه به text-decoration، می‌تونیم به متنمون خطوطی رو اضافه کنیم.

 

 

جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.

جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.

نویسنده: حانیه گل لاله کرمانی