آموزش جامع Css برای تازه کاران

رضاقاسمی · شهریور 93

با سلام خدمت تمامي دوستان ميخواستم يه آموزشي براي كاربران سايت جومينا منتشر كنم

قصد شروع رو دارم فقط خواستم يه سري نكات رو يادآور بشم:

1- براي ايجاد سوالات پيام خصوصي بديد تا يك تاپيك جديد باز بشه و پاسخ داده بشه

2- پس از ارسال ادامه آموزش تاپيك بسته ميشه و وقتي خواستم بقيه آموزش رو بگذارم باز ميشه

3- در حين ارسال مطلب توسط خودم اگر پست ارسال كنيد حذف ميشه و اخطار ميگيريد.

4- با تشكر هاتون منو دلگرم كنيد.

ویرایش شده شهریور 93 توسط رضا قاسمی

رضاقاسمی · شهریور 93

قسمت اول

به نام خدا

اين اولين قسمت آموزش ماست.

تو اولين قسمت به معرفي نحوه هاي بكار بردن css مي پردازيم

روش اول:

<html>
<head>
<style>
...
</style>
</head>
<body>
</body>
<html>

در قسمت مشخص شده در كد بالا به جاي عبارت ... بايد كد هاي css رو قرار بديد.

روش دوم:

در قسمت مشخص شده در كد زير به جاي عبارت style.css بايد كد لينك فايل css رو قرار بديد.

<html>
<head>
<style>
<link rel="stylesheet" type="text/css" href="style.css">
</style>
</head>
<body>
</body>
<html>

روش سوم

داخل كد هاي html يك خاصيت به نام style اضافه مي كنيم.

مثلا ميخواهيم محتويات تگ p قرمز بشه.

كد زير رو مينويسيم:

color:red;

بجاي ... تو كد css رو مينويسيم.

<html>
<head>
</head>
<body>
<p style="..."></p>
</body>
<html>

ویرایش شده مهر 93 توسط رضا قاسمی
تا آموزش بعدي منتظر باشيد.

رضاقاسمی · شهریور 93

قسمت دوم

امروز ميخوام فرق . (نقطه) و # (مربع) و @ (اتساين) و اصلا نگذاشتن اينها و دونقطه) رو بگم

.(نقطه)

وقتي توي كد هاي css نقطه ميگذاريم و يه اسم جلوش ميذاريم يعني يه تگي توي html كه class ش اون اسمه

مثلا من ميزنم :

.joomina
{
 
}

اينجا مياد يه تگي دنبالش ميگرده كه اسم كلاسش joomina هست

و دستوررات رو توي اون اجرا مي كنه

مثل تگ زير:

<div class="joomina">

# چيه حالا من وقتي كد زير رو ميزنم:

#joomina
{
 
}

مياد دنبال يه تگي ميگرده كه id ش joomina باشه

مثلا تگ زير:

<div id="joomina">

حالا @ چيه

وقتي @ ميزاريم بعد از اتساين ديگه حروف دلخواه نميگذاريم بلكه دستورات مشخصي ميگذاريم

مثلا كد زير:

@font-face
{
 
}

اين كد مياد يه فونت جديد تعريف مي كنه كه اگر سيستم مخاطب نداشت فونتو بازم درست نشون بده كه تو ارسال هاي بعدي قسمت css3 آموزش ميديم كامل اين قضيه رو

حالا يه سوال پيش مياد

بعضي جاها ميبينيم كه هيچي نميگذارند يعني اين علامتا هيچكدوم نيستن فقط اسمه هست

اينو يادآور بشم وقتي اين جور ميشه بازم اسم دلخواه نداريم فقط كداي Html ميتونيم بگذاريم.

به كد زير توجه كنيد:

img
{
 
}

اين كد مياد به تمام عكس ها خاصيتي رو ميده

يعني مثلا ميتونيم اينطوري بگيم هرچي عكس داريم كلا اندازه اش بشه 10 پيكسل

حالا : (دونقطه چیه)

دو نقطه برای انتخاب خاصیتی از یک تگ می باشد.

برای مثال به کد زیر توجه کنید:

a:hover
{
 
}

برای مثال خاصیت hover که برای تگ a نوشته شده است خاصیتی است که حالت رفتن موس روی چیزی را توصیف میکند که در پست ششم در این باره بیش تر توضیح خواهیم داد.

اينم از آموزش امروز

ببخشيد اين تاپيك يه خورده طول كشيد وقت نميكردم ولي قول ميدم سريعتر بروز كنم

موفق باشيد

ارادتمند شما

رضا قاسمي

ویرایش شده مهر 93 توسط رضا قاسمی
اضافه کردن دو نقطه

رضاقاسمی · شهریور 93

قسمت سوم : بك گراند ها

خوب در اين قسمت ميخوام به معرفي خاصيت background بپردازم

background-color:

خوب اولين تگ background-color هست توي تگ بك گراند color مي تونيم به هر تگي رنگ پس زمينه بديم

چطوري اين كارو ميكنيم

سه روش داره يكي rgb هست كه به صورت زير نوشته ميشه براي تمام تگ هاي div

div
{
background-color:rgb(x,y,z);
}

توي قسمت بالا سه اسم x و y و z رو ميبينيد

جاي اينها بايد عددي بين 0 تا 255 وارد كنيد

دقت كنيد حتما بايد هرسه عدد رو وارد كنيد و گرنه با مشكل مواجه ميشيد.

روش دوم استفاده از رنگ هايي هست كه با # شروع ميشه

به كد زير دقت كنيد:

div
{
background-color:#000000;
}

با اين كار پس زمينه تمام div هاي ما سياه ميشه

كه البته كد رنگ رو ميتونيد از فتوشاپ هم بياريد.

و روش سوم هم استفاده از اسم رنگ هست به کد زیر توجه کنید:

div
{
background-color:red;
}

با کد بالا پس زمینه تمام div های ما قرمز میشه.

background-image:

توي اين قسمت ميتونيم يك عكس رو به عنوان پس زمينه معرفي كنيم

به كد زير توجه كنيد:

div
{
background-image:url(bg.png);
}

جاي عبارت bg.png بايد آدرس پس زمينه مورد نيازتون رو وارد كنيد.

background-repeat:

با اين كد مشخص مي كنيد كه آيا پس زمينه بصورت كاشي وار تكرار بشه ؟ نشه؟ و...

به كد زير توجه كنيد:

div
{
background-repeat:repeat;
}

با كد بالا به css اعلام ميكنيم كه ميخوايم تصوير تكرار داشته باشه كه البته اگر هم نديم css خوش بطور پيشفرض از اين كد استفاده مي كنه

به كد زير توجه كنيد:

div
{
background-repeat:no-repeat;
}

با اين كد اعلام مي كنيم كه نميخواهيم پس زمينه تكرار بشه

به كد زير توجه كنيد:

div
{
background-repeat:repeat-x;
}

با اين كد به css اعلام مي كنيم كه ميخوايم عكس فقط در جهت x ها يعني افقي تكرار بشه

به كد زير توجه كنيد:

div
{
background-repeat:repeat-y;
}

با اين كد به css اعلام مي كنيم كه ميخوايم عكس فقط در جهت y ها يعني عمودي تكرار بشه

background-position:

با اين كد به css ميفهمونيم كه ميخوايم عكس پس زمينه كدوم سمت باشه

به كد زير توجه كنيد:

div
{
background-position:right top;
}

به اين كد به css مي فهمونيم اگر عكس بزرگتر بود در بالا سمت راست قرار بگيره

اين كد در صورتي كاربرد داره كه background-repeat برابر no-repeat باشه

جلسه امروز نيز به پايان رسيد خدا نگهدار

ویرایش شده مهر 93 توسط رضا قاسمی
اضافه کردن روش سوم (اسم رنگ)

رضاقاسمی · مهر 93

قسمت چهارم: متن ها

خوب در اين قسمت ميخوام نحوه استایل دهی به متن ها رو آموزش بدم.

یکی از این خاصیت ها رنگ دهی بود که توی پست های قبلی آموزش دادم

خاصیت text-align

با این خاصیت میتونیم جهت متن رو مشخص کنیم

به کد زیر توجه کنید:

.div
{
text-align:center;
}

کد بالا متن رو وسط چین میکنه

به کد زیر توجه کنید:

.div
{
text-align:right;
}

کد بالا متن رو راست چین میکنه

به کد زیر توجه کنید:

.div
{
text-align:left;
}

کد بالا متن رو چپ چین میکنه

به کد زیر توجه کنید:

.div
{
text-align:justify;
}

کد بالا متن رو از دو طرف تراز میکنه

خاصیت text-decoration

کد زیر رو ببینید:

a {
    text-decoration: none;
}

این کد خط زیر متن ها رو از بین می بره. که یکی از پرکاربرد ترین استفاده هاشم برای تگ a هست.

کد زیر رو ببینید:

a {
    text-decoration: overline;
}

این کد خطی در بالای متن می کشه.

کد زیر رو ببینید:

a {
    text-decoration: line-through;
}

این کد خطی در روی متن می کشه

کد زیر رو ببینید:

a{
    text-decoration: underline;
}

این کد هم خطی در زیر متن می کشه.

خاصیت text-transform

این خاصیت برای بزرگ و کوچک کردن حروف هست

مثلا کد زیر رو ببینید:

p.uppercase {
    text-transform: uppercase;
}

این کد تگ p ی که کلاسش uppercase هست رو با حروف بزرگ نمایش میده

این خاصیت برای بزرگ و کوچک کردن حروف هست

مثلا کد زیر رو ببینید:

p.lowercase{
    text-transform:lowercase;
}

این کد تگ p ی که کلاسش lowercase هست رو با حروف کوچک نمایش میده

خاصیت text-indent

به عبارت زیر توجه کنید:

p{
    text-indent: 50px;
}

با کد بالا نیز همه تگ های p 50 پیکسل از اول خط فاصله میگیرند.

ویرایش شده مهر 93 توسط رضا قاسمی

رضاقاسمی · مهر 93

قسمت پنجم: فونت ها

خوب در اين قسمت ميخوام نحوه فونت دهی به متون رو آموزش بدم.

font-family

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

به کد زیر توجه کنید:



[php]

p{

font-famiy:Times New Roman,Times,Serif;

}

[/php]

با این کد میگیم تگ p فونتش times new roman باشه و اگر این فونت در سیستم مخاطب نبود times باشه و باز هم اگر نبود serif استفاده بشه.

font-style

با کد فونت استایل می تونیم به متن حالت بدیم.

به کد زیر توجه کنید:



[php]

p.normal {

    font-style: normal;

}

[/php]

با این کد تگ p ی که کلاسش normal هست به طور پیش فرض تنظیم میشه یعنی در اصل هیچ حالتی بهش نمیده.

به کد زیر توجه کنید:



[php]

p.italic {

    font-style: italic;

}

[/php]

با این کد تگ p ی که کلاسش italic هست محتویاتش به صورت کج نشون داده میشه

یعنی تگ زیر با css بالا:



[php]

<p class="italic">joomina</p>

[/php]

خروجیش این میشه:

joomina

font-size

به کد زیر توجه کنید:



[php]

h1 {

    font-size: 40px;

}

[/php]

با این کد همه تگ های h1 محتویاتشبا فونت 40 پیکسل نشون داده میشه.

واحد دیگه ای هم داریم جای px که اسمش em هست.

که فرمول تبدیل به پیکسل اینه:

هر 16 پیکسل برابر 1 em هست.

برای مثال به عبارت زیر توجه کنید:



[php]

h1 {

    font-size: 2.5em;

}

[/php]

کد بالا دقیقا برابر همون کد قبلی هست چون 2.5 em برابر 40 پیکسل هست.

بحث امروز نیز به پایان رسید.

موفق باشید.

ویرایش شده مهر 93 توسط رضا قاسمی

رضاقاسمی · مهر 93

قسمت ششم:لینک ها

چهار خاصیت برای لینک ها یا تگ a در Html وجود دارد:

1- hover

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

به کد زیر توجه کنید:

a:hover {
    color: #FF00FF;
}

با کد بالا پس از اینکه موس روی لینک بیاید رنگ لینک صورتی می شود.

2- link

با این خاصیت رنگ لینک هایی را که بازدید نکرده ایم میتوانیم تغییر دهیم

به کد زیر توجه کنید:

a:link {
    color: #FF0000;
}

با کد بالارنگ تمامی لینک ها سبز می شود.

3- Visited

با این خاصیت رنگ لینک هایی را که بازدید کرده ایم میتوانیم تغییر دهیم یعنی رنگی که پس از کلیک روی لینک میبینیم.

به کد زیر توجه کنید.

a:visited {
    color: #00FF00;
}

با کد بالارنگ تمامی لینک های بازدید شده قرمزمی شود.

4- Active

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

به کد زیر توجه کنید.

a:active {
    color: #0000FF;
}

با کد بالارنگ تمامی لینک های انتخاب شده آبی می شود.

text-decoration

با خاصیت text-decoration میتوانیم خط زیر لینک ها را برداریم.

برای مثال به کد زیر توجه کنید:

a:active {
    text-decoration: none;
}

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

ببخشید چون تگ a چیز خاصی نداشت آموزش ما هم کوتاه بود.

ویرایش شده مهر 93 توسط رضا قاسمی
اصلاح یکسری نکات

رضاقاسمی · مهر 93

قسمت هفتم:لیست ها

اول یه نکته ای رو تا یادم نرفته بگم:

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

ولی شاید یه چیزی براتون جالب باشه اینکه اینها رو باهم هم میتونیم استفاده کنیم

به کد زیر نگاه کنید:

ul.a

{

...

}

با این کد به تگ ul ی که کلاسش a هست استایل میدیم.

خوب حالا بریم سراغ ادامه آموزش :

list-style-type

خوب این list-style-type چیه و چیکار می کنه

با list-style-type میتونیم به تگ های ul و li که به طور پیش فرض دایره شکل هست خروجیشون طرح بندی بدیم

مثلا به کد زیر توجه کنید:

ul.a {
    list-style-type: circle;
}

با کدبالا تگ ul ی که کلاسش a هست به صورت دایره توخالی میشه

(نکته:کسانی که نمیفهمند چی میگم بهتره اول Html رو آموزش ببینند.)

کد زیر رو ببینید:

ul.b {
    list-style-type: square;
}

کد بالا اون دایره رو تبدیل به مربع می کنه.

این دو تا برای خاصیت ul بود

برای خاصیت ol هم چیز هایی وجود داره به کد زیر توجه کنید:

ol.c {
    list-style-type: upper-roman;
}
ol.d {
    list-style-type: lower-alpha;
}

با این کار تگ ol ی که کلاسش C هست بصورت اعداد رومی یعنی I II III IV V Vi و... نمایش میده.

و تگ ol ی که کلاسش d هست بصورت حروف انگلیسی یعنی a b c d ... نمایش داده میشه.

list-style-image

با خاصیت list-style-image میتونید به عکس مورد نظر به جای دایره و حروف و عدد و مربع و.... عکس دلخواه بدید

به کد زیر توجه کنید:

ul {
   list-style-image: url('joomina.gif');
}

با اینکار تمام ul ها به جای اون دایره تبدیل میشن به عکسی با نام joomina.gif که در کنار فایل برنامه نویسی قرار داره.

ویرایش شده مهر 93 توسط رضا قاسمی

آخرین ارسال های انجمن جومینا

دانلود جوملای فارسی

دانلود افزونه ها

پیامک متصل به جوملا

کانال تلگرام جومینا

آموزش جامع Css برای تازه کاران

پست های پیشنهاد شده

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر