در این بخش از آموزش css به توضیح ویژگی تنظیم شفافیت عناصر Opacity میپردازیم.
Opacity
با ویژگی 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 */
}
محل قرارگیری عناصر - خواص مربوط به Position
در این بخش از آموزش css به توضیح خواص مربوط به Position میپردازیم.
با استفاده از ویژگی Position موقعیت عنصر در صفحه را مشخص کنید.همچنین میتوانید یک عنصر را پشت عنصر دیگر قرار دهید و اینکه چه اتفاقی بیفتد زمانی که محتوای یک عنصر بیش از اندازه بزرگ است.
عناصری که از ویژگی Position استفاده میکنند،ویژگی های زیر را نیز میتوانند داشته باشند.
خواص مربوط به سرریزی Overflow عناصر در CSS
در این بخش از آموزش css ، ویژگی Overflow را آموزش میدهیم.
در صورتی که محتوای یک عنصر سر ریز کند با این ویژگی میتوانید مشخص کنید که بعد از سرریز شدن چه اتفاقی بیفتد.
div}
در این بخش از آموزش css ، تنظیم خواص باکس ها را آموزش میدهیم. همه ی عناصری که در HTML تعریف میشوند میتوانند این ویژگی ها را داشته باشند.
این بخش یکی از مهمترین آموزش ها ، در سی اس اس و طراحی قالب سایت می باشد.
Text Color
در این بخش از آموزش css ، تنظیم متن و نوشته را آموزش میدهیم.
ویژگی color برای تنظیم رنگ متن استفاده میشود.این ویژگی با 3 روش زیر میتواند مقدار دهی شود
رنگ پیش فرض در یک صفحه وب سایت بستگی به رنگ انتخاب شده در بدنه وب سایت شما دارد
Font Family
در این بخش از آموزش css ، تنظیم قلم و فونت را آموزش میدهیم.
در css دو نوع از خانواده فونت ها وجود دارد.
با ویژگی font-family شما میتوانید نوع قلم مورد نظر را برای متن تنظیم کنید،چنانچه میخواهید از یک فونت خاص استفاده کنید ، نوع فونت مورد نظر خود را اول بنویسید ، چون ممکن است این فونت در کامپیوتر های دیگر موجود نباشد و باعث بهم ریختگی نظم خطوط شود میتوانید نام چند فونت دیگر را نیز وارد کنید.
تنظیم ابعاد در CSS
برای تنظیم ابعاد عناصر در CSS از چند ویژگی میتوان استفاده کرد که مهمترین و اصلی ترین آنها Width و Height میباشد.
در ذیل به توضیح این ویژگی ها با توجه به ورژن تعریف شده در CSS میپردازیم.
در این بخش از آموزش css ، اصول نوشتن کدهای css را شرح میدهیم.
مثال صحیح :
margin-left:20px;
مثال غلط:
margin-left:20 px;
با رعایت تمامی این نکات شما طراحی سایت بهینه تری را خواهید داشت .
این روش از نوشتن css دارای بالاترین اولویت اجرا نسبت به دو روش دیگر است. استفاده از این روش تمامی Style های موجود در دو روش دیگر را نادیده میگیرد.این روش در واقع هدف واقعی استفاده از css را کاهش میدهد .
برای اینکه طراحی سایت بهینه تری داشته باشید پیشنهاد میشود که از این روش فقط در مواقع ضروری استفاده کنید.
با استفاده از ویژگی style در یک عنصر میتوانید از این روش نوشتن css استفاده کنید.
مثال :
<p style="background: blue; color: white;">A new background and
font color with inline CSS</p>
در سی اس اس به طور کلی 140 رنگ استاندارد وجود دارد که در ادامه با آن ها آشنا خواهیم شد:
برای این که در سی اس اس به تگ ها سایه بدیم الیبته برای اطراف و نه متن.
باید از کد زیر استفاده کرد:
div
{
box-shadow:2px 2px 8px blue;
}
دموی کد بالا را در پایین می تونید مشاهده کنید :
sdqwd
خب اعداد اول که ما از 2 استفاده کردیم برای مکان سایه هستش(سعنی چه مقدار از عمود و افقی)
عدد سوم که از عدد 8 استفاده کردیم میزان ضخامت و شفافیت سایه رو مشخص میکنه
بعد هم باید رنگ سایه رو مخص کنیم که ما از آبی استفاده کردیم.
اگراین مطلب رو متوجه نشدید میتونید به آدرس aliserver@yahoo.com سوالتون رو مطرح کنید.
نوشته شده توسط مدیر سایت استارت دانلود
سی اس اس زبان کد نویسی برای وب و برای افکت دهی به تگ های هستش . که می شه بعضی کار های انیمیشنی هم باهاش کرد.
در سی اس اس از انیمیشین برای حرکت تگ ها یا تغییر شکل و رنگ و . . . می شه استفاده کرد.
البته کد هایی که در ادامه بهتون می دم برای سی اس اس 3 هستش!
اول پشتیبانی مرورگر ها:
آی ای از انیمیشن های سی اس اس 3 پشتیبانی نمی کنه.
فایر فاکس با پیشوند -moz- پشتیبانی می کنه البته امکان داره که فایر فاکس های نسخه بالاتر از کد به صورت کامل پشتیبانی بکنن.
کروم و سفری با پیشوند -webkit- پشتیبانی میکنند.پ
اپرا با پیشوند -o- پشتیبانی میکنه.
برای این که اینیمشین رو یاد بگیرید باید اولkeyframs @ رو بفهمید چیه.در حقیقت باید در داخل اون ما مجموعه کد هامون رو بنویسیم (کد های انیمیشن) بعد در قسمت دیگه توضیح بدیم تا استفاده کنه.
مثلا:
@keyframs FavoriteName
{
from{background:red;}
to{background:yellow;}
}
یا مثلا :
@-moz-keyframs FavoriteName
{
from{background:red;}
to{background:yellow;}
}
FavoriteName نامی که شما روی این قسمت می گذارید تا در جای دیگه استفاده کنید.
تا این جا ما فقط کد رو تعریف کردیم و اگر اجرا کنیم مرورگر نمیفهمه ما برای کدوم تگ این رو تعریف کردیم.
پس باید از این کد استفاده کرد:
div
{
animation: FavoriteName 5s;
}
تو این جا ما اول انیمیشن رو می نویسیم بعد میگیم که از کجا دستور رو بگیره .برای این که بگیم از کجا دستور رو بگیره نامی رو که بهش دادیم رو استفاده می کنیم.پس باید ما از نام FavoriteName استفاده کنیم. بعد باید بگیم که چند ثانیه طول بکشه تا انیمیشن اجرا بشه.
نوشته شده از مدیر سایت استارت دانلود
در صورتی که متوجه نشدید می تونید هر سوالی در مورد هر زبان برنامه نویسی یا کد نویسی رو به آدرس Aliserver@yahoo.com بفرستید.
تگ لینک ( تگ Link )