آموزش گام به گام CSS – گام چهارم



توجه : در صورت بروز مشکل یا کار نکردن لینک دانلود اطلاع دهید تا اصلاح شود.

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

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

واحد های شمارش در css  شامل واحدهای زیر میباشند.

  1. %   >>  درصد
  2. in >> اینچ
  3.  cm  >> سانتیمتر
  4. mm  >> میلیمتر
  5. em  
  6. ex 
  7. pt >>  برابر با ۱/۷۲ اینچ
  8. pc >> برابر با ۱۲ point
  9. px  >> پیکسل

مرجع انتخابگرها در CSS

.class


این مثال تمامی عناصری که class=”intro”  هستند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

#id

 

این مثال تمامی عناصری که “id=”name هستند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

*

 

این مثال تمامی عناصر را  انتخاب و style مورد نظر را به آنها اعمال میکند.

element

 

این مثال تمامی تگ های <p> را  انتخاب و style مورد نظر را به آنها اعمال میکند.

element,element

 

این مثال تمامی تگ های <p> و h1  را  انتخاب و style مورد نظر را به آنها اعمال میکند.

element element

 

تمام تگ های <p> که در داخل تگ <div> قرار دارند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

element>element

تمام تگ های <p> که  والد (parent) آنها تگ <div> میباشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.

element+element

 

تمام تگ های <p> که بلافاصله بعد از  تگ <div> قرار دارند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 

[attribute]

 

تمام تگ های<a> که ویژگی target  را نیز دارند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 [attribute=value]

 

تمام تگ های<a> که ویژگی target=_blank  را دارند، انتخاب و style مورد نظر را به آنها اعمال میکند.

[attribute~=value]

 

تمام تگ های<a> که ویژگی “title=pars”  را دارند، انتخاب و style مورد نظر را به آنها اعمال میکند.

[attribute|=value]

تمامی عناصری  که  ویژگی “lang”  آنها با “fa” آغاز میشود، انتخاب و style مورد نظر را به آنها اعمال میکند.

:link

تمام تگ های<a> که روی آنها کلیک نشده است را، انتخاب و style مورد نظر را به آنها اعمال میکند.

:visited

 

تمام تگ های<a> که روی آنها کلیک شده است را، انتخاب و style مورد نظر را به آنها اعمال میکند.

:hover

 

تمام تگ های<a> را زمانی که با ماوس روی آنها میروید، انتخاب و style مورد نظر را به آنها اعمال میکند.

:focus

 

تمام تگ های input  را زمانی که انتخاب میکنید، style مورد نظر را به آنها اعمال میکند.

 

:first-letter

اولین کلمه از تمام تگ های <p>  را  انتخاب و style مورد نظر را به آنها اعمال میکند.

ویژگی هایی که در first-letter  میتوانند مورد استفاده قرار بگیرند.

 

 :first-line

اولین خط از تمام تگ های <p>  را  انتخاب و style مورد نظر را به آنها اعمال میکند.

ویژگی هایی که در first-line  میتوانند مورد استفاده قرار بگیرند.

 

:first-child

 

تمام تگ های <p> که اولین فرزند (child) از پدر و مادر (parent) خود است را  انتخاب و style مورد نظر را به آنها اعمال میکند.

:before

 

به اول تمام تگ های <p> ، لینک  http://ctboard.com  را اضافه میکند.

:after

 

بعد تمام تگ های <p> ، لینک  http://ctboard.com  را اضافه میکند.

:lang

تمام تگ های <p> که با ویژگی  “lang=it” شروع میشوند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

element1~element2

تمام تگ های <ul> که والد مشترکی با  تگ  <p> دارند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 [attribute^=value]

تمام تگ های div که با ویژگی  “class=test” شروع میشوند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

[attribute$=value]

 

تمام تگ های div که با ویژگی  “class=test” تمام میشوند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

[attribute*=value]

تمام تگ های div که  ویژگی  “class=test” را شامل میشوند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

:first-of-type

 

اولین  تگ <p>  را  انتخاب و style مورد نظر را به آنها اعمال میکند.

:last-of-type

آخرین تگ <p>  را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 :only-of-type

هر تگ <p>  که تک فرزند (only child) والد (parent) خود باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 :nth-child()

 

هر تگ <p>  که دومین فرزند (only child) والد (parent) خود باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.

:nth-last-child()

 

هر تگ <p>  که دومین فرزند (only child) والد (parent) خود از آخر باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.

:nth-of-type()

هر تگ <p>  که دومین تگ <p> از والد (parent) خود  باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.

:nth-last-of-type()

هر تگ <p>  که دومین تگ <p> از والد (parent) خود از آخر باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 :last-child

 

برای هر تگ <p>  که آخرین فرزند (child) از والد (parent) خود  باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.

:root

 

تگ HTML  ، را  انتخاب و style مورد نظر را به آنها اعمال میکند.

:empty

 

هر تگ <p>  که محتوایی نداشته باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.

 :enabled

 

تمام تگ های <input>  که  “type=”text باشند و فعال باشند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

:disabled

 

تمام تگ های <input>  که  “type=”text باشند وغیر فعال باشند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

:checked

تمام تگ های <input>  که  “type=”checked باشند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

:not

تمامی تگ ها جز  تگ <p>  را  انتخاب و style مورد نظر را به آنها اعمال میکند.

::selection

 

متن هایی که با دوبار کلیک کردن بر آنها انتخاب میشوند ، style مورد نظر را به آنها اعمال میکند

 



سلام ، من مصطفی هستم ، فارغ التحصیل رشته مهندسی کامپیوتر-نرم افزار علاقه زیادی به برنامه نویسی و بخصوص PHP دارم ، بنده این وب سایت را به منظور دسترسی هموطنان عزیز به محتواهای مفید در موضوعات موجود در سایت راه اندازی کردم ، از دوستان میخواهم با نظرات خود دلگرمی برای بنده باشند و اگر فایلی نیاز دارند ، حتماً از طریق فرم درخواست ، درخواست خود را ارسال کنند.

ارسال نظر

*