i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت به کلی متفاوت و کاملتر خواهد بود، این فرآیند زمانبر و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی مشخص است و به تناوب به روزرسانی می شود.
آگهی
article

ویژگی های Font و Text در CSS

css-font-text

پیش از این در بخش آموزش مقدماتی CSS از کاربرد این زبان استایل نویسی، نحوه تعریف و استفاده از سلکتور کلاس (Class) و آی دی (ID) صحبت کردیم، همچنین با نحوه کار رنگ ها و تصاویر پس زمینه (Background) و ویژگی های آنها بیشتر آشنا شدیم و مثال هایی را در این خصوص به صورت صفحاتی کمی و بیش ساده با الگوهای دلخواه مرور کردیم، اکنون در ادامه مباحث آموزش مقدماتی CSS می خواهیم با یکی دیگر از کاربردهای این زبان آشنا شویم و شیوه کار با فونت، متن و اعمال تنظیمات سفارشی بر روی آنها را بررسی کنیم، قابلیت های CSS در این بخش با توجه به نیاز صفحات وب عمدتا به دو دسته Font و Text تقسیم بندی می شوند که در ادامه مطلب با نحوه کار و جزئیات آنها آشنا خواهیم شد.

تنظیم حروف چپ به راست و راست به چپ در CSS با direction


انتخاب جهت متن معمولا نخستین گام ما در طراحی صفحات وب است، در CSS برای نمایش حروف از سمت راست به چپ (به طور مثال برای زبان فارسی) یا چپ به راست (حالت پیش فرض) از ویژگی direction استفاده می کنیم.
<style>
body{
    direction:rtl;
}
</style>
خاصیت direction می تواند مقادیر rtl برای حروف فارسی یا ltr برای حروف انگلیسی داشته باشد، عبارت RTL مخفف Right To Left و عبارت LTR مخفف Left To Right است.

فونت (Font) در CSS


همانطور که قبلا گفتیم CSS به عنوان ابزاری کمکی در شکل دهی ظاهر صفحاوت وب در کنار تگ های HTML کابرد دارد، به عبارتی از CSS برای ایجاد استایل مورد نظر و اعمال جلوه های سفارشی بر روی عناصر صفحات وب استفاده می شود، نمونه پرکاربرد و برجسته این عناصر، خانواده ویژگی های مربوط به فونت (Font) یا مرتبط با آن است که در ادامه به صورت موردی به بررسی آنها می پردازیم.

تعریف فونت در CSS با font و font-family


در CSS فونت را در حالت کلی به شیوه های زیر تعریف می کنیم.
- تعریف مستقیم فونت
در این حالت با استفاده از خاصیت font در CSS اسامی فونت های دلخواه را به عنوان مقدار در نظر می گیریم، این اسامی به ترتیب هستند و با علامت ویرگول (comma یا ,) از هم جداسازی می شوند، در هنگام پردازش صفحات وب مرورگر ابتدا به سراغ اولین فونت می رود، اگر به هر دلیل نتواند این فونت را بارگذاری کند فونت دوم بررسی و همین روال تا هر تعداد فونت تعریف شده ادامه خواهد داشت، در نهایت اگر مرورگر نتواند از هیچ کدام از فونت های در نظر گرفته شده استفاده نماید فونت پیش فرض اعمال خواهد شد.
<style>
body{
    font:Tahoma, Geneva, sans-serif;
}
</style>
- تعریف خانواده فونت
روش متداول دیگر استفاده از خاصیت font-family است، در این حالت علاوه بر اسامی فونت های مد نظر می توانیم خانواده فونت را نیز به عنوان مقدار تنظیم کنیم، منظور از "خانواده" فونت هایی هستند که در یک دسته بندی تعریف شده اند یا اطلاعات و شباهت های مشترکی دارند، انتخاب فونت اصلی طبق روال به صورت ترتیبی خواهد بود و اگر مرورگر نتواند فونت مد نظر را استفاده کند، فونتی را اعمال می کند که بیشترین شباهت را به خانواده در نظر گرفته شده داشته باشد، تعیین خانواده فونت ممکن است بین علامت های دابل کوتیشن ("" یا double quotation) درج شود، در این حالت فونت های بعدی باید از همان خانواده انتخاب شده باشند، مثال:
<style>
body{
    font-family:"Times New Roman", Times, serif;
}
</style>
خانواده فونت می تواند برای مثال یکی از مقادیر زیر باشد:
- Verdana, Geneva, sans-serif
- Georgia, "Times New Roman", Times, serif
- Arial, Helvetica, sans-serif (فونت پیش فرض مناسب برای حروف فارسی در وب)
- Tahoma, Geneva, sans-serif (پرکاربردترین فونت پیش فرض برای حروف فارسی در وب)
فونت های بالا به ترتیب اولویت توسط مرورگر بررسی می شوند، اگر در سیستم کاربر فونت اول در دسترس بود دیگر از فونت های بعدی استفاده نمی شود، اما اگر فونت اول وجود نداشت یا به هر دلیل در دسترس نبود، نوبت به استفاده از فونت های بعدی می رسد.
نکته 1: استفاده از فونت هایی که در سیستم کاربران به طور پیش فرض وجود ندارد (مانند برخی فونت های فارسی) ممکن است موجب شود که کاربران صفحه وب به همان شکلی که ما آن را می بینیم نتوانند مطالب را ببینند (به این دلیل که فونت مد نظر در سیستم آنها نصب نیست و قاعدتا با نوع دیگری جایگزین می شود) بر همین اساس اصطلاحی تحت عنوان Web Safe Font یا فونت مطمئن وب وجود دارد که توصیه می کند از فونت هایی در وب استفاده کنیم که در اغلب سیستم ها به طور خودکار نصب شده باشد، فونت sans-serif نمونه برجسته این مبحث است.
نکته 2: برای استفاده از فونت های فارسی دلخواه باید از قابلیتی به نام font-face در CSS استفاده کنیم، به جهت پیشرفته بودن این مبحث و جلوگیری از پیچیده شدن مطلب توضیح این مورد به صورت جداگانه در قسمت آموزش های کاربردی CSS صورت گرفته و در مطلبی با عنوان نحوه استفاده از فونت فارسی در وب در حال حاضر در سایت منتشر شده است.
نکته 3: در صورتی که از استایل خطی یا درون صفحه ای استفاده می کنیم باید همواره صفحه وب خود را در سرویس اعتبارسنجی W3C در آدرس زیر بررسی کنیم.
https://validator.w3.org
به طور مثال فونت Arial از نظر این سرویس نامعتبر است و نباید استفاده شود!

تعیین اندازه فونت در CSS با font-size


تعیین اندازه فونت در CSS با خاصیت font-size امکانپذیر است، اندازه فونت ها در این خاصیت با مقادیر px، em یا به صورت عبارات (به طور مثال large) مشخص می شود (em برگرفته از Element و px برگفته از Pixel است).
<style>
body{
    font-size:12px;
}
</style>
علاوه بر مقادیر پیکسلی می توانیم از em و یا عبارات تعریف شده در CSS استفاده کنیم، بهتر است اندازه فونت بلاک های اصلی و والد صفحه با px تعریف شوند، در حالت em اندازه ها معادل حاصل ضرب با اندازه پیکسلی فونت عنصر والد در نظر گرفته می شوند، به طور مثال اگر مقادیر font-size بلاک والد برابر 12 پیکسل باشد و در تگ فرزند از مقدار 2em استفاده کنیم در واقع معادل 24 پیکسل خواهد بود (24 = 12 * 2)، مثال:
<style>
.parent{
    direction:rtl;
    font-size:12px;
}
.child{
    font-size:2em;
}
</style>
<div class="parent">
فونت 12 پیکسل، مقدار دهی با px
<div class="child">
فونت 24 پیکسل، مقدار دهی با em
</div>
</div>
روش دیگر برای مقداردهی خاصیت font-size در CSS استفاده از عباراتی است که برای اندازه فونت به کار می روند:
- large (بزرگ)
- larger (بزرگتر از بزرگ)
- medium (معمولی)
- small (کوچک)
- smaller (کوچکتر از کوچک)
- x-large و xx-large (به ازای هر x یک مقدار بزرگتر از large)
- x-small و xx-small (به ازای هر x یک مقدار کوچکتر از small)
نکته: مقادیر پیکسلی به طور معمول از 10، 11، 12، 14، 16 شروع و به 36 ختم می شوند، در حالت پیش فرض و زمانی که عنصر والد مقدار پیکسلی برای font-size نداشته باشد، مقادیر em از حاصل تقسیم مقادیر پیکسلی مد نظر بر عدد 16 به دست می آید (16 اندازه پیش فرض فونت در اغلب مرورگرها است)، به طور مثال اگر بخواهیم 30px را معادل سازی کنیم مساوی با 1.875em خواهد بود (1.875 = 16 / 30).
در مثال زیر از em و مقداردهی با عبارات استفاده شده است.
<style>
body{
    direction:rtl;
}
.block-1{
    font-size:2.5em;
}
.block-2{
    font-size:small;
}
</style>
<div class="block-1">
فونت 40 پیکسل، مقدار دهی با em معادل با 2.5 * 16 = 40
</div>
<div class="block-2">
فونت small، مقداردهی با عبارات از پیش تعریف شده.
</div>
با توجه به اینکه در اینجا تگ والد تگ body است و مقدار اولیه ای برای font-size ندارد، عدد 16 به صورت پیش فرض در نظر گرفته می شود.

کشیدگی فونت در CSS با font-stretch


Stretch یا کشیدگی فونت بیشتر در مورد حروف لاتین و آن هم فونت های خاص کاربرد دارد، به هر حال جهت اطلاع مقادیر زیر را می توانیم برای خاصیت font-stretch در CSS درنظر بگیریم.
- condensed (فشرده)
- expanded (بسیط)
- extra-condensed (خیلی فشرده)
- extra-expanded (خیلی بسیط)
- narrower (باریک)
- normal (عادی)
- semi-condensed (تقریبا فشرده یا نیمه فشرده)
- ultra-condensed (خیلی خیلی فشرده)
- ultra-expanded (خیلی خیلی بسیط)
- wider (عریض)
مثال:
<style>
body{
    font-stretch:condensed;
}
</style>

استایل فونت در CSS با font-style


از font-style در CSS می توانیم برای ایجاد متون کج شده یا مایل استفاده کنیم.
<style>
body{
    font-style:oblique;
}
</style>
استایل فونت می تواند یکی از مقادیر زیر باشد:
- oblique (مایل)
- italic (کج)
- normal (عادی)

ضخامت فونت در CSS با font-weight


برای نمایش فونت به صورت برجسته می توانیم از خاصیت font-weight در CSS استفاده کنیم، خاصیت های font-weight و font-style در CSS به لحاظ جلوه ظاهری عملکردی مشابه با تگ های b، strong، em و i در HTML دارند.
<style>
body{
    font-weight:bold;
}
</style>
برای تعیین ضخامت فونت می توانیم از مقادیر زیر برای خاصیت font-weight استفاده کنیم.
- مقادیر عددی به صورت ضریبی از 100 تا 900 (100، 200، 300 تا 900).
- bold (ضخیم)
- bolder (خیلی ضخیم)
- lighter (نازک و سبک)
نکته: چند خاصیت دیگر نیز در CSS3 برای فونت وجود دارد که در حال حاضر یا توسط برخی مرورگرها پشتیانی نمی شود یا اینکه کاربرد چندانی ندارد، از جمله font-size-adjust و font-variant.
برای آشنایی بیشتر با خاصیت های مربوط به Font، در صفحه وب زیر سلکتورها و کلاس های فرضی تعریف کرده و متن موجود در آنها را با عناصر Font تنظیم نموده ایم.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ویژگی های فونت در CSS</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
}
.block {
    font-size: 14px;
}
.paragraph {
    font-size: 1.5em;
}
.font-stretch {
    font-stretch: condensed;
}
.font-style {
     font-style: oblique;
}
.font-weight {
    font-weight: 600;
}
</style>
</head>
<body>
جلوه ظاهری فونت در تگ body مقادیر 12px
<hr>
<div class="block">
جلوه ظاهری فونت در کلاس فرضی block مقداردهی با px مقادیر 14px
<p class="paragraph">
جلوه ظاهری فونت در کلاس فرضی paragraph مقداردهی با em مقادیر 1.5em معادل (1.5 * 14 = 21px)
</p>
</div>
<hr>
<div class="font-stretch">
جلوه ظاهری فونت در کلاس فرضی font-stretch<br><br>
خاصیت font-stretch تنها بر روی فونت هایی قابل اعمال است که این امکان در هنگام طراحی فونت در قسمت Face برای آن تعریف شده باشد (دارای Face های متعدد باشد)، این خاصیت در عمل چندان کاربردی نیست و باید فونت های خاص برای آن تعریف کرد!
</div>
<hr>
<div class="font-style">
جلوه ظاهری فونت در کلاس فرضی font-style مقادیر oblique
</div>
<hr>
<div class="font-weight">
جلوه ظاهری فونت در کلاس فرضی font-weight مقادیر 600
</div>
</body>
</html>
پیش نمایش

متن (Text) در CSS


تعریف نوع فونت و ویژگی های آن گام اول برای نمایش محتوا در صفحات وب است، در قدم بعدی نیاز به تنظیم چینش مطالب و نحوه نمایش آنها است که این جلوه های ظاهری با خانواده ویژگی های مربوط به Text ایجاد می شوند.

تنظیم تراز و چینش متن در CSS با text-align


برای تنظیم متن صفحه وب به صورت چپ چین، وسط چین، راست چین و تمام چین، باید از خاصیت text-align و یکی از مقادیر زیر استفاده کنیم.
- left (چپ چین کردن متن)
- center (تنظیم گوشه ها و تراز متن در وسط)
- right (راست چین کردن متن)
- justify (تمام چین کردن متن، پوشش حداکثری از سمت چپ و راست)
مثال:
<style>
p{
    text-align:justify;
}
</style>

تزئین متن در CSS با text-decoration


در CSS متن و مخصوصا لینک ها را با خاصیت text-decoration تنظیم می کنیم، به طور مثال اگر از این گزینه استفاده نکنیم بیشتر مرورگرها به صورت پیش فرض عبارات لینک شده را به صورت متن زیرخط دار نمایش می دهند.
مقادیری که برای ویژگی text-decoration قابل استفاده هستند:
- blink (متن چشمکزن)
- line-through (متنی که خطی از داخلش گذشته یا بر روی آن خط کشیده شده)
- none (بدون موارد اضافه و حالت عادی)
- overline (متن با خطی روی آن)
- underline (متن زیر خط دار)
مثال:
<style>
a{
    text-decoration:none;
}
</style>
با در نظر گرفتن مقادیر none برای text-decoration در سلکتور a، تمام لینک های صفحه وب به صورت بدون زیرخط نمایش داده می شوند.

میزان تو رفتگی متن در CSS با text-indent


از ویژگی text-indent در حالتی استفاده می کنیم که بخواهیم خط ابتدای یک پاراگراف نسبت به سایر خطوط به اندازه دلخواه تو رفتگی (فضای خالی پیش از شروع متن) داشته باشد، مقادیر خاصیت text-indent می تواند به صورت px، em یا درصدی باشد.
مثال:
<style>
p{
    text-indent:45px;
}
</style>
امکان در نظر گرفتن مقادیر منفی نیز برای خاصیت text-indent وجود دارد، همچنین می توانیم از دو مقدار آزمایشی hanging و each-line بعد از در نظر گرفتن مقدار عددی استفاده کنیم، مثال:
<style>
p{
    text-indent:4em hanging;
}
</style>
در نظر گرفتن مقادیر hanging باعث برعکس شدن حالت پیش فرض خاصیت text-indent می شود، یعنی تمام خطوط به جزء خط اول حالت تو رفتگی خواهند داشت، همچنین استفاده از مقادیر each-line باعث می شود تا حالت تو رفتگی علاوه بر خط اول پاراگراف به خطوطی که به طور مثال با تگ br شکسته شده اند نیز سرایت کند، یادآور می شویم که hanging و each-line در حال حاضر به صورت آزمایشی معرفی شده اند و ممکن است در مرورگرهای مختلف به درستی عمل نکنند.

ایجاد سایه متن در CSS با text-shadow


خاصیت text-shadow در CSS3 معرفی شد، همان طور که از عبارت shadow مشخص است از این ویژگی برای ایجاد متن سایه دار استفاده می شود، مقداردهی text-shadow به طور کلی به صورت زیر است:
<style>
.text{
    text-shadow:5px 5px 2px #666;
}
</style>
اعداد در مقداردهی بالا به ترتیب نشانه فاصله افقی (Horizontal Shadow محور Xها)، فاصله عمودی (Vertical Shadow محور Yها)، فاصله ماتی (Blur) و رنگ سایه است.
نکته: خاصیت text-shadow در نسخه های ماقبل 10 مرورگر اینترنت اکسپلورر پشتیبانی نمی شود.

حروف کوچک و بزرگ در CSS با text-transform


خاصیت text-transform قابلیتی است در CSS که بیشتر برای حروف انگلیسی کاربرد دارد، به کمک این ویژگی می توانیم حروف را به صورت بزرگ یا کوچک نمایش دهیم، مقادیر خاصیت text-transform عبارتند از:
- capitalize (حروف اول بزرگ نشان داده می شود)
- lowercase (تمام حروف کوچک نشان داده می شوند)
- uppercase (تمام حروف بزرگ نشان داده می شوند)
مثال:
<style>
p{
    text-transform:uppercase;
}
</style>
برای آشنایی بیشتر با خاصیت های مربوط به Text، در صفحه وب زیر سلکتورها و کلاس های فرضی تعریف کرده و متن موجود در آنها را با عناصر Text تنظیم نموده ایم.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ویژگی های متن در CSS</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
}
a {
    text-decoration: none;
    font-size: 14px;
}
a:hover {
    text-decoration: underline;
}
p {
    text-align: justify;
    width: 200px;
    border: 1px solid #3F9C0C;
}
.indent {
    text-indent: 50px;
    border: 1px solid #2270D9;
}
.shadow {
    text-shadow: 5px 5px 2px #666;
}
.transform {
    text-transform: capitalize;
    border: 1px solid #7639E7;
}
.ltr {
    direction: ltr;
}
</style>
</head>
<body>
جلوه ظاهری متن و <a href="#" title="لینک">لینک</a> در تگ body، با توجه به درنظر گرفتن مقادیر none برای خاصیت text-decoration در سلکتور a، لینک بدون زیرخط نمایش داده می شود، اما در حالت hover و زمانی که نشانه گر ماوس را روی لینک می بریم، حالت underline خواهد داشت.
<hr>
<p>
متن در این پاراگراف با خاصیت text-align و مقادیر justify تنظیم شده است، justify باعث نمایش متن به صورت تمام چین می شود و فضای خالی از هر دو سمت چپ و راست پر خواهد شد.
</p>
<hr>
<p class="indent">
تو رفتگی متن در این پاراگراف با خاصیت text-indent و مقادیر 50px تنظیم شده است، همان طور که اشاره شد مقادیر hanging و each-line در حال حاضر در مرحله آزمایشی قرار دارند و بهتر است به صورت کاربردی استفاده نشوند.
</p>
<hr>
<div class="shadow">
متن سایه دار در CSS با خاصیت text-shadow ایجاد می شود.
</div>
<hr>
<div>
جلوه ظاهری متن زبان انگلیسی در کلاس فرضی transform:<br>
<p class="transform ltr">CSS is easy and powerfull!</p>
</div>
</body>
</html>
پیش نمایش 
sectionدسته بندی: آموزش مقدماتی » CSS
related مطالب بیشتر:
» خاصیت Background و ویژگی های آن در CSS
» کاربرد ویژگی position و float در CSS
» کاربرد خاصیت height و width در CSS
» نحوه تنظیم لیست با تگ ul li در CSS
» کاربرد خاصیت display در CSS
commentنظرات (۲۸ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: محمد
زمان: ۱۲:۰۱:۲۳ - تاریخ: ۱۳۹۱/۰۷/۲۱
با سلام بخشید چطوری میتونیم تو css یه دستوری بنویسم که اگه فونتی رو کاربر در سیستمش نداشت از سمت سرور اون فونت براش ارسال بشه تا مشکلی پیش نیاد؟
پاسخ: 
برای این کار باید از ویژگی font-face@ در CSS3 استفاده کنید، این موضوع در آموزش زیر به طور کامل توضیح داده شده است:
آموزش استفاده از فونت فارسی در وب با CSS
نویسنده: nasser
زمان: ۱۱:۰۸:۲۱ - تاریخ: ۱۳۹۲/۰۲/۰۶
با تشکر از شما
نویسنده: علیرضا
زمان: ۰۲:۳۷:۲۴ - تاریخ: ۱۳۹۲/۰۴/۱۴
ببخشید طور میتونم داخله php رنگ نوشته رو تغییر بدم مثلا: وقتی خطا میشه به رنگ قرمز
 die("خطا در ورد اطلاعات");
مثلا: وقتی موفقیت آمیز بود به رنگ سبز:
die("موفقیت آمیز بود");
پاسخ: 
می توانید خروجی را به صورت یک بلاک div به همراه یک کلاس CSS ارسال کنید:
die('<div class="ok">موفقیت آمیز بود</div>');
البته برای نمایش خطا روش die توصیه نمی شود، چون باعث عدم اجرای ادامه کدها می شود.
نویسنده: مصطفی
زمان: ۲۱:۳۴:۴۵ - تاریخ: ۱۳۹۲/۰۸/۰۲
با تشکر فراوان واقعا خیلی ها چشم امیدشون فقط به همین سایته
می خواستم بدونم چطور میشه مثلا یه teaxtarea ساخت که رنگ پس زمینش رو خودمون تعیین کنیم برای مثال قرمز بزاریم
پاسخ: 
می توانید برای textarea یک کلاس CSS در نظر بگیرید و در آن کلاس از خاصیت background یا background-color استفاده کنید، مثال:
<style>
.my-class{
background:#F7F7F7;
border:1px solid #CCC;
}
.my-class:hover{
background:#EFEFEF;
border:1px solid #CCC;
}
.my-class:focus{
background:#E5E5E5;
border:1px solid #999;
}
</style>
<textarea class="my-class" cols="80" rows="20"></textarea>
نویسنده: مصطفی
زمان: ۲۲:۵۷:۵۶ - تاریخ: ۱۳۹۲/۰۸/۰۶
ممنون از زحماتتون
ایا میشه با سی اس اس مثلا یه حالت سایه مانند یا شیار مانند دور عناصر بوجود اورد مثلا می خوایم دور یه input text یه مقدار سایه داشته باشه
پاسخ: 
باید از قابلیت های CSS3 دین منظور استفاده کنید، در چند مطلب در این خصوص صحبت کرده ایم، عبارت "زیبا سازی" و "CSS3" را در قسمت جستجو وارد کنید.
نویسنده: tekide
زمان: ۰۰:۴۳:۲۴ - تاریخ: ۱۳۹۲/۱۰/۲۷
ممنون. و خسته نباشید
نویسنده: الهام
زمان: ۱۲:۴۷:۱۷ - تاریخ: ۱۳۹۲/۱۱/۰۴
سلام . اگر بخواهیم هنگامی که کاربر بخواهد پیغام و یا اخباری را بر روی سایت بگذارد بالای textbox مربوط به نوشتن پیغام دکمه های راست چین و چپ چین و یا گذاشتن عکس و ویرایش و حذف قرار داده بشه و یا بتونه فونت مورد نظر خودش را برای متن انتخاب کنه ، چیزی شبیه به امکانات Word چی کار باید بکنم؟
پاسخ: 
چیزی که به دنبال آن هستید WYSIWYG نام دارد که مخفف What You See Is What You Get است، در وب برای داشتن این ادیتور دو انتخاب دارید:
- استفاده از ادیتورهای رایگان موجود مانند TinyMCE، CKEditor و... (برای این مورد در وب جستجو کنید).
- طراحی یک ادیتور شخصی (نیاز به داشتن تجربه بالا و تخصص در حد حرفه ای در کدنویسی جاوا اسکریپت دارد).
نویسنده: golnar
زمان: ۱۹:۰۵:۲۵ - تاریخ: ۱۳۹۳/۰۱/۰۶
چطور میشه با CSS فاصله بین خطوط متنی را تغییر داد؟
پاسخ: 
از خاصیت line-height با مقادیر پیکسلی یا درصدی استفاده کنید.
نویسنده: reza
زمان: ۱۷:۵۲:۱۶ - تاریخ: ۱۳۹۳/۰۳/۰۵
سلام. من یه جدول دارم که هر سطر و ستونش اندازه ی بخصوصی داره و کاربران میتونن داخلش متن بنویسن ولی مشکلم اینه که اگه کاربر از enter استفاده کنه خط شکسته میشه و جدول بطور افقی کشیده میشه چطور کاری کنم که اندازه ی ستونهای جدول ثابت بمونه
پاسخ: 
دقیقا متوجه نشدیم منظورتان چه نوع جدول و در چه محیطی است، اما اگر منظور جدول HTML و تحت وب است، می توانید یک مقدار پیکسلی ثابت به تگ table و td اختصاص دهید تا محتوای اضافه باعث شکستن اندازه ها نشوند.
نکته: خاصیت overflow نیز باید به صورت scroll یا auto تنظیم شود.
نویسنده: reza
زمان: ۱۲:۵۸:۱۸ - تاریخ: ۱۳۹۳/۰۳/۰۶
اره منظورم html هست ایا باید از max height و max width استفاده کنم من میخوام اندازه ی سطر و ستون ها همیشه ثابت بمونه حتی اگه نوشته ای درون جدول از اندازه ی سطر و ستونها بیشتر بشه.
پاسخ: 
با اختصاص height و width به صورت پیکسلی و در نظر گرفتن مقدار scroll برای overflow اندازه سلول ها ثابت مانده و تنها در صورتی که محتوا از سلول بیشتر باشد، اسکرول خواهید داشت (که قاعدتا هم باید به همین نحو باشد، به هر حال محتوا باید به نحوی نمایش داده شود!)، استفاده از max height و max width ضرورتی در این خصوص ندارد (البته ضرری هم ندارد!).
نویسنده: omid
زمان: ۲۳:۴۰:۵۱ - تاریخ: ۱۳۹۳/۰۳/۱۴
سلام
text-decoration:
حالت چشمکزن اصلا کار نمیکنه لطفا راهنمایی کنید .
با تشکر از زحماتتون
پاسخ: 
ظاهرا مرورگرها در نسخه های جدید خود به پشتیبانی از این خاصیت خاتمه داده اند و به جای آن از animation که جزء خاصیت های CSS3 است باید استفاده کرد، مثال:
<style>
.blink{
animation: blink 1s steps(5, start) infinite;
-webkit-animation: blink 1s steps(5, start) infinite;
}
@keyframes blink{
to{
visibility: hidden;
}
}
@-webkit-keyframes blink{
to{
visibility: hidden;
}
}
</style>
<div class="blink">متن چمکزن</div>
نویسنده: سجاد
زمان: ۱۳:۳۸:۳۸ - تاریخ: ۱۳۹۳/۰۴/۲۹
سلام،
چطور میشه یه نیم جمله ی فارسی رو justify کرد. مثلاً مصراع های فرد یک غزل رو چطور میشه طوری justify کرد که همه فضای یکسانی رو اشغال کنند ؟
مرسی.
پاسخ: 
به طور کلی چنین کاری ممکن نیست، خاصیت justify در حالتی است که متن بیش از یک خط باشد و خط های ماقبل آخر از دو طرف کشیده می شوند، اما در حالتی که متن یک خطی است، تنها به یک طرف کشیده می شود، راه حل نسبی رفع این رفتار، استفاده از خاصیت letter-spacing با یک مقدار پیکسلی در کنار justify است که البته موجب جدا شدن حروف از هم می شود.
نویسنده: مهدی
زمان: ۰۱:۳۲:۳۲ - تاریخ: ۱۳۹۳/۰۵/۲۴
خیلی عالی بود بسیار ممنون.
خیلی کارامد. ممنون
نویسنده: زهرا
زمان: ۰۰:۵۳:۳۴ - تاریخ: ۱۳۹۳/۰۸/۰۳
ممنون از سایت خوبتون
چطور میشه وقتی در یک لیست روی موردی, ماوس رو میبریم حرف اول آن تغییر رنگ دهد ؟
پاسخ: 
برای این کار باید از جاوا اسکریپت استفاده کنید، نمونه کد:
<style>
.word-block{
width:200px;
background-color:#FCEFBA;
}
.word-red{
color:#F00E12;
}
</style>
<script>
function letterColor(id){
var element = document.getElementById(id);
var regex = new RegExp(/<span class="word-red">.*<\/span>/i);
if((element.innerHTML.search(regex)) == -1){
element.innerHTML = element.innerHTML.replace(/(.{1})(.*)?/gi, '<span class="word-red">$1</span>$2');
}
}
</script>
<div id="word" class="word-block" onmouseover="letterColor(this.id);">تست</div>
نویسنده: علی
زمان: ۰۱:۲۵:۴۱ - تاریخ: ۱۳۹۳/۰۹/۲۵
سلام و خسته نباشید. کد font-thin که برای کوچک کردن تگ h1 , h2 , .... استفاده میشه از نظر موتور های جستجو کار اشتباهیه؟ ممنون میشم اگه راهنماییم کنین
پاسخ: 
طبق تجربه موتورهای جستجو نسبت به خاصیت های CSS (به جزء مواردی مانند مخفی کردن کلید واژه ها و...) حساسیت خاصی ندارد!
paged صفحه 1 از 2
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




2 × 5
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آگهی
سفارش آگهی
Webgoo.ir

امکان بهره مندی از تخفیف