css برای پاراگراف

آموزش قبلی -| | | | |- آموزش بعدی

جهت استفاده از شیوه نامه درون صفحه ای از تگ style در قسمت head از صفحه استفاده می شود. به عنوان مثال کد زیر یک شیوه نامه صفحه ای در نظر می گیرد:

<head>
        <style>
            p{
                color: black;
                font-family: 'b yekan';
                direction: rtl;
                text-align: center;
                margin: 15px; 
            }
            .heading{
                font-size: 450%;
            }
            .maintext{
                font-size: 150%;
                color: mediumblue;
            }
        </style>
    </head>

همانطوریکه مشاهده می شود اولین دستوری که در تگ style آمده است دستور p‌ می باشد که برای پاراگراف بندی است. رنگ نوشته (color) فونت (font-family) جهت نوشته (direction) چینش نوشته (text-align) و حاشیه نوشته (margin) در آن مقدار دهی شده اند. در متونی که فارسی و انگلیسی دارند حتما باید جهت نوشته از نوع راست به چپ (rtl) تعیین شوند.

دستور بعدی با نقطه شروع شده است و بیانگر ایجاد یک کلاس است. از کلاس می توان در تمام دستورها استفاده کرد. که اندازه نوشته (font-size) در کلاس heading مشخص شده است.

دستو بعدی نیز یک کلاس است با نام maintext. دو صفت اندازه نوشته (font-size) و رنگ نوشته (color) مشخص شده اند.

<body>
    <div style="width: 100%; background-color: lightskyblue;direction: rtl;">
        <p class="heading">دانشکده فنی امام باقر</p>
    </div>

در دستور body یک بخش جدید به صفحه وب اضافه شده است که با دستور div مشخص شده است. در داخل دستور div شیوه نامه دستوری اعمال شده است. شیوه نامه دستوری با کلمه style در دستور مشخص می شود. مواردی نظیر پهنا (width) و رنگ پس زمینه (background-color) و جهت نوشته مشخص شده اند. که با کلاس heaading در دستور p نمایش می دهند.

<div style="width: 15%;
        float: right;background-color: lightskyblue;">
            
            <center><a href="images.jpg">
                <img src="send.png" width="100px" height="100px">
            </a></center>
            <a href="images.jpg">
                <p class="maintext">موشک</p>
            </a>
        </div>

یک بخش جدید در صفحه وب ایجاد شده است که در آن یک عکس که بصورت لینک درآمده نشان داده می شود. با کلیک بر عکس، آنرا با ابعاد واقعی نمایش می دهد. در زیر عکس نیز یک نوشته قرار دارد که از کلاس maintext استفاده می کند.

کد کامل صفحه وب در زیر آمده است:

<html>
    <head>
        <style>
            p{
                color: black;
                font-family: 'b yekan';
                direction: rtl;
                text-align: center;
                margin: 15px; 
            }
            .heading{
                font-size: 450%;
            }
            .maintext{
                font-size: 150%;
                color: mediumblue;
            }
        </style>
    </head>
    <body>
    <div style="width: 100%; background-color: lightskyblue;direction: rtl;">
        <p class="heading">دانشکده فنی امام باقر</p>
    </div>

        <div style="width: 15%;
        float: right;background-color: lightskyblue;">
            
            <center><a href="images.jpg">
                <img src="send.png" width="100px" height="100px">
            </a></center>
            <a href="images.jpg">
                <p class="maintext">موشک</p>
            </a>
        </div>
        <div style="width: 15%;
        float: right;background-color: lightskyblue;">
            
            <center><a href="images.jpg">
                <img src="send.png" width="100px" height="100px">
            </a></center>
            <a href="images.jpg">
                <p class="maintext">موشک</p>
            </a>
        </div>
    </body>
</html>