راهنمای کاربردی زی فریم

آشنایی با CSS

آموزش CSS

CSS مخفف عبارت Cascading Style Sheet است، که وظیفه زیباسازی یک صفحه وب را به عهده دارد. در واقع می توان گفت HTML همچون یک آپارتمان خالی است که کارایی یک سرپناه را دارد و امکانات اولیه را در اختیار کاربر می گذارد، اما CSS همچون مبلمان و دکوراسیون داخلی آن آپارتمان است که محیط را دلنشین و زندگی را برای کاربر زیبا می کند. همان طور که در آموزش HTML، از نرم افزار Visual Studio Code برای نوشتن کدهای html استفاده شد، در این آموزش نیز از همین ویرایشگر برای توضیح و آموزش دستورات CSS استفاده خواهدشد. توجه فرمایید که برای استفاده از CSS ابتدا باید یک سند HTML ایجاد نمود تا یک محیطی برای نمایش کدهای CSS در مرورگر ایجاد شود. به همین منظور یک سند html با نام دلخواه index.html درون یک پوشه دلخواه ایجاد کنید.

کدهای CSS را می توان به سه روش in-line، internal و external به سند html معرفی کرد. از لحاظ اولویت بندی نیز اولویت استایل دهی روش external از همه کمتر و اولویت استایل دهی روش in-line از همه بیشتر است. به این معنا که اگر رنگ یک متن را به صورت external قرمز، به صورت internal آبی و به صورت in-line سبز در نظر بگیریم، در نهایت متن با رنگ سبز نمایش داده خواهد شد، زیرا اولویت استایل های ارائه شده به صورت in-line از دیگر روش ها بالاتر است. اولویت بندی و میزان استاندارد بودن هر یک از این روش ها در تصویر زیر نشان داده شده است.

استایل دهی in-line کد زیر را در نظر بگیرید.

<body>
     <p>
         Lorem ipsum dolor sit amet consectetur adipisicing.
     </p>
</body>

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

اما اگر به صورت زیر، با استفاده از اتریبیوت style رنگ آبی را برای آن در نظر بگیریم، آنگاه متن مورد نظر به رنگ آبی نمایش داده خواهد شد.

<body>
<p style="color: blue;">
Lorem ipsum dolor sit amet consectetur adipisicing.
</p>
</body>

با اجرای این کد در مرورگر، این متن با رنگ آبی به کاربر نمایش داده خواهد شد.

به این نوع از استایل دهی که درون تگ ها با استفاده از اتریبیوت style انجام می شود، روش استایل دهی in-line گویند. استایل دهی internal روش دیگر برای تغییر ظاهر المانها یا همان استایل دهی، استفاده از تگ <style> درون تگ head است، که به آن روش استایل دهی in-line گویند. کد زیر نمونه ای از استایل دهی in-line است که با استفاده از آن رنگ متن به قرمز تغییر یافته است.

<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>Document</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing.
</p>
</body>

با اجرای این کد در مرورگر، این متن با رنگ قرمز به کاربر نمایش داده خواهد شد.

استایل دهی external صحیح ترین و مرسوم ترین روش، ایجاد یک فایل مجزا برای نوشتن CSS و معرفی این فایل به سند html از طریق تگ <head> است. از آنجایی که این فایل کاملا مستقل بوده و خارج از سند html ایجاد می شود، به آن External گویند. برای استفاده از این روش، در پوشه برنامه یک فایل با نام دلخواه style.css ایجاد کنید (به طور مرسوم نام اسناد CSS را style می گذارند، اما پسوند این اسناد حتما باید “.ccs” باشد). سپس باید این فایل توسط تگ <link> از طریق تگ head به سند html معرفی شود. توجه نمایید که نشانی فایل css حتما به عنوان مقدار به اتریبیوت href درون تگ link معرفی شود.

<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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>

نکته: در یک سند html می توان به تعداد دلخواه از تگ link استفاده نمود. به عبارت دیگر در یک سند html می توان از فایلهای CSS مختلف استفاده کرد.

حال می توان تمامی استایل های دلخواه را (بدون استفاده از تگ های html) درون فایل CSS نوشته و از آنها درون سند html استفاده کرد. برای نمونه کدهای زیر را وارد سند html کنید تا با اجرای آن در مرورگر یک متن مشاهده شود.

<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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing.
</p>
</body>

سپس کد زیر را درون فایل style.css قرار دهید.

p {
color: darkorchid;
}

حال اگر فایل html را در مرورگر اجرا کنید، خواهید دید که متن نوشته شده به رنگ بنفش درخواهد آمد.