آموزش CSS

مرجع انتخابگر ها بخش سوم

:first-letter


p:first-letter
{
font-size:200%;
color:#8A2BE2;
}

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

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

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if float is 'none')
text-transform
line-height
float
clear
:first-line

p:first-line
{
background-color:yellow;
}

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

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

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
:first-child

p:first-child
{
background-color:yellow;
}

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

:before

p:before
{
content:"http://pars-soft.ir ";
}

به اول تمام تگ های <p> ، لینک http://pars-soft.ir را اضافه میکند.

:after

p:after
{
content:"http://pars-soft.ir";
}

بعد تمام تگ های <p> ، لینک http://pars-soft.ir را اضافه میکند.

:lang

p:lang(it)
{
background:yellow;
}

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

element1~element2

p~ul
{
background:#ff0000;
}

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

[attribute^=value]

div[class^="test"]
{
background:#ffff00;
}

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

[attribute$=value]

div[class$="test"]
{
background:#ffff00;
}

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

[attribute*=value]

div[class*="test"]
{
background:#ffff00;
}

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

:first-of-type

p:first-of-type
{
background:#ff0000;
}

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

:last-of-type

p:last-of-type
{
background:#ff0000;
}

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

:only-of-type

p:only-of-type
{
background:#ff0000;
}

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

:nth-child()

p:nth-child(2)
{
background:#ff0000;
}

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

:nth-last-child()

p:nth-last-child(2)
{
background:#ff0000;
}

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

:nth-of-type()

p:nth-of-type(2)
{
background:#ff0000;
}

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

:nth-last-of-type()

p:nth-last-of-type(2)
{
background:#ff0000;
}

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

:last-child

p:last-child
{
background:#ff0000;
}

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

:root

:root
{
background:#ff0000;
}

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

:empty

p:empty
{
background:#ff0000;
}

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

:enabled

input[type="text"]:enabled
{
background:#ffff00;
}

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

:disabled

input[type="text"]:disabled
{
background:#dddddd;
}

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

:checked

input:checked
{
background:#ff0000;
}

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

:not

:not(p)
{
background:#ff0000;
}

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

دنبال کردن این مطلب

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

[attribute]

a[target]
{
background-color:yellow;
}

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

<a href="http://www.pars-soft.ir">گروه نرم افزار ی پارس سافت</a>
<a href="http://www.pars-soft.ir" target="_blank">طراحی وب سایت</a>

[attribute=value]

a[target=_blank]
{
background-color:yellow;
}

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

[attribute~=value]

[title~=pars]
{
background-color:yellow;
}

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

[attribute|=value]

[lang|=fa]
{
background-color:yellow;
}

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

:link

a:link
{
background-color:yellow;
}

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

:visited

a:visited
{
background-color:yellow;
}

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

:hover

a:hover
{
background-color:yellow;
}

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

:focus

input:focus
{
background-color:yellow;
}

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

دنبال کردن این مطلب

مرجع انتخابگر ها بخش اول

مرجع انتخابگرها در CSS - بخش اول

 

.class

.intro
{
background-color:yellow;
}

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

#id

#name
{
background-color:yellow;
}

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

*

*
{
background-color:yellow;
}

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

element

p
{
background-color:yellow;
}

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

element,element

h1,p
{
background-color:yellow;
}

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

element element

div p
{
background-color:yellow;
}

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

element>element

div>p
{
background-color:yellow;
}

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

element+element

div+p
{
background-color:yellow;
}

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

دنبال کردن این مطلب

مرجع نام و شماره رنگ ها

در این بخش از آموزش css به توضیح ویژگی مرجع نام و شماره رنگ ها در CSS میپردازیم.

Colors Value

رنگ ها در css با روش های زیر مقدار دهی میشوند.

Hexadecimal colors
RGB colors
RGBA colors
HSL colors
HSLA colors
color names

دنبال کردن این مطلب

مرجع واحدهای شمارش در CSS

در این بخش از آموزش css به توضیح ویژگی مرجع واحدهای شمارش در CSS میپردازیم.

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

% >> درصد
in >> اینچ
cm >> سانتیمتر
mm >> میلیمتر
em
ex
pt >> برابر با 1/72 اینچ
pc >> برابر با 12 point
px >> پیکسل

دنبال کردن این مطلب

خواص نمایش عناصر

در این بخش از آموزش css به توضیح ویژگی نمایش عناصر Cursor , Display , Visibility میپردازیم.

cursor

انواع مختلفی از نمایش مکان نما در صفحه را مشخص میکند.
زمانی که روی یک عنصری که مشخص کرده ایم میرویم مکان نما به شکل مورد نظر نشان داده میشود.

span.crosshair {cursor:crosshair}
span.help {cursor:help}
span.wait {cursor:wait}

visibility

مخفی کردن عناصر در css با این ویژگی امکان پذیر است :

none
hidden

h1.hidden {visibility:hidden;}

اگر به تگ های زیر این ویژگی را نسبت دهید تمامی عناصری که داخل آنها قرار میگیرد نیز از این ویژگی ارث میبرند :

<h1>
<p>
<div>
ولی در تگ های زیر فقط خود عنصر از این ویژگی تبعیت میکند :

<span>
<a>
display
این ویژگی مشخص میکند که چگونه یک عنصر نمایش داده می شود :

li {display:inline;}

span {display:block;}

با تغییر ویژگی display برای عنصرهایی که چاپ آن‌ها ضروری نیست، می‌توانید تنها متن اصلی صفحه را به چاپگر بفرستید. بسیاری از بخش‌های سایت مانند سربرگ، منوها و تبلیغات نیازس نیست که در ز خروجی چاپ نمایش داده شوند.

مقادیری که میتواند Display بگیرد:

Display:block
اگر به یک DIV این خاصیت را بدهید، یعنی آن عنصر میتواند کل سطر خود را اشغال کند و مانند یک بلاک رفتار میکند و هیچ عنصر دیگری را در کنار خود جا نمی دهد. این خاصیت باعث میشود عنصر ما مثل تگ h1 عمل کند.

Display:inline
یعنی DIV در یک خط قرار گرفته که چندین عنصر در آن خط قرار داردند و باید بقیه عنصر ها را در کنار خود جا دهد و بپذیرد .
Display:none
یعنی عنصر نمایش داده نشود.
Display:inline-block
کاربردی مانند Display:inline دارد
display:list-item
هر یک از بلاک هایی که این خاصیت را دارا باشند بصورت یک آیتم نشون داده میشوند و یک بولت در کنارآن نمایش داده میشود. مانند تگ ul.

دنبال کردن این مطلب

محل قرارگیری عناصر - خواص Clear , Float

float

در این بخش از آموزش css به توضیح ویژگی محل قرارگیری عناصر - خواص Clear , Float میپردازیم.

با این ویژگی از css موقعیت یک عنصررا می توانید سمت چپ یا راست تنظیم کنید.

یکی از پرکاربردترین ویژگی ها در css میباشد. بادادن این ویژگی به تگ ها شما میتوانید سایت های چند ستونه ایجاد کنید.

این خاصیت یکی از پایه های اساسی در طراحی قالب بر اساس div می باشد.

وقتی به یک عنصر در کد خود float به سمت چپ یا راست میدهید ، عنصر مورد نظر به آن سمت خاص میرود و بقیه عنصر هایی که بعد از تگ مذکور آمده اند و float ندارند به سمت مخالف رانده میشوند و اطراف عنصر مورد نظر قرار میگیرند.

.text
{
float:left;
width:110px;
height:90px;
margin:5px;
}

clear

اگر عنصر ی بعد از عنصری که ویژگی float را دارد، خاصیت clear داشته باشد، اطراف عنصر ی که ویژگی float را دارد قرار نمی گیرد.

عنصر ی که خاصیت clear=both دارد و float نیز شده باشد، فقط عنصر هایی را که قبل از خودش آمده است، clear میکند . و عنصرهای بعدی را تحت تاثیر قرار نمیدهد

img
{
float:left;
}
p.clear
{
clear:both;
}

دنبال کردن این مطلب

محل قرار گیری عناصر

خواص مربوط به Position

در این بخش از آموزش css به توضیح خواص مربوط به Position میپردازیم.

با استفاده از ویژگی Position موقعیت عنصر در صفحه را مشخص کنید.همچنین میتوانید یک عنصر را پشت عنصر دیگر قرار دهید و اینکه چه اتفاقی بیفتد زمانی که محتوای یک عنصر بیش از اندازه بزرگ است.

عناصری که از ویژگی Position استفاده میکنند،ویژگی های زیر را نیز میتوانند داشته باشند.

top
bottom
left
right
چهار روش مختلف برای موقعیت دهی عناصر در صفحه وجود دارد:


Static Positioning

تمام عناصر در HTML در حالت پیش فرض به صورت استاتیک موقعیت دهی شده اند.عناصری که از این ویژگی استفاده میکنند از ویژگی های top و .. تبعیت نمیکنند.


Fixed Positioning

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

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

Relative Positioning

یک عنصر با این ویژگی نسبت به وضعیت جاری خود در صفحه موقعیت دهی میشود.

h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

Absolute Positioning

مشخص می کند که عنصر مربوطه باید در محل تعیین شده به نمایش در آید نه محلی که کد آن نوشته شده است.

h2
{
position:absolute;
left:100px;
top:150px;
}

 

دنبال کردن این مطلب

خواص مربوط به سرریزی Overflow

در این بخش از آموزش css ، ویژگی Overflow را آموزش میدهیم.

در صورتی که محتوای یک عنصر سر ریز کند با این ویژگی میتوانید مشخص کنید که بعد از سرریز شدن چه اتفاقی بیفتد.

div
{
width:150px;
height:150px;
overflow:scroll;
}

در مثال بالا ، در صورتی که ارتفاع و عرض محتوای داخل div بیشتر از مقدار طول و عرض تعیین شده شود ، div بصورت اسکرول نمایش داده میشود.

مقادیری که میتوانید در این خصوصیت استفاده کنید :

visible : حالت پیش فرض است که بصورت معمولی نمایش داده می شود.

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

scroll : که در بالا گفته شد، عنصر اسکرول عمودی و افقی خواهد خورد.

auto : در این حالت که بسیار پر استفاده است مانند اسکرول عمل میکند، با این تفاوت اساسی که اسکرول بر اساس موقعیت افقی یا عمودی خواهد خورد و در صورتی که تجاوز نکند ، اسکرول نخواهد خورد.

دنبال کردن این مطلب

تنظیم خواص باکس ها Border , Margin , Padding

در این بخش از آموزش css ، تنظیم خواص باکس ها را آموزش میدهیم. همه ی عناصری که در HTML تعریف میشوند میتوانند این ویژگی ها را داشته باشند.

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

طول یک Element در واقع شامل مجموع مقدار تمامی این ویژگی ها به علاوه طول خود شی می باشد .
برای مثال جمع کل طول یک شی با ویژگی های زیر 300px میباشد.

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

=== محاسبه کل طول ====

250px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 20px (left + right margin)
= 300px

تصویر زیر بیانگر کاربرد این ویژگی ها میباشد:

دنبال کردن این مطلب
ratingValue4.8 worstRating 1 bestRating 5 reviewCount 203