آموزش CSS – آشنایی با Property یی های مرتبط با font در سی اس اس (CSS) (جلسه ۱۷)

آشنایی با Property یی تحت عنوان font-variant در سی اس اس (CSS)

آشنایی با Property یی تحت عنوان font-transform در سی اس اس (CSS)

آشنایی با Property یی تحت عنوان text-align در سی اس اس (CSS)

آشنایی با Property یی تحت عنوان text-indent در سی اس اس (CSS)

آشنایی با Property یی تحت عنوان text-decoration در سی اس اس (CSS)

آشنایی با Property یی تحت عنوان letter-spacing در سی اس اس (CSS)

آشنایی با Property یی تحت عنوان word-spacing در سی اس اس (CSS)

آشنایی با Property یی تحت عنوان line-height در سی اس اس (CSS)

 

آشنایی با Property یی تحت عنوان font-variant در سی اس اس (CSS)

این Property دو مقدار می تواند داشته باشد که عبارتند از normal و small-caps. برای مشخص شدن تاثیر این Property کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>   
       <p>This is a paragraph</p>
   </body>
</html>

حال کدهای سی اس اس خود را به صورت زیر وارد نرم افزار می کنیم:

p {
   font-variant:normal;
}

در این مرحله اقدام به نمایش فایل خود در مرورگر می نماییم:

em_unit_of_measurement

از آنجا که مقدار normal در نظر گرفته شده است، می بینیم که هیچ تغییری در نحوه نمایش پاراگراف ایجاد نمی شود. حال فایل سی اس اس (CSS) خود را به صورت زیر بازنویسی می کنیم:

p {
   font-variant:small-caps;
}

مجدد اقدام به روز رسانی مرورگر خود می نماییم:

font-variant_small-caps

می بینیم که کلیه کاراکترهای پاراگراف به حروف بزرگ تبدیل شده اند. لازم به ذکر است علاوه بر تبدیل شدن کاراکترها به حروف بزرگ اندازه آنها هم کاهش یافته است. از این نوع تایپوگرافی بیشتر در مورد نوشتن نام نویسنده یک مقاله و … مورد استفاده قرار می گیرد.
علاوه بر دو مقدار فوق برای ارث بری از خصوصیات والد می توان از مقدار inherit هم استفاده کرد.

 

آشنایی با Property یی تحت عنوان font-transform در سی اس اس (CSS)

یکی دیگر از Property های مرتبط با تایپوگرافی font-transform نام دارد. این Property مقادیر مختلفی همچون none، capitalize، lowercase  و uppercase می تواند داشته باشد. برای روشن شدن مطلب کد زیر را وارد ویرایشگر متن می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <h1>This is a text</h1>
       <h2>This is a text</h2>
       <h3>This is a text</h3>
       <h4>This is a text</h4>
   </body>
</html>

همانطور که در کد فوق ملاحظه می شود از تگ های h1 تا h4 برای این مثال استفاده کرده ایم. حال اقدام به نوشتن کدهای سی اس اس (CSS) داخل فایل main.css می نماییم:

h1 {
   text-transform:none;
}
h2 {
   text-transform:capitalize;
}
h3 {
   text-transform:lowercase;
}
h4 {
   text-transform:uppercase;
}

همانطور که در کد فوق می بینیم، مقدار text-transform را برای h1 برابر با none قرار داده ایم به این معنی که هیچ گونه تغییری روی این تگ صورت نخواهد گرفت. این مقدار برای h2 برابر است با capitalize به این شکل که حرف اول هر کلمه را به صورت بزرگ می نویسد. برای آنکه کلیه کاراکترها کوچک یا بزرگ نوشته شوند به ترتیب می توان از مقادیر lowercase و uppercase استفاده کرد. حال فایل خود را داخل مرورگر اجرا می کنیم:

font-transform_in_css

در خط اول می بینیم که هیچ تغییری صورت نگرفته است، در خط دوم کاراکتر اول هر کلمه به صورت بزرگ نوشته شده است، در خط سوم کلیه کاراکترها با حرف کوچک نوشته شده اند و در خط چهارم کلیه کاراکترها با حرف بزرگ نوشته شده اند. علاوه بر این از مقدار inherit هم می توان استفاده کرد.

 

آشنایی با Property یی تحت عنوان text-align در سی اس اس (CSS)

با به کار گیری text-align می توان چیدمان متن را راست چین، چپ چین، وسط چین و justify کرد. برای روشن شدن این موضوع کد زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <h1>This is a text</h1>
       <h2>This is a text</h2>
       <h3>This is a text</h3>
       <h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. </h4>
   </body>
</html>

حال کدهای زیر را وارد فایل main.css می کنیم:

h1 {
   text-align:right;
}
h2 {
   text-align:left;
}
h3 {
   text-align:center;
}
h4 {
   text-align:justify;
}

همانطور که در کد فوق می بینیم، برای h1 مقدار right، برای h2 مقدار left،  برای h3 مقدار center و در نهایت برای h4 مقدار justify را در نظر می گیریم. برای مشاهده خروجی کدهای فوق، فایل اچ تی ام ال (HTML) را در مرورگر اجرا می کنیم:

xtext-align.jpg.pagespeed.ic.YVD9fJeS8z

می بینیم که تگ <h1> در سمت راست، تگ <h2> در سمت چپ، تگ <h3> در مرکز و در نهایت تگ <h4> به صورت justify در آمده است. منظور از justify این است متن، کل فضای اختصاص داده شده به آن را گرفته و به صورت منظم نمایش داده می شود.
علاوه بر مقادیر فوق، مقدار inherit را هم می توان برای این Property در نظر گرفت.

 

آشنایی با Property یی تحت عنوان text-indent در سی اس اس (CSS)

برای آشنایی با text-indent در سی اس اس (CSS)، کدهای زیر را وارد نمایشگر متن خود می نماییم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
   </body>
</html>

اکنون این فایل را در مرورگر خود اجرا می کنیم:

text_without_text-indent_property

حال قصد داریم تا با تکمیل کدهای سی اس اس (CSS)، تغییری در نحوه نمایش این پاراگراف بوجود آوریم:

p {
   text-indent:50px;
}

اکنون مرورگر خود را به روز رسانی می کنیم:

applying_text_edit_in_css

می بینیم که در ابتدای پاراگراف به مقداری که در کد سی اس اس (CSS) وارد کردیم فضای خالی قرار می گیرد که اصطلاحاً Indentation نامیده می شود.

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

   <body>
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
       <h3>Heading 3</h3>
   </body>

می بینیم که یک تگ <h3> حاوی عبارت Heading 3 پس از تگ پاراگراف ایجاد کرد ایم. حال کد سی اس اس خود را به صورت زیر تکمیل می کنیم:

p {
   text-indent:50px;
}
h3 {
   text-indent:-1000px;
   background-color:red;
}

می بینیم که برای h3 رنگ پس زمینه قرمز را در نظر گرفته ایم و مقدار text-indent را به مقدار بسیار زیادی مثل منفی ۱۰۰۰ تعیین کرده ایم. مرورگر خود را به روز رسانی می کنیم:

text-indent_off_the_page

می بینیم که متن به هیچ وجه نمایش داده نمی شود چرا که به مقدار منفی ۱۰۰۰ پیکسل خارج از صفحه قرار داده شده است اما این در حالی است که فضای اشغال شده توسط این تگ جای خود را حفظ کرده است.

 

آشنایی با Property یی تحت عنوان text-decoration در سی اس اس (CSS)

برای آنکه بتوانیم روی بخشی از متن خط بکشیم، خط پیش فرض زیر لینک ها را برداریم و … می بایست از دستور text-decoration استفاده کنیم. برای روشن شدن این مطلب کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <p>این یک پاراگراف است</p>
   </body>
</html>

همانطور که می بینیم پاراگرافی را حاوی عبارت “این یک پاراگراف است” ایجاد کرده ایم. حال برای آنکه زیر این پاراگراف یک خط افقی ایجاد کنیم کدهای سی اس اس (CSS) زیر را وارد فایل مرتبط با کدهای سی اس اس می کنیم:

p{
   text-decoration:underline;
}

همانطور که می بینیم برای p از Propertyیی تحت عنوان text-decoration استفاده کرده و Value مرتبط با آن را underline قرار داده ایم. برای مشخص شدن تاثیر این کد، فایل اچ تی ام ال (HTML) خود را داخل مرورگر اجرا می کنیم:

text-decoration_in_css

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

p{
   text-decoration:overline;
}

مجدد مرورگر را به روز رسانی می کنیم:

2._text-decoration_in_css

می بینیم که این بار خط بالای پاراگراف مد نظر کشیده شده است.
گاهی اوقات نیاز داریم تا از طریق سی اس اس (CSS) روی متنی خط بکشیم. برای این منظور از کد زیر می توان استفاده کرد:

p{
   text-decoration:line-through;
}

مجدد مرورگر را به روز رسانی می کنیم:

3._text-decoration_in_css

در واقع زمانی که بخواهیم به کاربر نشان دهیم که مثلاً بخشی از متن نادرست است می توان از این دستور استفاده کرد.
Value دیگری که برای این Property می توان استفاده کرد none است. در واقع از آنجا که به طور پیش فرض زیر لینک های اچ تی ام ال خط کشیده شده است، با استفاده از مقدار none می توان این خط را از بین برد. برای روشن شدن این مطلب، کد اچ تی ام ال فوق را به صورت زیر تغییر می دهیم:

   <body>
       <a href="http://www.google.com/">
           <p>این یک پاراگراف است</p>
       </a>
   </body>

همانطور که می بینیم پاراگراف خود را با استفاده از تگ <a> به یک لینک تبدیل کرده ایم. حال مرورگر خود را به روز رسانی می کنیم:

html_links_underline

حال برای آنکه خط زیر این لینک را حذف کنیم، می بایست کدهای سی اس اس خود را به صورت زیر باز نویسی کنیم:

a{
   text-decoration:none;
}

همانطور که در کد فوق مشخص است، مقدار text-decoration را به none تغییر داده ایم. علاوه بر این از sSelector یی تحت عنوان a استفاده کرده ایم تا لینک های اچ تی ام ال را هدف قرار دهیم. حال مجدد مرورگر خود را به روز رسانی می کنیم:

removing_underline_of_html_links

می بینیم که به همین سادگی توانستیم فرمت پیش فرض لینک های اچ تی ام ال (HTML) را تغییر دهیم. در واقع از این روش می توان نوع فونت، رنگ و بسیاری از دیگر ویژگی های تگ های لینک را تغییر دهیم.

 

آشنایی با Property یی تحت عنوان letter-spacing در سی اس اس (CSS)

برای آشنایی با این Property در سی اس اس (CSS) کد زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
   </body>
</html>

در ادامه کد زیر را وارد فایل مرتبط با کدهای سی اس اس (CSS) می کنیم:

p {
   letter-spacing:2px;
}

همانطور که در کد فوق می بینیم، مقدار ۲ پیکسل برای letter-spacing را در نظر گرفته ایم. حال فایل خود را داخل مرورگر اجرا می کنیم:

letter-spacing_in_css

کاری که letter-spacing انجام می دهد این است که فاصله مابین کاراکترهای یک کلمه را تنظیم می کند. علاوه بر تعیین یک Value برای این Property به صورت عددی، می توان مقادیر normal و inherit را هم در نظر گرفت. normal مقدار پیش فرض است و اگر از این Property استفاده نکنیم مقدار normal در نظر گرفته خواهد شد.

 

آشنایی با Property یی تحت عنوان word-spacing در سی اس اس (CSS)

برای تنظیم فاصله مابین واژگان در سی اس اس می بایست از Property یی تحت عنوان word-spacing استفاده کرد. برای آشنایی بیشتر با این Property کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
   </body>
</html>

حال کدهای سی اس اس زیر را وارد فایل مربوط به CSS می کنیم:

p {
   word-spacing:10px;
}

فایل خود را داخل مرورگر اجرا می کنیم:

letter-spacing_in_css (1)

می بینیم که فاصله مابین کلمات افزایش یافته است. علاوه بر px می توان از دیگر واحد ها مثل em هم استفاده کرد.

 

آشنایی با Property یی تحت عنوان line-height در سی اس اس (CSS)

در صنعت چاپ و نشر اصطلاحاً به فاصله مابین خطوط Leading گفته می شود (لازم به ذکر است که این واژه لدینگ تلفظ می شود نه لیدینگ). اگر در Property های سی اس اس (CSS) به دنبال چنین دستوری بگردیم مایوس خواهیم شد چرا که در سی اس اس (CSS) برای تعیین فاصله مابین خطوط از دستوری تحت عنوان line-height استفاده می شود. برای آشنایی بیشتر با این Property کد زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
   </body>
</html>

حال کد زیر را وارد فایل سی اس اس (CSS) می کنیم:

p {
line-height:normal;
}

همانطور که در کد فوق می بینیم یکی از مقادیری که می توانیم برای این Property در نظر بگیریم مقدار normal است. کاری که این Value انجام می دهد این است که مقدار پیش فرض را بسته به نوع فونت در نظر می گیرد. برای مشاهده نتیجه، این فایل را داخل مرورگر اجرا می کنیم:

line-height_in_css

علاوه بر این می توان مقداری عددی هم برای این Property در نظر گرفت:

p {
line-height:1.4;
}

کاری که این عدد انجام می دهد این است که اگر فرض کنیم اندازه فونت ۱۰ باشد مقدار line-height به میزان ۱.۴ معادل است با مقدار فونت ضرب در ۱.۴
علاوه بر این مقدار درصدی هم می توان برای این Property در نظر گرفت:

p {
line-height:140%;
}

۱۴۰% معادل است با فاصله بین خطوط به میزان ۱۴۰ درصد اندازه فونت.

لازم به ذکر است که به صورت پیکسلی هم می توان مقداری را برای این Property به صورت زیر در نظر گرفت:

p {
line-height:20px;
}

در نهایت اگر این مقدار را در body تعریف کرده باشیم، با در نظر گرفتن مقدار inherit می توان اندازه در نظر گرفته شده در body را برای p در نظر گرفت.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

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

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

توسط
تومان