تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


پیش از این در بخش آموزش مقدماتی css، از کاربرد این زبان، نحوه تعریف و استفاده از کلاس (class) و آی دی (id) صحبت کردیم، همچنین با نحوه کار رنگ ها و تصاویر پس زمینه (Backgrounds) و ویژگی های آنها بیشتر آشنا شدیم و مثال هایی را در این خصوص به صورت صفحاتی کمی و بیش ساده با الگوهای دلخواه، مرور کردیم، اکنون در ادامه بحث آموزش های مقدماتی css می خواهیم با یکی دیگر از کاربردهای این زبان آشنا شویم و آن کار با فونت و متن و بررسی تنظیمات آنها است.
کار با فونت (Font) در css:
همانطور که قبلا گفتیم، css به عنوان ابزاری کمکی در شکل دهی ظاهر محتوای صفحاوت وب (html) کابرد دارد، به عبارتی از آن برای ایجاد استایل های مورد نظر برای عناصر صفحات وب که می تواند به فرض فونت مطالب باشد، استفاده می شود.
تنظیم حروف چپ به راست یا راست به چپ با direction:


<style type="text/css">
body{
direction:rtl;
}
</style>

در css برای نمایش حروف راست به چپ (مثل زبان فارسی)، از عنصر direction استفاده می کنند.
direction می تواند مقادیر rtl برای حروف فارسی یا ltr برای حروف انگلیسی داشته باشد.
تعریف فونت در :css
در css فونت را در حالت کلی به شیوه های زیر تعریف می کنند.
تعریف مستقیم فونت:


<style type="text/css">
body{
font:Tahoma, Geneva, sans-serif
}
</style>


تعریف خانواده فونت:


<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
}
</style>


خانواده یک فونت می توانید برای مثال یکی از مقادیر زیر باشد:
- Verdana, Geneva, sans-serif
- Georgia, "Times New Roman", Times, serif
- Arial, Helvetica, sans-serif (مناسب برای حروف فارسی)
- Tahoma, Geneva, sans-serif (پرکاربردترین فونت برای حروف فارسی در وب)
فونت های بالا به ترتیب اولویت توسط مرورگر بررسی می شوند، اگر در سیستم کاربر فونت اول بود، دیگر از فونت های بعدی استفاده نمی شود، ولی اگر فونت اول وجود نداشت، نوبت به استفاده از فونت های بعدی می رسد، ذکر یک نکته ضروری است: استفاده از فونتهایی که در سیستم کاربران به طور پیش فرض وجود ندارد (مثل برخی از فونت های فارسی)، ممکن است موجب شود که کاربران صفحه شما، به همان شکلی که شما آن را می بینید، نتوانند مطالب را ببینند (به این دلیل که آن فونت خاص در سیستم آنها نصب نیست، لذا با نوع دیگری جایگزین می شود).
اندازه فونت یا font-size:
اندازه فونت ها در css با مقادیر px، em یا به صورت عبارات مشخص می شوند.


<style type="text/css">
body{
font-size:12px;
}
</style>


علاوه بر مقادیر پیکسلی می توان از em و یا عبارت تعریف شده در css استفاده کرد (البته توصیه می کنیم فقط از px استفاده کنید، چرا که استانداردتر است و در تمام مرورگرها به یک شکل پردازش می شود)؛ عباراتی که برای اندازه فونت به کار می روند عبارتند از:
- large (بزرگ)
- larger (بزرگتر از بزرگ)
- medium (معمولی)
- small (کوچک)
- smaller (کوچکتر از کوچک)
- x-large و xx-large (به ازای هر x یک مقدار بزرگتر از large)
- x-small و xx-small (به ازای هر x یک مقدار کوچکتر از small)
مقادیر پیکسلی به طور استاندارد از 9، 10، 12 شروع و به 36 ختم می شوند، مقادیر em از حاصل تقسیم مقادیر پیکسلی بر عدد 16 (16 اندازه پیش فرض فونت در مرورگر است) به دست می آید، مثلا 30px مساوی است با 1.875em، در مثال زیر از em استفاده شده.


<style type="text/css">
body{
font-size:0.875em;
}
</style>


کشیدگی (stretch) فونت:


<style type="text/css">
body{
font-stretch:condensed;
}
</style>


stretch یا کشیدگی فونت بیشتر در مورد حروف لاتین کاربرد دارد، با این حال مقادیر زیر را می توان برای stretch در نظر گرفت.
- condensed (فشرده)
- expanded (بسیط)
- extra-condensed (خیلی فشرده)
- extra-expanded (خیلی بسیط)
- narrower (باریک)
- normal (عادی)
- semi-condensed (تقریبا فشرده یا نیمه فشرده)
- ultra-condensed (خیلی خیلی فشرده)
- ultra-expanded (خیلی خیلی بسیط)
- wider (عریض)
استایل فونت یا font-style:
از استایل فونت می توان برای ایجاد متون کج شده یا مایل استفاده کرد.


<style type="text/css">
body{
font-style:oblique;
}
</style>


مقادیر استایل فونت:
- oblique (مایل)
- italic (کج)
- normal (عادی)
ضخامت فونت یا font-weight:
در css برای برجسته کردن یک فونت، می توان این کار را با خاصیت font-weight انجام داد، font-weight و font-style در css تقریبا عملکردی شبیه تگ های b، strong، em و i در html دارند.
برای ضخامت فونت می توانیم از مقادیر زیر استفاده کنیم.


<style type="text/css">
body{
font-weight:bold;
}
</style


- مقادیر عددی به صورت ضریبی از 100 تا 900 (100، 200، 300 تا 900).
- bold (ضخیم)
- bolder (خیلی ضخیم)
- lighter (نازک و سبک)
نکته: چند خاصیت دیگر نیز در css3 برای فونت وجود دارد که یا توسط برخی مرورگرها پشتیانی نمی شود یا اینکه کاربرد چندانی ندارد، از جمله font-size-adjust و font-variant.
برای آشنایی بیشتر با خاصیت های مربوط به فونت، در مثال زیر ما یک کلاس فرضی تعریف کرده ایم و متن موجود در آن را با عناصر فونت تنظیم نموده ایم.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>سفارش دات نت | کار با فونت در css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
.example{
 font-family:Tahoma, Geneva, sans-serif;
 font-size:12px;
 font-style:italic;
 font-weight:bold;
 direction:rtl;
}
</style>
</head>
<body>
<div class="example">
این متن به عنوان مثال با استفاده از ویژگی های فونت در css تنظیم شده است.
</div>
</body>
</html>

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


<style type="text/css">
body{
text-align:justify;
}
</style>


تزئین متن با text-decoration:
در css متن (و مخصوصا لینک) را با text-decoration تنظیم می کنند، مثلا اگر از این گزینه استفاده نکنید، بیشتر مرورگرها، لینک ها را به صورت متن زیرخط دار نشان می دهند.
مقادیری که در text-decoration استفاده می شود:
- blink (متن چشمکزن)
- line-through (متنی که خطی از داخلش گذشته یا بر روی آن خط کشیده شده)
- none (بدون موارد اضافه و حالت عادی)
- overline (متن با خطی روی آن)
- underline (متن زیر خط دار)
مثال:


<style type="text/css">
body{
text-decoration:none;
}
</style>


میزان فشردگی متن یا text-indent:
از این قابلیت بیشتر برای حروف انگلیسی (که بین آنها فاصله است) استفاده می شود و مقادیر آن را با پیکسل تعریف می کنند.
مثال:


<style type="text/css">
body{
text-indent:45px;
}
</style>


ایجاد سایه متن یا text-shadow:
text-shadow قابلیتی است که در css3 افزوده شده است، از این عنصر برای ایجاد سایه متن استفاده می شود؛ روش ایجاد آن به طور کلی به صورت زیر است:


<style type="text/css">
body{
text-shadow:5px 5px 2px #666;
}
</style>


اعداد در عبارت بالا به ترتیب نشانه فاصله افقی (horizontal shadow)، فاصله عمودی (vertical shadow)، فاصله ماتی (blur) و رنگ سایه است.
نکته: این امکان در مرورگر اینترنت اکسپلورر پشتیبانی نمی شود.
نمایش کوچک بزرگی حروف با text-transform:
text-transform قابلتی است در css که بیشتر برای حروف انگلیسی کاربرد دارد، چرا که می توان با آن حروف را بزرگ یا کوچک نشان داد، مقادیر text-transform عبارتند از:
- capitalize (حروف اول بزرگ نشان داده می شود)
- lowercase (تمام حروف کوچک نشان داده می شوند)
- uppercase (تمام حروف بزرگ نشان داده می شوند)
مثال:


<style type="text/css">
body{
text-transform:uppercase;
}
</style>


در خاتمه این بحث، توجه شما را به مثالی جلب می کنیم که در آن، متنی فرضی را با عناصر تنظیم کننده، شکل داده ایم.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>سفارش دات نت | تنظیمات متن در css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
.text{
 width:200px;
 height:auto;
 border:1px solid #666;
 padding:4px;
 margin-left:auto;
 margin-right:auto;
 direction:rtl;
 text-align:justify;
 text-transform:uppercase;
 text-shadow:2px 2px 2px #F90;
}
</style>
</head>
<body>
<div class="text">
این متن به عنوان مثال با استفاده از ویژگی های text در css تنظیم شده است.
</div>
</body>
</html>


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, خواهد, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین