آموزش css

**shokri_bahare** · 15th June 2013 03:27 PM

CSS مخفف واژه Cascade Style Sheets مییباشد.از Css برای استایل دهی به صفحات وب به صورت اصولی استفاده میشود.توصیه می شود در کنار Html ( آموزش Html ) به آموزش css نیز پرداخت زیرا این دو در طراحی سایت بهینه بسیار موثر می باشند.

زبان css دارای انعطاف پذیری ویژه ای میباشد و با استفاه از این زبان میتوان پیچیده ترین قالب ها را پیاده سازی کرد.

زبان css را میتوان به صورت های مختلف مورد استفاده قرار داد.در صفحه طریقه نوشتن Css به صورت کامل در این باره توضیح داده شده است.

زبان css در سرعت بارگزاری صفحات وب بسیار موثر است.

از زبان css بیشتر برای ایجاد ظاهر زیبا و ایجاد پس زمینه و رنگ فونت و ... استفاده می شود.توصیه می شود از این زبان در کنار زبان html که در بخش آموزش html به طور کامل آموزش داده شده است استفاده شود.

در این بخش به صورت کامل به آموزش css میپردازیم.

منبع:طراحی سایت

**shokri_bahare** · 18th June 2013 10:40 AM

طریقه نوشتن Css - خاصیت Style تگ ها

سبک درون خطی

این روش از مهمترین سبک ها در نوشتن Css می باشد.این روش سایر روش ها را شامل می شود اما توصیه می شود جهت بهینه سازی سایت از این روش کمتر استفاده شود.فراموش نشود که پس از وارد کردن دستورات خود حتما پسوند Css را وارد نمایید.

مثال زیر کاربرد سبک درون خطی در Css می باشد.

کد HTML:

<p style="background: blue; color: white;">A new background and font color with inline CSS</p>

طریقه نوشتن Css - تگ Style در Head صفحه

Css داخلی

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

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

مثال زیر کاربرد Css داخلی را نشان می دهد.

کد HTML:

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

طریقه نوشتن Css - فایل خارجی در پروژه

Css خارجی

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

مثال زیر کاربرد Css خارجی را نشان می دهد.

کد HTML:

    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>

منبع:طراحی سایت

**shokri_bahare** · 29th June 2013 09:37 AM

در این بخش از آموزش css واحدهای شمارش مورد قبول در سی اس اس را برای شما بیان می کنیم.
واحدهای شمارش قابل استفاده در Css شامل موارد زیر می باشند:
1.درصد(%)
2.اینچ(in)
3.سانتیمتر(cm)
4.میلیمتر(mm)
5.em
6.ex
7.pt(برابر با 1/72 اینچ)
8.pc(برابر با 12 point)
9.پیکسل(px)

منبع:طراحی سایت

**shokri_bahare** · 1st July 2013 10:44 AM

در این بخش از آموزش css ، ویژگی Opacity را توضیح می دهیم.
این خاصیت مقدار وضوح عکس را نشان می دهد به این ترتیب که هرچقدر opacity مقدار بالاتری داشته باشد عکس واضح تر است و هرچقدر Opacity کمتر باشد شفافیت تصویر کمتر می شود.

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

کد HTML:

    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 برویم از شفافیت عنصر کاسته می شود.

منبع:طراحی سایت

**shokri_bahare** · 1st July 2013 10:45 AM

در این قسمت از آموزش Css ، ویژگی Cursor , ویژگی Visibility و خاصیت Display را توضیح می دهیم.

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

none:در این حالت تصویر نمایش داده نمی شود.

block:در این حالت عنصر به صورت یک شی مجزا با یک خط فاصل قبل و بعد از آن نمایش داده می شود.

inline:در این حالت عنصر به صورت یک شی درون خط ی بدون هیچ خط فاصله قبل و بعد از آن نمایش داده می شود،که حالت پیش فرض است.

list-item:در این حالت عناصر به صورت لیست دیده می شوند.

table:در این حالت عنصر به صورت یک جدول با یک خط فاصله قبل و بعد از آن صفحه نمایش داده می شود.

مثال زیر کاربرد خاصیت display را در بخش آموزش css نشان می دهد.

کد HTML:

        li {display:inline;}

        span {display:block;}

با استفاده از خاصیت visibility شما می توانید عناصر مورد نظر خود را قابل و یا غیر قابل نمایش کنید.visible به معنای نمایش دادن می باشد و با خاصیت hidden می توانید عنصر مورد نظر خود را غیر قابل نمایش کنید.

مثال زیر کاربرد خاصیت visibility را در بخش آموزش css نشان می دهد.

h1.hidden {visibility:hidden;}

با استفاده از cursor می توان نوع اشاره گر موس مورد استفاده برای عناصر را تغییر داد.

مثال زیر کاربرد خاصیت cursor را نشان می دهد.

کد HTML:

    span.crosshair {cursor:crosshair}
    span.help {cursor:help}
    span.wait {cursor:wait}

منبع:طراحی سایت

موضوع: آموزش css

ابزارهای موضوع

نحوه نمایش موضوع

آموزش css

کاربرانی که از پست مفید shokri_bahare سپاس کرده اند.

پاسخ : آموزش css

پاسخ : آموزش css

پاسخ : آموزش css

پاسخ : آموزش css

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

موضوعات مشابه

استرس مادر، حتي پيش از لقاح، ممکن است بر مرگ و مير نوزادش اثر بگذارد يک بررسي جديد نشان مي‌دهد احتمال زنده ماندن نوزاد مادراني که در ماه‌

خبر: آموزش موسیقی برای مغز نوزاد سودمند است

اطلاعيه: حمايت بنياد ملي نخبگان از برگزيدگان مسابقات علمي دانش آموزي مورد تاييد وزارت آموزش و پرورش

توصيه‌هاي وزارت بهداشت، درمان و آموزش پزشكي به عزاداران حسيني

حاجي‌بابايي گزينه اصلي رئيس جمهور براي تصدي وزارت آموزش و پرورش است

کلمات کلیدی این موضوع

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش