طراحی وآموزش سایت
css چیست؟
CSS چیست؟
به تعبیر تخصصیتر، CSS یک زبان برنامه نویسی ظاهری (Style Sheet Language) است که برای ارائه زیباتر و قابل فهمتر یک سند (Document) نوشته شده به زبان نشانه گذاری یاMarkup Language به کار برده میشود.
سی اس اس در کنار HTML قرار میگیرد تا هسته ایجاد یک وب سایت را به وجود بیاورند. برای طراح سایت، استفاده از CSS بهترین و سریعترین راه شکل و شمایل دادن و ایجاد حس مناسب برای یک وب سایت است.
برگههای سی اس اس در واقع مسئولیت ایجاد ظاهر سایت را به عهده دارند و رنگ، اندازه و محل قرارگیری متن و دیگر تگهای HTML را تعیین میکنند. مسئولیت برگههای HTML با همکاری فیلدهای HTML کامل میشود. در واقع این فیلدهای HTML هستند که تعیین میکنند محتوای کدها چیست و هر کدام باید چگونه سازماندهی شوند.
تاریخچه CSS
CSS هم مانند HTML برای اولین بار در مجموعه CERN متولد شد. اولین بار در تاریخ ۱۰ اکتبر سال ۱۹۹۴ بود که Hakon Wium Lie با همکاری «تیم برنرز لی» بحث سی اس اس را وسط کشیدند. در همین زمانها بود که چندین و چند زبان Style Sheet دیگر توسط افراد دیگر معرفی شدند و بحثهای مختلفی که بین عموم افراد و همچنین در «کنسرسیوم وب جهان گستر» اتفاق افتاد، باعث شد تا در نهایت در سال ۱۹۹۶، زبان سی اس اس به صورت رسمی معرفی شود.
برتری CSS نسبت به دیگر زبانهای Style Sheet این بود که، شما میتوانید با استایل یا ظاهر یک داکیومنت را با چندین برگهسی اس اس طراحی کرده و تحت تاثیر قرار بدهید. بنابراین، سی اس اس توانست تمام رقبا را کنار بزند و خود را در جایگاه زبان برتر استایل در کنار HTML قرار بدهد.
نسخههای مختلف CSS
CSS نسخههای مختلفی دارد که به آنها Level گفته میشود، هر کدام از این نسخهها هم به تنهایی دارای نسخههای تکمیلی دیگر هستند که به آنها Profile گفته میشود. طبیعتا هر نسخه سی اس اس بر اساس نسخه دیگر توسعه پیدا کرده و در نسخههای جدید قابلیتهای جدیدتری اضافه شده است. هر Profile در سی اس اس هم برای توسعه این زبان Style Sheet به یک دستگاه یا منظور خاص طراحی شده است.
CSS 1
اولین نسخه سی اس اس که توسط W3C به صورت رسمی به توسعه دهندگان وب پیشنهاد شد، CSS 1 بود. این نسخه در تاریخ ۱۷ دسامبر سال ۱۹۹۶ به صورت رسمی در دسترس افراد قرار گرفت. فهرست زیر بازرترین ویژگیهای CSS 1 هستند:
- امکانات مختلف برای فونت، مثل ایجاد سبک و تاکید
- تخصیص رنگ، پس زمینه و عناصر دیگر به متن
- تنظیم (Alignment) متن، تصاویر، جدولها و دیگر عنصر صفحه وب
- ایجاد حاشیه (Margin)، مرزبندی (Border)، لایه گذاری (Padding) و جای گذاری اکثر اجزا صفحه
- شناسایی متمایز و کلاسبندی عمومی گروهی از ویژگیها (attributes)
در حال حاضر W3C دیگر CSS 1 را پیشنهاد نمیکند.
CSS 2
این نسخه یا Level از سی اس اس هم که دیگر از سوی W3C پیشنهاد نمیشود، شباهتهای زیادی به نسخه اولیه داشت و در ماه مه سال ۱۹۹۸ معرفی شد. در این نسخه قابلیتهای جدیدی مثل جایگذاری مطلق (Absolute)، وابسته (Relative) و ثابت (Fixed) در نظر گرفته شده بود. در این نسخه همچنین امکاناتی مانند ایجاد درک و شناخت انواع مختلف فایل (Media) و قابلیتهای جدید برای طراحی متن ایجاد شده بود.
مدتی بعد CSS 2.1 به عنوان اصلاحیهای از CSS 2 معرفی شد که پس از کش و قوسهای فراوان بالاخره در سال ۲۰۱۱ به عنوان پیشنهاد W3C تاییدیه گرفت. این نسخه قرار بود آخرین اصلاحیه از CSS 2 باشد اما در سال ۲۰۱۵ اصلاحیه CSS 2.2 هم در دستور کار قرار گرفت.
CSS 3
میتوان گفت که CSS3 یک تحول بزرگ در تاریخچه CSS به همراه داشت. در این نسخه از سی اس اس اسناد (Document) زیادی به وجود آمدن که به هر کدام از آنها Module گفته میشد. در واقع CSS 2 یک مانند یک ویژگی بزرگ بود که تمام امکانات سی اس اس را در بر میگرفت، اما در CSS 3 ماژولها هستند که قابلیتها و امکانات جدید را اضافه میکنند.
اولین بار در ماه ژوئن سال ۱۹۹۹ بود که نسخه CSS 3 منتشر شد و در دسترس قرار گرفت. اما از آنجایی که CSS 3 بر پایه ماژولها بود، تا ژوئن ۲۰۱۲ بیش از پنجاه ماژول CSS شامل Media Queries، Namespace، Selector Level و Color از جانب تیمی که روی این زبان کار میکرد، منتشر شدند.
CSS 4
در واقع هیچ نسخهای از ویژگیهای متحد شده CSS 4 وجود ندارد، زیرا این Level از سی اس اس به ماژولهای مختلف Level 4 تقسیم شده است.
بعد از CSS 3 و با ورود مبحث Module به این زبان، دیگر توجیهی برای توسعه یکباره نسخه جدید سی اس اس وجود نداشت. بنابراین، از نسخه CSS 4 به بعد دیگر ماژولهای Level 4 هر کدام به صورت جداگانه توسعه پیدا کردند و چیزی به نام CSS 4 به صورت یکپارچه معرفی و پیشنهاد نشد. در واقع در این نسخه یا Level از CSS، بسیاری از ماژولها همان ماژولهای Level 3 بودند که از CSS 2.1 توسعه پیدا کرده بودند. در این میان تعدادی ماژول هم به عنوان ماژولهای Level 4 توسعه پیدا کردند. از ماژولهای Level 4 در CSS 4 میتوان به Image Values، مرزبندی و پس زمینه (Background & Borders) و Selector اشاره کرد.
استفاده از inline style
در این روش شما با استایل دادن به تگ HTML، یک ویژگی را تنها به همان تگ اضافه میکنید:
<p style="color:red;">learn web design at lydaweb</p>
ایجاد استایل در HTML Header
با استفاده از این روش، شما یک استایل خاص را به کل صفحه HTML خود اضافه میکنید:
h1 {color: red;}
ایجاد استایل با فایل CSS
راحتترین کار برای اینکه بتوانید به راحتی هر صفحه از وب سایت خودتان را به شکل دلخواه طراحی کنید و به راحتی تغییرات را روی آن اعمال کنید، استفاده از فایلهای CSS است. فایل CSS هم مانند فایل HTML یک فایل از نوع Plain text است که با پسوند .css ذخیره میشود.
body {background-color: beige;color: #000080; } h1 {color: red; }
اگر بخواهید یک صفحه HTML را با استفاده از فایل CSS طراحی کنید و ظاهر آن را زیبا کنید، باید در HTML Head سایت خود با استفاده از تگ این کار را انجام بدهید.
<head> <link rel="stylesheet" type="text/css" href="style.css" title="style"> </head>
محدودیتهای CSS
با اینکه CSS تا اینجای کار پیشرفت بسیار زیادی داشته، اما نمیتوان گفت که کاملا ایده آل است و هیچ محدودیتی برای طراح وب سایت ایجاد نمیکند. اگر بخواهیم به محدودیتهای سی اس اس اشاره کنیم، شاید به ۵ تا ۶ مورد محدودیت بتوان اشاره کرد که در برابر آزادی عملی که این زبان در اختیار ما میگذارد، این محدودیتها چیزی نیستند.
مثلا در CSS نمیتوان برای rules اسم تعیین کرد. تعیین اسم برای یک rule، به عنوان مثال، میتواند برای ارجاع دادن یک اسکریپت سمت کاربر (Clien-side) به یک rule هنگام تغییر selector آن، کارآمد باشد. همچنین محدودیتهای دیگری مثل عدم توانایی انتقال Style از یک rule به rule دیگر و چن مورد دیگر از محدودیت در سی اس اس وجود دارد که ممکن است مانند محدودیتهایی که در نسخههای پیشین CSS وجود داشتند، در آینده حل شوند.
مزایای CSS
میتوان با خیالی آسوده گفت که CSS یکی از مفیدترین و پرکاربردترین اجزا دنیای طراحی وب است. دسترسی طراحان وب به سی اس اس باعث پیشرفتهای زیادی در دنیای طراحی سایت شده است.
یکی از مهمترین مزایای CSS صرفه جویی در وقت و انرژی طراحان وب است. تصور کنید که CSS وجود نداشت و شما به عنوان یک طراح سایت، باید برای هر تغییر بزرگ و کوچکی، چندین بار یک کلاس یا Style را به صورت inline در فایل HTML وارد میکردید. اما حالا با وجود CSS در کنار HTML، طراحی سایت بسیار آسانتر خواهد بود.
id و Class در CSS
همانطور که در بخش ساختار نحوی دستورات مشاهده کردید، در بخش Selector عنصری که میخواهیم استایل روی آن اعمال شود را ذکر میکنیم. به عنوان نمونه در تمامی دستورات فوق عنصر مورد نظر پاراگراف بود و استایل های نوشته شده در براکت ها، بر روی همه پاراگراف های موجود در صفحه وب اعمال میشد. حالا اگر بخواهیم دستورات استایل مورد نظر فقط روی یک عنصر در صفحه وب و یا فقط گروهی از عناصر مورد نظر ما اعمال شود باید از id و Class استفاده کنیم.
اعمال دستورات فقط بر روی یک عنصر واحد توسط id
برای این منظور ابتد باید به کدهای HTML رفته و برای عنصر مورد نظر صفت id را تعریف کنید. سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت id که برای عنصر مورد نظر تعریف کرده اید را نوشته و یک نماد “#” قبل از آن اضافه کنید
مثلا چنانچه بخواهیم دستورات فقط بر روی یک پاراگراف خاص اعمال شود، ابتدا برای آن پاراگراف یک صفت id در کدهای HTML تعریف میکنیم:
<p id="para1">This is a Paragraph.<p>
سپس در دستورات CSS در بخش Selector مقدار صفت id تعریف شده را همراه با یک علامت “#” می نویسیم:
#para1 {text-align:center;color:red; }
بدین ترتیب این دستورات فقط بر روی پاراگرافی اعمال میشوند که دارای id برابر با para1 است و سایر پاراگراف های موجود در صفحه از این دستورات تاثیرپذیر نیسند.
نکته: هرگز صفت id را با عدد شروع نکنید چراکه در مرورگر فایرفاکس کار نخواهد کرد.
اعمال دستورات بر روی یک گروه از عناصر توسط Class
برای این منظور ابتد باید به کدهای HTML رفته و برای همه عناصری که میخواهید خصوصیت های ظاهری یکسان داشته باشند صفت Class را تعریف کنید. سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت Classکه برای عناصر مورد نظر تعریف کرده اید را نوشته و یک نماد “.” قبل از آن اضافه کنید
مثلا چنانچه بخواهیم دستورات بر روی تعدادی پاراگراف مورد نظر ما اعمال شود، ابتدا برای آن دسته از پاراگراف ها یک صفت Class مشترک در کدهای HTML تعریف میکنیم :
<p class="cneter">This is a Paragraph.</p>
سپس در دستورات CSS در بخش Selector مقدار صفت Class تعریف شده را همراه با یک علامت “.” یا همان نقطه مینویسیم:
.cneter { text-align:center; }
بدین ترتیب این دستورات فقط بر روی پاراگراف هایی اعمال میشوند که دارای Class برابر با Center هستند و سایر پاراگراف های موجود در صفحه از این دستورات تاثیرپذیر نیستند.
نکته: هرگز صفت Class را با عدد شروع نکنید چرا که فقط در مرورگر اینترنت اکسپلورر کار خواهد کرد.
مطالب مرتبط با css چیست؟
:
-
انگولار 9
ویژگی های nodejs
nodejs چیست
pwa در انگولار
انگولار
وردپرس چیست
طراحی سایت چیست
اضافه کردن svg به وردپرس
آموزش svg
نحوه استفاده از svg