گزینشگر ها یکی از مهمترین اجزاء یک دستور CSS هستند که تسلط و آشنایی با آنها می تواند در بهینه تر نمودن کدهای CSS و همچنین افزایش کنترل بر اجزاء وب سایت توسط CSS کمک کند .
در این آموزش با گزینشگرها در CSS آشنا خواهیم شد . استفاده ترکیبی از این گزینشگرها رابطه مستقیمی با خلاقیت یک طراح وب سایت دارد . گزینشگرها مانند ابزاری هستند که استفاده مفید و مناسب از آنها بستگی به تسلط و خلاقیت استفاده کننده دارد .
به دلیل پیوستگی مطالب این مجموعه در یک پست منتشر شده است . امیدوارم طولانی بودن آن موجب نخواندن آن نشود .
با نظرات و پیشنهادات خود در مورد این مطلب و همچنین روند کلی حرکت این وبلاگ ما را در افزایش کیفیت مطالب و همچنین حرکت در مسیر درست یاری نمائید – با تشکر
توصیه می شود مطلب بررسی موقعیت عناصر در یک سند HTML را قبل از خواندن این مطلب مطالعه نمائید
گزینشگر نوع – Type selectors
گزینشگر های نوع یکی از ساده ترین نوع گزینشگر ها هستند که کاربرد زیادی نیز دارند . با استفاده از این گزینشگر ها می توانید کلیه عناصر HTML را بدون در نظر گرفتن موقعیت عنصر در نمودار درختی یک سند گزینش نمائید . به طور مثال
em {color: blue; }
با استفاده از این گزینشگر می توانید کلیه عناصر em را در صفحه گزینش نمائید . با توجه به نمودار درختی سند مشاهده خواهید نمود که گزینش با محل قرارگیری عنصر در سندHTML رابطه ای ندارد .
بسیاری از عناصر را می توان با استفاده از گزینشگرهای نوع گزینش نمود . می توانید برای بسیاری از عناصر با استفاده از گزینشگر نوع دستور 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>
به طور مثال برای گزینش دو نمونه از عناصر در یک سند HTML که در زیر خواهید دید از class استفاده شده است . ملاحظه خواهید نمود که این نوع از گزینش ارتباطی با موقعیت عناصر گزینش شده در سند نخواهد داشت .
.big { font-size: 110%; font-weight: bold; }
ترکیب گزینش class و نوع
با استفاده از ترکیب گزینش به وسیله نوع و class می توانید به گزینش های دقیق تری رسید. می توانید نمونه های از این نوع از گزینش را در مثال زیر ملاحظه نمائید .
در این مثال یک class برای دو عنصر متفاوت تعیین شده است . با استفاده از این class اندازه سایز فونت برای دو عنصر با class یکسان تعیین شده است . اما با توجه به اینکه می خواهیم فقط ضخامت فونت عنصر p را افزایش دهیم نیاز به گزینشگر دقیق تری احساس خواهد شد . با استفاده از نوع عنصر و class می توانید گزینش دقیقتری را انجام دهید .
.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 را گزینش نمائید .
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>
عنصر 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>
می توانید نمودار درختی این سند را ملاحظه نمائید .
تمامی عناصر 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; }
در بعضی از موارد برای تغییر مقادیر پیش فرض عناصر 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 به وجود می آید را هدف قرار دهید و این فاصله را تغییر دهید .
h2 + h3 {margin: -1em; }
از این نوع از گزینشگر می توانید در عناصر inline نیز به خوبی استفاده نمائید .با استفاده از دستور زیر و با توجه به نمودار سند HTML می توانید کلیه عناصر strong را که درست بعد از عنصر em قرار میگیرند را مورد هدف قرار دهید .
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 به درستی پشتیبانی می شوند .
میر امید رضوی
31 July 2011
سلام – آقای سروری بسیار استفاده کردم. دستتون درد نکنه – واقعا ازتون تشکر می کنم. :) –
امیر سروری
31 July 2011
امید @ خواهش میکنم امید جان ، خوشحالم که مورد استفاده قرار گرفت ;)
sahal
31 July 2011
سلام
بسیار عالی بود
امیدوارم در ادامه از jquery بگید
فقط اگه ممکنه rss را بگید از feed بردارند ف-ی-ل-ت-ر-ه
متشکرم
امیر سروری
31 July 2011
sahel @ ممنون از شما . اگر اماکنش بود حتما از jquery هم خواهیم گفت . منظورتون رو در مورد rss , feed متوجه نشدم ؟ خوشبختانه فید این وب سایت ف-ی-ل-ت-ر نیست ;)
hossein hashemi
31 July 2011
خیلی عالی ، موفق باشید .
امیر سروری
31 July 2011
hossein @ قربانت استاد هاشمی عزیز ;)
محسن هاشمی
31 July 2011
سلام.
عالی بود.
سپاس فراوان . . .
zeytoon
1 August 2011
سلام
کاش قابلیت پرینت برای مطالبت می گذاشتی.
امیر سروری
1 August 2011
محسن @ ممنون
zeyton @ چشم حتما این امکان رو اضافه میکنم ;)
saeid
3 August 2011
سلام خسته نباشی امیر جان خیلی از مطالب استفاده کردم واقعا لنگ بودم باید به امسال شما افتخار کرد که دانش خود را در اختیار مردم میزارن
عصر دانش
3 August 2011
سلام
مطلبتون خیلی خوب بود
موفق باشید
فقط در معادل فارسی بعضی سلکتورها میتونید از اسامی بهتری استفاده کنید
مثلا به جای گزینشگر نسل از گزینشگر اولاد استفاده کنید فکر میکنم بهتر باشه
امیر سروری
4 August 2011
عصر دانش @ ممنون از شما در مطالب بعدی سعی میکنم اصطلاحات بهتری رو استفاده کنم
www.webmakergroup.ir
3 September 2011
عالی بود تشکر
صابر
15 October 2011
بازم خیلی خیلی تشکر می کنم ازین کاملتر و جامع تر دیگه نمی شد
اگه بشه این آموزشهای عالی رو بصورت pdf در میاوردیم عالی میشد
امیر سروری
15 October 2011
صابر @ ممنون ;-)
سید مرتضوی
12 April 2012
سلام
عالی بود.تشکر
سعید صحرائیان
30 July 2012
خیلی عالی بود.
سهیل
23 September 2012
عالی بود .
کتاب رو هر چی خوندم گیج شدم ، ولی اینجا واقعا تفهیم شدم .
دستت درد نکنه امیر خان
یاورگرافیک -یاورزاده
1 March 2013
من هم با شما هم عقیده ام
واقعا ممنون .
sima
30 January 2013
به جرئت و بدون تعارف میگم که آموزش هاتون نسبت به اونچه که در سایت های مشابه میدیدم مفید تر و باارزش تر بود. من فقط یه انتفاد و بهتر بگم یه پیشنهاد برای شما دارم. طراحی سایتتون رو اگه کمی زیباتر کنین و البته خواناتر توپه توپه . حیف از مطالب خیلی خوبتون که به چشم نیاد. چون شخصا بار اول که صفحه تونو دیدم اگه اسکرول نمیکردم ، داشتم صفحه رو میبستم و دیگه از این سایت خوب که حالا به عنوان یکی از سایت های مرجع خودم قرار دادم، محروم می شدم!
البته این فقط یک پیشنهاد از جانب کسی بود که خیلی روی طراحی سایت حساس هست ! دی:
فرامرز
8 February 2013
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 }
که تو دستور ها هست به چه معنی هست برای چی هستش؟
امیر سروری
9 February 2013
سلام فرامرز عزیز ، منظور از کلمه blah که یک اصطلاح بیشتر انگلیسی هست اینه که ” یه چیزی اینجا قرار میگیره ” که میتونه هر چیزی باشه ! در این مثال برای اینکه منظور ما بیشتر خود سلکتور بوده به استایل ها کاری نداشتیم و به جاشون این کلمه رو گذاشتیم . :-)
فرامرز
9 February 2013
اهان.یعنی به جای اون اصطلاح کد استایل نوشته میشه خیلی ممنون.
یک در خواستی هم در باب این اموزش هاتون داشتم
من کتابی که دوست شما اقای عبدالعلی ترجمه کردن رو هم دارم در اون کتاب هم بخش سلکتور ها هست و توضیحاتی دادن
من بعضی جاها که شما توضیح دادین نمی دونستم از کتاب متوجه می شدم و بلعکس
می خواستم بگم شما خودتون بلدید بعضی جاها حس می کنید همه هم بلدن مثلا یک کدی رو تو یک خط توضیح می دید که برای خودتون خوبه ولی برای منی که اصلا نمی دونم کاربرد اون کد چیه و چطور استفاده میشه گیج کننده میشه
می خواستم وقتی اموزش می دید و اینهمه می نویسید و زحمت می کشید بعضی جاها مثال بزنید تا بحث بیشتر باز بشه و روشن بشه ممنونم
مثلا
توضیح زیر
گزینش به وسیله جستجو در ارزش و مقدار صفت – جدا شده با خط تیره
من هنوزم ندنستم این چطور کار می کنه تست کردم دیدم وقتی مثلا مینویسیم
img[title|=test]
title=”test-aaaaaa”
به این صورت باشه خلاصه اگر میشه اینو بیشتر توضیح بدید ممنون
یاورگرافیک -یاورزاده
1 March 2013
با سلام و خسته باشید برای همیشه
سایتی بسیار زیبا و آموزشی برای کلیه وب دیزاین ها
با مطالبی بسیار پر بار و کاربردی
(هرکسی می تواند با خواندن دقیق و با آرامش ، حرفه ای شود )
امیدواریم که همیشه سرزنده و پایدار مانی
(زکات علم ، آموزش آن است )
آرزوی موفقیت برای همه جوانان پایدار ایران زمین .
ایمان
27 May 2013
سلام خیلی سایت خوبی دارین کاش اموزش ها رو به صورت pdf یا ویدیو در می اوردین اون موقع خیلی خوب میشد.
میترا
26 June 2013
مثل همیشه عالی بود
مسعود مقدّم
25 July 2013
خیلی مفید بود، واقعن دستتون درد نکنه
سپاسگذارم :)
اشکان
14 October 2013
سلام. خسته نباشید میگم خدمتتون.
مطالب وبسایتتون عالیه. خواستم از زحمتایی که میکشید تشکر کرده باشم. :-)
hamidwt
24 February 2014
سلام واقعا خسته نباشید
یه چیزهایی که از css نفهمیده بودم اینجا فهمیدم.
فقط در قسمت
“a:active is the selector for active links / متمرکز شدن بر روی یک لینک
”
تست که کردم خوب متوجه نشدم که با سرچ کردم کار این رو هم فهمیدم واقعا بهترین آموزش css بود که تا الان خوندم.
یه بار دیگه باید بگم خدا قوت.
hamidwt
24 February 2014
راستی یادم رفت بگم رفتین توی بوکمارک
فاطمه
29 December 2014
واقعا مرسی خیلی مفید بود
علی
22 May 2015
با سلام.کاربرد این دستور چی هستش؟
a:focus
رخساره
8 January 2019
یعنی بهتر از شما وجود نداره.یکماهه دنبال مطلب سلکتورهام و به این خوبی کسی تو وب توضیح نداده تاحالا.مخصوصانمودارها به درک مطلب خیلی کمک کرده