آموزش با طعم css_سی اس اس وارد میشود
به نام خدا…
سلام خدمت دوستان عزیزم که با من همراه بودن و با خوندن آموزش های من به من امید دادن و خدا رو بازم شکر که تونستم به css هم برسم.
اگه یادتون باشه جلسات قبل با هم فقط html کار میکردیم تا مفهوم کد نویسی رو یاد بگیریم،اما از این به بعد css هم آموزش ها اضافه میشه(دقت کنید آموزش های html هم هست و کار ما با html تازه شروع شده).
من بعضی اوقات پست هایی میزارم با عنوان “هیولای وب” که در اون پروژه های مختلف رو انجام میدیم که با css و html ساخته میشه(مثلا منو،فرم ثبت نام،و کارهای باحال دیگه).برسیم به این قسمت.
1_اصلا css چیه؟
همونطور که قبلا گفتم اگه وب رو انسان در نظر بگیریم ، لباس،مو ها و هر چیزی که موجب زیبایی میشه همون css ماست.برای مثال شما وقتی سایتی رو باز میگیرید از تمام رنگ های اون سایت تا اندازه های عناصر و محل اون ها و….. با css ساخته شدن.البته ما اگه جلو بریم خود به خود شما همه چی رو میفهمید پس نیازی نیست بیشتر از این اینجا توضیح بدم.
2_چجوری از css استفاده کنم؟
دو راه وجود داره.راه اول اینه که شما در پوشه ای که همون فایل html هست فایل جدیدی بسازید با پسوند (css.) برای مثال style.css.بعد برید فایل html رو باز کنید و در قسمت head اون رو آدرس دهی کنید:
1234567<head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>my web</title> </head>
همونطور که میبینید ما با استفاده از link اون را آدرس دهی کردیم و مقدار صفت rel (صفت rel صفتی است که رابطه ی بین صفحه/لینک فعلی و صفحه لینک مقصد را مشخص میکند.) stylesheet دادیم و بعد آدرس اون فایلمون رو نوشتیم.
راه دیگه ای که وجود داره اینه که ما اصلا فایل جدیدی نسازیم و در همون فایل html ، در قسمت head تگی با نام style باز کنیم و کد های css رو اونجا بنویسیم:
1234567<head> <meta charset="UTF-8"> <title>my web</title> <style> </style> </head>
فکر کنم توضیح نمیخواد.
3_ساختار css چجوریه؟!
برای فهمیدن ساختار کد های css به عکس زیر دقت کنید.
گفتیم که تگ p در htmlبرای ایجاد پاراگراف هست.حالا قصد داریم به این تگ ما استایل بدیم.همونطور که میبینید ما اول سلکتور خودمون یعنی همون p(سلکتور یعنی اون چیزی که ما قصد داریم روش استایل بدیم) نوشتیم بعد یه آکولاد باز و بسته کردیم که یعنی هر کدی که در بین اون آکولاد قرار بگیره برای سلکتور ما یا همون p هست.
کد های ما هم چند بخش هستن یکی property(ویژگی) . بعد دو نقطه برای مقدار دادن و بعد property value(مقدار ویژگی) و در نهایت با سمی کالن(;) برای بستن اون خط کد.در عکس بالا ما خواستیم رنگ پاراگراف رو عوض کنیم.
در کد بالا ما با استفاده از ویژگی color میتونیم رنگ متن رو عوض کنیم.
البته این جلسه در مورد کد ها صحبت نکردیم و من فقط خواستم که ساختار رو بگم.
فکر کنم برای این جلسه کافی باشه.
تا قسمت بعد براتون آرزوی سلامتی میکنم خدانگهدار…….