آموزش رایگان CSS- جلسه 1

آموزش رایگان CSS- جلسه 1

آنچه در این مقاله میخوانید

بهترین خانه برای زندگی خانه ای است که علاوه بر زیرساختی محکم و با دوام, دارای طراحی زیبا, گرم و صمیمی باشد. در طراحی سایت نیز پس از پیکربندی, برنامه نویسان به دنبال زیبایی ظاهری و راحتی در استفاده هستند. آنچه یک وب سایت را زیبا می کند و آن را برای استفاده ی کاربر راحت تر می کند CSS است. اما CSS چیست؟ و چطور باید از آن به بهترین شکل استفاده کرد؟🧐

زبان CSS, یک وب سایت را برای استفاده ی کاربر آماده می کند, جلوه های بصری زیبا به او خواهد داد و میزان بازدید سایت را با جلب توجه کاربران افزایش خواهد داد.

در جلسات قبل به آموزشHTML پرداختیم. لازم است بدانید که برای یادگیری CSS نیاز هست تا HTML را به خوبی یاد گرفته باشید. پس اگر تا به حال جلسات رایگان HTML افق وب را دنبال نکرده اید از لینک هایی که  قرار داده ام استفاده کنید و سپس این مقاله را بخوانید.

 

در این جلسه و جلسات آینده قصد داریم با CSS آشنا شویم و به معرفی و نحوه ی کار با آن بپردازیم, پس با ما همراه باشید.

CSS چیست؟

CSS مخفف Cascading Style Sheets است و زبانی است که برای سبک سازی بصری صفحات وب استفاده می شود. CSS زبانی است که به مرورگرها می گوید چگونه بخشهای مختلف یک صفحه وب را نشان دهند.

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

تصویر زیر صفحه اول YouTube را نشان می دهد که در سمت چپ تصویر، یک ظاهر منظم از صفحه وجود دارد و در سمت راست می توانید شکل ظاهری آن را بدون CSS مشاهده کنید.
تصویر سمت راست نه تنها از جذابیت کمتری برخوردار است ، بلکه استفاده از آن را برای کاربر بسیار دشوارتر می کند.

 

آموزش رایگان CSS- جلسه اول| css چیست؟
آموزش رایگان CSS- جلسه 1 | CSS چیست؟

 

 

تفاوت CSS با HTML

آموزش رایگان CSS- جلسه اول| css چیست؟
آموزش رایگان CSS- جلسه 1| CSS چیست؟

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

تمام محتوای مهم وب سایت باید با استفاده از یک زبان نشانه گذاری مانند HTML به وب سایت اضافه شود و این محتوای اضافه شده با استفاده از زبان استایل دهی مانند CSS به صورت قابل فهم برای کاربر ارائه میشود.

به عبارت دیگر پست های وبلاگ ، عنوان صفحه ، فیلم ، صدا,  تصاویر و… همه با HTML به صفحه وب اضافه می شوند و تصاویر و رنگ پس زمینه ، حاشیه ها ، اندازه قلم ، تایپوگرافی و موقعیت این موارد توسط CSS تعریف میشود تا علاوه بر زیبایی استفاده از آن نیز آسان تر شود پس می توان گفت که CSS و HTML مکمل یکدیگر هستند.

نحو CSS (CSS Syntax)

معادل فارسی سینتکس ” نحو ” است و به معنی نگارش درست و قرار گیری مناسب کلمات در جایگاهشان است. در برنامه نویسی و کامپیوتر سینتکس مجموعه ای از قواعد و قوانین است که نحوه ی کنار هم قرار گرفتن نشانه ها, علائم و کلمات را بیان می کند.
CSS Syntax شامل انتخابگرها ، ویژگی ها ، مقادیر ، اعلان ها ، بلوک های اعلان و مجموعه قوانین و دستورات است.

  •  Selector یک قطعه کد است که برای شناسایی عنصر صفحه وب یا عناصری که قرار است تحت تأثیر استایل ها قرار بگیرند استفاده می شود.
  •  property ویژگی که قرار است به یک عنصر داده شود. به عنوان مثال ، رنگ ، padding ، حاشیه و پس زمینه همه از ویژگی (property) CSS هستند که بیشتر مورد استفاده قرار می گیرند.
  •  Value مقادیری که برای property درنظر گرفته می شود به عنوان مثال ، ممکن است property رنگ را برای یک عنصر انتخاب کرده باشیم و value آن را قرمز بدهیم:

; color: red

  •  به ترکیب یک ویژگی و یک مقدار اعلان (declaration) گفته می شود.
  •  ممکن است چندین اعلان برای یک Selector در نظر گرفته شود که همه آن ها در کنار هم در یک { } قرار می گیرند و گروه بندی می شوند که به این گروه از اعلان ها بلوک اعلان (declaration block) گفته می شود.
  •  یک انتخابگر واحد و بلوک اعلانات که در ادامه ی آن قرار دارد ترکیبی هستند که به عنوان یک مجموعه قوانین (ruleset) شناخته می شوند.
  •  at-rules قواعد مشابه ruleset دارد اما با علامت @ شروع می شوند نه با انتخابگر. رایج‌ ترین آن ها @media است که اغلب برای ایجاد یک بلوک از قواعد CSS به کار می‌رود که براساس اندازه دستگاه مشاهده صفحه وب اعمال می‌شوند .
  •  هر دو ruleset و at-rules عبارات CSS هستند.
آموزش رایگان CSS- جلسه اول| css چیست؟
آموزش رایگان CSS- جلسه 1| CSS چیست؟

نمونه ای از CSS Syntax

در ادامه از یک بلوک اعلان CSS برای روشن کردن هر یک از موارد بالا استفاده می کنیم.

h1 {
color: red;
font-size: 3em;
text-decoration: underline;
}

در این مثال ، h1 یک Selector است. پس از انتخاب ، یک بلوک اعلان دنبال می شود که شامل سه اعلان است. هر اعلان با یک نقطه ویرگول (;) از بعدی جدا می شود. زبانه ها و خط شکاف ها اختیاری است اما بیشتر توسعه دهندگان از آنها استفاده می کنند تا کد CSS خوانایی بیشتری داشته باشد.
با استفاده از h1 به عنوان انتخابگر (Selector) می گوییم که هر عنوان سطح 1 در صفحه وب باید از اعلان های مندرج در این مجموعه قوانین پیروی کند.

مجموعه قوانین (ruleset) شامل سه اعلان است:

color:red;
font-size: 3em;
text-decoration: underline;

رنگ ، اندازه قلم و دکوراسیون متن همه ویژگی ها (properties) هستند. به معنای واقعی کلمه CSS صدها ویژگی دارد اما عملا فقط چند ده مورد معمولاً استفاده می شود.
ما مقادیر قرمز ، 3em و underline را به ویژگی های مورد نظر دادیم. در واقع هر ویژگی CSS برای پذیرش مقادیر قالب بندی شده به روشی خاص تعریف شده است.
برای ویژگی رنگ می توانیم از یک کلمه کلیدی رنگی یا فرمول رنگی در قالب های Hex ، RGB یا HSL استفاده کنیم. که در این مورد ما از کلمه کلیدی رنگ قرمز استفاده کردیم. چند کلمه کلیدی رنگی در CSS 3 موجود است ، اما با سایر مدل های رنگی می توان به میلیون ها رنگ دسترسی داشت.

ما مقدار 3em را به ویژگی font-size اعمال کردیم. طیف گسترده ای از واحدهای اندازه از جمله پیکسل ، درصد و موارد دیگر وجود دارد که می توانیم از آن ها استفاده کنیم.

و در آخر مقدار underline را به text-decoration اضافه کردیم. ما همچنین می توانستیم از overline یا line-through به عنوان مقادیری برای استایل دهی به متن استفاده کنیم که آن ها را به صورت خط در موقعیت های زیر ، بالا و روی متن نمایش می دهد علاوه بر این ، CSS 3 این امکان را می دهد تا استایل این خط ها را به دوتایی ، نقطه ای ، خط چین و موج دار تغییر دهیم (CSS 3 به صورت پیش فرض یک خط ساده را نشان می دهد). همچنین می توانیم یک رنگ را برای ویژگی text-decoration در نظر بگیریم.

ما می توانستیم هر سه مقدار را همزمان با استفاده از اعلانی مانند مثال زیر اعمال کنیم:

text-decoration: blue double underline;

این قانون باعث می شود که h1 در مثال اولیه ما با یک زیرخط دوتایی آبی رنگ مشخص شود و متن به صورت تعریف شده در ویژگی رنگ ما قرمز باقی می ماند.

آماده سازی HTML برای استایل دهی

همانطور که گفتیم محتوای یک صفحه با استفاده از زبان های HTML و XML ایجاد میشود و در نهایت برای تعیین موقعیت و نحوه ی نمایش هر مورد از زبان CSS استفاده میشود.

به منظور سهولت در انتخاب موارد در یک صفحه وب ، شناسه ها باید به عناصر موجود در صفحه وب اضافه شوند. این شناسه ها ، که در متن CSS اغلب قلاب (hook) نامیده می شوند ، شناسایی مواردی را که باید تحت تأثیر قوانین CSS باشند آسان می کند.

کلاسها (Class) و شناسه ها (id) به عنوان قلاب برای استایل های CSS استفاده می شوند. در حالی که نحوه ارائه CSS تحت تأثیر استفاده از کلاسها و قلاب ها نیست ، اما به توسعه دهندگان این امکان را می دهند تا عناصر HTML ای که قصد استایل دهی آنها را دارند, مشخص کنند.

کلاسها و شناسه ها قابل تعویض نیستند پس مهم است که بدانید چه زمانی باید از آنها استفاده کنید.

چه موقع از کلاس ها استفاده کنیم؟

وقتی چندین عنصر در یک صفحه وب وجود دارد که باید استایل یکسان داشته باشند, لازم است از کلاسها استفاده کنید. به عنوان مثال شما می خواهید پیوندهایی که در هدر و پاورقی صفحه قرار دارد استایل مشابه بدهید اما متفاوت با پیوندهای داخل صفحه باشد. در این مواقع از کلاسها استفاده کنید. سپس ، می توانید استایل ها را با استفاده از کلاس مشخص کنید و مطمئن باشید که فقط روی پیوندهای دارای آن کلاس اعمال می شوند.

مواقع استفاده از آیدی ها (IDs)

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

در ادامه مثالی از کد HTML و CSS برای یک نوار ناوبری ساده آورده شده است؛

<style>
#nav {
background: lightgray;
overflow: auto;
}
#nav li {
float: left;
padding: 10px;
}
#nav li:hover {
background: gray;
}
</style>
<ul id=”nav”>
<li><a href=””>Home</a></li>
<li><a href=””>Shop</a></li>
<li><a href=””>About Us</a></li>
<li><a href=””>Contact Us</a></li>
</ul>

با استفاده از این کد ، یک منوی پیمایش افقی با پس زمینه خاکستری روشن که در سمت چپ صفحه قرار دارد, ایجاد می شود. فاصله هر مورد از هر طرف 10 پیکسل خواهد بود و وقتی ماوس روی آن قرار بگیرد ، پس زمینه هر مورد تاریک می شود.

نکته؛ لیست های نامرتب دیگری که در صفحه وب وجود دارد تحت تأثیر این کد قرار نمی گیرند.چون با شناسه ی منحصر به فردی که به تگ ul دادیم استایل ها مختص آن تگ است.مثلا استایل های زیر چون با شناسه ی دیگری تعریف شده تاثیری بر کدهای قبلی ندارد.

#example-nav {
background: lightgray;
overflow: auto;
}
#example-nav li {
float: left;
padding: 10px;
}
#example-nav li:hover {
background: gray;
}

تمرین جلسه اول

ابتدا یک سند HTML ایجاد کنید و یک لیست نامرتب که دارای چهار تگ li است بنویسید به li اول و دوم و چهارم کلاس list1 و به li سوم آی دی list2 را بدهید.  استایل list1 را به این صورت قرار دهید که رنگ سفید با پس زمینه آبی و سایز فونت 18 پیکسل باشد و استایل list2 رنگ قرمز و سایز فونت 14 پیکسل باشد. استایل لیست نامرتب را هم پس زمینه خاکستری قرار دهید. در این تمرین مشاهده خواهید کرد که تگ هایی که کلاس مشابه دارند استایلشان یکی خواهد بود.

اگر مشکل یا سوالی داشتید از بخش دیدگاه ها با ما در میان بگذارد.

منبع؛ www.html.com

5/5 - (2 امتیاز)

4 نظر

ارسال نظر

آدرس ایمیل شما منتشر نخواهد شد.