CSSHTMLPHPآموزشبرنامه نویسیمیم تک 8

آموزش PHP : آموزش CSS (قسمت اول)

آموزش php : آموزش CSS (قسمت اول)

آموزش CSS : PHP

با سلام در خدمت شما هستیم با قسمت سوم آموزش صفر تا ده { آموزش php : آموزش CSS (قسمت اول) } با ما همراه باشید.

در دو قسمت قبل به معرفی PHP و آموزش HTML پرداختیم:

آموزش PHP : معرفی زبان PHP + آموزش HTML (قسمت اول)

آموزش php : آموزش HTML ( قسمت دوم )

این قسمت و قسمت بعد میخوایم درباره Css صحبت کنیم.

 Css در کنار  html  اولین قدم برای آموزش طراحی وب سایته.

Css اصلی ترین بخش برای زیبا کردن سایته.

سی اس اس

Css به عبارت ساده برای زیبایی صفحات وب درطراحی سایت به کار میره.

با استفاده از CSS میشه تگ های html را به راحتی به استایل های مختلف در آورد. رنگ بندی و تعیین پس زمینه ، تعیین مکان و عرض و طول ، فرمت دهی font و … همگی کارهاایه که باآموزش Css می توان به راحتی آنها را برای صفحات وب سایتمون انجام بدیم.

میشه یک صفحه اینترنتی رو تو ۳ لایه دید:

۱- لایه ساختار :

باتگ ها یک ساختار ایجاد میکنیم،برای مثال میگیم که  <body> صفحمون یکسری هدر داره،یکسری پاراگراف داره،یکسری <div> و…
اینهارو به یه شکلی مشخص میکنیم.

۲- لایه محتوا :

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

مثل ویکی‌پدیا که ساختار تمام صفحاتش یکسانه ولی محتوای مختلفی داره.

۳- لایه ظاهر :

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

ساختار و محتوا درواقع همون HTML هستتد که باهاشون کار کردیم،ظاهر صفحه رو <style> های توی صفحه مشخص میکنند.ظاهری که توی Word Wide Web استفاده میشه، Css هستش که درواقع یه استانداردیه برای استایل یک صفحه.

هرتگ ساختاری توی HTML میتونه یک خواص مربوط به استایل داشته باشه.

مثلاً قبلا دیدیم که تگ <img> ما خاصیت src داشت،و تگ <a> ما خاصیت href داشت که برای لینک به کار میرفت.

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

مثل:رنگش،اندازش

کلا Css اومد برای ما این استایل هارو پیاده سازی کرده.

خواص Css یا CSS properties :

من یه تگ <h1> تعریف کردم که رنگش قرمزه

}h1

;color:red

{

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

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

الان توی Css قانونی که گذاشتیم به این صورته که تمام <h1> ها رنگشون قرمز باشه.

CSS – قسمت 1 :

Css یا cascading style sheet

  • وراثت
  • بازنویسی آبشاری
  • نسخه ها
  • تعریف قانون
  • قانون
  • تعریف خاصیت ها

وراثت در CSS :

به این معناست که بیاییم یه تگ <h1> تعریف کنیم،بعد بیاییم توش از
تگ <p> پاراگراف استفاده کنیم،این کار معمولاً اتفاق نمی افته ولی بسته به قانون وراثت تگ <style>که برای پدرش، یعنی <h1>تعریف کنیم تگ <p> هم اون استایل رو به ارث میبره.

برای اینکه <style> رو تعریف کنیم کافیه توی قسمت <head> تگ <style> رو باز کنیم،و قانون هامونو توش بنویسیم.

<style>
h1(color:red;)
</style>

خروجی:

برای فهمیدن مفهوم وراثت توی تگ <h1> یه span مینویسیم،به این صورت:

خروجی:

بعد از اجرا تغییر رو میبیند، بازم قرمزه در صورتی که span بود و ما قانون رو برای h1 گذاشتیم و خاصیت style رو به ارث برد.

بازنویسی آبشاری در CSS :

ممکنه که شما چند تا خاصیت رو هم‌زمان به تگ ها بدید،کدوم خاصیت مورد قبول واقع میشه؟در واقع اون خاصیتی مورد قبول واقع میشه که خاص ترین شرایط رو داشته باشه.

به هرکدوم از تگ ها میشه خاصیت ID رو نسبت داد،که یه چیز یکتایه توی کل صفحه html که میتونیم با اون شناسایش کنیم.

میخوام به تگ<h1> ای دی بدم و توی<style> از ای دی برای اشاره کردن به تگ استفاده کنم.
برای این کار یه شارپ(#)اولش میزارم،اسم ای دی رو مینویسم و بهش خاصیت میدم:

#first_h1{
Color:blue;
}

الان رنگ<h1> ما آبی میشه چون اشاره کردن با ای دی خاص تر از استفاده کردن از تگ <h1> به صورت خالیه.

نسخه های css :

Css2 و Css3

CSS – قسمت 2 :

نحوه تعریف در CSS :

  • inline

<h1 style= “color:red”>

  • internal

<style>
</style>

  • external

<link href= “page.css” rel= “stylesheet”>

مدل اول:

ما اومدیم توی<head> تگ style تعریف کردیم و شروع کردیم به استایل دادن به دو مدل دیگه میتونیم استایل هارو نسبت بدیم.
مدل اول میشه گفت ربطی به css نداره

مدل بعدی inline که توی خود تگ تعریف میشه و اولویت داره به این صورت

<h1 id:”first_h1″ style= “color:green;”>html</h1>

خروجی:

مدل internal رو که قبلا دیدیم توی <head>تعریف میکنیم و با id یاخود تگ بهش استایل میدیم.

مدلexternal یعنی یه فایلی کنار html بذاریم و css رو توی اون تعریف کنم.

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

<Link href=”page.css rel=”stylesheet””/>

یه لینک از نوع stylesheet با نام page.css??

خروجی ما همونه و هیچ تغییری نمیکنه.

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

CSS – قسمت 3 :

انتخاب کننده ها در CSS :

به این شکل بودن که قانون ها  روی چه چیزهایی اعمال بشه به طور کلی میشه ۳ نوع انتخاب کننده نوشت.

  • انتخاب کننده های تگ
  • انتخاب کننده id
  • انتخاب کننده کلاس

h1,.bh#post_head{
color:red;
}

ما میتونیم برای هر element یه‌کلاس تعریف کنیم مثلا:

<h1 id:”first_h1″ style= “color:green;”>html</h1>

و توی css به این شکل بهش استایل بدید.

.green{
color:green;
}

خروجی:

فرق کلاس با ای دی:از هر ای دی توی کل وب پیجتون فقط یدونه ممکنه وجود داشته باشه،ولی از هرکلاس ممکنه چند تا توی وب پیجتون وجود داشته باشه.

انتخاب کننده های Disendent: تمام پاراگراف هایی که توی <h1> هستند فرضا رنگشون سبز باشه.

P.green{color:green;}

پاراگراف هایی که کلاس green دارن رنگشون سبز بشه.

h1.green{color:green;}

<h1> هایی که کلاس green دارند رنگشون سبز بشه.

خروجی:

خب به پایان این بخش از آموزش php : آموزش CSS رسیدیدم، امیدوارم تمرین رو فراموش نکنید.

آموزش php : آموزش CSS (قسمت دوم)

تا درودی دیگر بدرود