آموزش شالوده اصلی css

+989352589150

آموزش css

آموزش css,کدهای css,سلکتورهای css

آموزش شالوده اصلی css

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

طریقه استفاده از کدهای css در صفحه سایت:

 به سه روش می توان این کدها را وارد نمود.

1-نوشتن کدهای CSS درون تگ Style در بخش header فایل  html

به این صورت که شما تگ style را باز و بسته کرده سلکتورهای cssرا درون آن جای می دهید. مانند مثال زیر:

<style>
    p{
        color:red;
    }
 </style>

منظور از سلکتورهای cssچیست؟

شما هنگام نوشتن کدهای html به هر تگ یک کلاس و یا یک id اختصاص می دهید در واقع یک شناسه برای معرفی آن تگ تعریف میکنید به شکل زیر

<p class="content">lorem ipsum</p>
<p id="content">lorem ipsum</p>
<style>
.content{
color:red;
}
#content{
.color:red;
}
</style>

همانطور که می بینید برای کلاس نقطه و برای id از علامت # استفاده می کنیم.

تفاوت کلاس و id

کلاس را به طور همزمان می توانید برای چندین تگ htmlاستفاده کنید. اما از id فقط یکبار می توانید استفاده کنید.

2-استفاده Inlineاز CSS در درون تگ ها

هنگام تعریف تگهای html  در بخش body کدهای cssرا هم وارد می کنیم مانند زیر:

<p style="color:red">lorem ipsum</p>

روش اول و دوم باعث کثیف شدن کدها می شود. بنابراین توصیه ما به شما استفاده از روش سوم می باشد.< /p>

3-نوشتن سلکتورهای CSS در فایل جداگانه stylesheet و فراخوانی آن در صفحه HTML

اصولی ترین روش برای نوشتن کدهای css به این صورت است که شما یک فایل stylsheetایجاد کنید که این فایل در نرم افزارهای مختلف به شکلهای مختلف ایجاد می شود و پسوند فایل cssمی باشد.

روش ایجاد فایل stylesheet در notepad

سند جدید ایجاد کرده کدها را وارد کنید در هنگام ذخیره پسوند فایل را cssقرار دهید.

روش ایجاد فایل stylesheet در bracket

کلیک راست در بخش خالی سمت چپ صفحه انتخاب NewFile و وارد کردن نام فایل به همراه پسوند css

روش ایجاد فایل stylesheet در VisualStudio

طی کردن مسیر زیر پس از کلیک راست

ADD-> New Item-> Style Sheet

در فایل stylsheet دیگر نیازی به قراردادن تگ styleنیست و مستقیما می توانید کدهای css را وارد نمایید. پس از ایجاد فایل مورد نظر در بخش header این فایل را فراخوانی کنید. توصیه ما به شما این است که حتی الامکان تمام کدهای cssرا که خودتان می نویسید درون تنها یک فایل ذخیره کنید تا تعداد درخواستهایی که به سمت سرور داده می شود کاسته شده و سرعت لود سایت شما بالا رود ولی کدهایی که به طور مثال برای فریم ورک بوت استرپ می باشد بگذارید درون همان فایل bootstrap.cssبه طور جداگانه قرار داده شود زیرا تفکیک این فایلها باعث می شود شما دچار سردرگرمی نشوید.

آیا کدهای css در تمامی مرورگرها شناخته می شوند؟

بعضی از کدهای cssدر تمام مرورگرها قابل تشخیص نیستن بنابراین شما خواهید دید که از کلمات زیر در ابتدای کد استفاده می شود

-webkit-  مربوط به مرورگر کروم

-moz-    مربوط به مرورگر موزیلا فایرفاکس می باشد.

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
اگر سوالی در رابطه با این مطلب دارید می توانید از طریق فرم زیر ارسال کنید
  • ایمیل شما به هیچ عنوان در سایت نمایش داده نمی شود
  • شماره تماس اختیاری است می توانید آن را وارد نکنید
  • کامنت شما بعد از تایید مدیر سایت نمایش داده می شود