0

بلاگ

آموزشگاه ابراهیمی نژاد بلاگ مقالات زبانهای برنامه نویسی وب CSS آموزش css قسمت دوم

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

18/05/1397
ارسال شده توسط
CSS
7.24k بازدید

آموزش css

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

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

آموزش css

 

 

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

 

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

1- extrnal style sheet

 

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

2-internal style sheet

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

 

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

 

 

رنگها

ادامه‌ی آموزش فقط برای اعضاء سایت نمایش داده میشود

عضویت رایگان

[member]

 

EGB

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

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

شکل کد بصورت زیر است شدت رنگ از 0 تا 255 مشخص میگردد

 

<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 افزوده شده است که بین 0 تا 1 است میزان شفافیت رنگ را مشخص میکند

نمونه کد

<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

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

یعنی 0 1 2 3 4 5 6 7 8 9 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

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

شکل کلی دستور

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

باید بین یک */ باشد و یک /* مانند کد زیر

p {
    color: blue;
    /* 
متن یا کدی که میخواهید کامنت شود
 */
    text-align: center;
}

توسط لینک زیر می توانید قسمت سوم آموزش css  رو مشاهده کنید.

آموزش css

 

[/member]

مطالب زیر را حتما مطالعه کنید

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