PDA

View Full Version : آموزش گام به گام css


shokribahare
چهارشنبه 29 خرداد 1392, 13:14 عصر
CSS مخفف واژه Cascade Style Sheets مییباشد.از Css برای استایل دهی به صفحات وب به صورت اصولی استفاده میشود.توصیه می شود در کنار Html ( آموزش Html ) به آموزش css نیز پرداخت زیرا این دو در طراحی سایت بهینه بسیار موثر می باشند.
زبان css دارای انعطاف پذیری ویژه ای میباشد و با استفاه از این زبان میتوان پیچیده ترین قالب ها را پیاده سازی کرد.
زبان css را میتوان به صورت های مختلف مورد استفاده قرار داد.در صفحه طریقه نوشتن Css به صورت کامل در این باره توضیح داده شده است.
زبان css در سرعت بارگزاری صفحات وب بسیار موثر است.
از زبان css بیشتر برای ایجاد ظاهر زیبا و ایجاد پس زمینه و رنگ فونت و ... استفاده می شود.توصیه می شود از این زبان در کنار زبان html که در بخش آموزش html به طور کامل آموزش داده شده است استفاده شود.
در این بخش به صورت کامل به آموزش css میپردازیم.

منبع:طراحی سایت (http://sitedesign-co.com/)
shokribahare
چهارشنبه 29 خرداد 1392, 13:15 عصر
Css نوعی زبان برنامه نویسی می باشد که معمولا همرا با زبان Html به کار می رود.این دو زبان معمولا همراه با هم استفاده می شود.از این زبان بیشتر برای طراحی صفحات استفاده می شود.برای مثال برای تغییر فونت یا تصویر زمینه ی وب سایت از این زبان استفاده می شود.
با توجه به اینکه امروزه در هر شغلی افراد به طراحی وب سایت روی آورده اند باید طراحی سایت بصورت بهینه و طبق اصول Html و Css طراحی شود تا سایت کارایی داشته باشد.
در این جا نکاتی را در مورد سی اس اس برای شما بیان می کنیم:

√ دستورات وارده حتما باید بین علامت {} قرار بگیرد و همچنین پس از نوشتن دستور با قرار دادن : مقدار آن را تعیین کنید.

√ می توانید دستورات نوشته شده را پشت سرهم نوشته به شرطی که بین آنها با علامت ؛ از هم جدا شود.

√ می توانید هرکدام از تگ ها را با علامت , از هم جدا کرد

در این بخش می خواهیم به شما آموزش Css را به طور کامل توضیح دهیم.

منبع:طراحی سایت (http://sitedesign-co.com/)
shokribahare
چهارشنبه 29 خرداد 1392, 13:17 عصر
طریقه نوشتن Css - خاصیت Style تگ ها
سبک درون خطی
این روش از مهمترین سبک ها در نوشتن Css می باشد.این روش سایر روش ها را شامل می شود اما توصیه می شود جهت بهینه سازی سایت از این روش کمتر استفاده شود.فراموش نشود که پس از وارد کردن دستورات خود حتما پسوند Css را وارد نمایید.
مثال زیر کاربرد سبک درون خطی در Css می باشد.

<p style="backgroun:blue; color: white;">A new background and font color with inline CSS</p>
طریقه نوشتن Css -
تگ Style در Head صفحه
Css داخلی
در وب سایت هایی که تعداد صفحات کمی دارند از روش css داخلی برای طراحی سایت استفاده می کنند.همچنین این لینک داخل تگ Head قرار می گیرد.این سبک دارای مزایایی می باشد که عبارتند از :

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

<head>
<style>
hr {color:silver;}
p {margin-left:20px;}
body {background-image:url("http://www.daneshju.ir/forum/images/bg.gif");}
</style>
</head>
طریقه نوشتن Css - فایل خارجی در پروژه
Css خارجی

این سبک را باید در تگ لینک داخل تگ head قابل استفاده می باشد.با استفاده از این سبک شما می توانید از چندین صفحه وب سایت خود استفاده کنید.در این سبک می توانید با تغییر یک فایل کل ظاهر وب سایت خود را عوض کنید.
مثال زیر کاربرد Css خارجی را نشان می دهد.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>منبع:طراحی سایت (http://sitedesign-co.com/)
asghar2008
چهارشنبه 29 خرداد 1392, 13:32 عصر
سلام

دوست عزیز تشکر میکنم به خاطر کار خوبتون.

کد های Cssرو داخل تگ یا براکد Css و همچنین کدهای Html رو در داخل تگ یا براکد html قرار بدین تا به هم نریزه.

مثال:


<head>
<style>
hr {color:silver;}
p {margin-left:20px;}
body {background-image:url("http://www.daneshju.ir/forum/images/bg.gif");}
</style>
</head


ممنون
shokribahare
چهارشنبه 05 تیر 1392, 14:57 عصر
در این بخش از آموزش css واحدهای شمارش مورد قبول در سی اس اس را برای شما بیان می کنیم.
واحدهای شمارش قابل استفاده در Css شامل موارد زیر می باشند:

1.درصد(%)
2.اینچ(in)
3.سانتیمتر(cm)
4.میلیمتر(mm)
5.em
6.ex
7.pt(برابر با 1/72 اینچ)
8.pc(برابر با 12 point)
9.پیکسل(px)

منبع:طراحی سایت (http://www.sitedesign-co.com/)
shokribahare
چهارشنبه 05 تیر 1392, 14:58 عصر
با استفاده ازخاصیت clear می توان کناره هایی از عنصر را که می خواهیم متن یا عکس در آن سمت قرار نگیرد را مشخص می کنیم،در واقع از این خاصیت برای خالی کردن فضای اطراف یک عنصر استفاده می شود.که حالت های مختلفی دارد که تعدادی از انها توضیح می دهیم.
none:در دو طرف عنصر مجاز است که عکس یا متن قرار بگیرد که حالت پیش فرض می باشد.

right:در سمت راست هیچ عکس و تنی نمی تواند قرار گیرد.

left:در سمت چت هیچ عکس و متنی نمی تواند قرار گیرد.

both:دو طرف عنصر هیچ عکس و متنی نمی تواند قرار گیرد.

با استفاده از خاصیت float می توان موقعیت یک عنصر را به سمت چپ یا راست تنظیم کرد.خاصیت float از مهمترین ویژگی ها در Css و همچنین طراحی سایت می باشد.این خاصیت وقتی عمل می کند که به عنصر مورد نظر خاصیت موردنظر خود را بدهید.
مثال زیر کاربرد خاصیت Float را نشان می دهد.


.text
{float:left;
width:110px;
height:90px;
margin:5px;}
منبع:طراحی سایت (http://www.sitedesign-co.com/)
shokribahare
چهارشنبه 05 تیر 1392, 15:11 عصر
در این بخش از آموزش Css خاصیت position را توضیح می دهیم.
از ویژگی position برای تعیین مکان یک عنصر استفاده می شود به عبارتی برای اینکه بخواهیم موقعیت یک عنصر را در صفحه تغییر دهیم از این ویژگی استفاده می کنیم.در طراحی سایت ویژگی Position از مهمترین کارها به حساب می آید.
توجه داشته باشید که Position موقعیت یک عنصر در صفحه را ثابت می کنه ولی تو مرورگر اکسپلورر6 ساپورت نمی شود و معمولا با اختلالاتی روبرو می شود.
position شامل ویژگی هایی می باشد که عبارتند از top,left,right,bottom که هر کدام از این ویژگی ها موقعیت خاصی را برای عنصر به وجود می آورند.
خاصیت top موقعیت عنصر موردنظر را به سمت بالا هدایت می کند.خاصیت bottom میزان فاصله عناصر را از پایین پنجره مرورگر مشخص می کند.خاصیت left موقعیت عنصر مورد نظر را به سمت چپ هدایت می کند و خاصیت right فاصله عنصر را از سمت راست صفحه تعیین می کند.
position می تواند دارای چهار مقدار باشد که عبارتنداز:relative,static,absolute,fixed.

static position:این ویژگی همیشه پیش فرض می باشد و تمام عناصر html به صورت static نوشته می شوند.در این ویژگی عناصر در همان جایی که در دستور نوشته شده اند به نمایش درمی آیند.

absolute position:این ویژگی این امکان را می دهد که یک عنصر از صفحه را در هر موقعیتی نسبت به بالا،پایین،راست یا چپ صفحه نمایش دهیم.
fixed position:این ویژگی موقعیت یک عنصر در صفحه را مشخص می کند مثلا وقتی صفحه را کوچک می کنیم یا به منطقه ی خاصی از صفحه وب سایت می روییم عنصری که این خاصیت را دارا باشد به همان صورت قبلی باقی می ماند و تغییر نمی کند.

مثال زیر کاربرد خاصیت fixed position را در ویژگی position را نشان می دهد.


p.pos_fixed
{position:fixed;
top:30px;
right:5px;}
relative position:با استفاده از ویژگی عنصر مورد نظر نسبت به موقعیت فعلی خود در صفحه موقعیت دهی می شود.

relative position:با استفاده از ویژگی عنصر مورد نظر نسبت به موقعیت فعلی خود در صفحه موقعیت دهی می شود.

مثال زیر کاربرد خاصیت relative positon را در ویژگی Position نشان می دهد.


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


منبع:طراحی سایت (http://www.sitedesign-co.com/)
shokribahare
دوشنبه 10 تیر 1392, 13:08 عصر
در این بخش از آموزش css ، ویژگی Opacity را توضیح می دهیم.
این خاصیت مقدار وضوح عکس را نشان می دهد به این ترتیب که هرچقدر opacity مقدار بالاتری داشته باشد عکس واضح تر است و هرچقدر Opacity کمتر باشد شفافیت تصویر کمتر می شود.

مثال زیر کاربرد ویژگی Opacity در بخش آموزش Css نشان می دهد.


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 */
}
نکته ی قابل توجه این است که مرورگر اکسپلورر 6و7و8 از خاصیت Opacity پشتیبانی نمی کند.در این روش برای مقدار opacity اعدا را بین 0 تا 100 انتخاب می کنیم.در سایر مرورگرها این مقدار را بین 1 تا 0 در نظر می گیریم به این ترتیب که هرچه از 0 به سمت 1 برویم از شفافیت عنصر کاسته می شود.

http://sitedesign-co.com/Administrator%5Cfiles%5CUploadFile%5Copacity.css.j pg

منبع:طراحی سایت (http://www.sitedesign-co.com/)
shokribahare
دوشنبه 10 تیر 1392, 13:59 عصر
خیلی ممنون از راهنماییتون