طراحی وب سایت قدرتمند، امن و با کیفیت را با شرکت سایت سازان تجربه کنید !
02188471521 –– 02140881038 –– 09120199386

شروع کار با CSS ، انتخابگر ها و کامنت گذاری

شروع کار با CSS ، انتخابگر ها و کامنت گذاری

دوستان عزیز سلام؛ امروز در خدمت شما دوستان عزیز هستم با شروع کار با CSS و در این جلسه مباحث پایه ای CSS یعنی انتخابگرهای CSS و کامنت گذاری در CSS را برای شما همراهان گرامی تشریح می کنم.

ابتدا ببینیم که CSS چیست؟

همانطور که مستحضر هستید(!) المان ها و عناصر صفحه بعد از نشانه گذاری باید سبک دهی شده و چگونگی نمایش آنها در صفحه، طرح بندی و تغییرات المان ها متناسب با اندازه مرورگر، تعیین شود و در کل ویژگی هایی به آن ها بدهیم. برای این کار از دستورات و کدهای CSS (که مخفف عبارت Cascading Style Sheet است) استفاده می کنیم.

پس CSS دستوراتی هستند که توسط آن ها به المان های صفحه وب، ویژگی هایی را تخصیص می دهیم.

اگر شما هم از آن دسته افرادی هستید که بدون مطالعه HTML، یاد گیری CSS را آغاز کرده اید (که اگر واقعا از این دسته افراد هستید ادامه مطلب رو نخونید و همین الان به آموزش HTML در سایت سازان مراجعه کنید و بعد از یادگیری HTML به سراغ این فصل بیایید)، خواهید پرسید که کدها و دستورات CSS را در کجای یک سند HTML باید نوشت؟

پاسخ سوالتان این است که به سه روش درون خطی (inline)، داخلی (internal) و خارجی (external)، دستورات CSS نوشته می شوند که توضیحات بیشتر در زمینه این سه روش در آموزش HTML ارائه شد که در صورت نیاز می توانید جلسه پنجم آموزش HTML را یک بار مرور نمایید و سپس به مطالعه ادامه مطالب این جلسه بپردازید.

از CSS درون خطی حتی الامکان استفاده نمی کنیم. در مرحله آموزش صرفا برای یادگیری بهتر از این روش سبک دهی استفاده می کنیم.

خب بریم سر اصل مطلب، گفتیم که CSS ها دستوراتی برای سبک دهی و ویژگی دادن به المان ها هستند. این دستورات ساختاری دارند به این صورت که:

هر دستور (rule) CSS از دو قسمت تشکیل شده است: 1- انتخاب کننده (selector) 2- تعریف سبک (declaration)

در حالت کلی برای تغییر سبک ها در ابتدا المان مورد نظر را بر اساس شناسه، کلاس، خصیصه و یا نام آن انتخاب کنیم و در ادامه سبک های جدید را برای آن، تعریف می کنیم:

div#id { background-color: cyan; }

در دستور بالا یک دیو بر اساس شناسه انتخاب می شود (div#id) و رنگ زمینه فیروزه ای برای آن تعریف می شود. هر تعداد ویژگی را که بخواهیم می توانیم برای هر المان تعریف کنیم.

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

  • بعد از هر ویژگی و مقدار آن باید علامت نقطه ویرگول (semicolon) نوشته شود.
  • تمام ویژگی ها نیز باید در علامت کروشه قرار گیرند.
  • بین ویژگی و مقدار آن باید از دو نقطه ( ” : ” ) استفاده کرد.

حالا در اولین مثال، یعنی مثال زیر، رنگ و اندازه فونت پاراگراف را تغییر می دهیم:

<!DOCTYPE html>

<html lang="en">

<head>

            <meta charset="UTF-8">

            <title> Page Title </title>

            <style>

             p { color: blue; font-size: 1.2em; }

            </style>

</head>

<body>

 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo enim facere corrupti modi, ipsum autem, non vero voluptatibus alias temporibus, error accusamus est? Provident repellendus quia, illo quam consequuntur perspiciatis!</p>

</body>

</html>

آموزش CSS – بخش اول

در مثال بالا گفتیم که همه ی p های صفحه را انتخاب کن (به کی گفتیم؟ خب به مرورگر گفتیم. دستورات CSS را مرورگر اجرا می کند) و رنگ متن آنها را از سیاه (که پیش فرض مرورگرهاست) به آبی تغییر بده و اندازه فونت آنها را به 1.2 برابر اندازه پیش فرض تغییر بده. (em واحد اندازه فونت پیش فرض مرورگرهاست.)

خب گفتیم که برای سبک دهی به هر المان در ابتدا باید آن المان را انتخاب نماییم. بیایید ببینیم که چگونه می توان المان ها را انتخاب کرد:

روش های انتخاب هر المان

به چند طریق می توان عناصر را انتخاب کرد و آنها را سبک دهی کنیم که در ادامه این روش ها را بررسی می کنیم:

انتخاب المان ها بر اساس نام آنها

در این روش در ابتدا نام المان را می نویسیم و در ادامه دستورات CSS را برای آن المان می نویسیم. اما زمانی که نام یک المان را می نویسیم، تمام المان های با این نام که در سند موجود می باشند انتخاب می شوند و سبک های تعریف شده برای آن ها نیز اعمال می شود. در مثال زیر دو پاراگراف داریم که با انتخاب آنها، متن را وسط چین می کنیم و رنگ آنها را به آبی تغییر می دهیم.

<!DOCTYPE html>

<html lang="en">

<head>

            <meta charset="UTF-8">

            <title> Page Title </title>

            <style>

             p { color: blue; text-align: center; }

            </style>

</head>

<body>

 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo enim facere corrupti modi, ipsum autem, non vero voluptatibus alias temporibus, error accusamus est? Provident repellendus quia, illo quam consequuntur perspiciatis!</p>

 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et est beatae corporis, itaque a architecto esse quaerat voluptatem maiores ipsam dolor recusandae voluptate sint. Reiciendis quaerat, porro dicta soluta molestiae!</p>

</body>

</html>

آموزش CSS – بخش اول

انتخاب المان ها بر اساس شناسه (id)

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

شناسه ها نباید با اعداد آغاز شوند.

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

<!DOCTYPE html>

<html lang="en">

<head>

            <meta charset="UTF-8">

            <title> Page Title </title>

            <style>

             body { direction: rtl; font-family: "iran sans"; }

             #p1 { color: blue; text-align: center; }

            </style>

</head>

<body>

 <p id="p1"> برای این پاراگراف آی دی p1 را تعیین کرده ایم و رنگ آن را به آبی تغییر داده ایم و آن را وسط چین کرده ایم. </p>

 <p> این پاراگراف id ندارد پس انتخاب نمی شود و تغییراتی بر روی آن صورت نمی گیرد. </p>

</body>

</html>

آموزش CSS – بخش اول

انتخاب المان ها بر اساس کلاس آنها

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

در مثال زیر نحوه انتخاب المان در این روش را خواهیم دید:

<!DOCTYPE html>

<html lang="en">

<head>

            <meta charset="UTF-8">

            <title> Page Title </title>

            <style>

            /* body { direction: rtl; font-family: "iran sans"; }*/

             .par { color: blue; text-align: center; }

            </style>

</head>

<body>

 <p class="par"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet nam atque, corporis quae, consectetur repellendus qui, exercitationem ipsum labore odio minima! Quaerat, eligendi, incidunt? Obcaecati at, provident id quo inventore! </p>

 <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nulla aut tempore est cupiditate! Odio aliquam consectetur dignissimos, saepe aut temporibus nisi nemo impedit, a ducimus, ea quibusdam incidunt libero. </p>

 <p class="par"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab perspiciatis molestiae voluptas a laudantium consequuntur distinctio eius debitis rem dolorem, aut dolores fugit ea dolor consequatur quia explicabo tenetur. Qui. </p>

</body>

</html>

آموزش CSS – بخش اول

گفتیم که مجاز هستیم که برای المان ها کلاس یکسان انتخاب کنیم. در مثال زیر المان <h1>  و المان <p>  کلاس یکسان دارند. به نحوه انتخاب هر المان برای سبک دهی توجه نمایید:

<!DOCTYPE html>

<html lang="en">

<head>

            <meta charset="UTF-8">

            <title> Page Title </title>

            <style>

            /* body { direction: rtl; font-family: "iran sans"; }*/

             p.par { color: blue; text-align: center; }

            </style>

</head>

<body>

 <h1 class="par"> lorem </h1>

 <p class="par"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet nam atque, corporis quae, consectetur repellendus qui, exercitationem ipsum labore odio minima! Quaerat, eligendi, incidunt? Obcaecati at, provident id quo inventore! </p>

</body>

</html>

آموزش CSS – بخش اول

همانطور که می بینید درصورت وجود المان های با کلاس یکسان، نام المان، نقطه و کلاس المان، انتخاب کننده خواهند بود.

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

  • کلاس هر المان می تواند چند قسمتی باشد و برای انتخاب المان، می توان از هر کدام از قسمت های کلاس استفاده کرد. فرضا <p class=”part1 part2 part3″>Some text</p>
  • مرورگر در اجرای دستورات مشابه CSS برای یک المان، دستوری که در خطوط پایین تر قرار دارد را اجرا می کند و به عنوان سبک نهایی المان اعمال می کند. مثلا اگر در خط اول رنگ متن یک پاراگراف را آبی کنیم و در خط بعدی دستور قرمز کردن رنگ همان پاراگراف را بنویسیم، دستور خط دوم، دستور خط اول را بی اثر می کند و رنگ متن از آبی به قرمز تغییر می کند.
  • در حالت کلی اولویت اول با CSS های درون خطی، اولویت دوم با CSS های داخلی و اولویت سوم با CSS های خارجی می باشد. و در CSS های درون خطی و خارجی، برای یک المان معین، ویژگی ای اعمال می شود که در خطوط پایین تر نوشته شده است.

خب برای درک نکات بالا مثال زیر را با هم بررسی می کنیم:

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title> Page Title </title>

 <style>

  body { font-family: "iran sans"; }

  p.part2 {

    color: red;

    color: blue;

    color: purple;

  }

 </style>

</head>

<body>

 <p class="part1 part2 part3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi commodi eaque accusantium sapiente ipsa veniam consectetur aut dolorum nam, praesentium dolore perspiciatis vel alias repellat molestiae adipisci impedit. Nobis?</p>

</body>

</html>

آموزش CSS – بخش اول

همانطور که می بینید دستور color: purple;  دو دستور بالایی تغییر رنگ را خنثی کرده است.

انتخاب همزمان چند المان

در مثال زیر می بینید که چگونه می توان چند المان را همزمان انتخاب کرد و سبک های یکسان به آن ها داد.

<!DOCTYPE html>

<html lang="en">

<head>

            <meta charset="UTF-8">

            <title> Page Title </title>

            <style>

             body { direction: rtl; font-family: "Myriad عربي"; }

             p, h1.h01, h2#h02 { text-align: center; color: green; }

            </style>

</head>

<body>

 <h1 class="h01"> عنوان h1 </h1>

 <h2 id="h02"> عنوان h2 </h2>

 <p> پاراگراف با هر تعداد خط </p>

</body>

</html>

آموزش CSS – بخش اول

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

توضیحات در CSS

در CSS توضیحات به شکل زیر نوشته می شوند:

/* توضیحات در این قسمت قرار می گیرد */

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

/*

کامنتها را

در چند خط بنویسید

و درون علامت کامنت

قرار دهید

*/

خب دوستان، آموزش CSS – بخش اول را در اینجا به پایان می رسانم. امیدوارم که مطالب ارائه شده برای شما دوستان عزیزم مفید واقع شده باشد. قسمت دیدگاه را برای شما دوستانم ایجاد کرده ام تا با نظرات خودتون تیم سایت سازان را در تهیه آموزش های بهتر و مفیدتر یاری کنید.

همراه سایت سازان باشید در آموزش CSS جلسه دوم که مطالب جذابتر و کاربردی تری را ارائه خواهیم داد.

شاد و سلامت باشید.

دیدگاه ‏خود را بنویسید