CSS جادوگر ظاهر وبسایت شما

در طراحی وب ، فقط آشنایی با زبان HTML کافی نیست زیرا : یک وبسایت با ظاهر ساده و بدون استایل بدون شک نمی تواند کاربران زیادی را جذب کند.

HTML زبانی بود که در آن بسیاری از موارد پیشرفته طراحی وب لحاظ نشده بود. بعلاوه اینکه این زبان قابلیت تغییر، کاربر پسندی و بسیاری دیگر از مباحثی که در دنیای برنامه نویسی و طراحی با گذشت زمان بوجود آمده اند را در خود جای نداده است.البته این نکته را فراموش نکنید که HTML اسکلت (frontend) ظاهر وبسایت شماست.

 

تعریف زبان CSS

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

سی‌ اس‌ اس در کنار اچ‌تی‌ام‌ال هستهٔ فناوری ساخت صفحه‌های وب هستند.عملا این زبان برنامه نویسی، مکملی بر زبان باستانی HTML است و سعی در پر کردن نقاط ضعف و خلاء های آن دارد.

به زبان ساده CSS یا همان Cascading Style Sheet تکنیکی است برای قالب بندی و طراحی اجزای صفحه وب(HTML) از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه وب استفاده می شود . تیتر مطلب گویا است که سی اس اس را باید به راستی جادوگر طراحی وب نامید.

سی اس اس زبانی است که توسط آن قادر خواهید بود تا استیل طراحی صفحات وب سایت تان را یکبار تعریف و به صفحات مورد نیازتان اعمال نمایید.

برای این منظور مثالی را می زنیم. تصور کنید که سایت شما شامل ۱۰۰ صفحه استاتیک می باشد و شما آنها را تماما به زبان HTML نوشته اید. بعد از یک هفته تصمیم گرفته اید تا رنگ تمام کلمات را تغییر دهید. گفتن اینکه رنگ تمام کلمات عوض شوند بسیار کار راحتی است و تنها یک جمله است. ولی آیا در عمل تغییر ۱۰۰ صفحه نیز به همان راحتی خواهد بود؟ قطعا نه!

به زبان ساده سی اس اس دقیقا همان زبانی است که جمله یک خطی شما را تبدیل به همان یک جمله خواهد کرد. شما تنها کافی است تا استیل مورد نیازتان را در طراحی تغییر دهید و آن هم تنها با تغییر یک یا چند مورد کوچک.

 

جمله آخر اینکه، استفاده از CSS باعث تمیزتر شدن کدهای برنامه نویسی تان می شود، تغییرات آتی را آسان می کند و همچنین دید شما را بیشتر به طراحی معطوف می کند تا سر و کله زدن با کدهای برنامه نویسی.

 

css چیست ؟

 

کاربرد اصلی css چیست ؟

دلیل اصلی استفاده از CSS جدا کردن محتوا از استایل هاست.با استفاده از CSS می توان کنترل بهتری روی ظاهر و نمای وب سایت داشت . همچنین این تکنینک انعطاف پذیری فوق العاده ای به سایت شما می دهد.به طور مثال می توان با دو فایل CSS جدا، دو ظاهر کاملا متفاوت برای یک سایت با محتوای یکسان ایجاد کرد.

 

مزایای استفاده از  CSS

اصلی ترین مزیت CSS این است که به کمک آن میتوانیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کدنویسی و همچنین کند شدن سرعت بارگذاری صفحه در اینترنت میشه جلوگیری کنیم.

برای مثال می توانیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کار ببریم.

چند نمونه از مزایای CSS :

  • صرفه جویی در وقت
  • تغیییرات آسان و مجدد تگ های HTML
  • طراحی صفحه بدون نیاز به تگ های قالب بندی HTML
  • طراحی صفحات دینامیک به کمک javascript
  • و …

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

 

برای یادگیری CSS به چه چیزهایی نیاز دارید؟

  1. قبل از هر چیز به یک مرورگر مدرن احتیاج دارید.من به شخصه استفاده از مرورگر فایرفاکس توصیه می کنم چون افزونه های بسیار سودمندی برای آن وجود دارد که کار را برای شما بسیار ساده می کند.
  2. دومین چیزی که برای یادگیری CSS نیاز دارید یک ویرایشگر متن است.ساده ترین ، کاربردی ترین و در دسترس ترین ویراستار متن برای کاربران ویندوز ++Notepad می باشد که پیشنهاد بنده هم همین ویرایشگر است.
  3. در نهایت شما نیاز به دانش پایه ای از HTML دارید.

چگونگی اعمال استایل ها در CSS 

چگونگی اعمال استایل ها در CSS

 

قدرت این زبان به قابلیت ایجاد حالت های گوناگون و تعریف کلاس (CLASS) و آی دی (ID) است، به اینصورت که مثلا با تعریف یک کلاس، از آن در صفحات مختلف و بدون تکرار کدنویسی، استفاده می کنیم.برای تعریف کلاس از کاراکتر ‘.’ و برای تعریف آی دی از کاراکتر ‘#’ استفاده می کنیم.

به سه روش می توان استایل های CSS را اعمال کرد که در ادامه به توضیح مختصر این روش ها می پردازیم.

  1. استفاده از استایل های درونی (Internal Stylesheet)
  2. استایل های درون خطی  (inline stylesheets)
  3. استایل های خارجی (external stylesheets)

 

روش اول : استفاده از استایل های درونی  :

در این روش هیچ فایل جداگانه ای برای دستورات CSS ایجاد نمی شود بلکه دستورات CSS درون یک تگ <style> و در درون تگ <head> فایل HTML قرار داده می شوند. به طور مثال کد زیر را که بخشی از کد HTML است را زیر را در نظر بگیرید :

<head>
<title>
A Simple Document with CSS
</title>
<style>
body {
background-color: white;
margin: 5px;
font-family: helvetica, arial, sans-serif;
}
div#content {
width: 75%;
margin: 0 auto;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>

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

<p style="color: red;"> This is a Sample Paragraph </p>

روش سوم : استایل های خارجی :

در این روش کلیه دستورات سی اس اس درون یک فایل جداگانه با پسوند css ذخیره می شوند سپس برای اعمال این دستورات روی یک فایل HTML در تگ head آن فایل به فایل css اشاره می شود. نحوه اشاره به صورت زیر است :

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

قسمتی از کد که درون href=”” قرار می گیرد اشاره به محل قرار گیری فایل CSS دارد. مزیت اصلی استفاده از فایل استایل خارجی این است که برای تغییر در یک جزء خاص در کل یک وب سایت می توان فقط در فایل CSS آن تغییر را ایجاد کرد و تغییرات روی همه سایت اعمال می شود.

 

نگارش و انتشار توسط میلاد صادقیان

فعال در زمینه های : برنامه نویسی پویا تحت ویندوز ، طراحی رابط کاربری UI ، توسعه و طراحی وب

دیدگاه شما

ایمیل شما نزد ما محفوظ خواهد بود.