زمان کنونی: ۱۱-۵-۱۳۹۵, ۰۴:۲۷ صبح درود مهمان گرامی! (ورودثبت نام)


[-]

اطلاعیه ها


سلام و عرض وقت بخیر خدمت دوستان و کاربران گرامی

جهت پرسش و پاسخ و دریافت پاسخ سریعتر لطفا از بخش پرسش و پاسخ وب سایت Softskill.ir استفاده نمایید.

برای ورود به بخش پرسش و پاسخ وب سایت جدید کلیک کنید.


آموزش جامع CSS - جلسه هفتم
زمان کنونی: ۱۱-۵-۱۳۹۵, ۰۴:۲۷ صبح
کاربرانِ درحال بازدید از این موضوع: 1 مهمان
نویسنده: Tutorial
آخرین ارسال: Tutorial
پاسخ: 1
بازدید: 1591

ارسال پاسخ 
 
امتیاز موضوع:
  • 2 رأی - میانگین امتیازات: 5
  • 1
  • 2
  • 3
  • 4
  • 5
 

آموزش جامع CSS - جلسه هفتم

۱-۱۷-۱۳۹۳, ۰۶:۵۳ عصر
ارسال: #1
آموزش جامع CSS - جلسه هفتم
جلسه هفتم – کلید واژه های initial و inherit

[تصویر:  4.jpg]


*پیش نیاز: آشنایی مقدماتی با HTML
(برای آشنایی با زبان HTML به بخش دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
مراجعه نمایید .)


در جلسه قبل با صفت پس زمینه آشنا شدیم و تک تک مقادیر خواص این صفت رو بررسی نمودیم، ولی از آنجاییکه کلید واژه های initial و inherit در همه عناصر html و در همه صفتهای سی اس اس قابل تعریف هستند تشریح این 2 را به این جلسه موکول کردیم تا بصورت جدا بررسی کنیم.

کلید واژه initial
[تصویر:  2.jpg]

کلید واژه initial در تمامی مرورگها به غیر از مرورگر اینترنت اکسپلورر و نسخه های ما قبل 15 از مرورگر اپرا پشتیبانی شده و قابل استفاده می باشد. CSS syntax آن به صورت زیر می باشد :
CSS syntax
کد php:
propertyinitial

با یک مثال این کلید واژه رو بررسی می کنیم .
مثال :
در این مثال با عنصر div یک بخش ایجاد می کنیم و رنگ نوشتارش رو به رنگ قرمز انتخاب می کنیم، اما با استفاده از مقدار initial برای عنصر h1 ، این عنصر از رنگ اولیه خود استفاده خواهد کرد :
کد php:
<!DOCTYPE html>
<
html>
<
head>
<
title>انجمن تخصصی طراحی وب ایران</title>
<
style>
body {direction:rtl;font-size:14px;font-family:tahoma;}
div {colorred; }
h1  {colorinitial; }
</
style>
</
head>
<
body>

<
div>
<
h1>خاصیت رنگ هدر یعنی این قسمت ،  initial تعریف شده است.</h1>
<
p>می بینیم با اینکه رنگ نوشتار در داخل این بخش قرمز تعریف شده است ولی چون مقدار رنگ هدر  initial تعریف شده استهدر به رنگ اولیه خود رنگ سیاه نمایش داده می شود.</p>
</
div>
</
body>
</
html
نتیجه کد بالا را می توانید دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
مشاهده کنید .

کلید واژه inherit
[تصویر:  2.jpg]

کلید واژه inherit در کلیه مرورگرها به غیر از نسخه ما قبل 7 از مرورگر اینترنت اکسپلورر پشتیبانی شده و قابل استفاده می باشد. و در نسخه 8 اینترنت اکسپلورر هم با تعریف !DOCTYPE قابل اجراست . Css syntax آن به صورت زیر می باشد :
CSS syntax
کد php:
propertyinherit

با یک مثال این کلید واژه را هم بررسی می کنیم.
مثال :
در این مثال رنگ نوشتاری عنصر span را آبی قرار می دهیم و سپس در داخل سه عنصر div که هر کدام رنگ نوشتاری متفاوتی دارند ( سیاه و سبز و قرمز ) این span را استفاده می کنیم. درdiv دوم که رنگ span ای که داخلش وجود دارد را inherit انتخاب کردیم به جای پیروی از رنگ آبی رنگ نوشته به رنگ نوشته div که وارث span تلقی میشود نمایش داده می شود. ( یعنی به رنگ سبز )

کد php:
<!DOCTYPE html>
<
html>
<
head>
<
title>انجمن تخصصی طراحی وب ایران </title>
<
style>
    
body {direction:rtl;font-size:14px;font-family:tahoma;}
    
span {colorblue;border:1px solid black;}
    .
extra span{colorinherit;}
</
style>
</
head>
<
body>
    <
div>
        
این <span>عنصر span </span>  هست که به رنگ آبی نشان داده شد چون رنگ span را آبی قرار داده بودیم
    
</div>

    <
div class="extra" style="color:green">
        
این <span>عنصر span </span>  هست که به رنگ سبز نشان داده میشودچون مقدار رنگ نوشتاری اش را inherit قرار داده بودیم که از عنصر div که در داخل آن قرار دارد رنگ نوشتاری خود را به ارث می برد.
    </
div>

    <
div style="color:red">
        
این <span>عنصر span </span>  هست که به رنگ آبی نشان داده شد چون رنگ span را آبی قرار داده بودیم
    
</div>

</
body>
</
html

نتیجه کد بالا را می توانید دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
مشاهده کنید .


[تصویر:  4.jpg]
پایان جلسه هفتم
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط Adel ، geray
ارسال پاسخ 


موضوع‌های مرتبط با این موضوع...
موضوع: نویسنده پاسخ: بازدید: آخرین ارسال
  آموزش جامع CSS - جلسه اول Tutorial 3 2,856 ۵-۲۷-۱۳۹۵ ۱۰:۵۸ صبح
آخرین ارسال: lioseo
  آموزش جامع CSS - جلسه دوم Tutorial 5 2,528 ۵-۱۳-۱۳۹۵ ۰۲:۲۳ عصر
آخرین ارسال: Adel
  آموزش ویدیویی جامع و کاربردی CSS academyit 0 163 ۴-۲-۱۳۹۵ ۰۳:۰۸ عصر
آخرین ارسال: academyit
Lightbulb آموزش ویدیویی css از مبتدی تا پیشرفته academyit 0 278 ۱۲-۱۵-۱۳۹۴ ۱۰:۵۴ صبح
آخرین ارسال: academyit
  آموزش CSS heidari 2 1,258 ۷-۲۰-۱۳۹۴ ۰۸:۴۹ عصر
آخرین ارسال: Adel
Question پرسش و پاسخ پیرامون آموزش جامع CSS - جلسه پنجم Tutorial 2 1,969 ۵-۳۱-۱۳۹۳ ۱۰:۵۲ صبح
آخرین ارسال: Adel
Question پرسش و پاسخ پیرامون آموزش جامع CSS - جلسه هفتم Tutorial 0 1,349 ۱-۱۷-۱۳۹۳ ۰۶:۵۸ عصر
آخرین ارسال: Tutorial
  پرسش و پاسخ پیرامون آموزش جامع CSS - جلسه ششم Tutorial 0 1,237 ۱-۱۱-۱۳۹۳ ۰۷:۰۸ عصر
آخرین ارسال: Tutorial
  آموزش جامع CSS - جلسه ششم Tutorial 0 1,700 ۱-۱۱-۱۳۹۳ ۰۷:۰۶ عصر
آخرین ارسال: Tutorial
  آموزش جامع CSS - جلسه پنجم Tutorial 0 1,543 ۱۲-۲۵-۱۳۹۲ ۰۶:۳۲ عصر
آخرین ارسال: Tutorial

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان