آشنایی با زبان سی اس اس


صفحات وبی که با استفاده از تگ های اچ تی ام ال ساخته می‌شوند از هر گونه زیبایی ظاهری مبرا هستند و اگر بخواهیم این‌ گونه صفحات را به یک ساختمان تشبیه کنیم، بایستی بگوییم که همچون سازه ی اصلی یک ساختمان بوده که هیچ گونه رنگ و بویی ندارند!

با پیشرفت وب، نیازهای کاربران هم به مراتب بیشتر شد که یکی از اساسی‌ترین آن ها، نیاز به زیبایی ظاهری برای صفحات وب بود. به همین منظور، زبانی تحت عنوان CSS که مخفف Cascading Style Sheets به معنی الگوهای آبشاری است توسط Håkon Wium Lie در سال ۱۹۹۶ ابداع شد تا همچون سازه ی یک ساختمان که با استفاده از رنگ، گچبری، سنگ کاری و … زیبا می گردد، صفحات خام اچ تی ام ال را زیبا سازد. زبان سی اس اس صرفاً چهار / پنج سال پس از ابداع زبان اچ تی ام ال توسعه یافت و به مرور زمان که مرورگرهای بیشتری اقدام به پشتیبانی از آن کردند، در میان توسعه دهندگان جای خود را باز کرد و امروزه به عنوان بخش لاینفک دنیای وب شناخته می شود.

با استفاده از زبان سی اس اس، به راحتی خواهیم توانست هر یک از تگ ها -یا بهتر بگوییم اجزای تشکیل‌دهنده ی زبان اچ تی ام ال- را استایل دهیم. به طور کلی، در اینجا منظور از استایل دادن این است که بتوانیم رنگ نوشته ها، اندازه ی آن ها، چینش، سایه و بسیاری چیزهای دیگر را کنترل کنیم.

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

در سال ۲۰۱۱ دو نفر از توسعه دهندگان شرکت توییتر به نام های Mark Otto و Jacob Thornton اقدام به توسعه ی یکسری کدهای سی اس اس برای استفاده در شبکه ی اجتماعی توییتر کردند اما چیزی نگذشت که مجموعه کدهای سی اس اس خود را در قالب یک فریم ورک به صورت آزاد در اختیار سایر توسعه دهندگان دنیا قرار دادند که در حال حاضر، این فریم ورک به منزله ی یکی از محبوب‌ترین فریم ورک های سی اس اس دنیا است.

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

یکی از ویژگی‌های منحصر به فرد فریم ورک هایی مثل توییتر بوت استرپ این است که صفحات وب ما را آماده ی نمایش در صفحه های نمایش با اندازه های مختلف -از مانیتورهای بزرگ گرفته تا صفحه نمایش‌های کوچک موبایل- می سازد. به عبارت دیگر، وب سایت ما را Responsive یا واکنش گرا می کنند. علاوه بر این، فریم ورک های سی اس اس این تضمین را ایجاد می‌کنند که سایت‌های طراحی شده با آن ها در مرورگرهای مختلف با حداقل اختلاف ظاهری به نمایش درخواهند آمد که همین یک ویژگی فریم ورک هایی همچون بوت استرپ، مورد توجه توسعه دهندگان بسیاری قرار گرفته است. از جمله فریم ورک های سی اس اس معروف دنیا، می‌توان به موارد زیر اشاره کرد:

- Twitter Bootstrap

- Foundation

- Pure

- Materialize

- uikit

- Skeleton

- Yaml

- Gumby

- Kube

- Less Framework

- Responsive Grid System

- BASE

- Semantic

- Responsive Grid System

- compass

- columnal

- Fluid Baseline Grid

- The Goldilocks

- Blueprint

- Grid

- (960) Grid System

البته این لیست نسبتا طولانی به همین موارد ختم نشده و دائما فریم ورک های جدید با قابلیت هایی نوین در اختیار توسعه دهندگان قرار می گیرد ( لازم به ذکر است که ما در سکان آکادمی از فریم ورک توییتر بوت استرپ استفاده می کنیم.)

لیست نظرات
کاربر میهمان
دیدگاه شما چیست؟
کاربر میهمان
محسن سادات
محسن سادات
۱۳۹۷/۰۱/۲۸
در ادامه مطلب و کامنت مربوط به طراحی ریسپانسیو (واکنش گرا)
یکی ازقابلیت های مهم HTML5 بحث media queries هست
این کدها در css نوشته میشن و به این صورت که به نوعی منطق یک شرط if استفاده میشه
مثلا اگر عرض صفحه از 1200 پیکسل بود چیدمان div ها به جای اینکه حالت inline و کنار هم داشته باشه، زیر هم باشن و block

با استفاده از این ویژگی میشه حتی بدون بوت استرپ و سایر فریمورک ها و کتابخونه ها یک سایت رو تنها با استفاده از html و CSS ریسپانسیو طراحی کرد
البته یک نکته منفی در این مورد اینه که باید به نوعی دوبار css نوشته بشه یکی برای حالت دسکتاپ و یکی برای اسکرین های کوچکتر از اون
Insight
Insight
۱۳۹۷/۰۱/۲۸
در کنار روش RWD یا Responsive Web Design و به فارسی، طراحی‌وب واکنشگرا ، روش دیگری تحت عنوان AWD یا Adaptive Web Design وجود داره.
تفاوت بین این دو مورد این هست که ما در روش اول، قالبی رو ایجاد میکنیم که به فراخور دستگاه خودش رو تغییر میده و مناسب برای نمایش در اون دیوایس میشه اما در روش دوم از ابتدا چندین نسخه از قالب رو ایجاد میکنیم تا در پلتفرم‌های مختلف، نسخه‌ی مخصوص نمایش داده بشه.
محسن سادات
محسن سادات
۱۳۹۷/۰۱/۲۶
در رفرنس های فارسی، به خصوص منابع آزمون مرتبط با مشاغل مبتنی بر کامپیوتر و برنامه نویسی CSS رو \"شیوه نامه آبشاری\" هم معنی کردن

در رفرنس های مایکروسافت یک تعریفی هست به اسم \"HTML5 Family\" که این خانواده دارای سه عضو هست:

- HTML5 که شامل متن و تصویر موجود در صفحه هست و همون مارک آپ صفحه رو شامل میشه (نکته اینجاست که به هیچ عنوان این صفحه شامل رنگ و چیدمان و... نیست، یعنی اگر CSS پروژه خذف بشه نتیجه باید یک صفحه سفید با نوشته های مشکی باشه، از دیدگاه تفکیک موارد گفتم)

- CSS3 که در واقع چیدمان اجزای صفحه و رنگ بندی و ... مشخص می کنه

- javascript که حالت تعاملی به صفحه می ده و به اصطلاح behaviour صفحه رو مشخص می کنه
محسن سادات
محسن سادات
۱۳۹۷/۰۱/۲۶
مفهوم HTML5 Family در کتاب
Exam 98-375 HTML5 Application Development Fundamentals
معرفی شده

در پاسخ به

Insight
Insight
۱۳۹۷/۰۱/۲۵
با پیشرفت وب و پیچیده شدن اجزای یک صفحه ی وب، متمایز بودن وظیفه ی هر زبان در طراحی رابط کاربری پررنگ تر شد.
در سال های پیش، زبان های HTML و CSS به نوعی با هم تنیده بودن و استفاده از تگ های Formatting و استایل های درون خطی مرسوم بود. اما با عرضه ی CSS3 مرز بین سی اس اس و سایر زبان ها کاملا مشخص شده و امکانات بسیاری در این زبان وجود داره. همچنین پیش پردازنده های این زبان مثل Sass، Less و Stylus به قدرتمندتر شدن اون کمک کردن.
tina
tina
۱۳۹۶/۰۴/۰۶
من در مورد برنامه نویسی هیچی نمیدونم و تازه میخوام یادبگیرم ولی گیج شدم و نمیدونم باید از کجا شروع کنم و کدوم زبان رو یاد بگیرم هدفم هم ساختن اپلیکیشن برای سیستم عامل ویندوز فونه. حتما باید اچ تی ام ال رو یادبگیرم؟اگر نه چیو باید یادبگیرم لطفا راهنمایی کنید
smrrcm
smrrcm
۱۳۹۶/۰۷/۱۰
باید C# را یاد بگیری

در پاسخ به

کاربر میهمان
کاربر میهمان
۱۳۹۵/۰۷/۲۸
دمتون گرمممممممممممممممممممم
reza
reza
۱۳۹۵/۰۶/۲۹
سلام....
وااااااااااااااااااااااااااای...چقدر خوبین شما! :)
ممنون

ان شاءالله عاقبت بشین
محمد پارسا
محمد پارسا
۱۳۹۵/۰۶/۰۹
سلام
ممنون
بند دوم خط اول (های) اضافی و آخز بند هم (لاینفک) هست فکر کنم.
شایدم نه......
ادمین سایت
ادمین سایت
۱۳۹۵/۰۶/۱۰
سلام
ممنون از شما کاربر دقیق
اصلاح گردید

در پاسخ به

javad
javad
۱۳۹۵/۰۱/۲۲
درود بر همگی ُهمیشه سالم پایدار باشید
رضا بختیاری
رضا بختیاری
۱۳۹۴/۱۱/۲۸
كاش بيشتر درباره فريم ورك ها توضيح ميداديد . بازم مرسي سكان اكادمي
کاربر میهمان
کاربر میهمان
۱۳۹۴/۱۱/۰۷
فریم ورک ها کد های آماده هستن که به سریع تر و بهتر کد نوشتن شما کمک میکنند
حمید نکوئی
حمید نکوئی
۱۳۹۴/۰۹/۱۹
تعریف و توضیح خود فریم ورک فراموش شده، من به عنوان یک مبتدی معنی فریم ورک را نمی دانم
کاوه
کاوه
۱۳۹۴/۱۱/۱۱
فریم ورک ها کد های آماده هستن که به سریع تر و بهتر کد نوشتن شما کمک میکنند

در پاسخ به

هاشم همراز
هاشم همراز
۱۳۹۴/۰۸/۲۷
سلام
ایول به همتتون إن شاء الله همیشه موفق و پایدار باشید