حتماً می دانید که برای سبک دهی به فایل های html در طراحی صفحات وب، از کدهای css استفاده می کنیم. آیا می دانید این دستورات css (سی اس اس) را کجا باید بنویسید؟ برای ایجاد ارتباط بین فایل های css و html سه روش وجود دارد :
- Inline Style / سی اس اس درون خطی
- Internal Style Sheet / سی اس اس داخلی
- External Style Sheet / سی اس اس خارجی
سی اس اس خارجی / External css :
یک CSS خارجی زمانی ایده آل است که استایل آن در بیشتر صفحات استفاده شود.
با یک CSS خارجی، شما می توانید ظاهر یک سایت را با تغییر دادن یک فایل تغییر دهید.
هر صفحه شیوه نامه باید با استفاده از تگ link پیوند شود.
تگ link در داخل تگ head قرار می گیرد.
نمونه سی اس اس خارجی (External css) :
[html]
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>
[/html]
Inline Style / سی اس اس داخلی:
یک CSS داخلی را می توان مورد استفاده قرار داد اگر یک سند تنها از یک سبک دهی منحصر به فرد استفاده کند.
شیوه نامه داخلی با استفاده از تگ style، در بخش <HEAD>در یک صفحه HTML، تعریف می شود.
نمونه سی اس اس داخلی (Internal Style):
[html]
<head>
<style type=”text/css”>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
[/html]
سی اس اس درون خطی / inline css
شیوه نامه درون خطی می تواند مورد استفاده قرار گیرد اگر استایل منحصر به فرد به یک رخداد منفرد از یک عنصر به کار رود.
برای استفاده Inline css در html،از تگ های مربوطه استفاده کنید که می تواند حاوی هر خاصیت CSS باشد.
مثال زیر نشان می دهد که چگونه برای تغییر رنگ متن و حاشیه چپ از یک پاراگراف استفاده کنید:
نمونه سی اس اس درون خطی (Inline css)
[html]
<p style=”color:blue;margin-left:20px;”>This is a paragraph.</p>
[/html]
در این فیلم آموزشی html، استفاده از این روشهای Css در اسناد و صفحات html را برای شما با مثال های کاربردی شرح خواهیم داد.
برای آشنایی با یک روش دیگر که با دستور import در CSS انجام می شود، می توانید فیلم آموزشی آن را از این قسمت مشاهده کنید.
ویدیوی آموزش نحوه تعریف و افزودن css به html
[hdplay id=28]
برای دانلود فیلم آموزشی و اسنیپت های آموزش مربوطه از لینک های زیر استفاده کنید :
[video_download cat=’html’ url=’http://dl.onliner.ir/html-videos/applying-css-in-html.mp4′]دانلود فیلم آموزش روش های استفاده از css (سی اس اس) در صفحات html[/video_download]
[onliner_button type=”edu-demo” url=’http://dl.onliner.ir/html-snippets/applying-css-in-html.zip’]دانلود دمو[/onliner_button]
متن فیلم آموزش روش های استفاده از css (سی اس اس) در صفحات html
css
ما به وسیله کدهای html صفحات وب را نشانه گذاری می کنیم و با کدنویسی css به قسمت هایی که نشانه گذار ی کرده ایم، استایل می دهیم. در واقع css یک زبان کدنویسی برای استایل دهی و سبک دهی به محتوای صفحات وب است.
روش های اعمال کدهای سی اس اس به صفحات و کدهای اچ تی ام ال :
روش external
این روش رایج ترین راه برای اعمال کدهای css به html است. در این روش بصورت خارجی فایل را به صفحه html لینک می کنیم.
ابتدا یک فایل با پسوند .css ایجاد می کنیم و استایل های خود را درون آن فایل قرار می دهیم، سپس آن را با تگ link، به کدهای html لینک می کنیم :
[html]
<link rel=”stylesheet” href=”adressfile.css” type=”text/css” />
[/html]
به وسیله صفت href می توانیم آدرس فایل css ای را که ساخته ایم به فایل html دهیم. توجه کنید که تگ link حتما باید در بین تگ head قرار گیرد.
روش embed
با این روش دیگر نیازی نیست کد های css خود را در یک فایل جدید قرار دهید بلکه باید آنها را در بین تگ style قرار دهید.
[html]
<style>
کد های سی اس اس شما
</style>
[/html]
تگ style را می توان داخل تگ head یا body قرار داد.
مثال :
[html]
<style>
Form {
background:#eee;
}
Form input {
background:#333;
}
</style>
[/html]
روش inline
می توان با دادن صفت style به تمام تگ ها، به آن تگ استایل داد.
[html]
<p style=”کد سی اس اس خود برای این تگ”>text</p>
[/html]
توجه کنید در این روش برای هر تگی که صفت style را اختصاص دهیم، فقط استایل برای آن تگ اعمال می شود و به تگ های دیگر کاری ندارد .
مثال :
[html]
<<p style=”color:red; font-weight:bold;”>تست</p>
[/html]
دسترسی سریع :
- آموزش قبلی : فیلم آموزش انتقال کاربران به یک صفحه وب دیگر (ریدایرکت – html redirect)
- آموزش بعدی : آموزش نحوه استفاده از جی کوئری و جاوا اسکریپت (jQuery-JavaScript) در HTML
- لیست فیلم ها : فیلم های آموزش جامع HTML
8 دیدگاه دربارهٔ «نحوه تعریف و افزودن css به html + ویدیوی آموزشی»
یعنی نمیشه که الان فیلم های تمرین هارو خریداری کنم؟؟ اگه امکانش باشه مایل به خرداریشونم
در آینده ایی که میگین همین تمرین ها و آموزش ها قرار میگیرن یا جدیدن؟
بله، فرمت جدید و تکمیل شده ی همین تمرینات نیز خواهد بود.
شرمنده شما دیگه فیلم های آموزش HTML & CSS واسه فروش تو سایت ندارید؟ فیلم های تمرین و واسه دانلود قرار ندادید
فعلا خیر اما در آینده نزدیک فیلمهای خاص تر رو برای خرید قرار میدهیم.
خاستم بدونم ترتیب آموزش های HTML و CSS چطوریه؟ اول باید آموزش های HTML و ببینیم بعد CSS یا برعکس؟ و یا اینکه همزمان باید پیش برن؟
توصیه می کنیم اول مباحث html رو تکمیل کنید و بعد از اون به سراغ css بروید.
بازتاب: آموزش CSS | آموزش استفاده از دستور import در CSS
بازتاب: آموزش CSS | آموزش اصول اولیه و ساختار کلی CSS