پنج شنبه , مرداد ۲۵ ۱۳۹۷

آموزش css قسمت دوم

آموزش css در این آموزش انواع وارد کردن کد css را در html +

آموزش رنگ‌ها, آموزش انواع بگراند, آموزش کار با عکس و …را .یاد میگیرید
اگر آموزش قبل را ندیده‌اید بهتر است اول این لینک را دنبال کنید

 

لطفا فیلم زیر را ببینید و بعد از آن مطالب زیر را مطالعه کنید

 

۳ شکل کلی وارد کردن css به html

۱- extrnal style sheet

 

که کدهای css در یک فایل خارجی هستند و با استفاده از تگ link میتوانیم به انها دسترسی داشته باشیم

۲-internal style sheet

در تگ head از تگ style استفاده میکنیم و از دستورات css داخل این تک “فقط برای همان صفحه” استفاده میکنیم

 

۳- inline style با استفاده از خاصیت style در تگهای میتوانیم کد های css را اعمال کنیم

 

 

رنگها

 

EGB

که از ترکیب سه رنگ به ترتیب (R(RED قرمز  (G(GREEN  سبز , (B (BLUE ابی تشکیل شده است

(روی تصویر کلیک کنید)

شکل کد بصورت زیر است شدت رنگ از ۰ تا ۲۵۵ مشخص میگردد

 

<h1 style="background-color:rgb(255, 0, 0);">قرمر</h1>
<h2 style="background-color:rgb(0, 0, 255);">ابی</h2>
<h3 style="background-color:rgb(60, 179, 113);">سبز</h3>
<h4 style="background-color:rgb(238, 130, 238);">  صورتی</h4>
<h5 style="background-color:rgb(255, 165, 0);"> خردلی</h5>
<h6 style="background-color:rgb(106, 90, 205);"> بنفش </h6>

 

حالت دیگری از RGB یا شاید بتوان گفت کاملتر شده‌ی آن RGBA است

که فقط یک ژارامتر برای شفافیت به RGB افزوده شده است که بین ۰ تا ۱ است میزان شفافیت رنگ را مشخص میکند

نمونه کد

<h1 style="background-color:rgba(255, 9F, 71, 0);">شفافیت</h1>
<h2 style="background-color:rgba(255, 9F, 71, 0.2);">شفافیت</h2>
<h3 style="background-color:rgba(255, 9F, 71, 0.4);">شفافیت</h3>
<h4 style="background-color:rgba(255, 9F, 71, 0.6);">شفافیت</h4>
<h5 style="background-color:rgba(255, 9F, 71, 0.8);">شفافیت</h5>
<h6 style="background-color:rgba(255, 9F, 71, 1);">شفافیت</h6>

 

 

HEX

در HTML و CSS میتوانید رنگها را  بصورت هگزادسیمال نیز وارد کنید

به این صورت

#rrggbb

یعنی ماندد قبل اما شدت رنگ از ۰ تا F اینجا مشخص میشود

یعنی ۰ ۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ A B C D E F

(روی تصویر کلیک کنید)

نمونه کد

<h1 style="background-color:#ff0000;">قرمز</h1>
<h1 style="background-color:#0000ff;">ابی</h1>
<h1 style="background-color:#00FF00;">سبز</h1>

 

 

NAME

با استفاده از نام رنگها هم میتوان از انها استفاده کرد

نمونه کد

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

 

 

BACKGROUND

اموزش انواع بگراندها همانطور که در فیلم دیدید بگراندها بسیار مهم هستند

شکل کلی دستور

background: #ffffff url("img_tree.png") no-repeat right top;

اشکال مختلف دستور

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

نمونه کدها

background-image: url("img_tree.png");
   background-repeat: no-repeat;
   background-position: right top;
   background-attachment: fixed;

 

 

 

 

 

 

 

آموزش کامنت کردن در CSS

 

درباره فرخ ابراهمی نژاد

فرخ ابراهمی نژاد
نویسنده‌ی کتاب yii framework برای برنامه نویسان phpبرنده‌ی دو دوره جشنواره‌ی وب ایران برای سایت linkpad.irنویسنده, مدرس, مشاور و تولید کننده‌ی نرم افزارفرخ فوق‌لیسانس و لیسانس نرم‌افزار خوانده اما اعتقاد دارد برای موفقیت و رسیدن به درآمد وکسب‌وکار آنلاین نیاز به تحصیلات در دانشگاه ندارید.

پاسخ دهید

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