قالب بندی متن جلسه پنجم

قالب بندی متن جلسه پنجم

در درس گذشته باهم مشخصه Background رو بررسی کردیم و یاد گرفتیم که چطور برای یک عنصر از صفحه یک تصویر زمینه قرار بدیم و تصاویر رو با css در صفحه بچینیم.در این درس به قالب بندی متن می پردازیم و در نهایت یاد میگیریم که چطور نحوه ی نمایش متن و جهت بندی اون رو تحت کنترل خودمون بگیریم.این درس میتونه حتی برای دوستانی که در زمینه فارسی سازی قالب های سیستم های مدیریت محتوا مثل جوملا ، وردپرس و … کار می کنند مفید باشه.

 قالب بندی متن جلسه پنجم قالب بندی متن جلسه پنجم قالب بندی متن جلسه پنجم CSS text formatting

قالب بندی متن جلسه پنجم: رنگ متن

خاصیت رنگ برای تنظیم رنگ متن استفاده می شود.
با CSS ، یک رنگ که اغلب با موارد زیر مشخص می شود:

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

برای یک لیست کامل از مقادیر ممکن رنگ ، نگاهی به مقادیر رنگCSS بیاندازید.
رنگ پیش فرض برای یک صفحه در انتخابگر بدنه تعریف می شود.

 

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

مثال:

و نتیجه  به صورت زیر قابل مشاهده می باشد:

قالب بندی متن جلسه پنجم قالب بندی متن جلسه پنجم قالب بندی متن جلسه پنجم css

 

قالب بندی متن جلسه پنجم: تراز متن

در صورتی که بخواهید ترازبندی متن رو عوض کنید و مثلا متن رو در سمت راست یا چپ یا وسط نشون بدید ، مشخصه ی text-align به کمک شما میاد.این مشخصه با دریافت مقادیر right,left,center و justify تمام نیازهای شما رو برای نمایش موقعیت متن برآورده میکنه.در سایت ها و صفحات فارسی زبان برای اینکه جهت نوشتن از راست به چپ هست میتونید موقهعیت نوشته رو سمت راست قرار بدید.هنگامی که شما مقدار justify رو به این مشخصه میدید در واقع کاری کردید که تمام سطرهای متن شما در یک راستا تموم بشوند و در واقع منظم تر میشه.به مثال زیر دقت کنید:

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

  • Blink که حالت چشمک زن رو به متن میده (در اینترنت اکسپلورر شناخته شده نیست)
  • Line-through که یک خط رو بر روی متن نشون میده.
  • Underline که زیر متن خط میکشه
  • Overline که یک خط رو بالای متن نمایش میده.
  • None که تمام تزیینات رو از بین میبره.از این خاصیت بیشتر برای لینک ها استفاده میشه تا خط زیر لینک ها نمایش داده نشه.
هنگامی که تراز متن قرار است روی “justify” قرار گیرد ، هر خط تا جایی کشیده می شود که هر خط دارای عرض مساوی، و حاشیه های چپ و راست مستقیم می شوند.

نمونه کد بکار  رفته:

 

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

  • قالب بندی متن جلسه پنجم قالب بندی متن جلسه پنجم قالب بندی متن جلسه پنجم css6 1
  • خاصیت text-indentation برای مشخص کردن تورفتگی اولین خط از یک متن ، استفاده می شود.
  • خاصیت text-transform برای تعیین حروف بزرگ و کوچک در یک متن استفاده می شود.

 

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

جهت دهی متن:

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

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

 

 

آموزش CSS آموزش طراحی وب

دیدگاه خود را بیان کنید