سلام بر کاربران همیشه همراه

امروز و در این ساعت نیز با شما هستیم با چعاردهمین جلسه از HTML که به ادامه مبحث CSS می پردازیم. در جلسه قبلی نحوه استفاده از دستورات CSS رو گفتیم و در این بخش برخی از دستورات CSS رو خدمت تون عرض خواهیم کرد. پس همراه ما باشید…

فونت در CSS

1. از color برای رنگ فونت استفاده می کنیم.

2. از font-family برای نوع فونت نمایشی به کاربر و

3. از font-size برای اندازه فونت نمایشی به کاربر استفاده می کنیم.

اینم یه مثال:

<!DOCTYPE html>
<html>

<head>
<style>
h1 {
    color:blue;
    font-family:verdana;
    font-size:300%;
}
p  {
    color:red;
    font-family:courier;
    font-size:160%;
}
</style>
</head>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>

توجه داشته باشید که تگ <font> در نسخه های قبلی HTML پشتیبانی می شد و نسخه 5 پشتیبانی نمیشه.

جعبه ای مانند

هر چیزی و هر یک از تگ های HTML دارای شکل باکس مانندی هستن. یعنی یه خط دورشون هست چه شما ببینین و چه نبینین. در CSS برای نمایش بردر یا همون خط دور المنت HTML که در انگلیسی هم border هست از دستور border استفاده می شود. برای مثال:

p {
    border:1px solid black;
}

برای فاصله میان داخلی در تگ ها از دستور padding در CSS استفاده می کنیم. اینم مثالش:

p {
    border:1px solid black;
    padding:10px;
}

هم چنین برای فاصله میان خارجی در تگ ها از دستور margin استفاده می کنیم. اینم مثالش:

p {
    border:1px solid black;
    padding:10px;
    margin:30px;
}

توجه داشته باشید که در زبان CSS واحد پیشفرض اندازه ها پیکسل px هست که مانیتورها نیز بر این اساس هستند.

خاصیت id

در کدنویسی CSS زمانی که دستوری می نویسید به همه ی تگ ها تاثیر میزاره. اما اگه بخواییم یه تگی رو با یه استایل خاص نمایش بدیم در ابتدا از خاصیتی با نام id استفاده می کنیم. این مثال HTML:

<p id="p01">I am different</p>

و اینم مثال CSS ش :

p#p01 {
    color:blue;
}

 خاصیت class

همونطور که گفتم یه دستور CSS میتونه به تمامی تگ ها اثر داشته باشه و برای نمایش یه تگ به صورت خاص و با یه استایل دیگه از خاصیتی با نام id استفاده کنیم. یه خاصیت دیگه هم هست با نام class که در واقع همون کار رو برامون انجام میده. این مثال HTML ش:

<p class="error">I am different</p>

و اینم مثال CSS ش:

p.error {
    color:red;
}

توجه داشته باشید از خاصیت class برای گروهی از المنت های HTML استفاده میشه و از خاصیت id برای یک المنت.

هم چنین بازم میگم در نسخه فعلی HTML تگ های <font> و <center> و هم چنین تگ <strike> پشتیبانی نمیشه و ولید نیست.

در خاصیت ها هم خاصیت های bgcolor و color نیز پشتیبانی نمیشه و ولید نیستند.

خب برای این جلسه کافی هست.

در پناه حق – آی وحید