آموزش CSS

آموزش مقدماتی CSS

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

شما می توانید کد های CSS را در کدهای HTML در قسمت head قرار دهید. اما باید بدانید به هنگام ویرایش کردن به مشکل برخواهید خورد چرا که شما با یک فایل بسیار شلوغ روبه رو خواهید بود.

آموزش CSS

پس از ساخت فایل html و css شما می بایست این دو را به هم ارتباط دهید به طوریکه مرورگر بداند به هنگا خواندنhtml فایل cssرا ازکجا بخواند. کدی که شما می بایست برای ارتباط دادن این دو فایل استفاده کنید. عبارت است از:

<link href=”” type=”text/css” rel=”stylesheet”> تمامی قسمت کدارتباطی ثابت می باشد اما می بایست به این نکته دقت داشته باشید که در جلوی عبارتtype باید نام فایل و ادرس cssرا بنویسید. به عنوان نمونه فرض کنید شما فایل cssرا با نامstyle.css در درون فایل css ذخیره کرده اید. آدرسی که می بایست بنویسید به این صورت می باشد: css/style.css

در کدهای css شما می توانید المان های زیادی نظیر طول، عرض، رنگ متن، رنگ پس زمینه و بسیاری از فاکتور های دیگر را تعیین کنید.

Width

Width به عنوان عرض در صفحات وب معرفی می شود و واحد آن پیکسل می باشد. همانطور که می دانید خصیصه ها را در داخل آکولادی که نام کلاس مربوط قبل از آن است به کار برد. به عنوان نمونه شما می خواهید عرض جعبه ای که در کد html به عنوان کلاس  frame معرفی شده است را ۵۰۰ پیکسل کنید. نحوه نوشتن تکه کد به این صورت است:

.frame{width:500px;}

 به دو نکته دقت داشته باشید که برای کلاس ها از (.) و برای آی دی ها (#) استفاده می کنیم و نکته بعد این که بعد از تخصیص دادن خصیصه ها علامت سمیکالن (;) فراموش نشود. چرا که فاکتور بعد از این عبارت توسط مرورگر خوانده نمی شود.

Heigh

Height المانی است که برای ارتفاع به کار می رود و واحد آن پیکسل است. نحوه نوشتن ارتفاع همانند نوشتن عرض می باشد. اگر شما بخواهید همزمان به کلاس frame تان ارتفاع و عرض تخصیص دهیدف می بایست اینگونه بنویسید:

.frame{width:500px; height:500px;}

تمامی ویژگی های که بخواهید اختصاص دهید می بایست در داخل کروشه قرار بگیرد..

مطالب مرتبط

نظر خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *