loading...
پله پله
MahdiHD بازدید : 97 چهارشنبه 24 تیر 1394 نظرات (0)

گاهی اوقات در طراحی سایت برای ما به عنوان یک برنامه نویس پیش می آید که نیاز داریم Property یکسانی را برای چندین Selector در نظر بگیریم:

?
1
2
3
4
5
6
7
8
9
p {
   color:yellow;
}
td {
   color:yellow;
}
h3 {
   color:yellow;
}

همانطور که در کد فوق می بینیم برای Selector های p و td و h3 یک Property تحت عنوان color در نظر گرفته ایم و Value آن را هم برابر با yellow قرار داده ایم. در عوض می توان کد فوق را به صورت زیر به طور خلاصه نوشت:

?
1
2
3
p, td, h3 {
   color:yellow;
}

همانطور که می بینیم پس از p یک کاما قرار داده و td را نوشته و پس از آن هم یک کامای دیگر قرار داده و h3 را نوشته ایم. از این پس color برای هر سه Selector در نظر گرفته خواهد شد.

MahdiHD بازدید : 118 چهارشنبه 24 تیر 1394 نظرات (0)

گاهی اوقات نیاز داریم تا مثلاً فقط تگ های <p> را که داخل تگ <div> هستند را هدف قرار دهیم. برای این کار می بایست از مفهومی تحت عنوان Descendant Selector استفاده کنیم. برای روشن شدن این موضوع کد سی اس اس (CSS) زیر را مد نظر قرار می دهیم:

?
1
2
3
4
div p {
   color:#00ff00;
   font-size:20px;
}

همانطور که می بینیم ابتدا کلید واژه div را نوشته سپس یک فاصله قرار داده و کلیدواژه p را می نویسیم ( اگر خاطرمان باشد پیش از این گفتیم که کدهای سی اس اس (CSS) در موارد خاصی به فاصله حساس هستند که در اینجا یک مورد از آن ها را می بینیم. به عبارت دیگر اگر فاصله مابین div و p را حذف کنیم عملکرد مورد انتظار مشاهده نخواهد شد).
از این پس هر تگ <p> که داخل تگ <div> باشد به رنگ سبز در آمده و اندازه آن هم 20 پیکسل خواهد شد. برای روشن شدن این مسئله کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن خود می کنیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
     
    <head>
        <meta charset="utf-8">
        <title>Netshahr</title>
        <link type="text/css" rel="stylesheet" href="css/main.css">
    </head>
     
    <body>
        <p>استفاده از کلاس در کدهای اچ تی ام ال</p>
        <br/>
        <div>
            <p>پاراگرافی که داخل تگ دیو قرار دارد</p>
        </div>
    </body>
</html>

در کد فوق می بینیم که دو تگ <p> داریم که یکی از آن ها داخل تگ <div> قرار گرفته است. حال با آگاهی از کدهای سی اس اس خود این انتظار می رود که فقط پاراگراف داخل تگ <div> تحت تاثیر استایل ها قرار گیرد. برای روشن شدن این موضوع فایل خود را در مرورگر اجرا می کنیم:

using element selectors in div in css

MahdiHD بازدید : 158 چهارشنبه 24 تیر 1394 نظرات (0)

گر نیاز داشته باشیم تا id یا class یی که ایجاد کرده ایم فقط به برخی تگ های خاص در اچ تی ام ال (HTML) اختصاص یابند، می بایست کد سی اس اس (CSS) خود را به صورت زیر بازنویسی کنیم:

?
1
2
3
4
5
6
p.myClass {
   background-color:#333;
   color:#fff;
   width:300px;
   font-size:20px;
}

همانطور که در کد فوق ملاحظه می شود ابتدا نام Selector یی تحت عنوان p را نوشته سپس نام Selector خود تحت عنوان myClass را می نویسیم (نیاز به توضیح نیست که همواره از نقطه برای Selector هایی از جنس class استفاده می کنیم). از این پس این class فقط در مورد کلیه تگ های <p> اعمال خواهد شد. برای روشن شدن این مطلب کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن خود می کنیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
     
    <head>
        <meta charset="utf-8">
        <title>Netshahr</title>
        <link type="text/css" rel="stylesheet" href="css/main.css">
    </head>
     
    <body>
        <p class="myClass">استفاده از کلاس در کدهای اچ تی ام ال</p>
        <br/>
        <h1 class="myClass">استفاده از کلاس قبلی در یک تگ دیگر</h1>
    </body>
</html>

در کد فوق class را هم به تگ <p> و هم به تگ <h1> ضمیمه کرده ایم اما از آنجا که در سی اس اس (CSS) دستور داده ایم که این class فقط در مورد تگ های <p> اعمال شود انتظار می رود تغییری در تگ <h1> نبینیم. برای تست کردن این کد فایل خود را در مرورگر باز می کنیم:

using class selectors and id selectors together

می بینیم که تاثیر class خود تحت عنوان myClass فقط روی تگ <p> اعمال شده است. این قانون در مورد Selector هایی از جنس id هم صدق می کند با این تفاوت که به جای نقطه می بایست از علامت # استفاده کنیم. برای روشن شدن این مطلب کد فوق را به صورت زیر بازنویسی می کنیم:

?
1
2
3
4
5
6
p#myClass {
   background-color:#333;
   color:#fff;
   width:300px;
   font-size:20px;
}

با ویرایش کردن کدهای اچ تی ام ال (HTML) خود و نوشتن دستور id به جای کلید واژه class این تغییرات را می توان اعمال نمود. به خاطر داشته باشیم که مابین class یا id و selector نمی بایست Space وجود داشته باشد.

MahdiHD بازدید : 158 چهارشنبه 24 تیر 1394 نظرات (0)

و رایج ترین نوع Selector ها در زبان سی اس اس (CSS) تحت عنوان Element Selector شناخته می شوند. همانطور که در دوره اچ تی ام ال (HTML) توضیح دادیم منظور از Element تگ های اچ تی ام ال (HTML) به همراه محتوای داخل آنها است. به طور مثال برای تگ <h1> می بایست از Element Selector یی تحت عنوان {} h1 استفاده کرد. همانطور که می بینیم علامت های <> که در زبان اچ تی ام ال (HTML) مورد استفاده قرار می گیرند به علامت های {} در زبان سی اس اس (CSS) تبدیل می شوند.
به طور کلی این نوع از Selector ها بسیار گسترده هستند. به عبارت دیگر چنانچه از Selector یی تحت عنوان {} p استفاده کنیم، این Selector کلیه تگ های پاراگراف در صفحات وب سایت ما را تحت تاثیر قرار خواهد داد.
نوع دوم از Selector ها تحت عنوان class Selector شناخته می شوند. به طور کلی یکی دیگر از Attribute های زبان اچ تی ام ال (HTML) تحت عنوان class شناخته می شود که آن را در کلیه تگ ها می توان مورد استفاده قرار داد. نحوه نام گذاری class ها به این شکل است که هر نامی که بخواهیم می توانیم برای آن ها در نظر بگیریم و علاوه بر این class مد نظر را به هر تعداد و برای هر تعداد تگ که نیاز داشته باشیم می توانیم مورد استفاده قرار دهیم. برای روشن شدن این مطلب کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن خود می کنیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>Netshahr</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <p class="myClass">استفاده از کلاس در کدهای اچ تی ام ال</p>
   </body>
</html>

همانطور که در کد فوق ملاحظه می کنیم، داخل تگ <body> یک تگ <p> قرار داده و داخل تگ آغازین پاراگراف از Attribute یی تحت عنوان class استفاده کرده و نامی دلخواه همچون myClass برای آن در نظر گرفته ایم (نحوه نوشتن myClass به این شکل است که حرف اول به صورت کوچک نوشته شده سپس اولین حرف کلمه دوم با حرف بزرگ نوشته شده است. این نوع نامگذاری اصطلاحاً camelCase گفته می شود. واژه camel به معنی "شتر" است و از آنجا که این طور نامگذاری شبیه به کوهان شتر است camelCase نامیده می شود. البته این نوع نامگذاری اجباری نبوده و صرفا برای خوانایی بیشتر مورد استفاده قرار می گیرد).
حال فایل main.css خود را به صورت زیر تکمیل می کنیم:

?
1
2
3
4
5
6
.myClass {
   background-color:#333;
   color:#fff;
   width:300px;
   font-size:20px;
}

همانطور که در کد فوق می بینیم، داخل فایل main.css ابتدا یک نقطه قرار داده سپس نامی که برای class در نظر گرفتیم را می نویسیم و هر کدی که بخواهیم به این class اختصاص یابد را داخل دو علامت {} می نویسیم:

1. using class in css

به خاطر داشته باشیم که همواره برای اختصاص استایل به class های داخل کدهای اچ تی ام ال (HTML) بایستی داخل فایل سی اس اس (CSS) از علامت نقطه پیش از نام کلاس استفاده کنیم.
حال کد فوق را به صورت زیر تکمیل می کنیم:

?
1
2
3
4
5
   <body>
       <p class="myClass">استفاده از کلاس در کدهای اچ تی ام ال</p>
       <br/>
       <h1 class="myClass">استفاده از کلاس قبلی در یک تگ دیگر</h1>
   </body>

کاری که در کد فوق انجام داده ایم این است که با استفاده از تگ </br> یک فاصله مابین دو خط از کد ایجاد کرده ایم. سپس یک تگ <h1> نوشته ایم و class یی که قبلاً ایجاد کرده بودیم را به آن ضمیمه می کنیم:

2. using class in css

می بینیم که کدهای سی اس اس در مورد تگ <h1> هم اعمال شده اند.
Selector دیگری که می خواهیم مورد بررسی قرار دهیم id Selector نام دارد. id Selector هم همانند class Selector است از این جهت که هر دو به عنوان Attribute برای تگ های اچ تی ام ال (HTML) مورد استفاده قرار می گیرند اما این در حالی است که یک تفاوت عمده با class Selector ها دارند به این صورت که id Selector ها فقط به یک آیتم در صفحات اچ تی ام ال (HTML) اختصاص داده می شوند. برای روشن شدن این مطلب کد فوق را به صورت زیر بازنویسی می کنیم:

?
1
2
3
   <body>
       <p id="myID">استفاده از کلاس در کدهای اچ تی ام ال</p>
   </body>

می بینیم که از Attribute یی تحت عنوان id استفاده کرده و مقدار آن را برابر با myID قرار داده ایم. حال به ویرایش فایل main.css خواهیم پرداخت:

?
1
2
3
4
5
6
#myID {
   background-color:#333;
   color:#fff;
   width:300px;
   font-size:20px;
}

به خاطر داشته باشیم که برای id Selector ها در نوشتن کدهای سی اس اس (CSS) از علامت # استفاده می کنیم که اصطلاحاً Pound Sign یا Hash Mark نامیده می شود:

id selectors in css

به طور کلی نامگذاری در برنامه نویسی از اهمیت ویژه ای برخوردار است چرا که یک اشتباه کوچک منجر به این خواهد شد که برنامه به درستی اجرا نگردد. نامگذاری در اچ تی ام ال (HTML) و سی اس اس (CSS) هم از این قاعده مستثنی نیست. در نامگذاری id ها و class ها حتماً به خاطر داشته باشیم که از علائمی همچون @ و $ و % و ... استفاده نکنیم. علاوه بر این اجازه نداریم تا در نامگذاری از Space یا فاصله هم استفاده کنیم.
سی اس اس (CSS) اصطلاحاً case-sensitive است. به عبارت دیگر نام myClass با myclass دو چیز مجزا تلقی می شوند. بنابراین همواره نام هایی که برای id ها یا class های خود انتخاب می کنیم را می بایست به خاطر داشته باشیم.

MahdiHD بازدید : 160 چهارشنبه 24 تیر 1394 نظرات (0)

همواره به خاطر داشته باشیم که در سی اس اس (CSS) آخرین دستوری که نوشته شود همواره برنده است. به عبارت دیگر آخرین دستورات سی اس اس (CSS) موجب می گردند دستورات پیشین تاثیر خود را از دست بدهند.
برای روشن شدن این موضوع کد زیر را مد نظر قرار می دهیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>Netshahr</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <p>آشنایی با سلسله مراتب کدهای سی اس اس</p>
   </body>
</html>

همانطور که می بینیم یک تگ <p> حاوی عبارتی را داخل تگ <body> قرار داده ایم. اکنون به ویرایش کدهای سی اس اس (CSS) خود می پردازیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
p {
   color:white;
   font-size:20px;
}
h1 {
   font-size:20px;
}
h6 {
   font-size:10px;
}
p {
   color:red;
}

همانطور که در کد فوق می بینیم ابتدا در Selector یی تحت عنوان p رنگ و اندازه مد نظر خود را نوشته ایم سپس اقدام به نوشتن کدهای مرتبط با h1 و h6 نموده و در نهایت مجدد رنگ Selector تحت عنوان p را از سفید به قرمز تغییر داده ایم.
حال مرورگر ابتدا p اول را مد نظر قرار می دهد اما از آنجا که می بیند مجدد این Selector خصوصیت جدیدی به خود گرفته است، خصوصیت دوم را مد نظر قرار می دهد. به عبارت دیگر در بار اول رنگ تگ <p> سفید شده و اندازه آن 20 پیکسل می شود ام از آنجا که مجدد در انتهای کد رنگ تگ <p> از سفید به قرمز تغییر یافته است، مرورگر اندازه را از مورد اول و رنگ را از مورد دوم اعمال خواهد کرد. به طور کلی همواره آخرین کدها مد نظر قرار داده می شوند:

more than one selector in css

این قضیه در مورد ترتیب قرارگیری کدهای سی اس اس External و Internal هم صدق می کند. برای روشن شدن این موضوع کد زیر را مد نظر قرار می دهیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>Netshahr</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
       <style>
           p {
                   color:blue;
           }
       </style>
   </head>
   
   <body>
       <p>آشنایی با سلسله مراتب کدهای سی اس اس</p>
   </body>
</html>

همانطور که در کد فوق مشخص است پس از لینکی که به فایل main.css خود در تگ <head> داده بودیم تگ <style> را نوشته و در آن فقط رنگ p را به آبی تغییر داده ایم. از آنجا که تگ <style> بعد از تگ <link> که به فایل main.css لینک داده است آمده، انتظار می رود که رنگ آبی به جای رنگ قرمز در نظر گرفته شود:

internal and external css codes

اکنون برای دیدن تاثیر سلسه مراتب کدهای سی اس اس (CSS) به صورت زیر جایگاه تگ های <link> و <style> را تغییر می دهیم:

?
1
2
3
4
5
6
7
8
9
10
   <head>
       <meta charset="utf-8">
       <title>Netshahr</title>
       <style>
           p {
                   color:blue;
           }
       </style>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>

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

internal and external css codes2

می بینیم که کدهای سی اس اس External از آنجا که پس از کدهای سی اس اس Internal آمده اند اقدام به رونویسی کدهای Internal می کنند.
حال قصد داریم تا رنگ این پاراگراف را با استفاده از کدهای سی اس اس Inline هم تغییر دهیم. برای این منظور کد خود را به صورت زیر تکمیل می کنیم:

?
1
2
3
    <body>
        <p style="color:yellow;">آشنایی با سلسله مراتب کدهای سی اس اس</p>
    </body>

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

inline code in css

در واقع از آنجا که کدهای سی اس اس Inline پس از کدهای سی اس اس External و Internal قرار گرفته اند برنده این بازی هستند!

MahdiHD بازدید : 144 چهارشنبه 24 تیر 1394 نظرات (0)

بدون استفاده از تگ <style> در بخش head سند اچ تی ام ال (HTML) خود می توان کدهای سی اس اس (CSS) را به صورت Inline یا به عبارتی "داخل تگی" مورد استفاده قرار داد. برای روشن شدن این موضوع کد زیر را وارد ویرایشگر متن خود می کنیم:

?
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>Netshahr</title>
   </head>
   
   <body style="background-color:#ffdeff"></body>
</html>

همانطور که در کد فوق می بینیم، داخل تگ آغازین <body> از Attribute یی تحت عنوان style استفاده کرده ایم و با استفاده از کدهای مرتبط با رنگ پس زمینه و انتخاب رنگی مایل به صورتی، رنگ body این صفحه را تغییر داده ایم:

internal css codes

لازم به ذکر است که در این سری از آموزش ها تا حد ممکن از سی اس اس (CSS) به صورت External استفاده خواهیم کرد.

MahdiHD بازدید : 117 چهارشنبه 24 تیر 1394 نظرات (0)

همانطور که پیش از این گفتیم کدهای سی اس اس (CSS) را به صورت Internal یا داخلی هم می توان در صفحات اچ تی ام ال (HTML) مورد استفاده قرار داد. برای این منظور کد زیر را وارد ویرایشگر متن خود خواهیم کرد:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>Netshahr</title>
       <style>
           body {
                   background-color:#ffde57;
           }
       </style>
   </head>
   
   <body></body>
</html>
  

همانطور که در کد فوق می بینیم داخل تگ های <head> و <head/> از تگی تحت عنوان <style> استفاده کرده ایم. در حقیقت هر کدی که داخل این تگ بنویسیم به عنوان کدهای سی اس اس فقط و فقط در این صفحه از وب سایت ما مورد استفاده قرار خواهد گرفت. به طور مثال در کد فوق با نوشتن کدهایی که می بینیم سعی کرده ایم رنگ body سایت خود را به زرد تغییر دهیم:

making the background color yellow

از نقاط ضعف این نوع از به کار گیری کدهای سی اس اس (CSS) این است که این کدهای فقط در مورد این صفحه از وب سایت اعمال می شوند و چنانچه بخواهیم صفحه دیگری به سایت خود اضافه کنیم بایستی مجدد کدهای سی اس اس (CSS) را برای صفحه جدید هم بنویسیم. از سوی دیگر اگر بخواهیم کدی را تغییر دهیم مثلا رنگ پس زمینه را از زرد به سفید تغییر دهیم، مجبور خواهیم بود تا کلیه کدهای سی اس اس (CSS) در تک تک صفحات سایت خود را ویرایش کنیم که این کاری بسیار وقت گیر است.
علاوه بر این تا مجبور نباشیم نمی بایست کدهای سی اس اس (CSS) را داخل صفحات سایت خود قرار دهیم چرا که بر اساس قوانین سایت w3c.org کاری غیر حرفه ای و غیر استاندارد است.

MahdiHD بازدید : 115 چهارشنبه 24 تیر 1394 نظرات (0)

به منظور لینک دادن به فایل های سی اس اس (CSS) که External یا خارجی هستند می بایست به صورت زیر عمل کرد:

how to make a css file

همانطور که در تصویر فوق ملاحظه می شود فولدری تحت عنوان my site به معنی "سایت من" ایجاد کرده ایم و داخل آن فولدرهای متعددی برای تصاویر، صفحات مختلف سایت و منابع در نظر گرفته ایم. علاوه بر این فولدری تحت عنوان css ایجاد کرده ایم که در تصویر فوق با یک فلش قرمز رنگ مشخص شده است. داخل  این فولدر فایلی تحت عنوان main.css ایجاد کرده ایم. به خاطر داشته باشیم که نام این فایل دلخواه است اما پسوند آن حتماً می بایست css باشد (در انتخاب نام فایل دقت داشته باشیم که از Space و علائم استفاده نکنیم. برای مجزا سازی بخش های مختلف نام های چند بخشی می توان از علائم – و _ استفاده کرد).
در ادامه می بایست از داخل فایل اصلی سایت که index.html نام دارد به فایل main.css خود لینک دهیم. برای این منظور این فایل را در یک ویرایشگر متن مثل Notepad یا ++Notepad و ... باز می کنیم (لازم به ذکر است تعداد نرم افزارهای بسیاری برای ویرایش کدهای اچ تی ام ال (HTML) و سی اس اس (CSS) وجود دارد):

?
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>Netshahr</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body></body>
</html>

همانطور که در کد فوق ملاحظه می شود حداقل کدهای مورد نیاز برای یک سند اچ تی ام ال (HTML) را وارد ویرایشگر متن کرده ایم. حال برای آنکه بتوانیم به فایل main.css لینک دهیم می بایست داخل تگ <head> و <head/> از تگ جدیدی تحت عنوان <link> استفاده کنیم (لازم به ذکر است که این تگ نیاز به تگ پایانی ندارد).
داخل این تگ از Attribute یی تحت عنوان type به معنی "نوع" استفاده کرده و از آنجا که می خواهیم این تگ را برای یک فایل سی اس اس (CSS) مورد استفاده قرار دهیم می بایست مقدار آن را برابر با text/css قرار دهیم. سپس از Attribute دیگری تحت عنوان rel که مخفف واژه Relation به معنی "رابطه" است استفاده کرده و مقدار آن را برابر با stylesheet قرار می دهیم. در نهایت می بایست به فایل css خود لینک دهیم که برای این کار از Attribute یی تحت عنوان href که مخفف واژگان Hypertext Reference است استفاده کرده و مقدار آن را برابر با آدرس فایل main.css قرار می دهیم. در واقع از آنجا که فایل main.css داخل فولدری تحت عنوان css است از اینرو ابتدا نام فولدر css را نوشته سپس یک / قرار داده و نام فایل خود را می نویسیم. از این پس هر کدی که داخل فایل main.css بنویسیم، در سند اچ تی ام ال (HTML) ما که index.html نام دارد اعمال خواهد شد.

MahdiHD بازدید : 91 چهارشنبه 24 تیر 1394 نظرات (0)

کدهای سی اس اس (CSS) از دو بخش کلی تشکیل شده اند که عبارتند از Selector و Declaration. برای روشن شدن این دو اصطلاح تصویر زیر را مد نظر قرار خواهیم داد:

css syntax

حرف p که با یک بیضی قرمز رنگ مشخص شده است اصطلاحاً Selector نامیده می شود. در واقع این Selector کلیه تگ های <p> را در سند اچ تی ام ال (HTML) تحت تاثیر قرار می دهد. بخشی از کد که با یک مستطیل سبز رنگ مشخص شده است اصطلاحاً Declaration نامیده می شود که خود حاوی عناصر مختلفی است (لازم به ذکر است که هر Declaration با علامت { آغاز شده و با علامت } پایان می یابد).
داخل Declaration دو کلمه color و font-size با مستطیل های آبی رنگ مشخص شده اند که اصطلاحاً Property نامیده می شوند. کاری که Property ها انجام می دهند این است که ویژگی های مختلفی همچون رنگ، نوع، اندازه و ... را به یک Selector اختصاص می دهند. پس از هر Property یک علامت : قرار گرفته سپس مقداری در نظر گرفته می شود که اصطلاحاً Value نامیده می شود. بعد از قرار گرفتن Value هم می بایست حتماً یک علامت ; قرار داد تا کد تکمیل شود. به خاطر داشته باشیم که در هر Declaration به هر تعداد که بخواهیم می توانیم Property و Value مرتبط با Selector بنویسیم.
به خاطر داشته باشیم که Space یا "فضای خالی" در کدهای سی اس اس (CSS) در برخی جاها تاثیر داشته و در برخی جاها هم بدون تاثیر است. به عبارت دیگر می توان کدهای سی اس اس (CSS) فوق را به صورت زیر هم نوشت چرا که در مورد کد فوق حذف فضاهای سفید از کد هیچ گونه تاثیری در روند اجرای کدهای سی اس اس (CSS) ندارد (در ادامه آموزش ها، جاهایی که قرار دادن Space مشکل ایجاد می کند را بیشتر توضیح خواهیم داد):

css syntax form

MahdiHD بازدید : 591 چهارشنبه 24 تیر 1394 نظرات (0)

css

زمانیکه زبان سی اس اس (CSS) بوجود نیامده بود، هر مرورگری دارای قواعد مختص به خود برای نمایش تگ های اچ تی ام ال (HTML) بود. بنابراین می توانستیم این انتظار را داشته باشیم که یک وب سایت در مرورگر الف با ظاهر به مراتب متفاوت تری نسب به مرورگر ب به نمایش در آید.
بالاخره به خاطر وجود این ناهماهنگی ها در سال 1996 نسخه اول زبان سی اس اس (CSS) تحت عنوان CSS 1.0 ایجاد شد و در سال 1998 هم نسخه CSS 2.0 به بازار عرضه شد. سپس در سال 2004 با اعمال برخی بازنگری ها در کدهای سی اس اس، نسخه CSS 2.1 شکل گرفت و در نهایت در سال 2011 با رفع برخی مشکلات این نسخه، مجدد تحت همین عنوان به دنیا عرضه شد و این نسخه از سی اس اس (CSS) همان نسخه ای است که طراحان وب با آن سر و کار دارند.
با توجه به سرعت گسترش وب و همچنین ایجاد وب اپلیکیشن ها و دستگاه های موبایل نیاز به نسخه جدیدی از سی اس اس بود که می بایست رویکردی کاملاً متفاوت را اتخاذ می کرد. از این رو نسخه CSS 3 ایجاد شد که هنوز هم در حال توسعه و تکمیل است.

MahdiHD بازدید : 139 چهارشنبه 24 تیر 1394 نظرات (0)

به عبارت ساده سی اس اس (CSS) زبانی است که با استفاده از آن می توان ظاهر کدهای زبان های Markupیی همچون اچ تی ام ال را تغییر داد. در واقع اچ تی ام ال (HTML) ساختار یک صفحه از وب سایت را ایجاد می کند و این در حالی است که سی اس اس (CSS) نحوه به نمایش در آمدن عناصر مختلف زبان اچ تی ام ال (HTML) را مشخص می سازد:

the relationship between html and css

برای روشن شدن مطلب، زبان اچ تی ام ال (HTML) را به اسکلت یک ساختمان تشبیه می کنیم. همانطور که در تصویر فوق می بینیم اسکلت ساختمان عاری از هرگونه زیبایی ظاهری فقط چهارچوب اصلی ساختمان را مشخص می سازد. در سمت چپ، همان سازه را می بینیم که با اعمال قوانین سی اس اس (CSS) ظاهری متفاوت به خود گرفته است. همانطور که در سمت چپ تصویر می بینیم با اعمال سه سری متفاوت از قوانین سی اس اس (CSS) توانسته ایم ساختاری یکسان را به سه مدل مختلف  نمایش دهیم.
زبان CSS مخفف واژگان Cascading Style Sheet به معنی "الگوهای آبشاری" است. علت اختصاص صفت Cascading به معنی "آبشاری" به این زبان این است که قوانین این زبان به صورت آبشاری یا از بالا به پایین اعمال می شوند. برای روشن شدن این مسئله ابتدا نیاز است تا راه های مختلفی که از آن طریق می توان کدهای سی اس اس (CSS) را روی یک سند اچ تی ام ال (HTML) اعمال کرد مورد بررسی قرار دهیم:
به طور کلی سه راه برای استفاده از کدهای سی اس اس در یک سند اچ تی ام ال وجود دارد که عبارتند از:
1.    Inline: منظور از این اصطلاح این است که می توان کدهای سی اس اس (CSS) را در قالب Attribute، داخل تگ های اچ تی ام ال (HTML) استفاده کرد. برای روشن شدن این مطلب کد زیر را مد نظر قرار می دهیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>Netshahr</title>
   </head>
   
   <body>
       <p style="font-family:Tahoma; font-size:20px;">این یک پاراگراف است</p>
   </body>
</html>

همانطور که می بینیم داخل تگ آغازین <p> کلیدواژه style را نوشته و یک علامت مساوی مقابل آن قرار می دهیم. سپس داخل علامت های "   " به هر تعداد Property که بخواهیم می توانیم مورد استفاده قرار دهیم و آن ها را با یک فاصله از یکدیگر جدا می سازیم. تا حد ممکن استفاده از این نوع نوشتن کدهای سی اس اس (CSS) توصیه نمی شود چرا که اگر بخواهیم روزی مقادیر یک تگ را تغییر دهیم، می بایست شروع به ویرایش کلیه کدهای سی اس اس (CSS) در کلیه فایل های اچ تی ام ال (HTML) نماییم.
2.    Internal: منظور از این اصطلاح این است که می توان کلیه کدهای سی اس اس (CSS) را در تگ <head> یک سند اچ تی ام ال (HTML) نوشت:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>Netshahr</title>
       <style>
           body{
               background-color:#fff;
           }
           p {
               font-family:Tahoma;
                   font-size:20px;
           }
       </style>
   </head>
   
   <body>
       <p>این یک پاراگراف است</p>
   </body>
</html>

در نسخه های قبلی اچ تی ام ال (HTML) برای تگ <style> می بایست از Attribute یی تحت عنوان type استفاده می کردیم اما در نسخه 5 اچ تی ام ال دیگری نیازی به این Attribute نیست و فقط کافی است تا تگ های <style> و <style/> را داخل تگ <head> و <head/> بنویسیم.
همانطور که در کد فوق می بینیم، Selector ها یا همان body و p و ... را به صورت مجزا از یکدیگر نوشته و مقادیر مرتبط با هر یک از آن ها را داخل علامت های {} نوشته ایم.
به طور کلی این نوع نوشتن کدهای سی اس اس (CSS) نسبت به روش Inline به مراتب بهتر است اما این در حالی است که این نوع کدنویسی فقط برای تگ های یک صفحه از اچ تی ام ال (HTML) مناسب هستند و اگر بخواهیم کدهایی بنویسیم که برای کل سایت مناسب باشند می بایست روش سوم را مد نظر قرار دهیم.
3.    External: منظور از این اصطلاح این است که می توان کلیه کدهای سی اس اس (CSS) را داخل فایلی با پسوند css قرار داد سپس در تگ <head> سند اچ تی ام ال (HTML) خود به آن فایل لینک داد. برای این منظور یک فایل جدیدی ساخته و حتماً پسوند آن را css. قرار می دهیم. به طور مثال در این آموزش نام main.css را در نظر می گیریم. سپس کدهای سی اس اس (CSS) خود را به صورت زیر وارد آن می کنیم:

?
1
2
3
4
5
6
7
8
9
body {
   font-family:Tahoma;
}
p {
   font-size:20px;
}
h2 {
   background-color:#fff;
}

حال فایل اچ تی ام ال را به صورت زیر تکمیل می کنیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>Netshahr</title>
       <link type="text/css" rel="stylesheet" href="/css/main.css">
   </head>
   
   <body>
       <p>این یک پاراگراف است</p>
   </body>
</html>

همانطور که در کد فوق می بینیم، داخل تگ <head> و <head/> از تگ دیگری تحت عنوان <link> استفاده کرده ایم. داخل تگ <link> از سه Attribute مختلف تحت عناوین type، rel و href استفاده کرده ایم. لازم به ذکر است که در نسخه 5 اچ تی ام ال (HTML) نیازی به type نیست اما اگر بخواهیم از نسخه های قبلی اچ تی ام ال استفاده کنیم می بایست از این Attribute استفاده کرد. وظیفه href این است که آدرس فایل سی اس اس را به فایل اچ تی ام ال معرفی می کند. rel مخفف واژه relationship به معنی "رابطه" است. مقداری که برای این Attribute می بایست مد نظر قرار دهیم stylesheet است (لازم به ذکر است که تگ <link> نیاز به تگ پایانی </link> ندارد).
از این پس حتی اگر سایت ما حاوی یکصد صفحه مختلف باشد، فقط کافی است تا با قرار دادن تگ <link> در بخش <head> هر فایل، کدهای سی اس اس (CSS) را در آن صفحه اعمال کرد و چنانچه به طور مثال بخواهیم یک تغییر کوچک ایجاد کنیم، فقط کافی است تا آن تغییر را در main.css اعمال کنیم و از آن پس در کلیه فایل های اچ تی ام ال (HTML) سایت، آن 10111213039 , 80167643تغییر اعمال خواهد شد.
راه کار دومی که برای برقراری ارتباط مابین فایل اچ تی ام ال (HTML) و سی اس اس (CSS) وجود دارد استفاده از دستور import است. برای این منظور کد زیر را وارد فایل اچ تی ام ال (HTML) می کنیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>Netshahr</title>
<!--
       <link type="text/css" rel="stylesheet" href="/css/main.css">
-->
       <style>
       @import url("css/main.css");
       </style>
   </head>
   
   <body>
       <p>این یک پاراگراف است</p>
   </body>
</html>

همانطور که در کد فوق می بینیم، ابتدا تگ <link> را کامنت کرده ایم سپس در تگ <head> ابتدا تگ های <style> و <style/> را نوشته و علامت @ را قرار می دهیم و بلافاصله بعد از آن کلید واژه import را می نویسیم و سپس یک فاصله قرار می دهیم. در نهایت دستور url را نوشته و داخل پرانتز آدرس فایل سی اس اس خود را می نویسیم. لازم به ذکر است که استفاده از تگ <link> به مراتب رایج تر از دستور import@ است.
توجه داشته باشیم که تگ های زبان اچ تی ام ال (HTML) ابتدا به سراغ کدهای اصطلاحاً External سی اس اس (CSS) می روند و پس از آن به سراغ کدهای Internal رفته و در نهایت کدهای سی اس اس (CSS) از نوع Inline را مورد استفاده قرار می دهند. فرض کنیم که در یک فایل External رنگ تگ <p> را به رنگ سبز در آورده ایم و در کدهای Internal رنگ همین تگ را به آبی تغییر داده ایم و در نهایت در کدهای Inline رنگ را به سفید تبدیل کرده ایم. در چنین شرایطی اچ تی ام ال (HTML) رنگ سفید را مد نظر قرار خواهد داد.
از دیگر کاربردهای زبان سی اس اس (CSS) می توان به نحوه نمایش صفحات اچ تی ام ال (HTML) در نمایشگرهای مختلف اشاره کرد. در واقع با استفاده از فایل های سی اس اس (CSS) مختلف می توان این امکان را بوجود آورد که صفحات وب سایت ما در دستگاه های مختلفی همچون مانیتورهای بسیار بزرگ، تبلت و حتی موبایل با ظاهری متفاوت به نمایش در آید. علاوه بر این می توان با اختصاص یک فایل سی اس اس (CSS) مجزا این امکان را بوجود آورد که اگر کاربری خواست صفحات وب سایت ما را پرینت کند، صفحات وب سایت به شکل یک کتاب پرینت شوند.
برای روشن شدن مطالب فوق وب سایت زیر را در نظر می گیریم:

responsive design with css

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

responsive design with css for mobile

می بینیم که طراح این سایت با استفاده از کدهای سی اس اس (CSS) مجزا برای دستگاه هایی با نمایشگر خیلی کوچک همچون موبایل، ساختار متفاوتی را برای سایت در نظر گرفته است بطوریکه عناصر روی سایت بدون آنکه به هم ریخته به نظر برسند با ظاهری زیبا و متفاوت در معرض دید کاربران قرار خواهد گرفت.

MahdiHD بازدید : 115 چهارشنبه 24 تیر 1394 نظرات (0)

آموزش CSS

زبانCSSاین امکان را به طراحان سایت می دهد تا کدهای اچ تی ام ال خود را از لحاظ بصری زیبا و چشمگیر کنند. پس از فراگیری نحوه استفاده از تگ های HTML، اساسی ترین گام یادگیری استفاده از کدهای سی اس اس است چرا که امروزه کمتر سایتی را می توان یافت که صرفاً با استفاده از زبان اچ تی ام ال طراحی شده باشد.

CSSکه مخفف واژگانCascading Style Sheetsبه معنای "الگو های آبشاری" است را می توان برای طراحی اجزای صفحه از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده می شودبه کار برد.

سی اس اس به زبان ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها)، زیبایی جهت طراحي انواع سبک يا استايل براي صفحه هاي وب مورد استفاده قرار می گیرد.

با استفاده از کدهايCSS همچون font-size، font-weight، font-style، font-variant،text-align، border-radius، background-color، box-shadow و ... ميتوان براي صفحه وب طرح‌ها و قالب‌هاي متنوعي طراحي کرد.

از مهمترین مزایایCSSمیتوان به انعطاف پذیری بالای کدهای سی اس اس، کم حجم کردن فایل های HTML و بالتبع آن پایین آمدن مدت زمان بارگذاری صفحه، هماهنگی راحت تر نمایش ظاهر سایت در مرورگر های مختلف، امکان طراحی سایت به صورت Responsive یا "واکنش گرا" و ... نام برد.

امیدواریم با مطالعه این سری از آموزش های مقدماتی سی اس اس که در آن ها سعی شده با زبانی گویا و کاملاً ساده مفاهیم پیچیده CSS توضیح داده شوند، به علاقمندان به فراگیری این زبان کمک کرده باشیم تا بتوانند سایت هایی جذاب طراحی کنند.

منبع این سری از آموزش ها نت شهر است

اطلاعات کاربری
  • فراموشی رمز عبور؟
    • آرشیو
  • تير 1394
    • نظرسنجی
    آیا از آموزش های سایت راضی هستید؟
    آمار سایت
  • کل مطالب : 94
  • کل نظرات : 0
  • افراد آنلاین : 10
  • تعداد اعضا : 46
  • آی پی امروز : 26
  • آی پی دیروز : 20
  • بازدید امروز : 59
  • باردید دیروز : 48
  • گوگل امروز : 0
  • گوگل دیروز : 0
  • بازدید هفته : 456
  • بازدید ماه : 456
  • بازدید سال : 23,897
  • بازدید کلی : 122,362

    • صفحه اصلی تالار گفتمان ثبت نام ورود آرشیو تماس با ما
    نیرو گرفته : رزبلاگ