برای استفاده از فایل‌ها ی css ما به طور خلاصه می‌توانیم از 3 تا راه بیایم و پیروی کنیم که به ترتیب اولویت اون ها 

1- inline  : استفاده از پراپرتی استایل در داخل تگ

2- interline : استفاده از تگ استایل در داخل تگ head

3- external : به صورت ماژول استفاده کردن و اضافه کردن آن با استفاده از تگ لینک که معقولانه‌ترین راه همین سومی هستش

<link rel="styleSheet" type="text/css"  href="style.css" >

برا استایل دادن‌ها به صورت ماژول ما معمولا از کلاس‌ها و آیدی‌ها استفاده میکنیم که برای استایل دادن به نام کلاس‌ها در اول آن‌ها از .  و برای نام آیدی‌ها # استفاده میکنیم همچنین برای دادن یک استایل به همه هم از * می‌توانیم استفاده بکنیم

سلکتورهای تاکیدی : برای تاکید کردن برای مثال فلان تگ و فلان کلاسش میایم و به صورت اختصاصی و تاکیدی می‌توانیم به شیوه در ابتدا نام تگ و بلافاصله نام کلاس رو استفاده بکنیم 

<style>
h5.test1 {
color: red;
font-size: larger;
}
h4.test1 {
color: yellow;
font-size: larger;
}
</style>

-------------------------------------------------------------------------------------------------------------------------------------

sudo class : نوعی ساختار در css هستند که باعث کنترل کردن یا فیلتر کردن یک سری از المان‌ها طبق قوانین که ما براشون تعین  میکنیم هستند 

1- hover : زمانی که میایم و روی اون المانمون با موس می‌رویم این عمل رو انجام داده ایم

2- active : مال موقعی هستش که میایم و روی اون عمل کلیک کردن رو انجام میدهیم

3- focus : زمانی که روی اون کلیک می‌شود و فعال هست تا یک اتفاقی براش بیاد و بیفتد

4- visited : میگوید که این المان ما اومده و دیده شده است و تا اخر طول عمر پروژه داخل کچ مرورگر ما می‌مان

5- frist-child || p:frist-child : اولین عنصر از یک خانواده رو میاد و برای ما اجرا میکند اگر ما در داخل یک تگ div  برای مثال تعدای تگ یا عناصر از یک خانواده داشتیم برای مثال همشون تگ p بودن برای  انتخاب اولیشون می‌توانییم از این سلکتور بیایم و استفاده بکنیم

6-  last-child || p:last-child : شیوه اجراییش کپی یکی بالایی هستش فقط به جای اولین عنصر از خانواده میاد و برای اخرین عنصر اعمال میکند 

7- frist-of-type || p:frist-of-type :  ی موقعی هست ما در داخل یک تگ مثل div المان‌ها و عناصر مختلفی رو داریم و میخاهیم با صرف نظر از نوع هاشون که مثلا برامون مهم نیست تگ p یا span  داخلشون چن تا باشه بیاد و اولین تگ موجود در اون رو برامون انتخاب کنه تا استایلی که میخایم رو روش اعمال کنیم از این سودو کلاس استفاده میکنیم

8- last-of-type || p:last-of-type :  شبیه به یکی بالایی هستش فقط به جای اولی برامون اخرین رو میاد و انتخابش میکند 

9- ( ) not : یک موقع هست ما یک سری استایل رو میخاهیم به همه المان هامون اعمال کنیم به غیر از یک المان خاص که با استفاده از این سلکتور ما میتوانیم با استفاده از نقیض بگیم بیا و این استایل رو اعمال به همه الا به اون تگی که داخل پرانتز این سودو کلاس گفتیم

10- () nth-child : ما با استفاد از این سلکتور میتوانیم بیایم و گام برداریم در استایل دادن به المان هامون مثلا بیایم و بگیم این استایل رو برای استایل 4 امش اعمال کن و میاد از اولین عنصر فرزندش شروع به شمارش میکنه و وقتی به اون میرسه استایل رو اعمال میکند و یک عدد رو به عنوان مقدار میگیرد ( این سودوکلاس نوع المان‌های فرزند براشون مهم نیستش ) 

11-  () nth-last-child : مشابه یکی بالایی هستش فقط برای شمارش میاد و از آخر شروع به شمارش میکند

نکته » برای استایل دادن به المان‌های زوج و فرد می‌توانیم بیایم و از مقادیر odd یا even در داخل آن‌ها استفاده بکنیم با هم مقادیر ریاضی بدهیم مثلا 2n+1 

12-  ( ) p:  nth-of-type در این سودو کلاس متناسب با مشخص کردن نوع سودوکلاس امون میاد و شمارش رو از بین اون‌ها انجام میدهد و شمارش از اول هستش

13-  ( ) p:  nth-last-of-type مشابه یکی بالایی هستش فقط شمارش از آخر هستش

14 - p :  only-of-type  » صرفا عنصری رو میاد و انتخاب میکند که تک فرزند هستش و مشابه اون نیست

15 - p :  onlychild » باید تنها فرزند این خانواده باشد و برای انتخاب تک فرزند‌ها میاد و مورد استفاده قرار میگیر

-------------------------------------------------------------------------------------------------------------------------------------

شبه عناصر یا شبه تگ ها  ( sudo elements ) 

1-  Selection ::  »  موقعی که میایم و انتخاب یا سلکت میکنیم مورد استفاده قرار میگیرد و مثلا میتوانیم رنگ سلکت رو تغیر بدهیم که ما میتوانیم به همه عناصر و یا به یک تگ خاص بیایم و بدهیم

2- line-frist :: » میاد و تغیرات رو فقط برای خط اول ما اعمال میکند و برای بقیه خط‌ها کاری رو انجام نمیدهد و روی بعضی از عناصر اعمال نمی‌شود مثلا روی span اعمال نمیشود که به طور کلی می‌توان گفت تگ هایی که به صورت بلاکی نیستند و inline هستند این سودو المنت روشون اعمال نمی‌شود موقعی که ما از این سودو المنت استفاده میکنیم مجاز هستیم که پراپرتی‌های زیر رو براش استفاده بکنیم dfont Properties & color Propertise

3- letter-frist :: میاد و برای اولین کلمه برامون اعمال می‌کند

مبحث مهم 

4- before & :: after :: » یک موقع هست ما نمیخاهیم بیایم و یک المان یا تگ جدید اضافه کنیم و صرفا میخایم به یک تگ امون مثلا در این جا تگ span بیایم و به بعد یا قبلش یک محتوایی رو اضافه کنیم یا یک متن یا یک تصویر یا یک ایکون برای همین از این شبه عناصر‌ها استفاده میکنیم که در داخل آن‌ها باید حتما از تگ content استفاده بکنیم

که حال در داخل آن یک url یا unocode icon  و یا یک متن و یا " "  قرار میدهیم

-------------------------------------------------------------------------------------------------------------------------------------

css combinators Selectors روش‌های متفاوت برای انتخاب المان ها

descendant selector ( space ) -1

div p a { }

2-Slecetor child یک موقع هست ما در داخل یک تگ والد مثل همین div میایم و یکسری المان دیگه هم تعریف میکنیم حال میخواهیم از فرزندانش فقط یک سری مثلا تگ‌های p رو انتخاب کنیم که برای این کار میایم و از این نوع سلکتورا استفاده میکنیم

div > p { }

3- ( + ) adjacent  sibling selector بلافاصله بعدش انتخاب برادر یا خواهر کناریش مثلا اون تگ div که کلاس d را دارد بلافاصله بعدش تگ p رو بیا و انتخاب بکنش

div.d + p { }

۴- ( ~ ) general sibling selector مثل یک بالای بلافاصله نیست میگه هر چقدر خواهر یا برادر داشت من انتخاب میکنم فقط نوع اش رو برای من مشخص بکن

main.parent ~ span { }

5-  ما میتوانیم عناصر و المان‌ها و کلاس‌های دیگر رو بیایم و باهم انتخابشون بکنیم فقط با این تفاوت که با یک ,  انتخابشون میکنیم   مثل     {  } ul,li

-------------------------------------------------------------------------------------------------------------------------------------

atribute Selector  انتخاب المان‌ها بر اساس صفت هاشون 

1- انتخاب بر اساس ویژگی Atribut

.login input[disabled] { }

2- انتخاب براساس مقادیر یک Atribute

.login input[value= " emad" ] {}
.login input[type= " email" ] {}

نکته » استفاده از =~ که میاد در اون جمله میگرده و نکته ی مهمی برای کار هست هم فراموش نکنین

html -------------->
<img src="./image1.jpg" alt="nature" >
<img src="./image1.jpg" alt="tiger of nature" >
css ---------------->
<style>
img[alt="nature"]{
فقط برای اولی اعمال می‌شود
}
img[alt~="nature"]{
 برای هر دوتا اعمال می‌شود
}
</style>

3- class Atribute » می‌توانیم با استفاده از آن در نام‌های کلاس هامون بیایم و یک فیلتر رو انجام بدهیم 

که چهارتا  نوع برای انتخاب کردن دارد  

اولی

section#t [class |= text ] { color : red }

کلمه ی text شروع کننده و در اول باشد و با - هم جدا شده باشند رو میاد و انتخاب میکند

دومی =^

section#w [ class^="text" ] { color = red }

کلمه ی text فقط شروع کننده باشد و نیازی به - نیست در ان

تفاوت =| با =^ در این هست که اگر در اولی اون متن ما وجود داشت و بعد اون یک دنباله اومده بود که با - جدا شده بودند کلمات هم بیا و انتخابشون بکن ولی در دومی اگر - هم وجود نداشت هم میاد و انتخابشون میکند به شرطی که شروعش با کلمه ای که مشخص کرده ایم باشد

سومی =$  

کلمه ی text ما در آخر باشه و نیازی به - هم نیستش 

section#w [ class $= "text" ] { color = red }

چهارمی =* 

هرچیزی که در نام کلاس‌ها برابر با مقدار text بود رو بیا و برای من انتخابش بکن و برام فرقی نمیکنه که اول یا اخر و یا با - یا بدون - باشه 

section#w [ class *= "text" ] { color = red }