در این بخش از آموزش css به توضیح ویژگی آموزش و معرفی انتخابگرها CSS Selectors میپردازیم.
CSS Selectors
انتخابگر ها برای دادن الگوهای مورد نظر ما ، به عناصر به کاربرده میشوند .تمامی این انتخاب گرها را با ذکر مثال توضیح میدهیم .
ما به تعریف تک تک ویژگی های انتخابگرها در 3 قسمت میپردازیم :
برای آموزش سه مورد بالا به ادامه مطلب بروید.
در این بخش از آموزش 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 شما میتوانید نوع قلم مورد نظر را برای متن تنظیم کنید،چنانچه میخواهید از یک فونت خاص استفاده کنید ، نوع فونت مورد نظر خود را اول بنویسید ، چون ممکن است این فونت در کامپیوتر های دیگر موجود نباشد و باعث بهم ریختگی نظم خطوط شود میتوانید نام چند فونت دیگر را نیز وارد کنید.
Background
در این بخش از آموزش css به توضیح ویژگی Background میپردازیم. ویژگی Background برای تعریف افکت های پس زمینه برای یک عنصر به کار میرود.این ویژگی در طراحی وب سایت به شکیل تر شدن سایت شما کمک میکند.
انواع مختلفی از این ویژگی وجود دارد که به شرح هر یک از آنها میپردازیم
تنظیم ابعاد در CSS
برای تنظیم ابعاد عناصر در CSS از چند ویژگی میتوان استفاده کرد که مهمترین و اصلی ترین آنها Width و Height میباشد.
در ذیل به توضیح این ویژگی ها با توجه به ورژن تعریف شده در CSS میپردازیم.
در این بخش از آموزش css ، اصول نوشتن کدهای css را شرح میدهیم.
مثال صحیح :
margin-left:20px;
مثال غلط:
margin-left:20 px;
با رعایت تمامی این نکات شما طراحی سایت بهینه تری را خواهید داشت .
یکی از روشهای تعریف css استفاده از روش External Style Sheet میباشد.
برای داشتن طراحی سایت بهینه پیشنهاد میشود که از این روش استفاده کنید.
از CSS خارجی زمانی استفاده میشود که آن style در بیشتر صفحات استفاده شده باشد.
با استفاده از CSS خارجی
، شما با تغییر دادن تنهایک فایل میتوانید ظاهر سایت خود را تغییر دهید.هر
صفحه بایستی به CSS Style مورد نظر خود لینک داده شود. بهترین روش برای
گذاشتن CSS Style در صفحات وب ، CSS خارجی میباشد
با استفاده از تگ <link> در داخل بخش head شما میتوانید یک CSS خارجی تعریف کنید.
مثال :
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
CSS خارجی را میتوان در هر ویرایشگر متنی نوشت ، CSS Style ها باید با فرمت css. ذخیره شوند. با استفاده از این سبک در واقع شما از یک Style میتوانید در چندین صفحه از وب سایت خود استفاده کنید.
برای نامگذاری فایل های CSS باید نکاتی را رعایت کرد که در بخش قوانین نام گذاری فایل های CSS به طور کامل به آن خواهیم پرداخت.
CSS داخلی
یکی از روشهای تعریف css استفاده از روش Internal Style Sheet میباشد. برای استفاده از این روش بایستی کد های CSS را در فایل HTML ، درون .star-rating, .star-rating a:hover, .star-rating a:active, .star-rating .current-rating{ background: url(/temp/img/star.png) left -1000px repeat-x;direction:rtl ;cursor:pointer} .star-rating{ position:relative; width:120px; height:24px; overflow:hidden; list-style:none; margin:0; padding:0; background-position: left top;direction:rtl } .star-rating li{ display: inline;padding:0px;} .star-rating a, .star-rating .current-rating{ position:absolute; top:0; left:0; text-indent:-1000em; height:24px; line-height:24px; outline:none; overflow:hidden; border: none; } .star-rating a:hover, .star-rating a:active{ background-position: left bottom; } .star-rating a.one-star{ width:20%; z-index:6; } .star-rating a.two-stars{ width:40%; z-index:5; } .star-rating a.three-stars{ width:60%; z-index:4; } .star-rating a.four-stars{ width:80%; z-index:3; } .star-rating a.five-stars{ width:100%; z-index:2; } .star-rating .current-rating{ z-index:1; background-position: left center; }">تگ<head> قرار دهید.
از این روش فقط در طراحی سایت هایی که تعداد صفحات کمتری دارند ، ولی بهترین روش برای داشتن طراحی سایت حرفه ای استفاده از روش css خارجی میباشد.
مزایای استفاده از این سبک :
معایب استفاده از این سبک :
<head>
<style>
hr {color:silver;}
p {margin-left:20px;}
body {background-image:url("images/bg.gif");}
</style>
</head>
این روش از نوشتن css دارای بالاترین اولویت اجرا نسبت به دو روش دیگر است. استفاده از این روش تمامی Style های موجود در دو روش دیگر را نادیده میگیرد.این روش در واقع هدف واقعی استفاده از css را کاهش میدهد .
برای اینکه طراحی سایت بهینه تری داشته باشید پیشنهاد میشود که از این روش فقط در مواقع ضروری استفاده کنید.
با استفاده از ویژگی style در یک عنصر میتوانید از این روش نوشتن css استفاده کنید.
مثال :
<p style="background: blue; color: white;">A new background and
font color with inline CSS</p>
با اینکه در سال‌های نخست پیدایش طراحی وب، طراح‌ها از جدول‌ها و ترفند پنهان سازی آنها برای چیدمان کمک می‌گرفتند، روش مدرن طراحی وب، این روند را منسوخ کرده است. چیدمان اکنون، تنها با دیواره (یا DIV)، که برتری‌های فراوانی نسبت به جدول‌ها (یا TABLE) دارند، انجام میشود. هر دیواره، یک موزاییک مجازی بخش کننده صفحه‌است که کار چیدمان را آسان‌تر انجام میدهد. جدول‌ها به جایگاه نمایش داده‌های ستونی خود بازگشتند و دیگر از آنها برای چیدن داده‌های صفحه‌های وب استفاده نمی‌شود. الگوهای آبشاری، افزون بر سبک تر کردن هر صفحه وب و پاک‌تر کردن آن، از داده‌های تصویری و نمایشی استاندارد، روش طراحی وب را به میزان فراوانی آسان تر و دسترسایی و کارایی وب را بهتر کرده‌اند.
css چیست ؟ الگوهای آبشاری یا روی انداز آبشاری سَبْک یا سی اس اس (به انگلیسی: CSS: Cascading Style Sheets ) در کنار اچ‌تی‌ام‌ال هستهٔ فناوری ساخت صفحه‌های وب هستند. سی‌اس‌اس روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها) بر صفحه‌های وب است. الگوهای آبشاری از جنس زبان‌های نشانه‌گذاری، با ساختار متن سادهٔ رایانه هستند و درون هرکدام، دستورهایی آبشار مانند و پی‌درپی، برای چگونگی نمایش هر صفحه وب افزوده میشود. به گفته‌ای ساده تر، این دستورها روش نشان داده شدن قلم‌ها و اندازه شان، رنگ‌ها و پس زمینه‌ها، روش چیدمان موزاییک‌های دربرگیرنده داده‌ها (دیواره ها)، و بسیاری دیگر از عنصرهای ساختار هر صفحه وب را، درون خود جای می‌دهند.
در سی اس اس به طور کلی 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 )