آموزش W3.CSS
W3.CSS چیست؟
w3.CSS یکی از فریم ورک های CSS است و توسط W3schools پیاده سازی شده است. بعد از لینک کردن فایل W3.CSS به صفحات پروژه تان، می توانید از الگوهای بسیار جذاب آن برای ساخت سایت های واکنشگرا استفاده نمایید.
- W3.CSS نسبت به دیگر فریم ورک ها مثل Bootstrap از حجم کمتری برخوردار است و در نتیجه سرعت لود صفحات افزایش پیدا خواهد کرد.
- یادگیری و استفاده از آن نسبت به دیگر فریم ورک ها (Bootstrap) آسان تر است.
- در پیاده سازی W3.CSS تنها از CSS استفاده شده است. (از JavaScript یا jQuery استفاده نشده)
- با استفاده از W3.CSS با سرعت و سادگی بیشتری می توانید طراحی کنید.
- زمانی که آنرا به صفحه لینک می کنید، بصورت پیش فرض، حالت واکنشگرا را پشتیبانی می کند.
- سایت تان در تمام مروگرهای اصلی مثل کروم, فایرفاکس, اینترنت اکسپلورر, سافاری و ... بدون مشکل کار خواهد کرد.
- W3.CSS در تمام دستگاه ها، مثل کامپیوتر, لپتاپ, تبلت و موبایل کار خواهد کرد.
W3.CSS رایگان است.
W3.CSS برای یادگیری و استفاده رایگان است و نیازی به تهیه ی لایسنس نیست.
آسان برای یادگیری
اولین مثال W3.CSS
<div class="w3-container w3-teal">
<h1>My Header</h1>
</div>
<img src="/img_car.jpg" alt="Car">
<div class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.</p>
</div>
<div class="w3-container w3-teal">
<p>My Footer</p>
</div>
خودتان امتحان کنيد »<h1>My Header</h1>
</div>
<img src="/img_car.jpg" alt="Car">
<div class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.</p>
</div>
<div class="w3-container w3-teal">
<p>My Footer</p>
</div>
لینک کردن W3.CSS به صفحات سایت
برای استفاده از W3.CSS در وب سایتتان, کافیست لینک W3.CSS را به صفحه ی وب سایتتان اضافه نمایید:
مثال
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.beyamooz.com/lib/w3.css">
خودتان امتحان کنيد »<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.beyamooz.com/lib/w3.css">
و یا میتوانید فایل w3.css را از خود سایت w3schools.com دانلود کرده و در پوشه ای در وبسایتتان قرار دهید.
مثال
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/lib/w3.css">
خودتان امتحان کنيد »<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/lib/w3.css">
قالب های وب سایتی w3.css
در لینک زیر تعدادی قالب واکنشگرا با w3.css درست شده است و شما آزادید که این قالب هارا تغییر بدید, سیو کنید, به اشتراک بگذارید, استفاده کنید و یا هرکاری که میخواهید با آنها انجام دهید:
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 28356
دیدگاه‌ها
نظر شما استاد به عنوان یه حرفه ای برای یادگیری رسپانسیو کردن سایت، کدام روش هست؟ روش w3.css یا لندینگ پیج یا بوت استرپ؟
بوت استرپ نتیجه ی چندین سال کار یک تیم فنی هست و در سال های گذشته کامل و کامل تر شده و با توجه به اینکه از امکانات بیشتری نسبت به W3.CSS برخوردار است حجم آن بیشتر است و یک مقدار لود آن بیشتر طول می کشد. اما آموزش W3.CSS نسبت به آموزش بوتسترپ راحت تر هست.
سلام و خسته نباشد.
من اموزش w3.css رو دنبال کردم و یاد گرفتم و از شما هم تشکر میکنم.
اقا من یک ساید بار ساختم ولی وقتی تو صفحه به سمت پایین حرکت میکنم اون هم همراه با اسکرول به سمت پاین میاد یعنی جاش ثابت نیست .
ایا شما میتونید مشکل منو حل کنید من میخوام این ساید بار سر جاش بمونه
سلام و درود
استایل زیر را برای سایدبار تنظیم کنید:
position: fixed;