برای کارایی کامل و بهتر این پلتفرم، باید جاوا اسکریپت مرورگر خود را فعال کنید.

آموزش CSS: نحوه معرفی استایل به سایت (پارت دوم)

بی تاک

در پارت اول آموزش CSS با مفاهیم ابتدایی این زبان آشنا شدید، در این پارت قصد داریم نحوه معرفی کدهای استایل به یک فایل HTML یا یک صفحه از سایت را آموزش دهیم. با بی تاک همراه باشید.

بی تاک

استایل های درون خطی - In-line

ساده ترین و سریع ترین و دقیق ترین روش برای اینکه مطمئن شویم یک خاصیت استایل روی تگ موردنظرمان اجرا می شود و سایر تگ های سایت این استایل را استفاده نمی کنند، استفاده از حالت استایل دهی درون خطی یا inline است. در این حالت ما خاصیت های استایل را به صورت یک پارامتر داخل خود تگ HTML اضافه می کنیم تا بر روی آن تگ اجرا شوند.

مثال:

<p style="font-size: 14px; font-family: Tahoma;">این یک پاراگراف عادی است</p>

طبق کد بالا ما با استفاده از پارامتر style داخل تگ، اندازه فونت و نام فونت یک پاراگراف خاص را تعیین کردیم.

خاصیت های استایل را داخل گیومه " وارد کنید.
خاصیت ها را با نقطه ویرگول ; از هم جدا کنید.
در هر تگ تنها یک پارامتر style استفاده کنید و تمامی استایل ها را داخل آن اضافه کنید.

معایب این روش:

از نظر استانداردهای سئو، باید تاحد امکان از استفاده از چنین استایل هایی خودداری کرد چرا که تعداد زیاد چنین استایل هایی باعث سنگین شدن سورس سایت و طولانی شدن مدت زمان لود سایت می شود.
در این حالت از استایل دهی، بسیاری از سلکتورهای عملیاتی قابل اعمال نیستند. برای مثال سلکتورهایی مثل :hover که برای اعمال خاصیت استایل در زمان بردن موس روی تگ موردنظرمان است را با این روش نمی توانیم استفاده کنیم.

بی تاک

مجموعه استایل داخل کدهای HTML

در این حالت از تعریف استایل ها، ما به تگ های HTML موردنظرمان کلس یا آی دی دلخواه داده و سپس دستورات استایل را به صورت عادی می نویسیم. سپس داخل کدهای HTML سایتمان، تگ <head> را پیدا کرده و کدهای استایل را به این صورت قبل از بسته شدن این تگ یعنی قبل از </head> قرار می دهیم:

 <!DOCTYPE html>
<html dir="rtl">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<style>
    img {border: 3px solid white}
    img:hover {opacity: 0.5; border: 3px solid gray}
    h3 {
        font-size: 15px;
    }
</style>
</head>
<body>

<h3>این یک عنوان آموزشی انجمن بی تاک است</h3>
<img src="https://www.w3schools.com/tags/img_girl.jpg" alt="عکس" width="500" height="600">

</body>
</html>

کد بالا یک نمونه بود. دقت کنید که ما باید دستورات استایل را بین <style> و </style> قرار دهیم:

<style>
    img {border: 3px solid white;}
    img:hover {opacity: 0.5; border: 3px solid gray;}
    h3 {
        font-size: 15px;
    }
</style>

توجه:

در کد بالا، دو حالت نوشتن دستور استایل استفاده کرده ایم که متوجه شوید حالت نوشتن دستور استایل مهم نیست، اما رعایت سلکتورها، استفاده درست از { و } و استفاده از نقطه ویرگول برای جدا کردن خاصیت های استایل ضروری است. در زیر دقت کنید، یک دستور استایل یکسان را با چند حالت مختلف نوشته ایم. تمامی اینها به یک صورت اجرا خواهند شد و تفاوتی نخواهند داشت:

.example {font-size: 15px; border: 3px solid gray; width: 50%;}

.example {
font-size: 15px; border: 3px solid gray; width: 50%;
}

.example {
    font-size: 15px; 
    border: 3px solid gray; 
    width: 50%;
}

بی تاک

حالت فایل خارجی

در این حالت که توسط اکثر وبمستران و سئوکاران پیشنهاد شده، شما باید یک فایل جداگانه برای دستورات استایل ایجاد کنید و کدهای CSS را داخل آن قرار دهید. سپس آن فایل CSS را داخل کدهای HTML به آن صفحه معرفی می کنیم. زمانی که کاربر وارد سایت ما شود، مرورگر به طور خودکار محتویات و دستورات استایل داخل این فایل CSS را خوانده و اجرا خواهد کرد.

برای مثال شما یک فایل test.html در یک پوشه ای دارید که کدهای HTML شما داخل این فایل قرار گرفته اند. در همین مسیری که این فایل وجود دارد، یک فایل به نام custom.css یا هر نام دیگری مثلا example.css ایجاد کنید.

مهم ترین نکته در هنگام ساختن فایل این است که حتما پسوند فایل .css باشد. مثال XYZ.css

ما به عنوان مثال یک فایل به نام custom.css ساخته ایم، سپس فایل را به این صورت داخل کدهای HTML بین تگ های <head> تا </head> اضافه می کنیم.

<!DOCTYPE html>
<html dir="rtl">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
    <link rel="stylesheet" href="custom.css">
</head>
<body>

<h3>این یک عنوان آموزشی انجمن بی تاک است</h3>
<img src="https://betalk.ir/tags/img_girl.jpg" alt="عکس" width="500" height="600">

</body>
</html>

همانطور که دقت کردید، ما با استفاده از <link rel="stylesheet" href="custom.css"> فایل استایل را به کدهای HTML معرفی کردیم.

در سایت های آنلاین که یک دامنه برای سایت وجود دارد، می توانید آدرس کامل را هم برای معرفی فایل جدید استفاده کنید. برای مثال:

<link rel="stylesheet" href="https://betalk.ir/custom.css">

پس از این می توانید دستورات استایل خودتان را داخل این فایل جدید قرار دهید. تنها نکته ای که باید توجه داشته باشید این است که دستورات استایل داخل فایل CSS باید به صورت شاخص استفاده شوند. یعنی کدها و تگ های HTML داخل آن استفاده نکنید.

حالت صحیح محتوای فایل custom.css :

img {border: 3px solid white;}
img:hover {opacity: 0.5; border: 3px solid gray;}
h3 {
   font-size: 15px;
}
p {font-size: 12px;}

یعنی فقط کافیست دستورات استایل را به همین شکل زیر هم قرار دهید. نیازی به استفاده از تگ های HTML مانند <style> و… نیست

حالت اشتباه:

<style>
    img {border: 3px solid white;}
    img:hover {opacity: 0.5; border: 3px solid gray;}
    h3 {
        font-size: 15px;
    }
    p {font-size: 12px;}
</style>

بی تاک

معرفی فایل جدید توسط فایل استایل دیگر

در حالت قبلی، نحوه ساختن فایل جدید استایل را یاد گرفتید، و نحوه اضافه کردن کد معرفی فایل استایل به کدهای HTML را هم فهمدید!

اما در یک حالت دیگر، ما می توانیم یک فایل CSS جدید بسازیم و بدون نیاز به اینکه از داخل کدهای HTML تغییری ایجاد کنیم، فایل css جدید را به سایت معرفی کنیم!

در این حالت، شما باید حداقل یک فایل CSS به صورت <link rel="stylesheet" href="https://betalk.ir/custom.css"> داخل کدهای سایتتان معرفی کرده باشید.

با فرض اینکه ما قبلا یک فایل به نام custom.css ساخته ایم و توسط کد مربوطه، آن را به کدهای HTML معرفی کرده ایم، قصد داریم یک فایل دیگر به نام betalk.css بسازیم، اما اینبار دیگر کدهای HTML را دستکاری نمی کنیم، بلکه قصد داریم فایل استایل جدید را توسط همان فایل استایل قدیمی به سایت معرفی کنیم.

پس از ساختن فایل جدید، فایل استایل قدیمی یعنی custom.css را باز می کنیم و کد زیر را در ابتدای این فایل یعنی اولین خط قرار می دهیم:

@import "betalk.css";

در حالت بالا، فرض کرده ایم که فایل استایل جدید betalk.css را دقیقا در همان مسیری ساخته اید که فایل custom.css ساخته اید.

یا می توانیم به جای کد بالا، از این دستور استفاده کنیم:

@import url("betalk.css");
یا
@import url("https://betalk.ir/css/betalk.css");

پس از انجام اینکار، هنگامی که مرورگر درحال اجرای سایت است و با فایل custom.css مواجه می شود، با بررسی محتوای آن، به فایل استایل جدید یعنی betalk.css نیز مواجه خواهد شد و محتویات این فایل را هم هنگام اجرای سایت لحاظ خواهد کرد.

بی تاک

کلمات کلیدی:

نحوه اضافه کردن استایل به سایت
آموزش اضافه کردن CSS به سایت
روش های لینک دهی فایل CSS در کدهای HTML
آموزش مقدماتی تعریف فایل استایل