بستن منو
۴۲
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با CSS
7
نمایش متن در CSS
7
ساخت حاشیه (border) در CSS
4
عکس ها در CSS
2
ساخت انیمیشن در CSS
6
لینک ها (links) در CSS
5
رنگ ها در CSS
1
مباحث عمومی در CSS
10
×

دانلود فروشگاه اندروید کلیدستان

540

نویسنده

علیرضا گلمکانی ( admin )

شماره کلید
دسته کلید - دسته بندی

تعیین فرم های خاص برای نمایش متن با مشخصه text-decoration در CSS

حتما فرم های مختلف نمایش متن ، مثل زیرخط دار بودن ، خط خورده بودن (خط بر روی متن) و ... را دیده اید . با استفاده از مشخصه text-decoration در CSS ، می توانیم تعیین کنیم که متن مورد نظرمان به صورت کدامیک از این فرم های خاص نمایش داده شود . علاوه بر این ، با استفاده از مشخصه text-decoration ، می توانیم تعیین کنیم که متن به صورت عادی نمایش داده شود ، زیرا ممکن است که متن توسط یک تگ HTML به صورت یکی از این فرم های خاص درآمده باشد و ما اکنون قصد داشته باشیم که نمایش آن را به صورت عادی دربیاوریم .

برای مشخصه text-decoration ، می توانیم هر یک از حالت های underline (یک خط زیر متن) ، line-through (یک خط روی متن) ، overline (یک خط بالای متن) و blink (متن به صورت چشمک زن) را انتخاب کنیم . به مثال زیر توجه کنید :

مثال

<html>
 
<head>
<style type="text/css">
#paragraph_1 {
                 text-decoration:underline;
             }  
#paragraph_2 {
                 text-decoration:line-through
             }  
#paragraph_3 {
                 text-decoration:overline;
             }  
#paragraph_4 {
                 text-decoration:blink;
             }                                                   
</style>
</head>
 
<body>

<p id="paragraph_1">paragraph number 1 .</p>
<p id="paragraph_2">paragraph number 2 .</p>
<p id="paragraph_3">paragraph number 3 .</p>
<p id="paragraph_4">paragraph number 4 .</p>

</body>
</html>

ابتدا هر یک از 4 پاراگراف را با یک id مشخص کرده ایم و سپس درون تگ style ، تعیین کرده ایم که مشخصه text-decoration برای هر یک از این پاراگراف ها به چه صورت باشد .

نتیجه :

Result

همان طور که مشاهده کردید در مثال بالا ، با مشخصه text-decoration ، فرم های خاص را برای نمایش متن ها تعیین کردیم . اما اکنون می خواهیم مثالی بزنیم که در آن ، یک متن دارای یک فرم خاص است ولی ما قصد داریم که فرم خاص آن را با استفاده از مشخصه text-decoration برداریم تا متن به صورت عادی نمایش داده شود . به مثال زیر توجه کنید :

مثال

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


<html>
 
<head>
</head>
 
<body>

<a href="#">لینک به بالای صفحه</a>

</body>
</html>

نتیجه :

Result

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


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

<a href="#">لینک به بالای صفحه</a>

</body>
</html>

درون تگ style ، تعیین کرده ایم که برای تمامی تگ های a که در کد HTML به کار رفته است ، متن به صورت عادی (بدون هیچگونه فرم خاص) نمایش داده شود . برای این منظور ، مشخصه text-decoration را برابر none انتخاب کرده ایم .

نتیجه :

Result

مشاهده می کنید که دیگر در زیر متن مربوط به لینک ، هیچ خطی نمایش داده نشده است .

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

خوانده شد
مبحث بالا، مفید بود و سایت کلیدستان را دوست داشتم :
محبوب کردن این مبحث در گوگل :
اون چیزی که میخواستم نبود :
سوال دارم :
ارسال نظر :
نظرات 0 0 0

*** نظر بدهید

دسترسی سریع

×

شماره کلید


کلید
×

شماره دسته کلید


دسته کلید
×

جستجو


جستجو

راهنمای مشخصه های CSS

راهنمای مشخصه های CSS بر اساس حرف اول مشخصه :

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

بستن منو
۳۵
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

CSS Tutorials
مجموعه ویدئوهای آموزشی CSS - مجموعه CSS Tutorials
35
بستن منو
۷
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

Sass & SCSS Tutorial for Beginners
مجموعه ویدئوهای آموزشی Sass و SCSS برای مبتدیان - مجموعه Sass & SCSS Tutorial for Beginners - از thenewboston.com
7
بستن منو
۸
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

Less CSS Tutorials for Beginners
مجموعه ویدئوهای آموزشی Less CSS برای مبتدیان - مجموعه Less CSS Tutorials for Beginners - از thenewboston.com
8
بستن منو
۵۸
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با HTML
24
نمایش متن، در HTML
5
نمایش عکس، در HTML
5
لینک ها (Link)، در HTML
1
لیست ها (List)، در HTML
1
جدول ها (Table)، در HTML
2
فرم ها (Form)، در HTML
10
مباحث عمومی، در HTML
10

آخرین کلیدهای غیررایگان

شما هم می توانید کلیدهای غیررایگان منتشر کنید (بیشتر بدانید)