آموزش css - قسمت دوازدهم(متن)

سلام

در آموزش دوازدهم از سری آموزش های CSS می پردازیم به کار با متن(Text) و اینکه برای متن ها چه خاصیت هایی داریم و چگونه می توانیم از آن ها استفاده کنیم، در ادامه همراه بپرسم باشید.

ویژگی متن:

قالب بندی متن

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

رنگ متن:

در Css برای تعیین رنگ متن از خصوصیت color استفاده میشود، به ۳ روش میتوان رنگ بندی انجام بدیم:

نام رنگ: در این نوع نام رنگ را می نویسیم(مثلا blue)
کد Hex: در این نوع کد هگزا دسیمال رنگ را می نویسیم(مثلا ۰۰ff00)
RGB: کد رنگ به صورت RGB را می نویسیم(rgb(255,0,0

در مثال زیر، کد به ترتیب بالا رنگ متن را مشخص کردیم:

h1 {
  color: blue;
}
h2 {
  color:#00ff00;
}
h3 {
  color:rgb(255,0,0);
}

h1 {

color: blue;

}

h2 {

color:#۰۰ff00;

}

h3 {

color:rgb(۲۵۵,۰,۰);

}

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

برای تراز بندی متن از ویژگی text-align استفاده میشود، که جهت متن را در محور x مشخص میکند.

متن را میتوان در چپ(left)، وسط(center) و راست(right) تنظیم کرد.

در مثال زیر ترازبندی متن را در سه جهت Right,left,center مشاهده میکنید.

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

۱۰

۱۱

h1 {

text-align: center;

}

h2 {

text-align: left;

}

h3 {

text-align: right;

}

مطلب پیشنهادی: آموزش ارسال ایمیل در B4A

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

div {
  text-align: justify;
}

div {

text-align: justify;

}

تزیین متن(Decoration):

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

اگر یک لینک در سایت قرار دهید، می بینید که زیر لینک یک خط تیره کشیده میشود، توسط خصوصیت text-decoration: none می توانیم این خط را از بین ببریم.

a {
  text-decoration: none;
}

a {

text-decoration: none;

}

مقدار های دیگری که خصوصیت text-decoration میتواند داشته باشد:

h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

۱۰

۱۱

h1 {

text-decoration: overline;

}

h2 {

text-decoration: line-through;

}

h3 {

text-decoration: underline;

}

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

متن بزرگ و کوچک(Transformation):

جالب است بدانید تا میتوانیم تعیین کنیم حروف یک متن به صورت بزرگ نمایش داده شود یا کوچک(البته این مورد در زبان فارسی کاربرد ندارد).

برای این کار از خصوصیت text-transform استفاده میکنیم که سه مقدار میگیرد:

uppercase: حروف یک متن را به صورت بزرگ نمایش میدهد.
lowercase: حروف یک متن را به صورت کوچک نمایش میدهد.
capitalize: فقط حروف اول یک متن را به صورت بزرگ نمایش میدهد.

مطلب پیشنهادی: خطای 502 چیست و چگونه رفع میشود؟

در مثال زیر از هر ۳ مقدار استفاده شده است:

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

۱۰

۱۱

p.uppercase {

text-transform: uppercase;

}

p.lowercase {

text-transform: lowercase;

}

p.capitalize {

text-transform: capitalize;

}

تورفتگی متن(Indentation):

توسط خاصیت text-indent می توانیم تنظیم کنیم که متن از ابتدای پاراگراف چه مقدار فاصله بگیرد.

p {
  text-indent: 50px;
}

p {

text-indent: ۵۰px;

}

فاصله بین حروف(Letter Spacing):

توسط خاصیت letter-spacing می توانیم فاصله ی بین خطوط را کم یا زیاد کنیم.

h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}

h1 {

letter-spacing: ۳px;

}

h2 {

letter-spacing: -۳px;

}

فاصله بین خطوط(Line Height):

با خاصیت line-height می توانیم فاصله بین خطوط را کم یا زیاد کنیم.

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

p.small {

line-height: ۰.۸;

}

p.big {

line-height: ۱.۸;

}

جهت متن(Direction):

خاصیت direction میتوانیم جهت یک متن(راست به چپ یا چپ به راست) را مشخص کنیم.

p {
  direction: rtl;
}

p {

direction: rtl;

}

به طور پیشفرض جهت متن چپ به راست(direction: ltr) می باشد.

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

فاصله ی بین کلمات را با خاصیت word-spacing میتوانیم کم یا زیاد کنیم.

مطلب پیشنهادی: آموزش فرم ها در PHP – فیلدهای ضروری

h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}

h1 {

word-spacing: ۱۰px;

}

h2 {

word-spacing: -۵px;

}

سایه متن(Text Shadow):

برای متن ها توسط خاصیت text-shadow می توانیم سایه ایجاد کنیم.

مثال زیر موقعیت سایه افقی(۳px)، سایه عمودی(۲px) و رنگ سایه(red) مشخص شده است.

h1 {
  text-shadow: 3px 2px red;
}

h1 {

text-shadow: ۳px ۲px red;

}

خصوصیت های متن در CSS

در جدول زیر تمام خصوصیات مربوط به متن آورده شده است.

خصوصیت	توضیح
color	رنگ متن را تنظیم می کند
direction	جهت متن (راست به چپ یا چپ به راست) را تنظیم می کند
letter-spacing	فاصله بین حروف متن را تنظیم می کند
line-height	فاصله بین خطوط یک پاراکراف را تنظیم می کند
text-align	تراز بندی متن در جهت محور X را تنظیم می کند
text-decoration	تزیین یا decoration یک متن را تنظیم می کند
text-indent	تورفتگی خط ابتدایی یک پاراگراف را تنظیم می کند
text-shadow	به یک متن افکت سایه اضافه می کند
text-transform	کوچکی یا بزرگی حروف یک متن را تنظیم می کند
text-overflow	می توان مشخص کرد هنگامی متن از عنصر والدش سرریز می کند، چه اتفاقی رخ دهد.
unicode-bidi	با استفاده از ویژگی unicode-bidi در کنار ویژگی direction می توان جهت و رفتار متن هایی که دارای نوشته در دوجهت هستند را کنترل کرد.
vertical-align	تراز بندی یک عنصر در جهت محور Y را تنظیم می کند.
white-space	مشخص می کند که با فضاهای خالی داخل یک عنصر چگونه برخورد شود
word-spacing	فاصله بین کلمات یک متن را افزایش یا کاهش می دهد

این قسمت از آموزش ها نیز به پایان رسید، همراه ما باشید با دیگر آموزش ها …

برای مشاهده دیگر قسمت های آموزش Css، کلیک کنید.

موفق باشید.