css چیست؟

css از سر كلمه cascading style sheet (شيوه نامه ابشاري)گرفته شده است. شيوه نامه قواعدي براي چگونگي نمايش عناصر html است.
اگر كمي با زبان نشانه گزاري html كار كرده باشيد مي دانيد كه هر كدام از عناصر (هر آنچه كه در html تعريف مي كنيد مثل table، div…) آن داراي خصوصياتي مي باشد كه چگونگي نمايش آنها را در مرورگر مشخص مي كند به عنوان مثال: align، color، fontو ….

گاهي اين خصوصيات بين عناصر مشترك و گاهي منحصر به فردند. اگر تعداد عناصر صفحه زياد باشند بايد براي هر كدام از آنها تعداد خصوصيات زيادي را تنظيم كنيد به خصوص زماني كه تعداد خصوصيات زياد باشه و چند عنصر تكراري به دفعات در صفحه موجود باشد، عملي است طاقت فرسا و زمان بر. حال شما مي توانيد با كمك css يك بار هم خصوصيات را تنظيم كنيد و هرجا كه به آن نياز داشتيد آنها را در عناصر اعمال كنيد.

قالب دستوري css

هر دستور css از سه بخش درست شده : انتخابگر، خصوصيت، مقدار
{selector{property:value
انتخابگر در واقع همهن عناصري هستند كه شما قصد تغيير خصوصيات آن ها را داريد
property ها همه خصوصيات موجود در html هستد با هستند با تفاوت هاي اندكي كه در ادامه به آن مي پردازيم
value ها كه جلوي خصوصيت و بعد از علامت : قرار مي گيرند
در css مي توان براي بيشتر از يك عنصر خصوصيت تعيين نمود براي مثال
{h1,h2,h3,h4 {color:green

چگونه از css استفاده كنيم؟

CSS را مي توان به دو طريق استفاده كرد
1- سراسرس
2- محلي
در صورت سراسري بايد در قسمت انتخابگر نام عنصر مورد نظر(برای مثال تگ p) و در پي آن خصوصيت و مقدار آن را درون پوشه {} قرار دهيم
اما نوع دوم به دو صورت استفاده مي شه
1- صفت CLASS
2- صفت ID

صفت CLASS

شايد از خود پرسيده باشيد كه ممكن است از يك عنصر در دوجاي متفاوت با صفات متفاوت استفاده كنيم تكليف چيست؟ در اين صورت بايد كمي بيشتر دقت كنيم. حال مثالي ميزنم

{left{color: red.
{right{color: red.
*********************
<p>click</p>
<p>click</p>

همانطور كه مشاهده كرديد ما در بخش تعريف css در قسمت انتخابگر نام هيچ عنصري را قرار نداديم و بجاي آن از نقطه و يك نام استفاده كرديم
حال اگر به قسمت زير ان برويد مي بينيد كه آن اسم را در يك عنصر<p> با استفاده از صفت class قرار داده ايم. حال از اين پس اين عنصر از صفت بالا تاثير مي پذيرد
اگر اين كلاس را به هر عنصر html دهيم در صورتي كه آن خصوصيات تعريف شده در كلاس بالا باشد از آن تبعيت مي كند
* نكته: نام ها كاملا دلخواه مي باشد.
اگر دستورات بالا به اين صورت استفاده مي شد:
{p.left{color:”red
فقط براي عناصر <p> استفاده مي شد

صفت id

اين صفتم مانند صفت قبل كار مي كند با تفاوت كوچكي در قالب دستوري بايك مثال روشنتان مي كنم

{left {color: red#
********************
<p id=”left”>click</p>

همانطور كه مشاهده مي كنيد به جاي نقطه از # استفاده و بجاي class از id استفاده شده
* نكته: توجه داشته باشيد كه مقادير id بايد يكسان باشد و انعطاف كمتري نسبت به class دارد يعني نمي توان براي عنصري خاص مورد استفاده قرار داد: