آشنایی مقدماتی با صفت style در html

در این مقاله با صفت style و برخی مقادیر مهم و پر کاربرد آن آشنا می‌شوید. از style برای ایجاد ساختارهای ظاهری المان‌های html استفاد می‌شود.

صفت style چیست؟

تاکنون موفق شدیم در خصوص برخی از تگ‌های html، صفت‌ها و کاربردهای آنها در المان‌ها یا عناصر htmll، توضیحاتی را ارائه دهیم. وقت آن رسیده است که شما را با یک صفت جالب آشنا کنیم که چیزی نیست جز style. در واقع این صفت برای رنگ و لعاب و فرمت خاص بخشیدن به المان‌ها یا عناصر html به کار می‌رود. البته لازم به ذکر است که روش‌های استانداردتری برای این کار هم وجود دارد که بعدا آنها را ر وبسایت نیوسان وب ذکر خواهیم کرد. با این وجود یادگیری همین style هم به نوعی پیش‌نیاز آنهاست که لازم است ابتدا تا حد قابل قبولی این مبحث را یاد بگیرید و سپس به سایر مباحث وارد شوید. اگر بخواهیم در خصوص style توضیحی کلی ارائه دهیم باید بگوییم که در حقیقت در اکثر موارد، توسط این صفت، ظواهر عناصر html قابل تغییر است. برای اینکه قصد داریم تا بتوانیم در آینده، توضیحات بیشتر و کاملتری در خصوص سایر تگ‌های html بدهیم، لازم است که همینجا تا حدودی با این صفت آشنایی داشته باشید.

توجه کنید که در این مقاله برای اینکه درک صحیحی از آموزش داشته باشید، ایتدا آن را در visual studio code پیاده سازی کرده و سپس به صورت آنلاین برای شما بارگذاری خواهم کرد تا در دسترس عموم باشد.

روش استفاده از style

برای استفاده از style به روش سایر صفات عمل می‌کنیم. یعنی style را در داخل تگ نوشته و سپس علامت مساوی و دو دابل کوتیشن قرار میدهیم. در داخل این کوتیشن‌ها باید ویژگی‌ها و مقادیر مورد نظرمان را برای هر تگ بنویسیم. اما مهمترین ویژگی‌ها و مقادیری که این صفت می‌پذیرد چه مواردی هستند؟ هرچند توسط این صفت تعداد زیادی از ویژگی‌های مربوط به یک المان html قابل تغییرند اما مهم ترین آنها عبارتند از: رنگ فونت، رنگ پس زمینه، ایجاد خطوط مرزی، اندازه فونت، نوع فونت، تنظیمات آرایش متن و …

خب تئوری کافیست! برای اینکه در عمل با این attribute کار کنیم، یک پوشه 007 ایجاد می‌کنیم و در آن توسط visual studio code یک فایل html به نام Index را ایجاد می‌کنیم. کدهای زیر را در آن می‌نویسیم و نتایج را بررسی می‌کنیم:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Newsunweb</title>
</head>

<body>

    <div>
        <p style="background-color:red; color:white; text-align:justify; font-size:20px; font-weight: bold; border:solid 1px black;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Varius morbi enim nunc faucibus a pellentesque.
        </p>

        <p style="background-color:green; color:yellow; text-align:left; font-size:10px; font-weight: normal; border:solid 2px black;">
            Lorem ipsun diam in arcu cursus euismod.
        </p>
    </div>

    <div style="background-color:black; color:yellow; text-align:right; border:solid 2px gray;">

        <img src="https://newsunweb.com/img/sm-نیوسان-وب.png" width="150" height="150" title="newsunweb"
            alt="newsunweb" />

    </div>
    <hr>
    <hr>
    <span style="background-color:green; color:yellow; text-align:left; font-weight: normal; border:solid 2px black;">
        this is a <strong style="color:skyblue;">Newsunweb</strong> tutorial.
    </span>
</body>

</html>

برای دیدن کد و نتیجه آن و همچنین تغییر مقادیر بالا می‌توانید به این لینک که به صورت آنلاین کدهای بالا را در اختیار شما قرار داده ایم هم مراجعه کنید.

خب همانطور که دیدید در این مثال از تعدادی از تگ‌هایی که تاکنون معرفی کردیم، استفاده کردیم؛ در اینجا تا حدودی از نظر ظاهر تغییرات قابل لمس و زیادی نسبت به قبل داشتیم. از رنگ ها گرفته تا سایر تغییراتی که مشاهده کردید؛ به این ترتیب که از background-color و سپس دو نقطه برای اختصاص دادن رنگ پس زمینه، از color برای رنگ متن، از text-align برای جهت متن یا ترازبندی آن که ممکن است مقادیری چون light، left، justify و center را به خود بگیرد، از font-weight برای ضخامت بخشی به متن که مقادیری مثل lighter، light، normal، bold، bolder و … را به خود می‌پذیرد، از font-size برای دادن اندازه به فونت متن که ممکن است بر اساس پیکسل یا سایر واحدها باشد (در مثال اینجا از px که همان پیکسل است استفاده کردیم) و از border که شامل نوع خط مرزی ( solid، double، groove، dashed، dotted و …)، اندازه و رنگ آن بود استفاده کردیم. برای مجزا کردن دو ویژگی از یک صفت هم از نقطه ویرگول (;) استفاده کردیم که البته پس از مقداردهی به ویژگی پایانی، اجباری در این کار وجود ندارد.

شما می‌توانید برای تمرین بیشتر هر یک از مقادیر گفته شده را دستکاری کنید و نتایج را مشاهده کنید. این هم لازم به ذکر است که رنگ به شکل‌های مختلف از جمله rgb، rgba، hsl، هگزادسیمال و … قابل نمایش است که به عنوان مثال مقادیر معادل آنها را می‌توانید از این سایت بیابید و به جای مقدار آنها به کار ببرید یا از رنگ‌های مختلف سفارشی هم استفاده کنید. در خصوص رنگ‌ها، ایجاد طیف‌های مختلف رنگی و سایر ویژگی‌های آن در آینده توضیحات کامل‌تری خواهیم داد.

جمع‌بندی و سخن پایانی

آنچه در پایان برای جمع‌بندی باید بگوییم این است که صفت style ویژگی‌های بسیار زیادی دارد که تعدادی از آنها در بالا معرفی شد و برخی از آنها نیر در جای مناسب خود در همین وبسایت نیوسان وب در آینده معرفی خواهند شد. در اینجا این صفت را معرفی کردیم تا به زودی بتوانیم محدوده‌های هر تگ را با استفاده از رنگ‌ها مشخص کنیم و توضیحاتی که تاکنون دادیم را تکمیل کنیم. برای مثال در بحث عناصر که به شکل inline یا block هستند که قبلا به شکل تئوری توضیحاتی در خصوص آنها دادیم، به این صفت و ویژگی‌های آن نیاز پیدا خواهیم کرد تا دو مفهوم مذکور را به شکل عملی و بهتر توضیح دهیم. همچنان با نیوسان‌وب همراه باشید تا شما را با آموزش اصول طراحی سایت بیشتر آشنا کنیم.

لینک این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید.