آشنایی با گزینشگرها – selector – در CSS

در این آموزش با گزینشگرها - css selector - در CSS آشنا خواهیم شد .


امیر سروری ۳۲ دیدگاه CSS , اصول طراحی وب سایت یکشنبه, ۹ام مرداد , ۱۳۹۰ 28903 بازدید

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

با نظرات و پیشنهادات خود در مورد این مطلب و همچنین روند کلی حرکت این وبلاگ ما را در افزایش کیفیت مطالب و همچنین حرکت در مسیر درست یاری نمائید – با تشکر

توصیه می شود مطلب بررسی موقعیت عناصر در یک سند HTML را قبل از خواندن این مطلب مطالعه نمائید

گزینشگر نوع – Type selectors

گزینشگر های نوع یکی از ساده ترین نوع گزینشگر ها هستند که کاربرد زیادی نیز دارند . با استفاده از این گزینشگر ها می توانید کلیه عناصر HTML را بدون در نظر گرفتن موقعیت عنصر در نمودار درختی یک سند گزینش نمائید . به طور مثال

em {color: blue; }

با استفاده از این گزینشگر می توانید کلیه عناصر em را در صفحه گزینش نمائید . با توجه به نمودار درختی سند مشاهده خواهید نمود که گزینش با محل قرارگیری عنصر در سندHTML رابطه ای ندارد .

css selector webtarget.ir

بسیاری از عناصر را می توان با استفاده از گزینشگرهای نوع گزینش نمود . می توانید برای بسیاری از عناصر با استفاده از گزینشگر نوع دستور CSS بنویسید .

گزینشگر class – Class selectors

معرفی

در حالی که گزینشگر های نوع هر نمونه ای از یک عنصر را مورد هدف قرار می دهند گزینشگرهای class می توانند هر عنصری از یک سند را که دارای خصوصیت class است ، بدون در نظر گرفتن موقعیت عنصر در سند HTML گزینش کنند .

فلسفه استفاده از class در گزینش عناصر در صفحه گزینش یک مجموعه از عناصر با یک خصوصیت یکسان است که در قالب یک class قرار می گیرند . استفاده مناسب از class ها می تواند تاثیر بسیار زیادی در بهینه سازی کدهای CSS و افزایش کنترل بر روی وب سایت داشته باشد . افزایش توانایی با تجربه و تمرین به وجود خواهد آمد .

<body>
<p class="big">This is some <em>text</em></p>
<p>This is some text</p>
<ul>
<li class="big">List item</li>
<li>List item</li>
<li>List <em>item</em></li>
</ul>
</body> 

css selector webtarget.ir

به طور مثال برای گزینش دو نمونه از عناصر در یک سند HTML که در زیر خواهید دید از class استفاده شده است . ملاحظه خواهید نمود که این نوع از گزینش ارتباطی با موقعیت عناصر گزینش شده در سند نخواهد داشت .

.big { font-size: 110%; font-weight: bold; } 

ترکیب گزینش class و نوع

با استفاده از ترکیب گزینش به وسیله نوع و class می توانید به گزینش های دقیق تری رسید. می توانید نمونه های از این نوع از گزینش را در مثال زیر ملاحظه نمائید .

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

css selector webtarget.ir

.big { font-size: 110%; } /* affects p and li */
p.big { font-weight: bold; }/* affects p only */

ترکیب چندگانه class ها

یکی از مهمترین مزایای استفاده از class برای گزینش عناصر HTML استفاده از چند class برای یک عنصر HTML است . class های چندگانه می تواند کاربردهای بسیار زیادی در گزینش عناصر داشته باشد . به طور مثال شما می خواهید با استفاده از دو class یک عنصر را گزینش نمائید .هر کدام از این گزینش ها یک خصویت style خاص را به عنصر HTML اضافه خواهند کرد .

<p class="big indent">

.big { font-weight: bold; }
.indent { padding-left: 2em; }

کلاسها جایگزین عناصر HTML نیستند

کلاسها ابزارهای بسیار قدرتمندی برای گزینش عناصر هستند . اما استفاده از class ها برای تغییر عناصر به کاربری های متفاوت با تعریف آن عنصر توصیه نمی شود .
در مثال زیر ملاحظه می نمائید که سعی شده است نحوه نمایش محتویات یک عنصر divهمانند یک عنصر heading تغییر داده شود . به طور استاندارد بهتر است از هر عنصر با توجه به تعریف آن عنصر استفاده شود .

استفاده نا مناسب از عناصر HTML در موقعیت غیر استاندارد می تواند نحوه وب سایت شما را در مرورگرهایی که CSS را تشخیص نمی دهند و یا اینکه به دلایلی از CSS استفاده نمی کنند .در این مثال بدون وجود CSS یک عنصر div مشابهتی با یک عنصر heading نخواهد داشت .

<div class="heading">Heading here</div>

.heading 
{ 
font-weight: bold; 
font-size: 140%; 
color: #600;
}

در مثالهای زیر نحوه استفاده صحیح از عناصر را در این مثال خواهید دید .

<h2>Heading here</h2>

h2 
{ 
font-weight: bold; /* should not really be required */
font-size: 140%; 
color: #600;
}

و اگر شما نیاز به یک heading با مشخصات خاص دارید می توانید به وسیله class گزینش دقیقتری بر روی آن انجام دهید .

<h2 class="sidenav">Heading here</h2>

h2.sidenav 
{ 
font-weight: bold; 
font-size: 140%; 
color: #600;
}

کلاسهای اضافی را حذف کنید

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

<div class="sidenav">
<h2 class="sideheading">Site navigation></h2>
<ul class="sidelist">
<li class="sideitem">List item</li>
<li class="sideitem"><a href="#"><span class="sidelink">List item</span></a></li>
<li class="sideitem">List item</li>
</ul>
</div>

این یک نمونه اشتباه در کد نویس است و میتوانید این شیوه را به صورت زیر اصلاح نمائید .

<div class="sidenav">
<h2>Site navigation</h2>
<ul>
<li>List item</li>
<li><a href="#">List item</a></li>
<li>List item</li>
</ul>
</div>

دستورات CSS برای این نحوه صحیح کد نویسی به شکل زیر خواهند بود . در این نوع از گزینش از ترکیب class و نوع عنصر استفاده شده است .

div.sidenav { blah } /* styles overall div */
div.sidenav h2 { blah } /* styles h2 within the div */
div.sidenav ul { blah } /* styles ul within the div */
div.sidenav li { blah } /* styles li within the div */
div.sidenav li a { blah } /* styles a within li within the div */

قبل از اینکه از class استفاده نمائید فکر کنید

قبل از اینکه برای گزینش یک عنصر در سند HTML به آن class اضافه نمائید سوالات زیر را از خود بپیرسید :

  • آیا می توان از نوع عنصر برای گزینش آن استفاده نمود ؟
  • آیا می توان از class و یا ID عناصر والدین و یا جد برای کنترل این عنصر استفاده نمود ؟

در صورتی که جواب ها منفی بودند می تواند با خیال آسوده از class برای کنترل عنصر استفاده نمائید .

گزینشگر ID – ID selectors

گزینشگرهای ID مشابه گزینشگرهای class هستند . گزینش گر ID را میتوان برای هدف قرار دادن کلیه عناصر HTML در یک سند که دارای ID هستند استفاده نمود . همانند گزینشگر class موقعیت عنصر در سند تاثیری در گزینش مستقیم توسط ID نخواهد داشت .

#navigation { width: 12em; color: #333; }
div#navigation { width: 12em; color: #333; }

مهمترین تفاوت در استفاده از گزینشگرهای class و ID این است که از ID می تواند برای یک عنصر در سند HTML تعیین گردد و نام ID برای آن عنصر منحصر به فرد خواهد بود و از یک ID فقط یک بار در یک سند HTML استفاده خواهد شد . این موضوع در مورد class کاملا متفاوت خواهد بود و از class همیشه و همه جا می توان استفاده نمود و عناصر دارای class را به راحتی به صورت گروهی گزینش نمود .

گزینشگر نسل – Descendant selectors

این نوع از گزینشگر در گزینش عناصر یک سند HTML که در نمودار درختی سند جای میگیرند استفاده می شود . این نوع از گزینش در کنار سایر گزینشگرها این امکان را به ما خواهد داد تا گزینش های دقیق تری را انجام دهیم .به طور مثال برای گزینش تعداد خاصی از عناصر em در این مثال از گزینشگرهای نسل برای گزینش استفاده شده است .

<body>
<h1>Heading <em>here</em> </h1>
<p>Lorem ipsum dolor <em>sit</em> amet.</p>
</body>

نمودار درختی این این سند HTML به صورت زیر خواهد بود . عنصر -em – گزینش شده نیز در این نمودار مشخص شده است .در این مثال اگر از گزینشگر های نوع استفاده کنید می بایست تمامی عناصر em را گزینش نمائید .

css selector webtarget.ir

em {color: blue; }

در صورت گزینش به وسیله گزینشگرهای نسل شما می تواندی گزینش دقیقتری داشته باشید و نحوه گزینش به وسیله گزینشگر نوع را بهبود دهید .

p em {color: blue; }

دستور گزینش در این مثال تمامی عناصرem که در زیرمجموعه یک عنصر p قرار گرفته اند را گزینش خواهد نمود . با توجه به نمودار درختی این سند ، عنصرem نسلی از عنصرp خواهد بود . با توجه به نمودار درختی متوجه خواهید شد که em در زیرمجموعه عنصر h1 گزینش نخواهد شد .

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

<body>
<p>Lorem ipsum dolor <em>sit</em> amet.</p>
<ul>
<li>item 1</li>
<li>item 2</li>
<li><em>item 3</em></li>
</ul>
</body>

css selector webtarget.ir

عنصر em در این نمودار درختی دو سطح پائین تر از عنصر ul قرار گرفته است . با توجه به تعریف انجام شده می توان تمامی عناصر em موجود در نسل ul را گزینش نمود .
در این گزینش از عنصر li استفاده نشده است و با استفاده از عنصر ul عناصر زیر مجموعه این عنصر مورد هدف قرار گرفته اند . در این مثال عناصر em زیر مجموعه ul مورد هدف قرار گرفته اند ولی عنصر em زیر مجموعه p به صورت قبل باقی خواهد ماند .

ul em {color: blue; }

گزینشگر فرزند – Child selectors

گزینشگرهای فرزند برای گزینش فرزند های مستقیم یک والدین در یک نمودار درختی از سند HTML مورد استفاده قرار می گیرد .گزینشگرهای فرزند نسل یک عنصر را گزینش نخواهند کرد و تنها فرزند مستقیم یک والدین را گزینش می نمایند . به طور مثال شما می توانید عناصر em را که مستقیما فرزند والدین خود – div – هستند را به وسیله گزینشگرهای فرزند گزینش نمائید . با توجه به مثال متوجه خواهید شد که دیگر عناصر em که در نسل div قرار دارند مورد هدف قرار نخواهند گرفت .

<body>
<h1>Heading <em>text</em></h1>
<div>
This is some <em>text</em>
<p>This is a paragraph of <em>text</em></p>
</div>
</body>

می توانید نمودار درختی این سند را ملاحظه نمائید .

css selector webtarget.ir

تمامی عناصر em فرزند یک div والدین مورد هدف قرار گرفته اند و دیگر عناصر em که در نسل div قرار دارند اما فرزند مستقیم آن نیستند مورد هدف قرار نگرفته اند و گزینش نشده اند .

 
div > em { color: blue; }

OR

div>em { color: blue; }

در نوشتن دستور این گزینش فاصله تاثیری نخواهد داشت . گزینشگرهای فرزند در تمامی مرورگرها به غیر از Internet Explorer 5, 5.5 and 6 به درستی پشتیبانی می شوند .

گزینشگر کلی – Universal selectors

گزینشگر های کلی برای گزینش تمامی عناصر موجود در یک سند HTML مورد استفاده قرار می گیرد . به طور مثال با استفاده از دستور زیر میتواندی رنگ کلیه عناصر یک سند HTML را تغییر دهید .

* {color: blue; }

css selector webtarget.ir

در بعضی از موارد برای تغییر مقادیر پیش فرض عناصر HTML در یک سند از این نوع از گزینشگر استفاده می شود . به طور مثال با استفاده از دستور زیر میتوانید کلیه مقادیر پیش فرض padding و margin را در یک سند HTML تغییر دهید و مساوی صفر قرار دهید .

* {padding:0;margin:0; }

گزینشگر برادر و خواهر مجاور – Adjacent sibling selectors

با استفاده از این نوع گزینشگر می توانید عناصر خواهر و برادر ، که بلافاصله پس از یکدیگر قرار می گیرند را گزینش نمائید .به طور مثال شما می توانید عنصر h3 را با استفاده از این گزینشگر مورد هدف قرار دهید . توجه نمائید که تنها عنصر h3 که دقیقا بعد از عنصر h2 قرار گرفته است مورد هدف و گزینش قرار خواهد گرفت .

<body>
<h2>Heading 2 <em>text</em></h2>
<h3>Heading 3 text</h3>
<p>This is <em>text</em> and more <strong>text</strong></p>
</body>

با استفاده از دستور زیر می توانید فاصله ای را که در صورت قرار گرفتن بعد از هم عناصر heading به وجود می آید را هدف قرار دهید و این فاصله را تغییر دهید .

css selector webtarget.ir

h2 + h3 {margin: -1em; }

از این نوع از گزینشگر می توانید در عناصر inline نیز به خوبی استفاده نمائید .با استفاده از دستور زیر و با توجه به نمودار سند HTML می توانید کلیه عناصر strong را که درست بعد از عنصر em قرار میگیرند را مورد هدف قرار دهید .

css selector webtarget.ir

em + strong {color: blue; } 

گزینشگرهای برادر و خواهر مجاور در تمامی مرورگرها به غیر از Internet Explorer 5, 5.5 and 6 به درستی پشتیبانی می شوند .

گزینشگر صفت – Attribute selectors

صفت یا Attributes چیست ؟

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

در مثال زیر می توانید نمونه های متفاوتی از صفت ها را در عناصر مختلف ملاحظه نمائید .

Id , src , title , href , class , style

<h1 id="section1">
<img src="small.gif" width="100" height="100">
<img title="mainimage" alt="main image">
<a href="foo.htm">
<p class="maintext">
<form style="padding: 10px">

گزینشگرهای صفت با استفاده از صفت عناصر و مقدار آنها عناصر موجود در یک سند HTML را مورد هدف قرا می دهند .به طور مثال با استفاده از گزینشگر صفت در مثال زیر کلیه عناصر img را که صفت src در آنها مساوی small.gif است را مورد هدف قرار می دهیم .

img[src="small.gif"] { border: 1px solid #000; }

از گزینشگر های صفت می توان به چهار روش زیر استفاده نمود .

گزینش به وسیله نوع صفت

این نوع از گزینش بر پایه نوع صفت عمل خواهد نمود . به طور مثال در نمونه زیر یک عنصر img با توجه به نوع و مشخصات صفت های مرتبط مورد هدف و گزینش قرار گرفته است .

img[title] { border: 1px solid #000; }
img[width] { border: 1px solid #000; }
img[alt] { border: 1px solid #000; }

گزینش به وسیله مقدار و ارزش صفت

.

این نوع از گزینش بر پایه نوع و ارزش و مقدار صفت عمل خواهد کرد . در مثال زیر خواهید دید که یک عنصر img توسط گزینشگرهای صفت مورد هدف و گزینش قرار گرفته است . در این گزینش کلیه عناصر Img دارای خصوصیت src با مقدار small.gif مورد هدف قرار گرفته اند .

img[src="small.gif"] { border: 1px solid #000; }

گزینش به وسیله جستجو در ارزش و مقدار صفت – جدا شده با فاصله

در این روش از گزینش به وسیله صفت مقادیر مورد نظر در ارزش یک صفت جستجو می شوند و در صورت وجود این مقادیر عنصر مورد نظر گزینش می شود .در مثال زیر مشاهده خواهید نمود که مقدار small در ارزش خصوصیت alt در یک عنصر img مورد بررسی قرار می گیرد و در صورت وجود این کلمه – small – در ارزش صفت alt عنصرimg گزینش می شود .

img[alt~="small"] { border: 1px solid #000; }

توجه داشته باشید عنصر در صورتی گزینش خواهد شد که کلمه small به صورت مجزا و همراه با فاصله نسبت به دیگر کلمات موجود در alt قرار گرفته باشد – small image

گزینش به وسیله جستجو در ارزش و مقدار صفت – جدا شده با خط تیره

در این نوع از گزینش به مانند نمونه و مثال قبل مقدار مورد نظر در ارزش صفت جستجو می شود . تفاوت در نحوه قرار گیری مقدار در ارزش صفت است در نمونه بالا مقدار می بایست به وسیله فاصله جدا می شد و در اینجا مقدار به وسیله خط فاصله جدا شده است .

img[title|="small"] { border: 1px solid #000; }

در مثال بالا کلمه small در ارزش صفت alt جستجو می شود و این بار با یک خط فاصله از کلمات دیگر جدا شده است – small-image

گزینشگرهای صفت در تمامی مرورگرها به غیر از Internet Explorer 5, 5.5 and 6 و نسخه های ابتدایی opera به درستی پشتیبانی می شوند .

گزینش به وسیله شبه کلاسها -Pseudo-classes

تا کنون تمامی گزینشگر های مورد بحث یک عنصر از نمودار درختی یک سند HTML را مورد هدف قرار داده اند . اما زمانی رسیده است که شما می خواهید عناصری را مورد گزینش قرار دهید که گزینشگری برای آنها تعریف نشده است ! مانند حالت قرار گرفتن نشانه گر موس روی یک لینک . شبه کلاسها به شما این امکان را میدهند که عناصری را که در نمودار درختی یک سند HTML تعریف نشده اند را به راحتی گزینش نمائید و کنترل کنید .

:first-child
:link
:visited
:hover
:active
:focus
:lang(n)

شکل دهی لینک در حالت های مختلف

با استفاده از شبه کلاسهای میتوانید کلیه حالتهای موجود در یک لینک را گزینش نمائید و شکل دهی کنید .

  • a:link is the selector for normal links / یک لینک معمولی
  • a:visited is the selector for visited links / یک لینک بازدید شده
  • a:hover is the selector for hover state / قرار گرفتن نشانه گر موس بر روی لینک
  • a:active is the selector for active links / متمرکز شدن بر روی یک لینک

برای کنترل تمامی موارد می توانید از دستورات زیر استفاده نمائید .

a {} 
a:link {} 
a:visited {} 
a:hover {} 
a:active {}

برای ایجاد نتیجه استاندارد و بهتر میتوانید دستورات را به صورت زیر تغییر دهید . بهتر است حالت لینک در نمایش a:link, a:visited و a:hover, a:active برای ایجاد نتیجه و حالت یکسان به صورت گروهی تعریف شوند .

a:link, a:visited { color: blue; } 
a:hover, a:active { color: red; }

استفاده از شکل دهی غیر استاندارد می تواند باعث سر درگم شدن کاربران وب سایت شما شود . بهتر است با ایجاد تغییر در لینک ها و حتی هنگام حرکت موس بر روی آنها مخاطب را از اینکه این یک پیوند است مطلع نمائید .

از شبه کلاسهای میتوان برای عناصری غیر از لینک نیز استفاده نمود . به طور مثال با حرکت موس بر روی عنصر em رنگ آن تغییر خواهد نمود .

em { color: blue; }
em:hover { color: red; }

البته استفاده از این نوع شکل دهی میتواند مخاطب را در تشخیص پیوندها دچار مشکلاتی نماید .شبه کلاسها به وسیله تمامی مرورگها پشتیبانی میشوند . اما استفاده از این شبه کلاسهای برای عناصری غیر از لینک در مرورگرهای Internet Explorer 5, 5.5 and 6 پشتیبانی نمی شود .

گزینش به وسیله شبه عناصر – Pseudo-elements

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

“:first-line” and “:first-letter”

این دو نوع از شبه عناصر بر پایه شکل دهی سنتی متن پایه ریزی شده اند . با استفاده از این شبه عناصر می توانید حروف اول و یا خط اول از یک متن را گزینش نمائید و شکل دهی کنید .

:first-line – به شما کمک خواهد نمود تا اولین خط از یک پاراگراف را گزینش نمائید .

p:first-line {font-weight: bold; } 

:first-letter – بهشما کمک خواهد نمود تا اولین حرف از یک پاراگراف را گزینش و کنترل نمائید.

p:first-letter {font-size: 200%; font-weight: bold; }

با توجه به تعریف برای شکل دهی به متن این شبه عنصر- p:first-letter – از مقادیر وخصوصیات زیر پشتیبانی می کند

  • • font properties
  • • color properties
  • • background properties
  • • margin properties
  • • padding properties
  • • border properties
  • • text-decoration
  • • vertical-align only if => float:none
  • • text-transform
  • • line-height
  • • float
  • • clear

“:before” and “:after”

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

strong:before{content:url(image.gif);}

و یا بعد از هر عنصر strong

strong:after{content:url(image.gif);}

شبه عناصر در تمامی مرورگرها به غیر از Internet Explorer 5, 5.5 and 6 و نسخه های ابتدایی opera به درستی پشتیبانی می شوند .



نویسنده / مترجم : امیر سروری

امیر سروری هستم علاقه مند به بازاریابی و تبلیغات آنلاین , طراحی وب سایت و البته آموزش


۳۲ دیدگاه برای این نوشته ثبت شده است


  1. میر امید رضوی
    ۹ مرداد ۱۳۹۰

    سلام – آقای سروری بسیار استفاده کردم. دستتون درد نکنه – واقعا ازتون تشکر می کنم. :) –




  2. sahal
    ۹ مرداد ۱۳۹۰

    سلام

    بسیار عالی بود
    امیدوارم در ادامه از jquery بگید

    فقط اگه ممکنه rss را بگید از feed بردارند ف-ی-ل-ت-ر-ه
    متشکرم




    • امیر سروری
      ۹ مرداد ۱۳۹۰

      sahel @ ممنون از شما . اگر اماکنش بود حتما از jquery هم خواهیم گفت . منظورتون رو در مورد rss , feed متوجه نشدم ؟ خوشبختانه فید این وب سایت ف-ی-ل-ت-ر نیست ;)




  3. hossein hashemi
    ۹ مرداد ۱۳۹۰

    خیلی عالی ، موفق باشید .




  4. محسن هاشمی
    ۹ مرداد ۱۳۹۰

    سلام.

    عالی بود.

    سپاس فراوان . . .




  5. zeytoon
    ۱۰ مرداد ۱۳۹۰

    سلام
    کاش قابلیت پرینت برای مطالبت می گذاشتی.




  6. saeid
    ۱۲ مرداد ۱۳۹۰

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




  7. عصر دانش
    ۱۲ مرداد ۱۳۹۰

    سلام
    مطلبتون خیلی خوب بود
    موفق باشید
    فقط در معادل فارسی بعضی سلکتورها میتونید از اسامی بهتری استفاده کنید
    مثلا به جای گزینشگر نسل از گزینشگر اولاد استفاده کنید فکر میکنم بهتر باشه




    • امیر سروری
      ۱۳ مرداد ۱۳۹۰

      عصر دانش @ ممنون از شما در مطالب بعدی سعی میکنم اصطلاحات بهتری رو استفاده کنم




  8. www.webmakergroup.ir
    ۱۲ شهریور ۱۳۹۰

    عالی بود تشکر




  9. صابر
    ۲۳ مهر ۱۳۹۰

    بازم خیلی خیلی تشکر می کنم ازین کاملتر و جامع تر دیگه نمی شد
    اگه بشه این آموزشهای عالی رو بصورت pdf در میاوردیم عالی میشد




  10. سید مرتضوی
    ۲۴ فروردین ۱۳۹۱

    سلام
    عالی بود.تشکر




  11. سعید صحرائیان
    ۹ مرداد ۱۳۹۱

    خیلی عالی بود.




  12. سهیل
    ۲ مهر ۱۳۹۱

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

    دستت درد نکنه امیر خان




  13. sima
    ۱۱ بهمن ۱۳۹۱

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




  14. فرامرز
    ۲۰ بهمن ۱۳۹۱

    div.sidenav { blah } /* styles overall div */
    div.sidenav h2 { blah } /* styles h2 within the div */
    div.sidenav ul { blah } /* styles ul within the div */
    div.sidenav li { blah } /* styles li within the div */
    div.sidenav li a { blah } /* styles a within li within the div */

    سلام و ممنون از اموزش های خوبتون سوالی داشتم این
    { blah }
    که تو دستور ها هست به چه معنی هست برای چی هستش؟




    • امیر سروری
      ۲۱ بهمن ۱۳۹۱

      سلام فرامرز عزیز ، منظور از کلمه blah که یک اصطلاح بیشتر انگلیسی هست اینه که ” یه چیزی اینجا قرار میگیره ” که میتونه هر چیزی باشه ! در این مثال برای اینکه منظور ما بیشتر خود سلکتور بوده به استایل ها کاری نداشتیم و به جاشون این کلمه رو گذاشتیم . :-)




  15. فرامرز
    ۲۱ بهمن ۱۳۹۱

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

    گزینش به وسیله جستجو در ارزش و مقدار صفت – جدا شده با خط تیره

    من هنوزم ندنستم این چطور کار می کنه تست کردم دیدم وقتی مثلا مینویسیم

    img[title|=test]

    title=”test-aaaaaa”

    به این صورت باشه خلاصه اگر میشه اینو بیشتر توضیح بدید ممنون



  16. با سلام و خسته باشید برای همیشه
    سایتی بسیار زیبا و آموزشی برای کلیه وب دیزاین ها
    با مطالبی بسیار پر بار و کاربردی

    (هرکسی می تواند با خواندن دقیق و با آرامش ، حرفه ای شود )
    امیدواریم که همیشه سرزنده و پایدار مانی

    (زکات علم ، آموزش آن است )
    آرزوی موفقیت برای همه جوانان پایدار ایران زمین .




  17. ایمان
    ۶ خرداد ۱۳۹۲

    سلام خیلی سایت خوبی دارین کاش اموزش ها رو به صورت pdf یا ویدیو در می اوردین اون موقع خیلی خوب میشد.




  18. میترا
    ۵ تیر ۱۳۹۲

    مثل همیشه عالی بود




  19. مسعود مقدّم
    ۳ مرداد ۱۳۹۲

    خیلی مفید بود، واقعن دستتون درد نکنه
    سپاسگذارم :)




  20. اشکان
    ۲۲ مهر ۱۳۹۲

    سلام. خسته نباشید میگم خدمتتون.
    مطالب وبسایتتون عالیه. خواستم از زحمتایی که میکشید تشکر کرده باشم. :-)




  21. hamidwt
    ۵ اسفند ۱۳۹۲

    سلام واقعا خسته نباشید
    یه چیزهایی که از css نفهمیده بودم اینجا فهمیدم.
    فقط در قسمت
    “a:active is the selector for active links / متمرکز شدن بر روی یک لینک

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




  22. hamidwt
    ۵ اسفند ۱۳۹۲

    راستی یادم رفت بگم رفتین توی بوکمارک




  23. فاطمه
    ۸ دی ۱۳۹۳

    واقعا مرسی خیلی مفید بود




  24. علی
    ۱ خرداد ۱۳۹۴

    با سلام.کاربرد این دستور چی هستش؟
    a:focus



دیدگاه خود را بنویسید





نشانی ایمیل شما منتشر نخواهد شد.

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

لطفا دیدگاهتان تا حد امکان مربوط به پست بالا باشد. اگر حرف دیگری دارید و یا قصد تماس با من را دارید، از فرم تماس استفاده کنید.

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2017 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.