سبک دهی به پاراگراف و لینک 5

در قسمت قبل کدهای خود را تا اینجا پیش بردیم

<html>

<head>

<style type=”text/css”>

body{
padding: 0px; 
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
background-color: #DDDDDD;
color: #333333;
}

</style>
</head>

<body>

</body>

</html>

امروز قصد داریم که تغیراتی را به پیشفرض های اچ تی تم ال تگ های پاراگراف و لینک بدهیم 

اول از تگ <p> که نمایانگر پاراگراف است شروع می کنیم مانند قبل می نویسیم {}p برای ایجاد فاصله بین متن پاراگراف از خاصیت line-height استفاده می کنیم

مانند line-height:1.5em;

و برای اندازه فونت از خاصیت font-size استفاده می شود

مانند  font-size: 1em;  

برای تغییر رنگ فونت هم از خاصیت color استفاده می کنیم
برای تغییر رنگ یا قرار دادن عکس پس زمینه background-color یا background-image استفاده می کنیم که ما اینجا قصد نداریم از این دو خاصیت را استفاده کنیم
پس مینویسیم

p{
font-size: 1em;
color: #333333;
line-height: 1.5em;
background-color:transparent;
}


توضیح : در اینجا ما رنگ پیش فرض را transparent قرار دادیم جاهایی که نیاز به رنگ نداریم نیز می توان به این شکل عمل کرد البته این کار اختیاری است

خاصیت لینک <a> :

مهمترین خاصیت یک لینک hover آن است یعنی با رفتن موس روی آن لینک در ساده ترین حالت تغییر رنگ می دهد

پس مینویسیم {}a برای تغییر رنگ ، نوع فونت ، اندازه فونت ، فاصله ها مانند بالا عمل می کنیم

برای قرار دادن hover نیز به شکل زیر عمل می کنیم

a:hover{
color: red;
}

برای برداشتن خط زیر لینک ها از خاصیت text-decoration استفاده می کنیم این خاصیت دارای پنج حالت است  حالتهای underline ، overline ، line-through  ، blink و حالت none که برای برداشتن خط ما از حالت آخر استفاده می کنیم 

a{
color: #3399FF;
text-decoration: none;
}

حال کل کدی که با هم ساختیم رو نگاه می کنیم

<html>

<head>
<style type=”text/css”>

body{
padding: 0px; margin: 0px;
font-family: Arial, Helvetica, sans-serif;
background-color: #DDDDDD;
color: #333333;
}

p{
font-size: 1em;
color: #333333;
line-height: 1.5em;
background-color:transparent;
}

a{
color: #3399FF;
text-decoration: none;
}

a:hover{
color: red;
}

</style>
</head>
<body>

</body>

</html>

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *