css چیست؟

CSS مخفف Cascading Style Sheets (شیوه نامه آبشاری) است. کدهای CSS دستوراتی هستند که توسط آنها می توان تمامی خصوصیات ظاهری صفحات وب سایت را تعیین کرد و هر آنچه که توسط HTML به نمایش در می آید توسط CSS قابل کنترل است.

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

ساختار نحوی کدهای css

SELECTOR{Property:Value; Property:Value; Property:Value; ...}
p{
   color: red;
   text-align: center;
}

Selector : این بخش نام عنصر HTML است که می خواهیم استایل مورد نظر را بر روی آن اعمال کنیم.

هر بلوک css داخل {} قرار می گیرد و خصوصیات و مقادیر داخل این بلوک فقط مربوط به همان selector می باشد.

Property : نام خصوصیت و ویژگی تعریف شده در css می باشد.

Value : مقدار دلخواهی است که ما برای خصوصیت های css تعیین می کنیم.

CSS را به سه روش می توان به صفحات وب اعمال کرد :

۱ – Inline Styles :

فقط برای یک عنصر HTML مورد استفاده قرار می گیرد. برای استفاده از این روش باید به عنصر مورد نظر صفت Style را افزوده و سپس خاصیت ها و مقدارها را به این صفت اضافه کنید.

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

This is a heading

۲ – Internal Style Sheet :

اثر آن ها برای یک صفحه وب است و باید زمانی استفاده می شود که معمولا استایل به یک تگ html وصل است. کدهای CSS در قسمت head صفحه و درون تگ باز و بسته style قرار می گیرد.

<head>
<style>
body {
   background-color: linen;
}
h1 {
   color: maroon;
   margin-left: 40px;
}
</style>
</head>

۳ – External Style Sheet :

استایل های CSS در یک فایل جداگانه با پسوند css قرار می گیرند و آدرس آن را در تگ link درون head صفحه قرار می دهیم.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

برای اعمال دستورات فقط بر روی یک عنصر واحد html از id استفاده می کنیم :

شناسه یک عنصر باید در یک صفحه منحصر به فرد باشد، بنابراین انتخابگر id برای انتخاب یک عنصر منحصر به فرد استفاده می شود. برای این کار ابتد باید به کدهای HTML رفته و برای عنصر مورد نظر صفت id را تعریف می کنیم، سپس به بخش دستورات CSS رفته و در بخش Selector، صفت id که برای عنصر مورد نظر تعریف کرده اید را نوشته و یک نماد “#” قبل از آن اضافه می کنیم.

<p id="para1">This is a Paragraph.<p>
#para1 {
   text-align: center;
   color: red;
}

برای اعمال دستورات بر روی یک گروه از عناصر از Class استفاده می کنیم :

توسط صفت class ما دستورات تعیین شده css را برای گروهی از عناصر html که نام class آنها یکسان است اعمال می کنیم. برای این منظور ابتد باید به کدهای HTML رفته و برای همه عناصری که میخواهید خصوصیت های ظاهری یکسان داشته باشند صفت Class را تعریف می کنیم، سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت Class که برای عناصر مورد نظر تعریف کرده اید را نوشته و یک نماد “.” قبل از آن اضافه می کنیم.

<p class="cneter">This is a Paragraph.</p>
<h1 class="cneter">This is a header.</h1>
.center {
   text-align: center;
   color: red;
}

نکته : در صورتی که ما نام یک عنصر html را به تنهایی و بدون اضافه کردن id(#) و یا class(.) قرار دهیم استایل css مورد نظر برای تمام عناصر از آن نوع اعمال می شود.

h1 {
   text-align: center;
   color: red;
}
p {
   text-align: center;
   color: red;
}

نکته : می توانیم استایل هایی که برای گروهی از عناصر مشابه هستند را در یک بلاک قرار دهیم و selector ها را با کاما(,) از هم جدا کنیم تا استایل های تعیین شده برای تمام آنها اعمال شود.

h1, h2, p {
   text-align: center;
   color: red;
}
رابط کاربری (UI) چیست ؟
شاید این مطلب را نیز بپسندید