سلام دوستان عزیز هنرکده دیجیتال

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

آنچه که باید قبل از یادگیری css بدانید؟

آنچه که باید قبل از یادگیری css بدانید؟

بحث های این جلسه عبارتند از:

• خواص  سرریزی در css با ویژگی overflow
• محل قرارگیری عناصر در css با ویژگی Position
• محل قرارگیری عناصردر css با ویژگی float,clear
• تنظیم شفافیت عناصر در css با خاصیت opacity

حال به آموزش هر کدام از  مباحث بالا می پردازیم:

خواص  سرریزی در css با ویژگی overflow

در نظر بگیرید اگر  مقدار یک عنصر سرریز کند شما با این ویژگی در css می توانید مشخص کنید  بعد از سرریز شدن چه اتفاقی خواهد افتاد. به عنوان مثال:

div 
{
width:150px;
height:150px;
overflow:scroll;
}

در ادامه آموزش های پیشرفته در css مثال بالا را ببینید اگر مقدار طول و عرض مقدار داخل div بیشتر از طول و عرض تعیین شده باشد div به صورت اسکرول نشان داده می شود. در خاصیت سرریزی می تواند از عناصر زیر هم استفاده کند:

visible : حالت پیش فرض است و بصورت معمولی نشان داده خواهد شد.

hidden : در این حالت اگر مقدار عناصر از طول و عرض بیشتر شود نشان داده نخواهد شد.

scroll : در بالا در مورد آن صحبت کردیم عنصر اسکرول عمودی و افقی خواهد خورد.

auto : در این حالت که خیلی استفاده می شود  کارکرد آن مثل اسکرول است، با این تفاوت اساسی که اسکرول بر اساس موقعیت افقی یا عمودی خواهد خورد و اگر بیشتر شود  ، اسکرول نخواهد خورد.

محل قرارگیری عناصر در css با ویژگی Position

در  ادامهآموزش های پیشرفته  می خواهیم با کمک این ویژگی می توانید موقعیت عنصر را در صفحه مشخص نمایید.

و اما ۴ روش متفاوت برای موقعیت دادن در صفحه وجود دارد:

Static Positioning

عناصر در  زبان HTML   به صورت پیش فرض در حالت استاتیک موقعیت دهی شده اند.عناصری که از این ویژگی استفاده می کنند .

Fixed Positioning
یک عنصر که  موقعیت ثابتی دارد  نسبت به پنجره مرورگر ، موقعیتش تنظیم می شود.عنصر زمانی که از این موقعیت استفاده کند، حتی زمانی  که پنجره وب سایت اسکرول بخورد ، عنصر حرکتی نمیکند.

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

Relative Positioning

یک عنصر نسبت به موقعیت جاری مقدار دهی می شود.

h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

Absolute Positioning

این ویژگی نشان می دهد که عنصر باید در مکانی که مشخص شده است نمایش داده شود نه در مکانی که کد آن نوشته شده است.

h2
{
position:absolute;
left:100px;
top:150px;
}

Overlapping Elements

هنگامی که عناصر روی هم قرار گرفته اند با این خاصیت اولویت نمایش عناصر را  مشخص کنید.

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

محل قرارگیری عناصردر css با ویژگی float,clear

ویژگی float

با این ویژگی می توانید موقعیت عنصر را در سمت چپ و راست تعیین کنید. بسیار ویژگی پرکاربردی می باشد. اگر این ویژگی ها را به تگ ها دهید می توانید سایت های چندستونه ایجاد کنید. زمانی که شما به یک عنصر  در کد float چپ یا راست می دهید آن عنصر به همان سمت می رود و بقیه عنصرهایی که بعد از تگ آمده اند  و ویژگی float ندارند  در جهت مخالف با عنصری که مقداردهی شده است قرار می گیرند.

.text 
{
float:left;
width:110px;
height:90px;
margin:5px;
}

ویژگی clear

اگر عنصر ی بعد از عنصری که ویژگی float را دارد، ویژگی clear داشته باشد، اطراف عنصر ی که ویژگی float را دارد قرار نمی گیرد.

عنصر ی که خاصیت clear=both دارد و float نیز شده باشد، فقط عنصر هایی را که قبل از خودش آمده است، clear میکند . و عنصرهای بعدی را تحت تاثیر قرار نمی دهد.

تنظیم شفافیت عناصر در css با خاصیت opacity

با این ویژگی شفافیت تصاویر را تغییر دهید.

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

همان طور که در کد بالا مشاهده می کنید opacity=40 می باشد  تصویر کدرتر نشان داده خواهد شد در حالی که اگر opacity=100 تنظیم شود تصویر کاملاً شفاف خواهد بود.این حالت زمانی اتفاق میفتد که img:hover  انجام گیرد یعنی اگر ماوس رو عکس قرار دهید به صورت شفاف نشان داده خواهد شد.