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

2 ساختار از ساختمان کد css و اجزای آن

ساختمان کد css و اجزای آن

پس از آشنایی با CSS ، در این بخش با ساختار کد CSS آشنا می شوید. این بخش بسیار می تواند شما را در برنامه نویسی و تبحر در آن یاری کند.

همچنین با احاطه بر بخش ساختمان کد css و اجزای آن میتوانید مطالب بعدی مقالات سئو شو را بهتر یاد بگیرید.

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

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

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

بنابراین فقط به بخش هایی که در یک عبارت CSS استفاده می شود ،

توجه کنید ، چگونه می توان ویژگی ها ، موقعیت صفات و ساختار بیانیه را به طور کلی تفکیک کرد. در ادامه با موضوعاتی نظیر

Selector (سکتور)، قسمتی بین { … }، به همراه مثال های جامع و ارزنده روبرو میشوید و در نهایت به نتیجه گیری از این مقاله می پردازیم. 

پس با سئو شو همراه باشید.

ساختمان کد css
ساختمان کد css

ساختمان کد‌های CSS

 

ساختمان کد css | کدهای css از دو قسمت اصلی تشکیل شدن:

  1. انتخاب‌کننده یا selector
  2. قسمتی که بین { … } قرار می­گیره و تعیین کننده نحوه نمایش در صفحست.
ساختمان کد css
ساختمان کد css

Selector

ساختمان کد css |  یک کد css همیشه از انتخاب‌کننده شروع میشه. درواقع وظیفه­‌ی انتخاب‌کننده اینه که خصوصیات موردنظر که بین { … } نوشته شدن رو به یک عنصر اختصاص بده. برای مثال در اینجا، کد css ای رو داریم که خصوصیات رو به هر عنصر h1 ای که درون صفحه هست مربوط می­کنه. h1، یک انتخاب‌کننده هست.

h1{ … }

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

قسمتی بین { … }

ساختمان کد css | قسمتی که بین { … } قرار می­گیره، تعیین‌کننده­‌ی نحوه نمایش انتخاب‌کننده در صفحه ماست. خود این قسمت از دو بخش “ویژگی” و “مقدار” تشکیل شده و می­‌تونه ویژگی‌­های مختلف رو همراه با مقادیر مربوط به اون­‌ها به انتخاب‌کننده اختصاص بده. برای مثال:

h1 { color : red ; }

این کد بیان می­‌کنه، رنگ تمام متن­‌هایی که داخل h1ها هستن، به رنگ قرمز تغییر کنه.

حالا سه نکته رو با هم بررسی کنیم:

  1. ما می‌­تونیم به هرتعداد که می­خواهیم، به انتخاب‌کننده، ویژگی اختصاص بدیم:
    h1 { color: red ; font-size: 10px ; text-align: center ; }
  2. عموما برای راحتی کدنویسی، بهتر هست که کدها رو در خطوط جداگانه بنویسیم، یعنی:
    h1{
    color: red;
    font-size: 10px;
    text-align: center;
     }
  3. یک عنصر، نمی‌­تونه ویژگی تکراری داشته باشه، برای مثال، کد زیر اشتباهه:
    div { color: blue; color: black; }

حالا چند مثال رو با هم بررسی کنیم:

p {
color: black;
background-color: blue;
}

تمام پاراگراف­‌ها در صفحه، به رنگ مشکی ظاهر بشن و رنگ پس‌­زمینه اون­‌ها، آبی باشه.

span {
font-family: IranSansWeb;
opacity: 0.8
}

عناصر span در صفحه، دارای فونت IranSansWeb و شفافیت 0.8 باشن.

ساختمان کد css
ساختمان کد css

نتیجه­‌گیری

ساختمان کد css |  در این مقاله یاد گرفتیم که:

  • ساختمان کد css |یک قالب کد css، از انتخاب‌­کننده و قسمت بیان‌­کننده خصوصیات تشکیل شده.
  • ساختمان کد css |انتخاب­‌کننده، عنصر مورد نظر رو برای تغییرات انتخاب می­‌کنه.
  • ساختمان کد css |قسمت بین { … }، خصوصیات عنصر منتخب رو بیان می‌­کنه.
  • ساختمان کد css |بهتره کدها در خطوط جداگانه نوشته بشن.
  • ساختمان کد css |یک عنصر، نمی­‌تونه حاوی ویژگی­‌های تکراری باشه.

امیدوارم این آموزش css براتون مفید بوده باشه. اگر سوالی، مشکلی، نکته، پیشنهاد، انتقادی و حتی درد و دلی داشتید، خیلی خیلی خوشحال میشیم که در بخش دیدگاه‌های پایگاه دانش سئو شو ارسال کنید.

ساختمان کد css
ساختمان کد css
نمایش بیشتر

امیرحسین شمس

امیر حسین شمس | هم اکنون در زمینه های مختلفی چون طراحی سایت ، بهینه سازی سایت ، سئو (SEO) ، امنیت سایت ، آموزش طراحی سایت ، دیجیتال مارکتینگ ، سئو و مشاوره‌ کسب و کارهای اینترنتی فعالیت دارم. از سال 1385 تحصیلات خود را در زمینه ی علوم کامپیوتر شروع کرده و دوره های هوش مصنوعی ، شبکه های عصبی ، منطق فازی ، برنامه نویسی دات نت، طراحی سایت ، دیتابیس ، امنیت دیتابیس ، دیجیتال مارکتینگ، ایمیل مارکتینگ و سئو سایت را بصورت تخصصی گذرانده ام.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
× چگونه می‌توانم به شما کمک کنم؟