بستن منو
۵۸
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با CSS
مباحث اولیه برای آشنایی با CSS
7
نمایش متن، در CSS
نمایش متن، در CSS
13
ساخت حاشیه (border)، در CSS
ساخت حاشیه (border)، در CSS
4
عکس ها، در CSS
عکس ها، در CSS
5
تعیین اندازه و موقعیت عنصرها، در CSS
تعیین اندازه و موقعیت عنصرها، در CSS
4
تغییر شکل عنصرها، در CSS
تغییر شکل عنصرها، در CSS
3
ساخت انیمیشن، در CSS
ساخت انیمیشن، در CSS
6
لینک ها (links)، در CSS
لینک ها (links)، در CSS
5
رنگ ها، در CSS
رنگ ها، در CSS
1
دکمه ها (Button)، در CSS
دکمه ها (Button)، در CSS
2
مباحث عمومی، در CSS
مباحث عمومی، در CSS
8
×

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

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
مجموعه ویدئوهای آموزشی CSS - مجموعه CSS Tutorials
35
بستن منو
۷
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

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

مباحث اولیه
مباحث اولیه برای آشنایی با LESS
مباحث اولیه برای آشنایی با LESS
4
بستن منو
۷۷
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با HTML
مباحث اولیه برای آشنایی با HTML
24
نمایش متن، در HTML
نمایش متن، در HTML
5
نمایش عکس، در HTML
نمایش عکس، در HTML
6
لینک ها (Link)، در HTML
لینک ها (Link)، در HTML
1
لیست ها (List)، در HTML
لیست ها (List)، در HTML
1
جدول ها (Table)، در HTML
جدول ها (Table)، در HTML
2
فرم ها (Form)، در HTML
فرم ها (Form)، در HTML
17
تعیین مشخصات کلی صفحه، در HTML
تعیین مشخصات کلی صفحه، در HTML
5
عناصر گرافیکی، در HTML
عناصر گرافیکی، در HTML
1
دکمه ها (Button)، در HTML
دکمه ها (Button)، در HTML
2
پخش صدا (Audio)، در HTML
پخش صدا (Audio)، در HTML
1
کار با کیبورد (Keyboard)، در HTML
کار با کیبورد (Keyboard)، در HTML
2
مباحث عمومی، در HTML
مباحث عمومی، در HTML
10
بستن منو
۴۲
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با W3.CSS
مباحث اولیه برای آشنایی با W3.CSS
11
متن ها (Text)، در W3.CSS
متن ها (Text)، در W3.CSS
1
رنگ ها (Color)، در W3.CSS
رنگ ها (Color)، در W3.CSS
6
عکس ها (Image)، در W3.CSS
عکس ها (Image)، در W3.CSS
9
خطوط حاشیه (border)، در W3.CSS
خطوط حاشیه (border)، در W3.CSS
3
حاشیه (Padding و Margin)، در W3.CSS
حاشیه (Padding و Margin)، در W3.CSS
1
کارت ها (Card)، در W3.CSS
کارت ها (Card)، در W3.CSS
1
فونت ها (Font)، در W3.CSS
فونت ها (Font)، در W3.CSS
1
فهرست ها (لیست - List)، در W3.CSS
فهرست ها (لیست - List)، در W3.CSS
4
راهنماها (Tooltip)، در W3.CSS
راهنماها (Tooltip)، در W3.CSS
0
انیمیشن ها (Animation)، در W3.CSS
انیمیشن ها (Animation)، در W3.CSS
5