HTML و CSS

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

سلام

با یکی دیگر از پست های آموزش CSS  در خدمت شما بازدیدکننده عزیز هستیم. تاکنون با مزایای CSS آشنا شدیم و فهمیدیم که این زبان چه برتری های زیادی نسبت به HTML دارد .

 

بالاخره از پست های قبل که بگذریم وقتشه که برسیم به مطلب جدیدمون در ابتدای بحث CSS باید بدونیم که هر چیزی در جهان قوانینی دارد از تمامی قوانین نیوتون در فیزیک بگیر تا اصل پائولی و هوند در شیمی همه قوانینی هستن که در جامعه ی علمی یا عملی وجود دارد پس طبق همه ی اینا باید یه نتیجه ای گرفته بشه که بله ! CSS نیز دارای قوانینی هستن که در این پست سعی میکنم حداقل با بخشی از این ها شمارو اشنا کنم.

ابتدا از یکی از ساده ترینشون شروع می کنم که مفهوم قانون در CSS رو متوجه بشید و بهفهمید که اصن منظور ما از قانون چی هست در CSS!

گذاشتن فاصله بین مقدار و واحد اشتباه است

مثال صحیح :

مثال غلط:

حالا منظور منو از قانون فهمیدین ؟

بله قانون چیز زیاد گنده یا در اصطلاح عامیانه (شاخی) نیست و چیز بسیار ساده ای هستش .

خوب حالا میرسیم به بحث عمده ی قوانین CSS :

یک CSS از تعدادی قوانین تشکیل شده  هر کدوم از این قوانین، از یک یا تعداد بیشتری selector تشکیل شده است و هر کدوم از اون ها دارای یک بلوک توصیف هستند. بلوک توصیف، از تعدادی توصیف تشکیل شده که همه آنها درون یک بلوک آکلاد ({}) قرار گرفته اند. هر توصیف خودش به تنهایی از یک property، یک کالن (:)، و یک مقدار تشکیل شده اگر چندتا توصیف در یک بلوک وجود داشته باشد، از سمی کالن (;)، برای جداسازی آنها استفاده می شود.

درproperty , CSS مشخص می کند که ویژگیهای طراحی، به کدوم تگ یا المان باید اعمال بشه. property ها همچنین می تونند به تمان المانهای یک آیتم خاص در صفحه اعمال بشن و یا می توانند تنها به المانهایی که ویژگیهای مشخصی را دارند اعمال شوند. المانها ممکن است بسته به اینکه در صفحه، به چه نحوی نسبت به هم قرار گرفته اند، با یکدیگر منطبق شوند. ارتباط المانهای والد و فرزند نیز در صفحات سایت ها می تواند به نوعی انطباق محسوب شود.

شبه کلاسها نوعی دیگری از ویژگیهایی هستند که در CSS ها مورد استفاده قرار می گیرند تا به المانهای روی صفحه، هویت بخشند. در برخی حالات، از ID های یکتا برای اعمال بلوکی از CSS ها استفاده میشود. یکی از پرکاربردترین مثالها در این مورد، شبه کلاسها، کلاس :hover است که هنگامیکه کاربر موس خود را روی المانی می برد، کلاس خاصی را به آن المان اعمال می کند. این کلاس، به انتخاب کننده ای متصل می شود نظیر a:hover و یا #elementid:hover. البته شایان به ذکر است که نمونه های دیگری از نظیر مثال بالا در CSS وجود دارد ولی عجله نکنید ! به اونام میرسیم !!!!
شبه کلاسها، کل المانها را انتخاب می کنند. بعنوان مثال، :link یا :visited ، درحالیکه شبه المانها عناصری را انتخاب می کنند که ممکن است از المانهای ریزتری تشکیل شده باشند، نظیر :first-line یا :first-letter.

property ها ممکن است به شکلهای دیگری نیز با هم ترکیب شوند تا انعطاف پذیری بیشتری بدست آید، بویژه در CSS 2.1

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

و البته خیلی به نظرم حیف میاد تا اینجا که اومدید در مورد این چند قانون کوتاه بی خبر برید پس ایناروهم داشته باشید :

  • قوانین نام گذاری فایل های css
  1. از کاراکترهای خاص استفاده نکنید.کاراکترهای مجاز عبارتند از :حروف a-z ، اعداد ۰-۹ ، خط زیر (_) ، خط فاصله (-)
  2. از کاراکتر فضای خالی استفاده نکنید ( ) مثلا : style Master.css  ، این نامگذاری میتواند در وب سرور شما مشکل ایجاد کند.
  3. نام فایل بایستی با یک حرف شروع شود.
  4. برای نام گذاری فایل از حروف کوچک استفاده کنید.
  5. نام فایل را تا آنجا که ممکن است کوتاه تعریف نمایید.
  6. فراموش نکنید که حتما فایل را با پسوند css ذخیره کنید.

و خیلی متشکرم که به تا به الان وقت گران بهاتون رو در اختیار ما گذاشتین. از طرف خودم امین مرادی و بویژه از طرف گروه برنامه نویسان پنگوئن از شما ممنونم.

بازم برگردید

امین مرادی

 

پاسخ دهید

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