آیا زبان برنامه نویسی css ارزش یادگیری دارد؟

آیا زبان css ارزش یادگیری دارد؟

یادگیری برنامه نویسی css و HTML اولین مرحله برای طراحی کردن یک وب‌سایت است. ما در این مقاله سعی کرده‌ایم، شما کاربران عزیز را با یادگیری برنامه نویسی css و Html همراه کنیم تا به راحتی بتوانید از پس راه‌اندازی سایتتان برآمده و اقدام به طراحی آن نمایید.

 

 

Css و HTML جز زبان‌هایی هستند که در عین سادگی، نکات ریزی دارند که باید در زمان آموزش، آن‌ها را فراگیرید تا در آینده به راحتی از آموخته‌هایتان بهره بگیرید.

با این مقاله همراه ما باشید تا متوجه شوید Css و Html تا چه حد مهم بوده و ارزش یادگیری دارند؛

آموزش html css

در ابتدا با زبان HTML به صورت مختصر آشنا می‌شویم:

کلمه HTML برگرفته از چهار کلمه (Language Markup Text Hyper) است. این زبان برنامه‌نویسی زبانی برای نشانه‌گذاری استاندارد در ایجاد صفحات وب است.

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

یادگیری HTML ساده و در عین حال کاربردی است. این زبان شکل ساختاری صفحه‌های وب را مشخص می‌کند.

اگر جز کسانی هستید که با این زبان آشنایی ندارید، بدون هیچ هراسی به راحتی می‌توانید با این زبان ارتباط برقرار کنید.

 

 

کلمه CSS نیز برگرفته از سه کلمه (Sheets Style Cascading) است.

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

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

دستورات گسترده‌ای در زبان برنامه‌نویسی CSS وجود دارد. یادگیری برنامه نویسی css به شما کمک می‌کند تا به راحتی بتوانید وب سایت مورد علاقه‌تان را طراحی و راه‌اندازی کنید.

مثالی ساده برای بیان کارایی HTML و CSS :

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

صفحات وب از دو بخش Server Side و Client Side تشکیل شده است که در بخش Client Side سه قسمت اساسی وجود دارد:

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

بنابراین یادگیری برنامه نویسی css مسئله‌ای بسیار حیاتی و مهم در طراحی یک وب سایت محسوب می‌شود.

آشنایی با CSS

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

فایل‌های CSS با پسوند .Css سیو می‌شوند. در کد زیر شما مشخص می‌کنید که عنوان خبر، زیرخط دار و با رنگ قرمز و زبان Tahoma در صفحه نمایش داده شود:

h1 {

font-family: Tahoma;

font-style: underline;

color: red;

}

مزایای و کاربردهای css

• جلوگیری از تکرار مجدد دستورات
• استفاده از فایل CSS به تعداد دلخواه برای صفحات مختلف
• سرعت بارگذاری بالا
• طراحی شکل صفحات بدون کمک گرفتن از دستورات مربوط به HTML

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

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

 

 

برای تعیین موارد گفته شده دو راه وجود دارد:

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

• بالا رفتن حجم کد نویسی
• بالا رفتن احتمال خطا
• انجام تغییرات در عناصر زمان‌گیر می‌شود
• سرعت طراحی صفحات پایین می‌آید
•  تکرار خاصیت‌های مشترک عناصر در همه صفحات

با توجه به نکات گفته شده می‌توان گفت راه حل اول منطقی نیست زیرا نیازمند نیروی کار زیاد و زمان زیادی است.

دومین راه: اول خاصیت‌های شکل هم را با توجه به کلاس و آی‌دی آن‌ها در گروه‌های مشترک می‌گذاریم، سپس  در تگ Style یا در یک فایل بیرونی ویژگی‌های مشترک را به صورت یک‌جا برای همه گروه‌های مشخص شده تعریف می‌کنیم، در نهایت عنصرها را به گروه‌های خودشان مرتبط می‌نماییم.

با روش دوم، مشکلات به وجود آمده در روش اول رفع می‌گردد، حجم کدنویسی کم شده و در نهایت احتمال خطا کاهش یافته و سرعت طراحی بالا می‌رود. با این کار به راحتی و با سرعت می‌توان تغییرات را در صفحات اعمال کرد.

 

کدهای css/تگ‌های css

برای طراحی صفحات وب و در پی یادگیری برنامه نویسی css می‌توانید از کدهای زیر، متناسب با نیازتان استفاده کنید؛

بخش Layout :

• Width = تعیین پهنا
• Height = تعیین ارتفا
• Max-width = مقدار‌حداکثری پهنا
• Min-width = مقدار حداقلی پهنا
•  Max-height = مقدار حداکثری ارتفا
• Min-height = مقدار حداقلی ارتفا
•  Margin = فاصله خارجی آبجکت‌ها با هم
• Margin-top = فاصله بالایی آبجکت
• Margin-bottom = فاصله پایینی آبجکت
•  Margin-right = فاصله از راست آبجکت
•  Margin-left = فاصله از سمت چپ آبجکت
•  Padding = فاصله داخلی آبجکت با کادر مربوطه‌اش
•  Padding-bottom = فاصله از پایین
•  Padding-top = فاصله از بالا
•  Padding-right = فاصله از راست
• Padding-left = فاصله از چپ
•  Position= محل آبجکت در صفحه
•  Right = محل شی سمت راست
•  Left =  محل شی سمت چپ
• Top = محل شی بالا
• Bottom = محل شی پایین
• Opacity = مقدار شفافیت آبجکت
• Visibility = نمایش یا عدم نمایش آبجکت
•  Overflow = چگونگی نمایش
• Overflow-y = مشخص می‌کند که محتوای خارج شده از سمت بالا و پایین عنصر به نمایش در آیند یا نه
•  Overflow-x = مشخص می‌کند که محتوای خارج شده از سمت چپ و راست عنصر به نمایش در آیند با نه
• Display = مدل نمایش
•  Z-index = تعیین می‌کند که عنصر مورد نظر زیر یا روی  عناصر قرار بگیرد.

بخش Text :

1. Color = رنگ نوشته
2. Font-variant = متن با حروف بزرگ در اندازه‌ی کوچک نوشته شود.
3. Font-family = نوع قلم
4. Font-style = نرمال یا مورب بودن نوشته
5.  Font-size = سایز قلم
6. Text-align = راست چین، وسط چین، راست چین بودن نوشته
7. Font-weight = ضخامت قلم
8. Line-height = ارتفاع خط
9. Text-indent = مقدار تورفتگی
10. Text-shadow = سایه متن
11. Text-decoration = روی خط، زیر خط، بالا خط
12. Text-transform = تبدیل کردن متن به حروف کوچک و بزرگ
13. Word-spacing = مشخص کردن فاصله بین کلمات
14.  White-space = فاصله کلمه‌ها
15. Letter-space = مشخص کردن فاصله حروف
16. Vertical-align = موقعیت عمودی آبجکت
17. Font = تنظیمات قلم

 

 

بخش Background :

1. Background-color = رنگ پس زمینه
2. Background-position = مکان پس زمینه
3.  Background-size = سایز بک‌گراند
4. Background-image = تصویر پس زمینه
5. Background-origin = گذاشتن پس زمینه در مکان خاص
6. Background-clip = کات کردن عکس پس زمینه
7.  Background-attachment = متحرک یا ساکن بودن تصویر پس زمینه
8.  Background-repeat = تکرار یا منع تکرار بک‌گراند
9.  Background = همه ویژگی‌های پس زمینه
10.  Box-direction = محل نمایش جعبه
11.  Box-shadow = به وجود آوردن سایه

بخش Border :

•  Border-color = رنگ کادر
• Border-Width = پهنای کادر
• Border-spacing = فواصل بین خطوط حاشیه
• Border-style = نوع کادر
• Border-collapse = از بین بردن یا به وجود آوردن فاصله بین حاشیه

بخش Others :

•  Animation : مشخص کردن ویژگی‌های انیمیشن آبجکت
•  Animation-name : اسم انیمیشن
• Animation-delay : تاخیر زمانی نمایش انیمیشن
• Animation-direction : مسیر حرکت انیمیشن
•  Animation-duration = زمان اجرای انیمیشن
• List-style-type = نوع شماره یا شکل لیست
• List-style-position = مکان شکل یا شماره لیست
• List-style-image = عکس جایگزین شکل در لیست
•  Column-gap = به وجود آوردن فضای خالی ما بین دو ستون
• Column-rule = رنگ، ضخامت و نوع خط بین ستون‌ها
•  Column-rule-style : مدل خط ما بین ستون‌ها
•  Column-rule-color = رنگ خطوط بین ستون‌ها
•  Column-rule-width : ضخامت خطوط بین ستون‌ها
• Column-width = پهنای ستون‌ها
• Columns = پهنای ستون‌ها و تعداد آن‌ها
•  Cursor = شکل اشاره‌گر ماوس تغییر کند.
• Outline = کادر خارجی هر آبجکت
• Outline-style = مدل کادر خارجی
• Outline-color = رنگ کادر خارجی هر آبجکت
• Outline-width = ضخامت کادر خارجی
•  Direction = مکان نوشتن متن
• Transform = شکل شی تغییر پیدا کند.
• Transition-delay = مقدار تاخیر تا اجرای انتقال
• Transition-property = موقع انتقال خصوصت‌ها تغییر کنند.

کدهای آماده css

بیاید ابتدا با مفاهیم Value، Selector، Property آشنا شویم:

تمامی دستورات زبان‌ برنامه‌نویسی CSS از سه قسمت نام برده شده در بالا، تشکیل شده می‌شوند.

به طور‌مثال به کد زیر توجه کنید:

h1 {

color:Green;

}

با نوشتن این دستور همه متن‌هایی که تگ h1 دارند به رنگ سبز در می‌آیند. در کد بالا، Color همان Property یا ویژگی است، h1 همان Selector یا اشاره کننده است و Green همان Value یا مقدار است.

کاربرد IMPORTANT :

برای این‌که Style مورد نظرتان را به عنصر دیگری که دارای Style است تحمیل کنید، می‌توانید از کاربرد Important بهره بگیرید.

 

 

مثلا اگر میخواهید که تگ‌های H3 در قسمت مشخصی از وب سایت‌تان، به جای اینکه قرمز باشد به رنگ آبی در آید، می‌توانید از نمونه کد زیر استفاده کنید:

.selection h3 {

color: blue !important;

}

 پوزیشن Absolute

با استفاده از پوزیشن Absolute می‌توانید تعیین کنید که عنصر در صفحه دقیقا کجا قرار گیرد.

به نمونه کد زیر دقت کنید:

position: absolute;

top: 30px;

right: 10px;

تکه کد نوشته شده در بالا، عنصر را به فاصله ۳۰ پیکسل از بالا  و ۱۰ پیکسل سمت راست مرورگر قرار خواهد داد.  (کاراکتر * به همراه یک SELECTOR) برای انتخاب تمامی عناصر می‌توانید کاراکتر * را کنار یک Selector قرار دهید.

تغییر سایز تصاویر

اگر در طی یادگیری برنامه نویسی css بخواهید عکس‌تان با تغییرات صفحه هماهنگ باشد، باید خصوصیت max-width را روی ۱۰۰% قرار دهید.

به تکه کد زیر توجه کنید :

img{

  max-width: 100%;

  height: auto;

}

بالا استفاده از کد بالا ارتفاع تصویر اتومات با تغییر پهنا تغییر خواهد کرد و بیشترین پهنا تصویر ۱۰۰% است.

ALIGNMENT عمودی

با این ویژگی می‌توانید متن را در وسط و راستای عمودی تنظیم کنید.

.nav li{

    line-height: 50px;

    height: 50px;

}

TRANSITION

در صورتی که می‌خواهیو تغییر رنگ به صورت تدریجی اتفاق بیوفتد می‌توانید از خصوصیت Transition کمک بگیرید:

.entry h2:hover{

color:#f00;

transition: all 0.5s ease;

}

خصوصیت گفته شده در‌کد بالا سبب خواهد شد که رنگ از مشکی به قرمز در طول ۰،۵ ثانیه اتفاق بیوفتد.

امیدواریم موارد گفته شده در رابطه با یادگیری برنامه نویسی css شما را  راهنمایی نموده و اطلاعات مفیدی در اختیارتان گذاشته باشد.