ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

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

استفاده از Css برای فرمت دادن به متن در HTML 5 مطلب ویژه

توسط 05 تیر, 1393 4268 0

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

html5css3-fullیاد گرفتن چگونگی ایجاد قانون های شیوه یک دنیای جدید در فرمت های HTML  باز می کند. به صورت مجازی هر چیزی که بتوانید در یک برنامه واژه پرداز انجام دهید آن کار را می توانید با استفاده از شیوه در HTML نیز انجام دهید.

شاید تعجب کنید که چرا تگ های فرمت متن ساده ای که در بخش اول دیدید, مانند <b> و <i> , هنوز هم موجود هستند . w3c روی اعمال فرمت ها با استفاده از شیوه ها تمرکز زیادی کرده است که به این معنی است شما باید سعی کنید از فرمت های مبتنی بر شیوه که در این فصل و فصل بعدی یاد می گیرید استفاده کنید. با این حال این تگ های قدیمی هنوز هم به خوبی کار می کنند و مرورگر های وب نیز به پشتیبانی از فرمت های مبتنی بر تگ برای زمان زیادی ادامه خواهند داد. اگر هم اکنون یک وب سایت بزرگ ایجاد کرده اید که از تگ های فرمت استفاده می کند, لازم نیست برای ایجاد مجدد صفحات سایت با استفاده از شیوه ها عجله کنید . با این حال برای صفحات جدید بهتر است که کار را از همان ابتدا به درستی شروع کنید.

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


انتخاب یک خانواده قلم

تعیین قلم برای متن به یک صفحه می تواند کار خطرناکی باشد زیرا ممکن است همه کاربران آن قلم را روی کامپیوتر خود نصب نکرده باشند. حتی قلم هایی که همراه مایکروسافت ویندوز ارائه می شوند مانند courier new و Arial نیز به صورت جهانی پذیرفته شده نیستند زیرا همه کاربرانی که از وب استفاده می کنند یک کامپیوتر مبتنی بر ویندوز ندارند .

برای حل این مشکل , می توانید یک خانواده قلم(Font Famiily)  را به جای یک قلم منفرد مشخص کنید. یک خانواده قلم, یک سری از قلم ها است که بر حسب اولویت لیست شده اند. اگر کامپیوتری که صفحه شما در آن دیده می شود اولین قلم درون لیست را نداشته باشد, قلم دوم و سپس قلم سوم و همین طور تا قلم اخر را چک می کند تا یک قلم را پیدا کند. به عنوان مثال, در این جا چگونگی مشخص کردن یک خانواده قلم در یک قانون شیوه را می بینید :

 

P {font-family : 'arial', 'Helvetica' , sans-serif}

 

با این که هیچ قلمی به صورت جهانی بر روی همه کامپیوتر ها نصب شده نیست, اما چند نوع قلم هستند که به صورت کلی (بدون توجه به نام) روی همه کامپیوتر ها وجود دارند : قلم های serif, قلم های sans-serif , قلم های cursive , قلم های fantasy و قلم های تک فاصله (monospace) این نوع قلم های را کتیشن مارک به دور آن ها مشخص نمی کنید.

با مشخص کردن یک نوع قلم عمومی به عنوان قلم نهایی در خانواده, می توانید تضمین کنید که حداقل اخرین انتخاب شما وجود دارد . اگر مرورگر نتواند هیچ کدام از انتخاب های شما را پیدا مند. متن را با قلم پیش فرض خود نمایش می دهد.
همچنین می توانید یک خاصیت font-family را به تگ های منفرد اضافه کنید تا مطمئن شوید که متن برجسته شده است . در این جا چگونگی نسبت دادن خانواده قلم به یک پاراگراف را می بینید :

 

<p style='font-family: arial,  Helvetica, sans-serif'>

 
تعیین یک اندازه قلم و رنگ

می توانید اندازه یک قلم برای کل یک تگ پاراگراف را در یک برگه شیوه به این صورت تعیین کنید :

 

P {font-size: 12px}

 

با آن را در یک تگ پاراگراف مانند این قرار دهید :

 

<p style: font-size: x-small'>this text is extra-small.</p>

 

همچنین می توانید یک اندازه نسبی را به صورت درصدی از اندازه اصلی وارد کنید مانند 120% . روش دیگر برای مشخص کردن ناندازه نسبی استفاده از emها است . یک em یک ضریب از قلم اصلی است. به عنوان مثال 2em به معنی دو برابر اندازه اصلی یا 200% است .
به عنوان مثال می توانید متن های دارای تگ <h3> را دو برابر اندازه قلم اصلی کنید. برای این کار این کد را در برگه شیوه قرار می دهید:

 

H1 {font-size: 2em}

 

برای مشخص کردن رنگ قلم از خاصیت color استفاده می شود : مثال زیر رنگ پاراگراف ها را مشخص می کند :

P {color : blue}

 

مثال زیر برای یک تگ منفرد در پاراگراف استفاده می شود :

<p style='color: blue'> this is blue text.</p>

 

برای تعیین رنگ پس زمینه بر روی متن از کد زیر می توانید استفاده کنید : مثال برای پاراگراف ها :

 

P {background-color: yellow}

 یا برای یک نمونه منفرد از کد زیر استفاده می شود :

 

<p style='background-color: yellow'> this text has a yellow background.</p>

 
اعمال حالت تپر و ایتالیک

برای استفاده از حالت توپر در یک شیوه, از خاصیت font-weight استفاده می کنید. به عنوان مثال برای توپر کردن یک کلاس با نام boldface در برگه شیوه خود از چنین کدی استفاده می کنید :



Boldface {font-weight: bold}

 

مثال بالا برای پاراگراف :

 

P {font-weight: bold}

 

مثال بالا برای یک تگ منفرد پاراگراف :

<p style='font-weight: bold'>this text is bold</p>

 

یکی از مزیت های استفاده از شیوه برای اعمال حالت توپر به جای تگ <b> این است که می توانید مقدار شدت این جلوه را کنترل کنید. به عنوان مثال می توانید از حالت bolder,lighter یا یک مقدار عدد از 100 (روشن ترین) تا 900(تیره ترین) استفاده کنید و مقدار توپر شدن را تعیین کنید. با این حال تفاوت در این جلوه های تنها وقتی قابل دیدن است که از یک قلم استفاده نمایید که این قلم از چند سطح توپر بودن پشتیبانی کند.

برای اعمال فرمت ایتالیک از خاصیت font-style مانند مثال زیر برای پاراگراف استفاده می شود :



P {font-style= italic}

مثال بالا برای یک تگ منفرد پاراگراف :



<p style='font-style: normal'> this text is italic</p>


استفاده از خط زیر و خط روی متن

برای خط زیر و خط روی متن به ترتیب از تگ های <ins> و <del> استفاده می شود .
مثال :

 

<p> list prisce : <del>$24.00</del> <ins>now only $9.99</ins></p>

 

برای اعمال خط روی متن با استفاده از شیوه (روش جدید و صحیح تر ) . از خاصیت text-decoration استفاده می کنید . این خاصیت چند کلمه کلیدی را قبول می کند .

•    Underline (خط زیر)
•    Overline (خط بالای متن)
•    Line-through(خط روی متن)
•    Blink (متن چشمک زن)
•    None(همه حالت های بالا را حذف می کند.)
مثال :

 

<p style='text-decoration: underline'> this looks clickable, but is'nt.</p>

 
اعمال موارد بالا در یک برگه شیوه : مثال :

 

.underline {text-decoration: underline}

 
ایجاد اسپن های درون خطی :

یکی از مشکلات جایگزین کردن تگ های شیوه قدیمی مانند <b> , <i> , <del> با شیوه ها برای موارد منفرد این است که خاصیت style= باید درون یک تگ قرار گیرد . به عنوان مثال در جمله زیر , چگونه می توان از خاصیت<b> برای توپر کردن یک کلمه استفاده کرد ! ؟؟؟

 

<p>I had a <b>greet</b> time.</p>

 

عبارت greet هیچ تگی در اطراف خود ندارد و بنابراین جایی برای قرار دادن خاصیت style= وجود ندارد. راه حل ایجاد یک اسپن درون خطی (inline-span) است. یک اسپن در حقیقت یک پوسته به دور جایی است که می خواهید یک خاصیت به آن اضافه کنید. به عنوان مثال در جمله قبلی می توانید از اسپن برای تولید حالت مورد نظر استفاده کنید :



<p>I had a <span style='text-weight: bold'>greet</span> time.</p>

 

البته در این جا تایپ زیادی مورد نیاز است اما دلیل خوبی برای آن وجود دارد . با استفاده از یک اسپن , می توانید یک کلاس را اعمال کرده و با اعمال یک کلاس می توانید ساختاری یک دسته داشته باشید . به عنوان مثال فرض کنید که می دانید باید چند کلمه جدید را برجسته تر کنید اما تصمیم نگرفته اید که آیا می خواهید آن ها توپر, ایتالیک یا هر دو باشند. برای این حالت می توانید یک کلاس با نام vocabulary ایجاد کرده و این کلاس را به هر لغت اعمال کنید :



<span class=' vocabulary'>deciduous</span>

 

مثال بالا در یک برگه شیوه :

. vocabulary {font-style: italic}

 
تغییر فاصله بین حروف
برای اعمال فاصله حروف, یا کلمه , مقدار و نوع فاصله را به خاصیت style= یک تگ خاص اضافه می کنید :
مانند مثال زیر :



<p style='letter-spacing= 4px'>this text has increased letter spacing.</p>

 

مثال بالا بر روی یک برگه شیوه :



P {letter-spacing: 4px}

 

این مورد را ارزیابی کنید
(0 رای‌ها)
آخرین ویرایش در سه شنبه, 03 شهریور 1394 ساعت 15:49
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا