آموزش رایگان CSS

طراحی سایت اختصاصی | سید عباس حسینی 5 مهر 1399 0

آموزش رایگان CSS

به نام خدا امروز می خواهیم درخصوص آموزش رایگان CSS توضیح بدهیم و کاربرد این زبان برنامه نویسی را مطرح کنیم.

CSS چیست :

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

نحوه استفاده دستورات CSS در HTML :

تا این قسمت متوجه شدیم که CSS چیست و چه کاربردی دارد حالا می خواهیم از دستورات آن در محیط HTML استفاده کنیم. برای اینکه بتوانیم دستورات CSS و HTML را ترکیب نماییم نیاز به یک پل ارتباطی خواهیم داشت.درنظر داشته باشید به سه روش می توانیم دستورات CSS را به HTML متصل کنیم.

روش اول : قرار دادن دستورات CSS درون هر تگ HTML

ما می توانیم دستورات CSS را به شکل تصویر زیر در هر تگ به صورت جداگانه قرار دهیم.

<p style="color:red;">my name is abbas hosseini</p>

بررسی :

این روش درست است که خیلی ساده و سریع است ولی در واقع مشکلاتی را نیز به همراه خواهد داشت که یکی از بزرگ ترین این مشکلات این است که گاهی ما می خواهیم از یک مجموعه ای از دستورات در قسمت های دیگر استفاده نماییم ولی اگر از این روش استفاده شود باید برای هر قسمت که بخواهیم از این دستورات استفاده کنیم دستورات را کپی کرده و درون آن نیز قرار دهیم. این عمل باعث شلوغی خواهد شد که این هم زیبایی کار را کم می کند و همینطور حجم دستورات را افزایش می دهد. درنظر داشته باشید که ما می خواهیم با استفاده از کمترین و استاندارد ترین دستورات بهترین و بیشترین استفاده را ببریم.

روش دوم : قرار دادن تگ style در فایل HTML

ما می توانیم برای اینکه از دستورات CSS در قالب های خودمان استفاده نماییم از تگ style به صورت زیر در فایل HTML استفاده نماییم.

<style type="text/css">
    p{color:red;}
</style>

بررسی :

این روش در برابر روش قبل از ایجاد دستورات اضافه و تکرار آنها جلوگیری می کند ولی بهتر این است که دستورات هر زبان در فایل خود قرار داشته باشد تا هم باعث شلوغی نشود. در پروژه های بزرگ به دلیل حجم زیاد دستورات چندین فایل مختلف ایجاد می کنند تا بتوانند آنها را محدود کنند و تصمیم گیری و تغییرات را ساده تر انجام دهند.درنظر داشته باشید برای تبدیل هر قالب به وردپرس نیاز به دو فایل اساسی با نام های index.php و style.css داریم. در ادامه توضیح کامل تری در خصوص تبدیل کردن قالب ها خواهیم داد.

روش سوم : ایجاد فایل با فرمت CSS

بهترین روش و استاندارد ترین روش این است که ما دستورات هر زبان را طبق گفته های قبلی در قسمت و فایل خود قرار دهیم.حال برای انجام این عمل در پوشه ای که فایل index.html ما قرار دارد یک فایل با نام دلخواه و فرمت CSS ایجاد می کنیم.برای این قسمت بنده فایل را با نام style.css ایجاد کردم.این فایل اصلی است تفکیک کردن دستورات CSS هر قسمت در اختیار شما است و به صورت سلیقه ای می باشد و این نکته را در نظر داشته باشید که تعداد زیاد فایل در یک وب سایت تاثیرات منفی نیز به همراه خواهد داشت.با استفاده کردن از لینک زیر فایل ها را به یکدیگر لینک می کنیم.

<link rel="stylesheet" type="text/css" href="style.css">

با استفاده از دستور بالا فایل لینک می شود حالا کافی است که شروع به ایجاد دستورات کنیم و سپس آن را ذخیره کنیم و بعد از انجام این فرایند با کلیک کردن دکمه f5 کیبورد و یا لودکردن صفحه نمایشی مرورگر شاهد تغییرات خود باشید.

قوانین و استاندارد های نوشتن دستورات در محیط CSS :

حال که آموختیم چگونه فایل CSS ایجاد کنیم و همینطور آشنایی با کاربرد این زبان مکمل پیدا کردید نیاز است استاندارد های اولیه این زبان را برای ایجاد دستورات بدانید.

اول: در نظر داشته باشید که دستورات همیشه باید در بین {} نوشته شود.

دوم: آخر هر خط دستور را باید با علامت ; مسدود کنید. زیرا اگر این فرایند به درستی انجام نشود باعث بروز بعضی از مشکلات از قبیل عدم نمایش تغییرات خواهد بود.زبان CSS از کلمات ساده انگلیسی برای دستورات خود استفاده می کند. برای مثال چند نمونه از آنها را نیز تمرین می کنیم تا این موضوع را بهتر درک کنید.

خصوصیات Color:

یکی از کاربردی ترین دستورات در این زبان color است که از اسم این کلمه مشخص است که به معنی رنگ است که در تغییر رنگ متن و کلمات در طراحی وب سایت به ما کمک می کند.

p{
 color:red;
 font-size:20px;
}

خصوصیات background-color:

گاهی وقت ها در بعضی از وب سایت ها مشاهده کرده اید که قسمتی از آن رنگ پس زمینه متفاوتی با بقیه قسمت های آن دارد. این حالت نمایشی را شما میتوانید با دستور background-color ایجاد کنید.

div{
 background-color:blue;
 width:40px;
 height:40px;
}

خصوصیات font-size:

تا به این جا مواردی که ذکر شد در خصوص تغییر دادن رنگ و پس زمینه متن خواهد بود. و در حال حاضر می خواهیم توضیح در خصوص سایز و اندازه نوشته ها در وب سایت صحبت کنیم شما نیز مشاهده کرده اید در بعضی از سایت ها بعضی از متنها به صورت بزرگ تر و بعضی نیز کوچک تر نوشته شده اند. این موارد را می توانیم با دستور font-size ایجاد کنیم.بهترین حالت مقدار دادن به این دستور px می باشد.

div{
 font-size:18px;
}

خصوصیات font-weight:

زمانی نیاز است در بخش هایی از یک متن علاوه بر تغییر رنگ و سایز حالت نوشتاری آن نیز تغییر کند برای مثال نیاز است بعضی از قسمت های متن پررنگ تر باشد یا به زبان ساده bold باشد از دستور  فوق استفاده می نماییم.نکته این است که این دستورات مقادیر مختلفی را دریافت می کنند که در ادامه به صورت کامل و جداگانه هر یک را توضیح خواهیم داد.

p
{
 font-weight:bold;
}

خصوصیات دستور position:

هر عنصری که در وب سایت ایجاد می کنیم نیاز دارد در مکان مشخص قرار گیرد این حالت ها را می توانیم با position ایجاد کنیم. که مشخص کننده محل قرار گیری عناصر در صفحه هستند. و می توانیم از ویژگی های آن استفاده کنیم که مهم ترین آنها عبارت اند از fixed , absolute , relative است. Fixed زمانی به کار می رود که ما بخواهیم یک عنصر در صفحه وب سایت ما ثابت باشد و جا به جا نشود این حالت را اکثر در منوی اصلی وب سایت ها مشاهده کرده اید. Absolute نیز برای آن است که ما بخواهیم عنصر را در صفحه جا به جا کنیم و تغییر داشته باشد. Relative توجه داشته قبل از هر عنصر که ویژگی آن را absolute قرار می دهیم باید یک عنصر که والد آن هست را ویژگی relative بدهیم در غیر این صورت عنصر متغییر ما از تگ body اندازه گیری خود را برای تغییرات انجام می دهد.

div
{
    position:absolute;
}

 

خصوصیات Selector چیست:

برای اینکه بتوانیم در CSS موفق باشیم نیاز داریم به یادگیری چند تعریف و کاربرد آنها اولین قدم آشنا شدن با نحوه لینک کردن و نوشتن دستورات بود حال می خواهیم با selector آشنا شویم.Selector در زبان فارسی به معنی انتخابگر است. زبان CSS برای اینکه عناصر HTML را شناسایی کند نیاز به انتخابگر ها دارد، مهم ترین و پرکاربرد ترین آنها عبارت است از id،class ، hover ، focuseدر قسمت های قبل گفتیم که برای اینکه تغییرات را روی یک عنصر HTML اعمال کنیم باید اسم آن را بنویسیم و از آن به عنوان انتخابگر استفاده کنیم.این عمل باعث بروز مشکلات و اختلال در دیگر قسمت های وب سایت می شود برای همین از class و id استفاده خواهیم کرد.

خصوصیات Id:

زمانی از id استفاده می کنیم که بخواهیم یک عنصر HTML را تغییر دهیم نشانه و علامت اختصاصی برای شناسایی id (#) می باشد. CSS با این علامت می تواند id ها را که شما مشخص کردید را شناسایی کند.

#p
{
    font-weight:bold;
    width:40px;
    height:40px;
    color:red;
    background-color:orange;
}

خصوصیات Class:

حال زمانی که بخواهیم به چند عنصر در HTML تغییر را اعمال کنیم از class استفاده می کنیم استفاده از class این مزیت را دارد که از تکرار کدهای اضافی جلوگیری شود. و علامت اختصاصی آن نیز (.) می باشد.نکته قابل توجه نکاتی که در خصوص class و id مطرح شد نحوه استاندارد استفاده کردن این انتخابگر ها است. و نیز شما می توانید از یک نوع id برای چند عنصر استفاده نمایید و همینطور از class برای یک عنصر استفاده نمایید.

.p
{
    font-weight:bold;
    width:40px;
    height:40px;
    color:red;
    background-color:orange;
}

خصوصیات Hover:

یکی دیگر از انتخابگرهایی که خیلی در نمایش و حالت های نمایشی کاربرد دارد حالت hover که به معنی شناور است. همیشه این موضوع را مشاهده کرده اید زمانی که وارد یک وب سایت می شود و روی یک گزینه ماوس را قرار می دهید حالت نمایشی ایجاد می شود این حالت قبل از آن است که کلیک کنید.امیدوارم آموزش های امروز مفید واقع شده باشه سعی بر این داریم که نکات ضروری و کاربردی را گفته و از توضیح مطالبی که کاربردی نیستند جلوگیری کنیم.

خصوصیات Focus:

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



دیدگاهتان را بنویسید

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