آموزش CSS

استایل text در CSS

در این قسمت به بررسی استایل متن در آموزش 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);

}

نکته: برای ایجاد CSS ی که با استانداردهای W3C مطابقت داشته باشد چنانچه خاصیت رنگ (color property ) را تعریف کردید،در آن صورت لازم است خاصیت background-color را نیز تعریف کنید .

 

تراز بندی متن ( 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;

}

 

 

آموزش ها براساس اصول w3school میباشد

در جلسات آینده آموزش سی اس اس  به بررسی استایل فونت  در css می پردازیم ، با ما همراه باشید.

استایل text در CSS
امتیاز 5 از 1 رای
برچسب ها

پوریا آریافر

اولین کسب و کار آنلاین خودم را در فیسبوک راه‌اندازی کردم و در سال ۲۰۱۱ یکی از پرتعامل‌ترین صفحات فارسی با ۸۰ هزار فالور فعال را داشتم. سپس وارد دنیای شبکه شدم و در انتهای سال ۲۰۱۲ مدرک MCSE مایکروسافت را دریافت کردم، در دوران خدمت سربازی مسئول بهینه سازی یک وبسایت خبری معتبر شدم و آشنایی با سئو را آموختم و در سال ۲۰۱۴ توانستم به رتبه ۴۰۰ الکسا نزدیک کنم. برخلاف میل درونی، وارد دانشگاه شدم و سه ساله در مقطع کارشناسی IT فارغ التحصیل شدم، در همان سال بزرگ‌ترین کانال تلگرامی IT با ۴۰ هزار عضو را داشتم، که فروختم تا بتوانم تمرکز را فقط بر روی سئو بگذارم، فعالیت‌های سئو به شکل تخصصی بنده در قالب پروژه‌های مختلف و آموزش‌های حضوری و غیرحضوری در دفتر میزفا و دانشگاه علامه طباطبایی تهران صورت ‌می‌گیرد، تجربه بهینه سازی موفقی در بهبود UX و CRO پروژه‌های سئو کسب کرده‌ام. در همه ابزارهای گوگل به جز adwords تسلط کاملی دارم. عاشق کسب تجربه های جدید هستم. راز پیشرفت در هر کاری را یادگیری و یاددادن می‌دانم و میزفا که در اواخر ۲۰۱۶ راه‌اندازی شده، می‌تواند چنین بستر مناسبی را فراهم کند. نقد و بازخوردهای سازنده شما، جوهر تلاش‌های مستمر ماست تا یک قدم خودمون بهبود بدیم. منتظریم ...

نوشته های مشابه

‫2 نظرها

  1. سلام
    استایل دهی تا زمانی که در سایت log in هستیم کار می کند
    زمانی که آفلاین می شویم
    یعنی به صورت آفلاین سایت را بالا لود می کنیم
    انگار استایلی وجود ندارد

    1. سلام. خب اینطوری که نمیشه فهمید. باید فایل ها رو بررسی کرد. شاید تداخلی دارید و یا به دسترسی تعریف نکردید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره رایگان سئو