CSS چیست ؟ و عملکرد آن در طراحی صفحات وب
CSS چیست ؟ و عملکرد آن در طراحی صفحات وب
CSS مخفف عبارت Cascading Style Sheets می‌باشد، در واقع CSS تعیین کننده نوع نمایش عناصر HTML است، CSS مکمل زبان HTML است، یعنی شما در مرحله اول ساختار و اسکلت بندی سایت را با استفاده از زبان html طراحی می‌کنید.
و بعد با استفاده از زبان نشانه‌گذاری CSS به آن رنگ و لعاب می‌دهید در تعریفی واضح تر Design سایت بستگی به CSS دارد .
![\"CSS](\"https://noora.center/new/wp-content/uploads/2023/08/ezgif.com-gif-maker-79.webp\")
کاربرد CSS چیست
هدف ایجاد CSS این است که اطلاعات پایه ای سایت از اطلاعات ظاهری آن، مثل صفحه‌بندی، رنگ، سایز، نوع فونت و غیره جداسازی شود . مزیت هایی که جداسازی اطلاعات برای سایت‌ها دارد، مواردی مانند افزایش سرعت در دسترسی به سایت، قابلیت طراحی چندین صفحه با فرمت یکسان، سریع‌تر شدن دسترسی به سایت و جلوگیری از انجام کارهای تکراری در طراحی است. مهم‌ترین کاربردهای CSS در موارد زیر آمده است :
- تعیین فاصله عناصر از یکدیگر
- طراحی رسپانسیو صفحات
- معین کردن نوع چیدمان نوشته‌ها
- تغییر نوع نوشتار
- تعیین عرض و ارتفاع
- انتخاب پس‌زمینه دلخواه
- انتخاب محل قرار گرفتن عناصر
HTML یک زبان برنامه نویسی نیست ؟
ما از طریق زبان های برنامه نویسی با کامپیوتر ارتباط برقرار میکنیم دستور اعمل هایی ک برای سیستم تعریف شده مثل ساختار کنترلی و شرطی با آن ارتباط میگیریم . در دنیای کامپیوتر زبان برنامه نویسی های زیادی وجود دارد که رایج ترین زبان نشانه گذاری آن HTML هست .
در واقع زبان نشانه گاری به شما کمک میکند که متن را از سایر عناصر جداسازی کنید و ساختار صحفه را طراحی کنید .
![\"HTML](\"https://noora.center/new/wp-content/uploads/2023/08/HTML-Vs-CSS-1024x1024-1.webp\")
سه روش برای استایل دهی CSS
1- روش خطی inline stylesheets
در این روش استایل مورد نظر مستقیم در خصوصیت style آن تگ مقدار دهی می شود
<!DOCTYPE html>
<html>
<head>
<title>
اینجا عنوان سایت است
</title>
</head>
<body>
<p> نوشتن هر متنی که دلتون میخواد</p>
</body>
</html>
روش درونی Internal Stylesheet
در این روش کلیه دستورات CSS بین دو تگ <style></style> واقع در تگ <head> قرار می گیرند.
<link href=”مسیر فایل CSS“ rel=”stylesheet” type=”text/css”>
روش خارجی external stylesheets
در این روش کلیه استایل های مورد نظر درون فایلی جداگانه ای نوشته شده و با پسوند .css ذخیره میشود و سپس توسط برچسب <link> طبق اصول زیر به صفحه اضافه می شود:
body{
background:red;
}
p{
color:blue;
}
نسخه های عرضه شده CSS
CSS از اول شروع کار خود تا الان نسخه‌های متفاوتی را عرضه کرده است. به هر یک از نسخه‌ها عرضه شده لول Level می‌گویند. این سطح‌ها از زیرمجموعه‌هایی تشکیل شده اند که برای طراحی در مواردی خاص و دستگاه‌های خاص مورداستفاده قرار می‌گیرند که به آن‌ها profile می‌گویند.
-
Css1
اولین نسخه از css در سال 1996 توسط W3C عرضه شد. این کدها در دسترس عموم به‌ویژه برنامه‌نویسان وب قرار گرفت. اگرچه این نسخه انقلابی در زمینه طراحی صفحات وب بوده است، اما امروزه، به دلیل نسخه های بالاتر یادگیری آن پیشنهاد نمی‌شود. ویژگی‌های این نسخه در موارد زیر آمده که به چند مورد می‌پردازیم:
- امکان تغییر فونت، رنگ، پس‌زمینه و استایل متن‌ها
- امکان تعیین جایگاه درست هر عنصر
- کلاس‌بندی عناصر
- ایجاد لایه‌گذاری، حاشیه‌بندی و مرزبندی صفحات
-
Css2
این level از css، در سال 1998 بعد از عوض کردن نسخه1 css به وجود آمد. امکانات افزوده شده این نسخه، تعیین جای‌گذاری مطلق، ثابت و وابسته بود. همچنین قابلیت‌های جدیدی برای طراحی متن‌ها و شناخت بیشتر فایل‌های چندرسانه‌ای قرار گرفت. این نسخه هم به دلیل اصلاحیه‌های متعددی خورد و امروزه به رسمیت شناخته نمی‌شود.
-
Css3
در این نسخه، انقلابی در پیشرفت css به کار می‌رود. و در سال 1999 منتشر شد و علاوه بر داشتن امکانات نسخه‌های قبلی، توانایی‌های جدیدی در درک اسناد داشت. این نسخه ماژول محور بود و به همین دلیل، ماژول‌های زیادی برایش طراحی شد. همین موارد باعث شدند به‌سرعت جایگزین نسخه‌های قبلی شود و در دسترس بسیاری از کاربران قرار بگیرد.
-
Css4
نسخه رسمی از css 4 ارائه نشده است. بعد از ماژول محور شدن css، نیازی به تغییر یکپارچه ساختار و معرفی ساختار جدید نبود. با اینکه ماژول‌های زیادی با عنوان ماژول‌های نسخه 4 عرضه شده‌اند، اما عموما بر پایه و ساختار css 2 یا css 3 در دسترس هستند. رایج ترین ماژول‌های این نسخه، امکانات طراحی تصاویر، پس‌زمینه، مرزبندی و گزینش‌گرها را اضافه کردند .
