نحوه استفاده از css در HTML

سی اس اس مخفف Cascading Style Sheets می باشد.

سی اس اس (css3 ,css) نقش بسزایی در زیبایی سایت دارد. چنانچه تسلط خوبی به css داشته باشید می توانید قالب زیبایی را طراحی نمایید. یادگیری css برای طراحی قالب سایت الزامی میباشد. برای تغییر نوع فونت متن ، رنگ ، اندازه‌ها و غیره از سی اس اس css استفاده می کنیم.

سی اس اس (css,css3) هر دو برای طراحی قالب استفاده می شود. بعضی افراد فکر می کنند چون css3 جدیدتر است پس باید از آن استفاده نمایند اما چنین نیست. در css تعدادی دستور وجود دارد که کار خاصی انجام می دهند و در css3 نیز تعدادی دستور دیگر که هر دو مکمل هم هستند.

با استفاده از css می توانیم نوع نمایش قالب سایت ، تغییر رنگ ، ریسپانسیو یا واکنشگرا کردن قالب ، تغییر فونت ، تغییر سایز قلم و غیره را انجام دهیم.

هر چقدر تسلط شما به css بیشتر شود قادر خواهید بود قالب های حرفه ای تری طراحی کنید.

در آموزش css همه دستورات را شرح خواهیم داد.

کاربرد css در صفحات وب :

در ابتدا قرار بود از html برای نمایش متن و عکس استفاده شود. Html اصلا کاربر پسند نیست و اگر css نباشد صفحات وب هیچ جذابیتی نخواهد داشت.

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

انواع css :

از استایل یا css به 3 شکل استفاده می شود:

اینلاین یا inline

در این بخش به سراغ استایل اینلاین (inline) می رویم. در این روش کدهای css در همان خط و دستور html قرار می گیرد و از دستور style استفاده می شود. با ذکر یک مثال می خواهیم با استایل اینلاین آشنا شویم. در این مثال رنگ متن را تغییر خواهیم داد.

ابتدا کدهای html را می نویسیم و سپس با دستور style ، کدهای css را می نویسیم.

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>sh711.com</title>
</head>
<body>
<p style="color: red">sh711.com</p>
</body>
</html>

اینترنال (internal )

در روش اینترنال (internal) در قسمت head  ، کدهای css را در قسمت style می نویسیم. در مثال زیر رنگ متن و سایز متن را تغییر می دهیم.

در مثال پایین از نوع inline استفاده شده است. برای این کار از کلمه style استفاده می شود.در بخش آموزش css تمامی دستورات را توضیح خواهیم داد.

در این مثال رنگ متن را با دستور color تغییر می دهیم.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>sh711.com</title>
<style>
p{
color: blue;
}
</style>
</head>
<body>
<p>sh711.com</p>
</body>
</html>

اکسترنال (external)

در روش اکسترنال (external) که متداول ترین روش است کدهای css در یک فایل با پسوند css مانند style.css قرار می گیرد و سپس با دستور link به فایل html لینک می شود. در طراحی قالب حرفه ای از این روش استفاده می شود. 

روش خارجی یا اکسترنال بسیار ایده ال است چون از کدهای css می توانیم در چندین جای مختلف و صفحات مختلف استفاده کنیم و نیازی نیست برای هر صفحه یک فایل css بنویسیم. مثلا اگر بخواهیم برای تمام پاراگراف های ما با فونت یکان استفاده شود  کافی است که در یک فایل css آن را تعریف کنیم و به صفحات html لینک کنیم.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>sh711.com</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>sh711.com</p>
</body>
</html>

نویسنده : هدایت عباسی

ثبت نظر