ویژگی های متن در CSS

Wiki

قالب بندی متن

این متن بوسیله چند خصوصیت مربوط به متن، قالب بندی شده است، در عنوان، از خصوصیت text-align و color و text-transform استفاده شده است، البته خصوصیت text-transform برای حروف فارسی کارایی ندارد. برای این پاراگراف نیز، تورفتگی خط ابتدایی ، ترازبندی متن و فاصله بین حروف تنظیم شده است. همچنین underline از لینک روبرو حذف شده است."خودتان امتحان کنید"

رنگ متن (Color)

Wiki

خصوصیت color رنگ متن را تنظیم می کند.

در CSS رنگ، به یکی از روش های زیر مشخص می شود:

  • name: نام رنگ باید مشخص شود مانند "red"
  • RGB: به صورت RGB مشخص می شود مانند "(rgb(255,0,0"
  • Hex: به صورت هگزا دسیمال مشخص می شود مانند ff0000 #

در این مثال رنگ پیشفرض برای صفحه در گزینشگر body تنظیم شده است:

مثال (فرمت دهی متن در CSS)

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
خودتان امتحان کنید »

تراز بندی متن (Alignment)

Wiki

خصوصیت text-align برای تراز بندی متن در جهت محور X استفاده می شود.

متن را می توان در مرکز یا چپ یا راست و یا کل فضای اختصاص داده شده قرار داد.

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

مثال (فرمت دهی متن در CSS)

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
خودتان امتحان کنید »

آذین بندی متن (Decoration)

Wiki

خصوصیت text-decoration برای تنظیم و یا حذف Decorationهای یک متن استفاده می شود.

این خصوصیت معمولاً برای حذف underline لینک ها استفاده می شود (به صورت پیشفرض یک لینک دارای underline می باشد):

مثال (فرمت دهی متن در CSS)

a {text-decoration:none;}
خودتان امتحان کنید »

این خصوصیت همچنین برای آذین بندی یا Decoration متن استفاده می شود:

مثال (فرمت دهی متن در CSS)

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
خودتان امتحان کنید »

توجه: توصیه می شود برای متن های معمولی که لینک نیستند، از underline استفاده نشود، چون اغلب، کاربران را به اشتباه می اندازد.

حروف کوچک و بزرگ (Transformation)

Wiki

خصوصیت text-transform حروف یک متن را به حروف بزرگ یا کوچک تبدیل می کند، بنابراین برای حروف فارسی کاربرد ندارد.

  1. uppercase: تمام حروف یک متن را به حروف بزرگ تبدیل می کند.
  2. lowercase: تمام حروف یک متن را به حروف کوچک تبدیل می کند.
  3. capitalize: حروف ابتدایی کلمات یک متن را به حروف بزرگ تبدیل می کند.

مثال (فرمت دهی متن در CSS)

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
خودتان امتحان کنید »

تو رفتگی ابتدای پاراگراف (Indentation)

Wiki

خصوصیت text-indent تورفتگی خط ابتدایی یک پاراگراف را تنظیم می کند.

مثال (فرمت دهی متن در CSS)

p {text-indent:50px;}
خودتان امتحان کنید »
مثال

مثال - خودتان امتحان کنید

Wiki

مشخص کردن فاصله بین حروف
این مثال نشان می دهد که چگونه فاصله بین حروف یک متن را افزایش و یا کاهش دهیم.

مشخص کردن فاصله بین خطوط
این مثال نشان می دهد که چگونه فاصله بین خطوط یک پاراگراف را مشخص کنیم.

مشخص کردن جهت متن
این مثال نشان می دهد که چگونه جهت یک متن (راست به چپ یا چپ به راست) را تغییر دهیم.

افزایش فاصله خالی بین کلمات
این مثال نشان می دهد که چگونه فاصله بین کلمات یک پاراگراف را افزایش دهیم.

غیر فعال کردن wrapping یک متن
این مثال نشان می دهد که چگونه یک پاراگراف چند خطی، فقط در یک خط نمایش داده شود.

تراز بندی یک عکس در جهت محور Y
این مثال نشان می دهد که چگونه ترازبندی عمودی یک عکس که داخل یک متن است را تنظیم کنیم.

کلیه خصوصیات مربوط به متن

Wiki

خصوصیت توضیحات
color رنگ متن را تنظیم می کند
direction

جهت متن (راست به چپ یا چپ به راست) را تنظیم می کند
letter-spacing

فاصله بین حروف متن را تنظیم می کند
line-height

فاصله بین خطوط یک پاراکراف را تنظیم می کند
text-align

تراز بندی متن در جهت محور X را تنظیم می کند
text-decoration

آذین بندی یا decoration یک متن را تنظیم می کند
text-indent

تورفتگی خط ابتدایی یک پاراگراف را تنظیم می کند
text-shadow

به یک متن افکت سایه اضافه می کند
text-transform

کوچکی یا بزرگی حروف یک متن را تنظیم می کند
unicode-bidi  
vertical-align

تراز بندی یک عنصر در جهت محور Y را تنظیم می کند.
white-space

مشخص می کند که با فضاهای خالی داخل یک عنصر چگونه برخورد شود
word-spacing

فاصله بین کلمات یک متن را افزایش یا کاهش می دهد