قواعد نوشتن جلسه دوم

قواعد نوشتن جلسه دوم

اصول اولیه CSS

با سلام خدمت دوستان عزیز در جلسه قبل در مورد  نحوه‌ی وارد کردن سی اس اس و اضافه کردن آن را به پروژه‌ها رو یاد گرفتین امروز می خوایم در مورد نحوه‌ی اضافه کردن قوانین سی اس اس و کار با این زبان و دستوارت آن اشنا  بشیم.

قواعد نوشتن جلسه دوم قواعد نوشتن جلسه دوم قواعد نوشتن جلسه دوم Second

قواعد نوشتن جلسه دوم

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

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

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

مرحله‌ی پایانی: حالا تنها کافیست تا تغییراتی که می‌خواهید را در جلوی نام‌ المان‌ها بنویسید تا این تغییرات بر روی آن المان‌ها اعمال شود.

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

 

مرحله اول: برای اینکار در قدم اول باید المان اچ‌تی‌ام‌الی که قصد داریم آن را تغییر دهیم، صدا بزنیم یا اصطلاحا انتخاب کنیم. خوشبختانه اچ تی ام ال و سی اس اس از حروف یکسانی برای شناسایی المان‌ها استفاده می‌کنند. پس چون ما در اینجا ما قصد تغییر در متن‌ها را داریم و میدانیم که متن‌ها با تگ P در اچ تی ام ال نوشته می‌شوند، پس کلمه p را به عنوان نام این المان می‌نویسیم.
مرحله دوم: در جلوی المان انتخاب شده یک علامت } باز می‌کنیم:
قدم سوم : بعد از کروشه، آن چیزی که قصد داریم در این المان تغییر کند را می‌نویسیم. مثلا اگر قصد تغییر در رنگ المان را داریم، کلمه Color به معنای رنگ را نوشته و جلوی آن :‌ می‌گذاریم.

 

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

نمایش متن به رنگ قرمز در HTML

نمایش متن به رنگ قرمز در CSS

 

نکته بسیار مهم:

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

قسمت های یک دستور CSS

در زبان CSS برای نسبت دادن استایل خاصی به یک قسمت از اجزای صفحه وب، اول باید آن را انتخاب کرد و سپس به تعریف استایل نمود. به طور مثال :

 

 با توجه به مثال بالا به طور کلی هر دستور css دارای ۳ بخش است :

  1. گزینشگر (یا همان selectors) : که در اصل همان تگ های html هستند و یا کلاس ها (class) و یا شناسه ها (id)یی هستند که شما برای یک تگ در صفحه html تعریف کرده اید. در مثال فوق h2 گزینشگر بوده و مشخص می کند که این استایل موردنظر باید به تمامی تگ های <h2> اعمال شود.
  2. خصوصیات (یا همان prorerties ) : که مشخص می کنند که چه سبکی باید به برچسبهای انتخاب شده اعمال شود.یا به عبارتی دیگر کدام خصوصیت آن تگ، مورد تغییر قرار گیرد. در مثال فوق خصوصیت font-size اندازه فونت تگ h2 را تغییر می دهد.
  3. مقادیر ( یا همان value ) : سومین قسمت از هر دستور مقدار است. که مشخص می کند مقدار خصوصیت انتخاب شده چه باشد. اگر به مثال بالا دقت کنید می بینید که ۲۴px مقدار خصوصیت انتخاب شده می باشد، که تعیین می کند اندازه فونت همه ی تگ های <h2> بیست و چهار پیکسل باشد.

دستور css قسمت چهارمی نیز دارد آن هم علامت ;  (سمیکولن) است که در انتهای هر دستور می آید.

 

نکته :

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

 

درضمن به یاد داشته باشیدکه خصوصیت ها حتما باید ما بین علامت {} قرار بگیرند.

برای درک بهتر مطلب به تصویر زیر دقت کنید :

قواعد نوشتن جلسه دوم قواعد نوشتن جلسه دوم قواعد نوشتن جلسه دوم selector properties value

آموزش CSS آموزش طراحی وب

دیدگاه خود را بیان کنید