شروع کار با سی اس اس

سی اس اس یا CSS، مخفف Cascading Style Sheets است و یک زبان استایل‌دهی است که برای تعیین نحوه نمایش وب‌سایت‌ها و اپلیکیشن‌های وب استفاده می‌شود. CSS به طراحان وب اجازه می‌دهد تا ظاهر و استایل صفحات وب را مدیریت کنند، از جمله فونت‌ها، رنگ‌ها، فضاها، طرح‌بندی صفحه، اندازه متن، و تصاویر.

استفاده از CSS دو فایده اساسی دارد:

1. جدا سازی محتوا از ظاهر: یکی از مهمترین مزایای CSS جداسازی محتوا از ظاهر است. این به معنی این است که شما می‌توانید محتوای وب‌سایت خود را (مثلاً متن، تصاویر، و داده‌های HTML) از استایل‌ها و ظاهر آن (مانند فونت‌ها، رنگ‌ها و طرح بندی) جدا کنید. این امکان را فراهم می‌کند که تغییرات در ظاهر وب‌سایت با تغییر در فایل CSS انجام شود بدون تغییر در محتوای HTML، که بسیار مفید است برای مدیریت و نگهداری کد.
2. کنترل و استایل‌دهی به صفحات وب: CSS به طراحان وب اجازه می‌دهد تا ظاهر و استایل صفحات خود را به دلخواه شان شخصی‌سازی کنند. این به آنها امکان می‌دهد تا صفحاتی با ظاهری زیبا، منسجم و حرفه‌ای بسازند که باعث افزایش جذابیت و کارایی وب‌سایت می‌شود و تجربه کاربری را بهبود می‌بخشد.

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

شروع کار با CSS

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

حتما بخوانید: دانلود رایگان ۲ تا از بهترین جزوه های PDF آموزش Css فارسی

اضافه کردن CSS در اسناد HTML

CSS می تواند به عنوان یک سند جداگانه پیوست شود یا در خود سند HTML جایگذاری شود. سه روش برای اضافه کردن CSS به یک سند HTML وجود دارد:

• سبک های خطی – استفاده از صفت style در تگ شروع HTML.
• سبک های جاسازی شده – استفاده از عنصر
• برگه های سبک (یا شیوه نامه های) خارجی – با استفاده از عنصر به یک فایل CSS خارجی اشاره کنید.

در این آموزش این سه روش را برای قرارگیری CSS پوشش خواهیم داد.

توجه: سبک های خطی بالاترین اولویت و صفحه های سبک خارجی کمترین اولویت را دارند. این بدان معناست که اگر شما یک عنصر را در هر دو شیوه نامه خارجی و جاسازی شده سبک دهی کنید، قوانین سبک متناقض در شیوه نامه جاسازی شده بر روی شیوه نامه خارجی بازنویسی می شوند.

سبک های خطی

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

صفت style شامل یک سری جفت ویژگی و مقدار CSS است. هر جفت ” مقدار : ویژگی ” با یک سیمی کالون (؛) از یکدیگر جدا می شوند، دقیقاً به همان صورت که در یک شیوه نامه جاسازی شده یا خارجی نوشته می شوند. اما لازم است که همه در یک خط باشند، یعنی بدون شکست خط بعد از سیمی کالون، همانطور که در مثال زیر نشان داده شده است:

مثال

This is a heading

This is a paragraph.

This is some text content.

استفاده از سبک های خطی معمولاً به عنوان یک شیوه بد در نظر گرفته می شود. به این دلیل که قوانین سبک به طور مستقیم در تگ HTML قرار می گیرند، این باعث می شود که نمایش با محتوای سند ترکیب شود. در نتیجه نگهداری کد سخت می شود و هدف استفاده از CSS را نفی می کند.

توجه: سبک دهی شبه عناصر و کلاس ها با سبک های خطی غیرممکن است. بنابراین باید از استفاده ویژگی های سبک در کد خود خودداری کنید. استفاده از شیوه نامه های خارجی روش برتر برای افزودن سبک به اسناد HTML است.

برگه های سبک جاسازی شده

برگه های سبک داخلی یا جاسازی شده فقط روی سندی تأثیر می گذارد که در آن جاسازی شده اند.

برگه های سبک جاسازی شده در بخش

یک سند HTML با استفاده از عنصر

مثال

body { background-color: YellowGreen; }

p { color: #fff; }

-->

This is a heading

This is a paragraph of text.

طراحی رابط کاربری UI UX رو قورت بده! بدون کلاس، سرعت 2 برابر، ماندگاری 3 برابر، پولسازی عالی با طراحی جذاب اپلیکیشن، نرم افزار وبسایت... دانلود:

نکته: صفت type در تگ های

یک برگه سبک خارجی با استفاده از تگ می تواند به یک سند HTML مرتبط شود. همانطور که در مثال زیر مشاهده می کنید، تگ در قسمت

قرار می گیرد:

This is a heading

This is a paragraph of text.

نکته: بین این سه روش، استفاده از شیوه نامه خارجی بهترین روش برای تعریف و استفاده از سبک ها در اسناد HTML است. همانطور که به وضوح در مثال برگه های سبک خارجی مشاهده می کنید، در نشانه گذاری فایل HTML حداقل تغییرات رخ می دهد.

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

قانون import@  روش دیگری برای بارگیری یک شیوه نامه خارجی است. جمله import@ به مرورگر دستور می دهد تا یک برگه ​​سبک خارجی را بارگیری و از سبک های آن استفاده کند.

می توانید از دو روش استفاده کنید. ساده ترین آن اضافه کردن در قسمت سرآیند است.

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

@import url(“css/style.css”);

p {

color: blue;

font-size: 16px;

}

-->

به همین ترتیب ، می توانید از قانون import@ برای وارد کردن یک شیوه نامه در یک شیوه نامه دیگر استفاده کنید.

@import url(“css/layout.css”);

@import url(“css/color.css”);

body {

color: blue;

font-size: 14px;

}

توجه: کلیه قوانین import@ باید در شروع شیوه نامه قرار گیرند. هر قانون سبک تعریف شده در شیوه نامه، بر روی قوانین متناض در برگه های سبک ورودی بازنویسی می شود. با این وجود، اضافه کردن یک شیوه نامه در یک شیوه نامه دیگر به دلیل مسئله کارایی توصیه نمی شود.