آموزش برنامه نویسی و مهارتهای وب
شنبه ۰۸ مهر ۱۴۰۲
Saturday, September 30, 2023 GMT +3:30
Saturday, September 30, 2023 GMT +3:30
سلکتور آی دی (ID) و کلاس (Class) در CSS
در آموزش قبل اشاره شد که CSS به خودی خود کاربرد خاصی ندارد و در کنار تگ های HTML است که معنی و کاربرد پیدا می کند، در واقع CSS صرفا برای تعریف استایل تگ های مختلف HTML به وجود آمده است، اما CSS چگونه این تگ ها را در صفحات وب شناسایی می کند؟ به طور مثال اگر بخواهیم از بین دهها تگ div موجود در صفحه div مربوط به یک مطلب مشخص را استایل دهی کنیم، CSS چه راه حلی برای این موضوع در نظر گرفته است؟ پاسخ این نوع سوالات عبارت سلکتور (Selector) است، سلکتور راهکاری در CSS است که با آن عنصر هدف در HTML برای استایل دهی مشخص می شود، تعداد سلکتورها نسبتا زیاد است، در این آموزش به دو مورد از مهم ترین و پرکاربردترین ها یعنی آی دی (ID) و کلاس (Class) خواهیم پرداخت که درک و تسلط بر نحوه کاربرد آنها در روند فراگیری CSS اهمیت زیادی دارد، در کنار این دو سلکتور پر کاربرد گذری خواهیم داشت بر مبحث قانون اولویت بندی سلکتورها در CSS که درک آن نیز برای مراحل بعدی و آموزش های پیشرفته تر ضرورت دارد.
معنی سلکتور (Selector) در CSS
همان طور که گفتیم سلکتور (Selector) در واقع راهکاری در CSS است که با آن عنصر هدف در HTML برای استایل دهی مشخص می شود، سلکتورها الگوهای تعریف شده (Pattern) در CSS هستند که با آنها عنصر یا عناصری که می خواهیم استایل بر آنها تاثیر داشته باشد را انتخاب (Select) می کنیم لذا می توانیم در ترجمه تحت الفظی این عبارت به آن انتخابگر نیز بگوییم، برای مثال سلکتور p در CSS استایل را به تمام تگ های p موجود در کدنویسی HTML صفحه نسبت می دهد یا به عبارتی دیگر تمام تگ های p در صفحه را جهت اعمال استایل CSS مد نظر انتخاب می کند:
<style type="text/css">
p {
font-size:16px;
color:#818181;
}
</style>
<p>پاراگراف اول</p>
<p>پاراگراف دوم</p>
<p>پاراگراف سوم</p><style type="text/css">
.color-text {
font-size:16px;
color:#818181;
}
</style>
<p>پاراگراف اول</p>
<p class="color-text">پاراگراف دوم</p>
<p>پاراگراف سوم</p>نحوه تعریف آی دی (ID) و کلاس (Class) در CSS
گفتیم که سلکتورها الگوهای تعریف شده (Pattern) در CSS هستند، منظور از این عبارت قراردادی بودن نحوه تعریف سلکتورها در CSS با قواعد خاص خود است، آی دی (ID) و کلاس (Class) جزء پرکاربردترین سلکتورها هستند که بر اساس قانون الگو با علائم خاصی در کدهای CSS تعریف می شوند، برای تعریف آی دی از علامت # و برای کلاس از علامت نقطه در ابتدای الگو استفاده می کنیم:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | آی دی و کلاس در CSS</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
#main{
display:block;
background-color:#069;
}
.text{
color:#FFF;
}
</style>
</head>
<body>
<div id="main" class="text">
این یک متن در آی دی main و کلاس text است.
</div>
</body>
</html>همان طور که در کد بالا مشخص است یک تگ HTML می تواند از چند سلکتور مختلف در CSS استایل دهی شود، در اینجا برخی خصوصیات تگ div از سلکتور آی دی و برخی موارد دیگر از سلکتور کلاس به آن نسبت داده شده اند.
کجا از آی دی (ID) و کی از کلاس (Class) استفاده کنیم؟
شاید با دیدن و بررسی این نمونه کدها این سوال به ذهنمان خطور کند که کجا باید از آی دی (ID) و کی از کلاس (Class) استفاده کنیم؟ در پاسخ باید گفت که هر سلکتوری در CSS با هدف خاصی ایجاد شده که در ارتباط مستقیم با کدنویسی HTML است، در HTML برای شناسایی تگ های مختلف از هم از ID استفاده می شود، به طور مثال:
<div id="id-1"></div>
<div id="id-2"></div>
<div id="id-3"></div><div id="id-1" class="class-1"></div>
<div id="id-2" class="class-1"></div>
<div id="id-3" class="class-1"></div>تعریف ویژگی، بدون آی دی و کلاس در CSS
علاوه بر کلاس و آی دی، برخی از موارد در CSS به صورت سلکتورهای کلی قابل تعریف شدن هستند، به طور مثال سلکتور body استایل خود را در حالت پیش فرض به تگ body و زیر مجموعه آن اختصاص می دهد یا سلکتور p به تمام عناصر پاراگرافی (تگ های p) موجود در صفحه وب استایل خود را اختصاص می دهد:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | استایل دهی بدون آی دی و کلاس</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
p,div{
border:#CCC 1px solid;
padding:4px;
color:#000;
}
#main{
display:block;
background-color:#069;
}
.text{
color:#FFF;
}
</style>
</head>
<body>
<div id="main">
<p class="text">
این یک متن در آی دی main و کلاس text است، برخی ویژگی های کلی از سلکتور div و p تاثیر می پذیرند.
</p>
</div>
</body>
</html>در مثال بالا علاوه بر استفاده از آی دی main و کلاس text به عنوان سلکتورهای اصلی، به صورت کلی نیز استایلی را برای تگ های div و p موجود در صفحه اختصاص داده ایم، با این کار تمام عناصر پاراگراف و بلاک های div آن ویژگی را خواهند داشت، دقت کنیم که در CSS قوانینی برای اولویت بندی سلکتورها وجود دارد، به طور مثال اگر دو ویژگی مشترک (به فرض color) هم در سلکتور p و هم در کلاس تعریف شده باشند، CSS اولویت را به کلاس می دهد و color موجود در سلکتور p را که به صورت کلی تعریف شده نادیده می گیرد، در نمونه کد بالا color برای سلکتور p به صورت مقدار کد هگز 000 (رنگ مشکی) در نظر گرفته شده، اما در کلاس text این مقدار FFF (رنگ سفید) است، در نتیجه رنگ متن تگ های p که کلاس text داشته باشند سفید خواهد بود، برای آشنایی بیشتر با این موضوع در ادامه به طور مختصر به مسئله قانون اولویت بندی سلکتورها در CSS می پردازیم.
قانون اولویت بندی سلکتورها در CSS
در آموزش قبل در خصوص عبارت Cascading یا آبشاری بودن CSS توضیحاتی ارائه شد، گفتیم که منظور از این عبارت پیروی سلسه مراتبی مرورگر از استایل های CSS موجود در صفحه است، یعنی اگر دو استایل مشترک در صفحه وجود داشته باشند، خاصیتی غالب می شود که در پائین ترین سطح درج شده باشد، به طور مثال در استایل های زیر ویژگی دوم غالب می شود چون در سطح پائین تری در صفحه درج شده:
<style type="text/css">
p.text{
font-size:16px;
}
</style>
<style type="text/css">
p.text{
font-size:12px;
}
</style>
<p class="text">پاراگراف</p><style type="text/css">
p{
font-size:12px;
color:#D3181B;
}
p.text{
font-size:16px;
color:#1740DD;
}
</style>
<p>پاراگراف اول</p>
<p class="text">پاراگراف دوم</p>بر اساس قانون اولویت، هر سلکتور CSS را می توان در چهار رده
A, B, C, D1, 0, 0, 00, 1, 0, 00, 0, 1, 00, 0, 0, 1A - Inline Style => 1000 => <div style=""></div>
B - ID => 0100 => <style type="text/css">#your-id {}</style>
C - Class => 0010 => <style type="text/css">.your-class {}</style>
D - Element => 0001 => <style type="text/css">div {}</style><style type="text/css">
p{
font-size:12px;
color:#D3181B;
}
</style>
<p style="font-size:24px;">پاراگراف</p>1, 0, 0, 00, 0, 0, 1<style type="text/css">
div p.text{
font-size:16px;
text-decoration:underline;
}
#main p{
font-size: 12px;
text-decoration:overline;
}
</style>
<div id="main">
<p class="text">پاراگراف</p>
</div>0, 1, 0, 10, 0, 1, 2با فهم این الگوها می توانیم درک روشنی از قوانین اولیت بندی در CSS داشته باشیم تا از سردرگمی و تعریف استایل های مبهم اجتناب کنیم.
دسته بندی: آموزش مقدماتی » CSS
مطالب بیشتر:مقدمه ای بر CSS و استایل دهی صفحات وب
کاربرد ویژگی position و float در CSS
نحوه تنظیم استایل لینک (Link) در CSS
ویژگی های Font و Text در CSS
کار با ویژگی margin و padding در CSS
دیدگاه
۵۴ دیدگاه برای این مطلب ارسال شده است. دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.داوود
۱۲:۳۱ ۱۳۹۴/۰۴/۰۳
سلام
آقای مهندس آموزش یه کد آکاردئونی بود که خودم میخواستم انجام بدم و بعد به سورسش نگاه کنم. بعدش که انجام دادم برام چند تا سوال پیش اومد که هر روز یک بخشش رو می پرسم ازتون.
ببینید کل کدی که در نهایت از طرف مدرس نوشته شده بود بدین شرحه:
اولی :
حالا میخوام ببینم چرا مثلا کد اون بهتر از من شده؟؟ چرا من که p رو هدف قرار گرفتم اون اینکار رو نکرده و div رو هدف قرار داده؟؟ مگه نباید تقریبا به آخرین هدف property های خودمون رو اعمال کنیم؟
امکانش هست در این خصوص یه توضیح مبسوطی (مثل همیشه) بهم بدین؟؟ بازم ببخشید.
آقای مهندس آموزش یه کد آکاردئونی بود که خودم میخواستم انجام بدم و بعد به سورسش نگاه کنم. بعدش که انجام دادم برام چند تا سوال پیش اومد که هر روز یک بخشش رو می پرسم ازتون.
ببینید کل کدی که در نهایت از طرف مدرس نوشته شده بود بدین شرحه:
<style type="text/css">
*{
margin:0;
padding:0;
}
ul.accardion{
background-color:#9900FF;
min-height:100px;
width:400px;
}
ul.accardion li div{
color:yellow;
display:none;
}
ul.accardion li:hover span{
color:#00FF00;
}
ul.accardion li:hover div{
display:block;
}
</style>
</head>
<body>
<ul class="accardion">
<li>
<span>html</span>
<div><p>content 1</p></div>
</li>
<li>
<span>CSS</span>
<div><p>Contetn 2</p></div>
</li>
<li>
<span>java</span>
<div><p>Content 3</p></div>
</li>
</ul>
</body>اولی :
ul.accardion li p{
color:yellow;
display:none;
}ul.accardion li:hover p{
display:block;
}حالا میخوام ببینم چرا مثلا کد اون بهتر از من شده؟؟ چرا من که p رو هدف قرار گرفتم اون اینکار رو نکرده و div رو هدف قرار داده؟؟ مگه نباید تقریبا به آخرین هدف property های خودمون رو اعمال کنیم؟
امکانش هست در این خصوص یه توضیح مبسوطی (مثل همیشه) بهم بدین؟؟ بازم ببخشید.
- منظورتان از بهتر شدن کدها مشخص نیست! در کدنویسی معمولا دو نکته اهمیت دارد:
مورد اول رعایت استاندار HTML یا HTML Semantic در نگارش کدهای HTML است و نکته دوم استفاده از CSS با توجه به نیاز و هدف، به طور مثال اگر با تگ P نیاز و استاندارد معمول طراحی برآورده می شود، استفاده از تگ اضافه ضرورتی ندارد، اما در برخی شرایط جهت اعمال کنترل بیشتر و سفارشی سازی ممکن است صرف یک تگ مناسب نباشد و نیاز به اعمال برخی خاصیت ها در تگ والد آن باشد.
مورد دوم اینکه هیچ الزامی به هدف قرار دادن تگ آخر وجود ندارد! همه چیز به شرایط، نیاز و هدف طراحی استایل صفحه وب برمی گردد.
مورد اول رعایت استاندار HTML یا HTML Semantic در نگارش کدهای HTML است و نکته دوم استفاده از CSS با توجه به نیاز و هدف، به طور مثال اگر با تگ P نیاز و استاندارد معمول طراحی برآورده می شود، استفاده از تگ اضافه ضرورتی ندارد، اما در برخی شرایط جهت اعمال کنترل بیشتر و سفارشی سازی ممکن است صرف یک تگ مناسب نباشد و نیاز به اعمال برخی خاصیت ها در تگ والد آن باشد.
مورد دوم اینکه هیچ الزامی به هدف قرار دادن تگ آخر وجود ندارد! همه چیز به شرایط، نیاز و هدف طراحی استایل صفحه وب برمی گردد.
داوود
۱۰:۴۲ ۱۳۹۴/۰۴/۰۴
سلام و عرض صبح بخیر و احترام؛
ممنونم که دیشب وقت گذاشته و پاسخ رو دادین. اگه ایرادی نداشته باشه روی همون کد چند تا سوال دیگه رو به ترتیب می پرسم.
ببینید اینکه میگم چرا کد مدرس از نظر من ممکنه بهتر شده باشه برای این بود که:
الان کاربر روی هر گزینه ای که بره توضیحات بیشتر همون گزینه، در پایین همون گزینه قابل مشاهده ست.
(برای راحتی کار و اینکه کمتر وقت شما رو بگیرم و اصلا زحمت copy و paste رو نکشین تو این لینک کد اولیه رو گذاشتم:
خوب حالا من میخوام یه تغییر کوچولو تو نحوه نمایش توضیحات گزینه ها بدم و اونهم اینه که به جای اینکه در پایین هر گزینه توضیحات رو نشون بده بیاد و در روبروش نشون بده. برای اینکار اومدم و در کد مدرس این تغییر رو اعمال کردم و درست شد؛ ببینید:
کد شماره یک:
کد شماره 2:
پاورقی:
مشاهده نتیجه تصویر در حالت کد شماره یک:
ممنونم که دیشب وقت گذاشته و پاسخ رو دادین. اگه ایرادی نداشته باشه روی همون کد چند تا سوال دیگه رو به ترتیب می پرسم.
ببینید اینکه میگم چرا کد مدرس از نظر من ممکنه بهتر شده باشه برای این بود که:
الان کاربر روی هر گزینه ای که بره توضیحات بیشتر همون گزینه، در پایین همون گزینه قابل مشاهده ست.
(برای راحتی کار و اینکه کمتر وقت شما رو بگیرم و اصلا زحمت copy و paste رو نکشین تو این لینک کد اولیه رو گذاشتم:
http://www.cssdesk.com/AxH3uخوب حالا من میخوام یه تغییر کوچولو تو نحوه نمایش توضیحات گزینه ها بدم و اونهم اینه که به جای اینکه در پایین هر گزینه توضیحات رو نشون بده بیاد و در روبروش نشون بده. برای اینکار اومدم و در کد مدرس این تغییر رو اعمال کردم و درست شد؛ ببینید:
کد شماره یک:
ul.accardion li:hover div{
display:inline-block;
}کد شماره 2:
ul.accardion li:hover p{
display:inline-block;
}پاورقی:
مشاهده نتیجه تصویر در حالت کد شماره یک:
http://jsfiddle.net/hh2x3za6/http://jsfiddle.net/hh2x3za6/1/این موضوع به بهتر و بدتر بودن کدها مربوط نیست، علت این است زمانی که تگ p به صورت inline-block تغییر می کند، بلاک div لفاف آن استایل خود را از دست می دهد (استایل div را با ویرایش خود حذف می کنید!) و به صورت پیش فرض (block) می شود، در این حالت مرورگر تگ p را به صورت خطی پردازش می کند منتها درون تگ div، که خود تگ div به صورت block و غیر خطی است!
در تفسیر کدهای CSS نباید صرفا به تگ آخر توجه کرد، شبیه چیدمان دلخواه لوازم (تگ های آخر) در یک کمد (تگ لفاف) است که این کمد می تواند در هرکجای خانه (صفحه وب) قرار داده شود! در واقع همان طور که قبلا گفتیم، کدنویسی لایه لایه و تو در تو به علت کنترل بیشتر در هنگام سفارشی سازی است که اغلب درک آن با کسب تجربه و کار عملی به مرور به دست می آید، نکته دیگر رعایت بحث HTML Semantic (ِیعنی هر تگ HTML باید برای منظور مورد نظر خودش استفاده شود، به فرض تگ p باید با هدف نمایش یک پاراگراف استفاده شود و...) است که اهمیت دارد.
در تفسیر کدهای CSS نباید صرفا به تگ آخر توجه کرد، شبیه چیدمان دلخواه لوازم (تگ های آخر) در یک کمد (تگ لفاف) است که این کمد می تواند در هرکجای خانه (صفحه وب) قرار داده شود! در واقع همان طور که قبلا گفتیم، کدنویسی لایه لایه و تو در تو به علت کنترل بیشتر در هنگام سفارشی سازی است که اغلب درک آن با کسب تجربه و کار عملی به مرور به دست می آید، نکته دیگر رعایت بحث HTML Semantic (ِیعنی هر تگ HTML باید برای منظور مورد نظر خودش استفاده شود، به فرض تگ p باید با هدف نمایش یک پاراگراف استفاده شود و...) است که اهمیت دارد.
داوود
۰۹:۰۰ ۱۳۹۴/۰۴/۰۶
سلام آقای مهندس
دست گلتون واقعا درد نکنه استاد عزیز و ارجمندم.
این رو اصلا نمیدونستم. یعنی در واقع با اینکار مثل این هستش که ما بگیریم یه شیئی رو که داخل کمد گذاشتیم، (حالا بهر وسیله ای) بزرگتر از کمدش کنیم که در این حالت کمد در حالت اولیه خودش درمیاد. اونوقت این قضیه همیشگی هستش؟؟ یعنی ما در هر تگی که این کار رو انجام بدیم در خصوص inline و بلاک بودنش، رو تگهای ماقبل که نگهدارنده اون هستن، تاثیر میذاره؟؟
بازهم ممنونم ازتون و دستتون درد نکنه. مرسی و متشکرم.
دست گلتون واقعا درد نکنه استاد عزیز و ارجمندم.
این رو اصلا نمیدونستم. یعنی در واقع با اینکار مثل این هستش که ما بگیریم یه شیئی رو که داخل کمد گذاشتیم، (حالا بهر وسیله ای) بزرگتر از کمدش کنیم که در این حالت کمد در حالت اولیه خودش درمیاد. اونوقت این قضیه همیشگی هستش؟؟ یعنی ما در هر تگی که این کار رو انجام بدیم در خصوص inline و بلاک بودنش، رو تگهای ماقبل که نگهدارنده اون هستن، تاثیر میذاره؟؟
بازهم ممنونم ازتون و دستتون درد نکنه. مرسی و متشکرم.
خیر! تگ درونی نمی تواند روی تگ ماقبل خود اثر بگذارد، در واقع منظور ما این بود که شما استایل در نظر گرفته شده برای div را حذف می کنید و استایل p را جایگزین می کنید در کدهای CSS و به این خاطر تگ div بدون استایل به حالت پیش فرض یعنی block بر می گردد.
داوود
۰۹:۵۹ ۱۳۹۴/۰۴/۰۶
سلامی دوباره آقای مهندس؛
آقای مهندس طبق توضیحاتی که بهم دادین و اینجور که فهمیدم برای اینکه نتیجه مشابه div بگیرم اومدم و برای تگ div اینجوری تعریف کردم و درست شد. خیلی جالب شد. ممنونم ازتون.
آقای مهندس طبق توضیحاتی که بهم دادین و اینجور که فهمیدم برای اینکه نتیجه مشابه div بگیرم اومدم و برای تگ div اینجوری تعریف کردم و درست شد. خیلی جالب شد. ممنونم ازتون.
div{
display:inline-block;
}بله! مثال کمد صرفا جهت تفهیم موضوع بود، در سایر موارد خیلی ارتباط دقیقی بین کمد و div وجود ندارد! :-)
داوود
۱۰:۴۰ ۱۳۹۴/۰۴/۱۱
سلام و وقت بخیر آقای مهندس؛
استاد وقتی که با دستور import یک فایلی رو به فایل css خودمون الحاق میکنیم، اولویتها چجوری میشه؟
الف) مثلا در فایل style.css ما دو تا فایل رو به ترتیب با نامهای test1 و test2 الحاق می کنیم! حالا در زمان اجرا فکر کنم اول بیاد و attribute های test1 رو اعمال کنه، بعدش test2 و در انتها style رو. یعنی اولویت style از دو تای دیگه بالاتر و ارجح تر هستش. درست میگم؟؟
ب) حالا اگه تو یکی از این فایلها که اولویت پایین تری داره (منظورم این هستش که پس از بقیه اعمال میشه مثل test2)، ما از import! استفاده کنیم، این رو که دیگه تحت تاثیر اولویتهای بالاتر قرار نمیده، مگه نه؟؟ مثلا در همین مثال بالا اولویت test 2 بنظرم از test1 و style پایینتره.
استاد وقتی که با دستور import یک فایلی رو به فایل css خودمون الحاق میکنیم، اولویتها چجوری میشه؟
الف) مثلا در فایل style.css ما دو تا فایل رو به ترتیب با نامهای test1 و test2 الحاق می کنیم! حالا در زمان اجرا فکر کنم اول بیاد و attribute های test1 رو اعمال کنه، بعدش test2 و در انتها style رو. یعنی اولویت style از دو تای دیگه بالاتر و ارجح تر هستش. درست میگم؟؟
ب) حالا اگه تو یکی از این فایلها که اولویت پایین تری داره (منظورم این هستش که پس از بقیه اعمال میشه مثل test2)، ما از import! استفاده کنیم، این رو که دیگه تحت تاثیر اولویتهای بالاتر قرار نمیده، مگه نه؟؟ مثلا در همین مثال بالا اولویت test 2 بنظرم از test1 و style پایینتره.
@import url('test1.css');
@import url('test2.css');- اولویت در این حالت هم مشابه حالت معمول است، به عبارتی با فرض یکی بودن کدها باید اولویت آنها را مشخص کنید یعنی از هر کجا که فایل، import شده، در واقع کدهای آن از همانجا وارد استایل موجود می شود، لذا استایل نهایی شما که توسط مرورگر پردازش می شود در واقع ماحصل فایل هایتان و محل درج آنها است، به طور خلاصه هرچقدر هم که فایل import کنید، در نهایت مرورگر یک استایل واحد را پردازش خواهد کرد و لذا بحث ارجحیت مانند یک استایل واحد است (با رعایت اینکه هر فایل در هر کجا import شود، کدهای آن از همانجا با استایل موجود mix می شود!)
- استفاده از import در وب امر متداولی نیست (به جزء در موارد خاص مانند استفاده از media@ برای استایل دهی برای چاپ و...) و به جای آن از link استفاده می شود، دلیل این موضوع هم بحث سرعت بارگذاری link و بارگذاری چندگانه آن است، یعنی چندین فایل css. در یک زمان قابل بارگذاری است، اما در مورد import اینگونه نیست و مرورگر فایل به فایل منتظر بارگذاری می ماند، همچنین مطلب زیر را مطالعه کنید:
- استفاده از import در وب امر متداولی نیست (به جزء در موارد خاص مانند استفاده از media@ برای استایل دهی برای چاپ و...) و به جای آن از link استفاده می شود، دلیل این موضوع هم بحث سرعت بارگذاری link و بارگذاری چندگانه آن است، یعنی چندین فایل css. در یک زمان قابل بارگذاری است، اما در مورد import اینگونه نیست و مرورگر فایل به فایل منتظر بارگذاری می ماند، همچنین مطلب زیر را مطالعه کنید:
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/داوود
۰۴:۲۲ ۱۳۹۴/۰۴/۱۲
با سلام؛ در این لحظات معنوی و زیبا از ماه مبارک رمضان؛ از خداوند بهترینها رو برای شما و سایر خوانندگان عزیز سایت خوبمون خواستارم. خدا خیرتون بده که همیشه پاسخگوی ما بودین بدون هیچ گونه کم و کاستی.
داوود
۰۸:۱۴ ۱۳۹۴/۰۴/۱۸
سلام آقای مهندس،صبحتون بخیر و خوشی انشاالله؛
آقای مهندس این طور که نوشتم معنیش این میشه دیگه درسته؟
ابتدا کد رو ببینید:
حالا که از # استفاده می کنم چرا این قضیه صدق نمیکنه؟ الان معنی عبارت کد من این نمیشه؟
تگهایی رو تحت تاثیر قرار بده که دارای ID های mybox و test هستش (بطور همزمان)؛ یعنی اینجوری:
آقای مهندس این طور که نوشتم معنیش این میشه دیگه درسته؟
ابتدا کد رو ببینید:
#mybox#test{
border:2px solid #00FF99;
width:100px;
height:100px;
background:yellow;
}حالا که از # استفاده می کنم چرا این قضیه صدق نمیکنه؟ الان معنی عبارت کد من این نمیشه؟
تگهایی رو تحت تاثیر قرار بده که دارای ID های mybox و test هستش (بطور همزمان)؛ یعنی اینجوری:
<div id="mybox test">the title for test</div>این حالت صحیح نیست، چون هدف از ID بر خلاف Class وجود پارامتر شناسایی یکتا است و لذا تگ های HTML نمی توانند چند ID هم زمان داشته باشند!، همچنین نمی توان یک ID را (در یک صفحه) به چند تگ نسبت داد، هر ID مخصوص یک تگ است.
داوود
۰۸:۲۵ ۱۳۹۴/۰۵/۲۶
سلام و عرض صبح بخیر خدمت شما؛
آقای مهندس من چند روز قبل یه سوال ارسال کرده بودم در خصوص کدی که برای آقا علیرضا گذاشته بودین (تغییر رنگ title) و در اون در خصوص خاصیت after بعد از clear و همچنین کار تگ attr پرسیده بودم. شما هم محبت کردین و پاسخ دادین ولی چون اوایل بامداد بود گفتم صبح بیام و جواب رو کاملتر بخونم. البته همون لحظه هم تشکر خودم رو براتون فرستادم.
حالا که دارم دنبال میگردم راستش رو بخواین نه سوال قبلیم هستش و نه پیام تشکرم. میخواستم ببینم امکانش هست دوباره پاسخ رو برام بزارین؟؟ آخه احساس می کنم حذف شده. نمیدونم خودتون یادتون هست کدوم سوال رو میگم یا نه. ممنون میشم اگه پیگیری کنید چون اگه حذف بشه خیلی ناجور میشه ! ایکاش همون لحظه کپی میکردم صفحه رو.
اگه ممکنه یه رونوشت هم به ایمیلم بزنید که اگه اینجا حذف بشه دوباره تو اونجا بتونم بخونم جوابتون رو.
آقای مهندس من چند روز قبل یه سوال ارسال کرده بودم در خصوص کدی که برای آقا علیرضا گذاشته بودین (تغییر رنگ title) و در اون در خصوص خاصیت after بعد از clear و همچنین کار تگ attr پرسیده بودم. شما هم محبت کردین و پاسخ دادین ولی چون اوایل بامداد بود گفتم صبح بیام و جواب رو کاملتر بخونم. البته همون لحظه هم تشکر خودم رو براتون فرستادم.
حالا که دارم دنبال میگردم راستش رو بخواین نه سوال قبلیم هستش و نه پیام تشکرم. میخواستم ببینم امکانش هست دوباره پاسخ رو برام بزارین؟؟ آخه احساس می کنم حذف شده. نمیدونم خودتون یادتون هست کدوم سوال رو میگم یا نه. ممنون میشم اگه پیگیری کنید چون اگه حذف بشه خیلی ناجور میشه ! ایکاش همون لحظه کپی میکردم صفحه رو.
اگه ممکنه یه رونوشت هم به ایمیلم بزنید که اگه اینجا حذف بشه دوباره تو اونجا بتونم بخونم جوابتون رو.
متاسفانه هنوز مشکلات سرور سایت به طور کامل بر طرف نشده و هر از چندگاهی شرکت هاستینگ بدون هماهنگی ما اقدام به رستور دیتابیس ها می کند که این باعث حذف پیام های بک آپ گرفته نشده همان روز رستور می شود! پیام شما نیز شامل همین قضیه شده، چند روز صبر کنید، پیام به همراه پاسخ جدید در همین قسمت منتشر خواهد شد!
داوود
۲۲:۰۵ ۱۳۹۴/۰۵/۲۷
سلام
شما یه نمونه کد در پاسخ آقا علیرضا مبنی بر تغییر صفت مربوط به تگ title تو این لینک
بعد از اینکه یه خورده کارهاشو کردم و به مشکل برای اجرای صحیح و دقیق مثل کد شما برخورد کردم اومدم و اصل کد رو نگاه کردم. یکی دو مورد برام جالب اومد که گفتم اگه اشکال نداشته باشه ازتون بپرسم.
الف) کار خاصیت گزینه after رو که بعد از hover در انتخاب گر
ب) همچنین
ج) الان وقتی که ما postion مربوط به گزینشگر
مرسی و ممنونم ازتون.
شما یه نمونه کد در پاسخ آقا علیرضا مبنی بر تغییر صفت مربوط به تگ title تو این لینک
http://jsfiddle.net/tDQWNبعد از اینکه یه خورده کارهاشو کردم و به مشکل برای اجرای صحیح و دقیق مثل کد شما برخورد کردم اومدم و اصل کد رو نگاه کردم. یکی دو مورد برام جالب اومد که گفتم اگه اشکال نداشته باشه ازتون بپرسم.
الف) کار خاصیت گزینه after رو که بعد از hover در انتخاب گر
a[title]:hover:afterب) همچنین
content: attr(title);ج) الان وقتی که ما postion مربوط به گزینشگر
a[title]:hover:afterمرسی و ممنونم ازتون.
- کد مربوطه توسط ما نوشته نشده، صرفا لینک آن برای کاربر درج شده است!
- after هم یک Selector در CSS است، با این تفاوت که حالت دستوری دارد، این دستور محتوای متنی یا تغییر خاصی را بعد از عنصر انتخاب شده اعمال می کند.
- دستور after با پارامتر content تکمیل می شود که خود می تواند در برگیرنده یک متن ساده یا یک تابع در CSS باشد.
- attr مخفف attribute یک تابع در CSS است که یک صفت از عنصر (در اینجا title) را برای اعمال دستور انتخاب می کند.
- عنصر absolute زمانی که زیرمجموعه عنصر relative (نسبی) باشد، از همان پیروی می کند، در اینجا a:hover به صورت relative است!
- after هم یک Selector در CSS است، با این تفاوت که حالت دستوری دارد، این دستور محتوای متنی یا تغییر خاصی را بعد از عنصر انتخاب شده اعمال می کند.
- دستور after با پارامتر content تکمیل می شود که خود می تواند در برگیرنده یک متن ساده یا یک تابع در CSS باشد.
- attr مخفف attribute یک تابع در CSS است که یک صفت از عنصر (در اینجا title) را برای اعمال دستور انتخاب می کند.
- عنصر absolute زمانی که زیرمجموعه عنصر relative (نسبی) باشد، از همان پیروی می کند، در اینجا a:hover به صورت relative است!
۰۳:۵۳ ۱۳۹۴/۰۶/۰۸
خسته نباشید میگم واقعا کارتون عالیه
داوود
۰۹:۳۸ ۱۳۹۴/۰۷/۰۹
سلام آقای مهندس، صبحتون بخیر و خوشی؛
استاد یه سوال دارم ازتون که شاید پیش پا افتاده باشه ولی چون مقدمه سوال بعدیم هستش گفتم که اول این رو ازتون بپرسم و بعدش برم سراغ سوال بعدیم. اونهم اینه که چرا گاهی اوقات تو کدهای css میان و از کلمه کلیدی div استفاده می کنن؟ و اینکه آیا اگه مثلا ما اینجوری
الان در این مثالها شرحی که بابت هر کد دادم آیا درسته:
الف)
ب)
حالا امکانش هست بگید آیا این کدهای زیر درست هستن و اگه آره طرز تحت تاثیر قرار دادنشون به چه نحوی هستش:
ج)
استاد یه سوال دارم ازتون که شاید پیش پا افتاده باشه ولی چون مقدمه سوال بعدیم هستش گفتم که اول این رو ازتون بپرسم و بعدش برم سراغ سوال بعدیم. اونهم اینه که چرا گاهی اوقات تو کدهای css میان و از کلمه کلیدی div استفاده می کنن؟ و اینکه آیا اگه مثلا ما اینجوری
.div الان در این مثالها شرحی که بابت هر کد دادم آیا درسته:
الف)
div span{
color:red;
}ب)
div .span{
color:red;
}حالا امکانش هست بگید آیا این کدهای زیر درست هستن و اگه آره طرز تحت تاثیر قرار دادنشون به چه نحوی هستش:
ج)
span.div{
color:red;
}.div .span{
color:red;
}.div span{
color:red;
}.div.span{
color:red;
}قبلا به این موارد پاسخ داده شده! صرفا جهت یادآوری:
- زمانی که علامت . در CSS استفاده می کنیم، عبارت مورد نظر هر چه که باشد، تبدیل به یک class می شود و div یا هر چیز دیگر بودن تفاوتی ندارد (باید با سلکتور کلاس فراخوانی شود).
- زمانی که یک دستور از چند قسمت تشکیل می شود، معمولا عنصر هدف، تگ آخر است و تگ های ماقبل سلسله قرارگرفتن را نشان می دهد، مثال:
حالت زیر به معنی تگی است که هم کلاس اول و هم کلاس دوم را داشته باشد:
- زمانی که علامت . در CSS استفاده می کنیم، عبارت مورد نظر هر چه که باشد، تبدیل به یک class می شود و div یا هر چیز دیگر بودن تفاوتی ندارد (باید با سلکتور کلاس فراخوانی شود).
- زمانی که یک دستور از چند قسمت تشکیل می شود، معمولا عنصر هدف، تگ آخر است و تگ های ماقبل سلسله قرارگرفتن را نشان می دهد، مثال:
div .spanحالت زیر به معنی تگی است که هم کلاس اول و هم کلاس دوم را داشته باشد:
.div.span{
color:red;
}<style type="text/css">
span.div{
color:#249FE4;
}
</style>
<span class="div">test</span>فرهاد ف
۲۰:۱۶ ۱۳۹۴/۰۸/۱۲
سلام استاد.
دست مریزاد.
آقای مهندس در پاسخ به کاربر آقا علیرضا که در صفحه اول سوال مطرح کردن، منظور از تغییر title یعنی چی؟ ما یه title داشتیم که مال بالای صفحه بود و عنوان سایت رو توش می نوشتیم حالا که میگن صفت title یعنی چی رو بیایم و عوض کنیم؟
این سوالشون بود: سلام می خواستم بدونم چطور میشه رنگ یا فونت صفت title رو با css تغییر داد
دست مریزاد.
آقای مهندس در پاسخ به کاربر آقا علیرضا که در صفحه اول سوال مطرح کردن، منظور از تغییر title یعنی چی؟ ما یه title داشتیم که مال بالای صفحه بود و عنوان سایت رو توش می نوشتیم حالا که میگن صفت title یعنی چی رو بیایم و عوض کنیم؟
این سوالشون بود: سلام می خواستم بدونم چطور میشه رنگ یا فونت صفت title رو با css تغییر داد
title مد نظر شما در واقع تگ title در HTML است، اما سوال کاربر مربوط به صفت یا Attribute تگ ها است، به فرض:
<a href="#" title="Hello, i am a link!">لینک</a>زیبایی
۰۹:۴۸ ۱۳۹۴/۰۸/۱۹
سلام من یک css نوشتم برای منو ابشاری تا دیروز درست کار می کرد از دیروز وقتی روی آیتم های منو موس را می برم آیتم قبلی کش میده و تغییر سایز می دهد و آیتمی که روی آن موس را گرفته ام کوچک می شود و زیر منو آن با فاصله دیده می شود و قابل انتخاب نیست
ایا می دانید مشکل چیست و چگونه حل می شه
ایا می دانید مشکل چیست و چگونه حل می شه
تا زمانی که در صفحه خود استایل یا تغییر دیگری ایجاد نکنید، قاعدتا نباید تفاوتی در نحوه عمل منو وجود داشته باشد، لذا در ابتدا باید ببینید چه کد یا ابزاری به خروجی صفحه اضافه شده که می تواند روی منو تاثیر بگذارد، به فرض برخی از خاصیت ها در CSS بدون تعریف کلاس مخصوص به تمام تگ ها اختصاص داده می شوند، به طور مثال سلکتور a می تواند روی تمام لینک ها موثر باشد، مگر اینکه برای آنها کلاس و خاصیت منحصر به فرد تعریف کنید، به هر حال بدون دیدن سورس کدهای صفحه خیلی نمی توان پاسخ قاطعی ارائه کرد!
۱۶:۲۴ ۱۳۹۴/۰۹/۰۱
ممنون
مشکلم حل شد
مشکلم حل شد
محسن(مبتدی)
۲۱:۰۳ ۱۳۹۵/۰۶/۲۶
سلام استاد خسته نباشید
من چندتا قالب آماده وبسایت دانلود کردم ولی کدهای استایل و جاو اسکریپتش رو خلاصه کردن تو چندتا لینک تو قسمت head من چطور میتونیم این لینکهای خلاصه شده رو باز کنم تا بتونم قالبها رو ویرایش کنم؟
مثلا چنتاشون رو به این صورت قرار دادن تو قسمت head
من چندتا قالب آماده وبسایت دانلود کردم ولی کدهای استایل و جاو اسکریپتش رو خلاصه کردن تو چندتا لینک تو قسمت head من چطور میتونیم این لینکهای خلاصه شده رو باز کنم تا بتونم قالبها رو ویرایش کنم؟
مثلا چنتاشون رو به این صورت قرار دادن تو قسمت head
<link rel="icon" type="image/png" href="img/favicon.png" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel=stylesheet href="css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="css/pink-theme.css">دقیقا متوجه منظورتان از "چطور میتونیم این لینکهای خلاصه شده رو باز کنم" نشدیم! اینها شیوه معمول طراحی قالب هستند و فایل های CSS باید در فولدر قالب موجود باشند که با یک برنامه ویرایش استایل مانند Adobe Dreamweaver یا PHPStorm می توانید فایل را باز کرده و قسمت های مورد نظر را تغییر دهید!
صفحه 3 از 4آخرین دیدگاه ها
برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.javascript
سلام 🙌 توی جاوا اسکریپت چطور تگ آپشن رو پیش فرض بزاریم مثلا : تگ آپشن _استان محل صدور : همدان -...۱۴۰۲/۰۷/۰۶
Fateme
سلام مطالب عالی و استفاده می کنم دستتان درد نکنه . سوال من این هست چطور میتونم تاریخ تولد را وارد کنم سن شخص رو...۱۴۰۲/۰۷/۰۵
مجتهدزاده
سلام من در لاراول سعی دارم تا با یک لینک رو اجرا کنم تا یک اس ام اس به شماره ای که در...۱۴۰۲/۰۷/۰۳
پـــرتو
سلام جناب خسته نباشید شرمنده مزاحم میشم عه جناب ببخشید من دو سه تا وبلاگ دارم که یکیش یا دوتاشون هک میشن یعنی...۱۴۰۲/۰۷/۰۳
فاطمه سیداحمدی
با سلام و خسته نباشید من میخوام با استفاده از جاوااسکریپت یه کدی داشته باشم که وقتی کاربر چیزی رو از توی سایت من...۱۴۰۲/۰۷/۰۲
رضا جهانیان
درود برشما من تو گوگل که اسم سایت حراجستون را سرچ می کنم اسم دامنه نوشته شده به انگلیسی کدهای زیادی هم استفاده کردم...۱۴۰۲/۰۶/۳۱
سعید
نمای ظاهری من مثل قبل که در اوت لوک میفرستادم در نیو ایمیل نیست یعنی تغییر کرده چطور میتونم برگردم به همون حالت اول خودش...۱۴۰۲/۰۶/۲۷
سینا
با سلام و خسته نباشید من برای ترجمه متن از گوگل ترانسلیت استفاده می کنم یه مشکلی که دارم اینکه وقتی متنی رو برام...۱۴۰۲/۰۶/۲۵
کوروش
سلام خسته نباشید توضیح : سایتی که تگ های select option ها و همه div ها و label ها ( کلاس های...۱۴۰۲/۰۶/۲۴
عدم اجرای فونت فیس در تب منو
سلام برای تب منو فونت فیس برای تب اول کار میکند اما تب های بعدی اعمال نمیشود چکار باید کرد۱۴۰۲/۰۶/۲۲
محبوبه قاسم پور
سلام وقتتون بخیر برای منوهای کشویی سایت، اگر خاصیت overflow:hidden باشد، زیرمنوها نمایش داده نمی شود، از طرفی اگر این خاصیت فعال نباشد...۱۴۰۲/۰۶/۱۸
پـــرتو
سلام فکنم در یادداشت ها ارسال شده بود و تاریخشم یادم نیست ولی من واقعا نمی دونم کامنتش کجاست که برم برش دارم ...۱۴۰۲/۰۶/۱۴
پـــرتو
سلام خسته نباشید ببخشید مزاحم شدم می خواستم بگم که یه کدی داده بودین قبلا برای بلاگفا که آی پی کسایی که بهمون توهین می...۱۴۰۲/۰۶/۱۱
امیرحسین رستمی
سلام مجدد وقت بخیر لطفا لینک زیر را ببینید میخوام تمام متن های فارسی که اینجا انتخاب کردم رو با عبارت با قائده انتخاب...۱۴۰۲/۰۶/۱۱
امیرحسین رستمی
سلام وقت بخیر من این متنو دارم: میخوام فقط متن های فارسی رو انتخاب کنم با preg_match و متن جایگزین براش بزارم قبلا...۱۴۰۲/۰۶/۱۱
امیرحسین رستمی
در رابطه با دوتا سوال قبلی من این کد رو نوشتم شما بررسی کنید ببینید اگه مشکل دیگه ای نداره ، درست داره کار میکنه...۱۴۰۲/۰۶/۰۹
امیرحسین رستمی
سلام وقت بخیر من یک عبارات با قائده ای میخوام که این متن رو : من همچین عبارتی در نظرم هست ولی ...۱۴۰۲/۰۶/۰۹
hossein
سلام مجدد، ممنون از پاسخگویی شما از وردپرس استفاده میکنم و قالب وودمارت، هدر هم با هدر ساز قالب ساخته شده با اینکه...۱۴۰۲/۰۶/۰۹
امیرحسین
سلام وقت بخیر من یک برنامه نوشتم که از ایپی ای گوگل کمک میگیره و متن میدم بهش و ترجمه میکنه : شما فرض...۱۴۰۲/۰۶/۰۹
hossein
سلام وقت شما بخیر باشه ابتدا جا داره از شما تشکر کنم میخوام یک آیکن لینک دار توی هدر سایتم را از دید...۱۴۰۲/۰۶/۰۹
علی
سلام و با تشکر از راهنمایی شما بنده یک وب سرویس ارسال پیامک دارم که از طریق آن برای کابرانم پیامک ارسال می کنم....۱۴۰۲/۰۶/۰۷
مهدی
سلا چطوری میتونم کدام تو مرورگر دقیق نمایش بدم حتی >< تگ هام نمایش داده بشه در html تگ کد را هم معرف نکنید چون...۱۴۰۲/۰۶/۰۴
محمدرضا
سلام و خدا قوت حضور شما بزرگوار. اول یه تشکر و قدردانی از شما دارم که زمان میزارید و جواب همه دوستان رو میدید....۱۴۰۲/۰۶/۰۳
محمدرضا
سلام وقت شما بخیر لطف بفرمائید با switch و default کدی رو بنویسید که: اگه متغیر a یک باشد متغیر b دو...۱۴۰۲/۰۶/۰۱
پـــرتو
سلام بابت جواب به سوالم در مورد بلاگفا ممنون من خودم با پشتیبانی بلاگفا تماس گرفتم گفنن نمیشه اینکار ولی یه سوال دیگه ازتون داشتم...۱۴۰۲/۰۵/۲۸
fatima
سلام. خسته نباشید. ما با responsive هم میتوانیم اسکرول افقی را حذف کنیم؟۱۴۰۲/۰۵/۲۸
عاطفه
ممنون از پاسخگوییتون. اگر ممکنه این سوال رو هم جواب بدید ممنون میشم. معنی این ارور ها و راه حل رفع اونها رو میخواستم بدونم....۱۴۰۲/۰۵/۲۶
عاطفه
سلام، وقت بخیر. من چندتا مشکل سایتم داره که نمیدونم چطور باید برطرفشون کنم. یکی اینکه وقت لینکای شکسته رو چک میکنم برای لینکدین و...۱۴۰۲/۰۵/۲۵
در انتظار بررسی: ۰
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.