article

سلکتور آی دی (ID) و کلاس (Class) در CSS

css-style-id-class

در آموزش قبل اشاره شد که 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>
در مثال بالا استایل CSS به تمام تگ های p نسبت داده می شود، اما اگر بخواهیم فقط یک تگ p خاص را انتخاب کنیم باید به یکی از روش های تعریف آی دی (ID) یا کلاس (Class) در CSS مانند نمونه کد زیر عمل کنیم:
<style type="text/css">
.color-text {
    font-size:16px;
    color:#818181;
}
</style>
<p>پاراگراف اول</p>
<p class="color-text">پاراگراف دوم</p>
<p>پاراگراف سوم</p>
در نمونه کد بالا از سلکتور Class در CSS برای انتخاب یک پاراگراف خاص (تگ 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>
هر تگ در HTML صرفا می تواند یک ID داشته باشد به عبارتی ID ها همیشه یکتا هستند و اگر در یک صفحه از یک ID در چند مورد استفاده شود، آن صفحه از لحاظ استاندارد کدنویسی معتبر (Valid) نیست، در مقابل اگر بخواهیم یک استایل CSS را به دفعات و برای تگ های مختلف HTML استفاده کنیم، از Class استفاده می کنیم، کلاس ها می توانند به هر تعداد در صفحه تکرار شوند، در واقع هدف از ایجاد این سلکتور تعریف یک استایل و استفاده از آن به دفعات متعدد در صفحه است، به مثال زیر توجه کنید:
<div id="id-1" class="class-1"></div>
<div id="id-2" class="class-1"></div>
<div id="id-3" class="class-1"></div>
همان طور که در تکه کد HTML بالا مشخص است آی دی ها یکتا هستند اما کلاس بین همه تگ ها مشترک است و چند تگ مختلف از یک کلاس مشترک استایل دهی شده اند.

تعریف ویژگی، بدون آی دی و کلاس در 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>
اما تداخل همیشه بین استایل های صفحه نیست، همواره این امکان وجود دارد که خاصیت های مختلف CSS از چند سلکتور متفاوت بر روی یک تگ HTML تاثیر مشترک داشته و بین سلکتورها به اصطلاح تداخل ایجاد شود، به طور مثال در نمونه کد زیر بین سلکتور p و p.text تداخل وجود دارد:
<style type="text/css">
p{
    font-size:12px;
    color:#D3181B;
}
p.text{
    font-size:16px;
    color:#1740DD;
}
</style>
<p>پاراگراف اول</p>
<p class="text">پاراگراف دوم</p>
اگر استایل بالا را در یک صفحه HTML قرار داده و آن را اجرا کنیم، خواهیم دید که CSS در حالتی که برای تگ p کلاس در نظر گرفته شده (p.text یعنی تگ های p در صفحه که کلاس text داشته باشند)، خاصیت ها را به جای تگ p از کلاس دریافت می کند، این رفتار بر اساس قانون اولویت بندی سلکتورها در CSS صورت می گیرد که در ادامه به اختصار در مورد آن خواهیم گفت.
بر اساس قانون اولویت، هر سلکتور CSS را می توان در چهار رده 
A, B, C, D
جای داد و با اعداد 0، 1 و... تعداد تکرار آنها را محاسبه کرد (این حروف و اعداد الگویی فرضی و قراردادی هستند و صرفا جهت درک بهتر و به حافظه سپردن موضوع استفاده می شوند)، در اولین رده این ساختار، استایل خطی یا Inline Style جای دارد که حرف متناظر آن A و عدد متناظر آن
1, 0, 0, 0
است، رده دوم مربوط به ID است که با حرف B و عدد متناظر
0, 1, 0, 0
مشخص می شود، در رده سوم اولویت Class قرار دارد که با حرف C و عدد متناظر
0, 0, 1, 0
متمایز می گردد، در آخرین رده سلکتور تگ یا Element قرار دارد که با حرف D و عدد متناظر
0, 0, 0, 1
مشخص می شود، به طور خلاصه و با مثال:
A - 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>
چند مثال کاربردی از قانون اولویت بندی سلکتورها در CSS:
<style type="text/css">
p{
    font-size:12px;
    color:#D3181B;
}
</style>
<p style="font-size:24px;">پاراگراف</p>
در مثال بالا بین استایل خطی (خاصیت font-size) با سلکتور p یا Element تداخل وجود دارد، در این حالت استایل خطی برتری دارد (اندازه فونت 24 پیکسل خواهد بود) چون درجه آن A است و عدد متناظر آن
1, 0, 0, 0
تعریف می شود که از عدد
0, 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, 1
محاسبه می شود (آی دی main به تعداد 1 مورد در رده B و تگ p به تعداد 1 مورد در جایگاه D که در نهایت عدد آن به صورت 0101 می شود) که از عدد 
0, 0, 1, 2
سلکتور اول بزرگتر است! (عدد 2 در این محاسبه یعنی 2 عنصر تگ یا Element در سلکتور وجود دارد لذا نمره متناظر آن 2 و در جایگاه D است، عدد 1 نیز به دلیل وجود یک کلاس در الگو است که جایگاه آن حرف C است).
با فهم این الگوها می توانیم درک روشنی از قوانین اولیت بندی در CSS داشته باشیم تا از سردرگمی و تعریف استایل های مبهم اجتناب کنیم.
sectionدسته بندی: آموزش مقدماتی » CSS
related مطالب بیشتر:
» کاربرد خاصیت display در CSS
» نحوه تنظیم استایل لینک (Link) در CSS
» کاربرد ویژگی position و float در CSS
» کار با border و outline در CSS
» کار با ویژگی margin و padding در CSS
commentنظرات (۵۰ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: داوود
۱۹:۰۳ ۱۳۹۴/۰۳/۱۱
سلام آقای مهندس، عصرتون بخیر
استاد عزیز در مثالی که فرمودین یعنی این:
p,div{
border:#CCC 1px solid;
padding:4px;
}
ببینین الان این دستور داره میگه که هر تگ p و div رو تحت تاثیر خودت قرار بده. حالا ما می بینیم که این دستور (یا همون اعطای خاصیتها) به این تگ اعمال نمیشه چون ID با نام main و همچنین کلاس text رو گرفته:
<div id="main" class="text">
الف) حالا این دستور css ای که نوشتین فقط و فقط در صورتی اعمال میشه که یعنی تگ div ما بدون هیچ کلاس و یا ID باشه دیگه درسته؟؟
ب) اگه بخوایم دستور ما به همین div هم اثر بذاره، یعنی حتی اگه همین کد هم بود:
<div id="main" class="text">
باز هم div ما اثر عمومی خودش رو بزاره چیکار باید بکنیم؟؟ نمیدونم منظورم رو تونستم درست برسونم یا نه استاد عزیز؟؟ ببینید ما میخوایم همین کد css مون به همین تگ div هم که دارای کلاس و ID هست، اعمال بشه، چون در حالت عادی که شما نوشتین اعمال نمیشه.
پاسخ: 
خیر، ویژگی های عمومی به تمام تگ ها (حتی اگر کلاس یا آی دی داشته باشند) نیز اعمال می شوند، مگر در صورتی که همان ویژگی (به فرض padding) در کلاس یا آی دی تگ تعریف شده باشد، دو مثال زیر را مقایسه کنید:
<style type="text/css">
p, div{
border:#CCC 1px solid;
padding:4px;
}
</style>
<p id="main" class="text">CSS</p>

<style type="text/css">
p, div{
border:#CCC 1px solid;
padding:4px;
}
.text{
border:#FF0004 1px dashed;
padding:12px;
}
</style>
<p id="main" class="text">CSS</p>
نویسنده: داوود
۱۲:۳۰ ۱۳۹۴/۰۳/۱۶
سلام آقای مهندس، وقت بخیر.
استاد یک سوال در خصوص درس امروز داشتم. ببینید در کدی که گذاشتین، علت اینکه به :
#main{
display:block;
background-color:#069;
}
Id با نام Main خاصیت display:block رو دادین، برای این بود که هرچی که داخلش قرار میگیره، یه حالت بلاک داشته باشن؟؟ یعنی اینکه از حالت inline بودن خارج بشه این تگ دیگه درسته؟؟ و ما بتونیم کنارش DIV های دیگه ای قرار بدیم.
پاسخ: 
- مقادیر block حالت پیش فرض تگ div است، یعنی حتی اگر از display استفاده نشود، تگ div به صورت block پردازش می شود (در ادامه آموزش ها در این خصوص صحبت شده، در اینجا صرفا جهت جنبه آموزشی، مقدار تنظیم شده است).
- div مخفف division، معمولا برای فرمت بندی فضای صفحات وب و نمایش محتوا استفاه می شود.
- برای کنار هم قرار گرفتن باید از مقدار inline-block برای display استفاده کنید.
نکته: تگ p، article، div و سرتیترها (h1 تا h5) به صورت پیش فرض در حالت block پردازش می شوند (احتمالا چون اغلب شامل اطلاعات متنی هستند)، برای تگ های دیگر، در صورت نیاز باید این مقدار را تنظیم کنید چون قابلیت width و height معمولا تنها برای عناصر block و inline-block قابل تنظیم است (این اطلاعات بر منبای کاربردهای معمول CSS در صفحات وب است، لذا ممکن است مثال نقض نیز برای آنها وجود داشته باشد!).
نویسنده: داوود
۱۲:۴۸ ۱۳۹۴/۰۳/۱۶
سلام استاد؛ روزتون بخیر و خوشی انشاالله
آقای مهندس در تکه کدی که خودتون در بالا مرقوم فرمودین؛ منظورم این تکه کد هستش که البته من یه خورده تغییرش دادم با اجازه تون:
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
p,div{
border:#CCC 1px solid;
padding:4px;
}
#main{
border:purple 2px solid;
background-color:#069;
}
.text{
color:#FFF;
}

<body>
<div id="main" class="text">
<p>
این یک متن در کلاس text و آی دی main است. برخی از ویژگی های کلی از div و p استفاده می کنند.
</p>
</div>
</body>
ببینید الان در اینجا ما، بازم دو تا خط حاشیه داریم؛ کد رو تو این لینک آپلود کردم تا زنده ش رو ببینیم.
http://www.cssdesk.com/RsbQ6
خوب اگه border مربوط به main رو برداریم باز هم میبینیم که دو تا خط داریم مثل قبلی. یعنی یکی اطراف تگ P و دیگری هم که مال div یا main هستش بسته به اینکه کجا گذاشتیم. حالا من یه سوال دارم علت اینکه الان 3 تا کادر نداریم چیه؟؟ چون هم div و هم p و هم main خاصیت border بهشون داده شده ولی فقط 2 تاشون ظاهر شده! علتش طبق توضیح شما فکر کنم این باشه که چون خاصیت border هم به main داده شده، پس طبیعتا میاد و این یکی رو از main میگیره. درست میگم؟؟ حالا ما اگه بخوایم با همین تعداد کد css کاری کنیم که 3 تا کادر بیفته، یعنی مال div هم دیده بشه و مال main هم دیده بشه! آیا راهی داره؟؟ چون من به main خاصیتهای padding و margin هم دادم و نشد و احساس میکنم منطقش رو اگه توضیحی که دادم درست باشه، به همون خاطره!! یعنی اینکه main میاد و اون خط رو میذاره و یکی div رو در این صورت نادیده میگیره. اگه بخوایم خط کادر سوم هم دیده بشه (که در این حالتی که من الان نوشتم ، متعلق میشه به div چون رنگش تقریبا خاکستری هستش) چه کاری باید بکنیم؟؟ مرسی و ممنونم ازتون.
پاسخ: 
دقت کنید که p، div، main و... در CSS تنها یک سلکتور هستند که عنصر هدف در HTML را جهت اعمال استایل مشخص می کنند، لذا ممکن است چند سلکتور برای یک تگ قابل اعمال باشند که در این صورت خاصیت های مشترک (به فرض border که در چند قسمت تعریف شده باشد) بر اساس قانون ارجحیت تنها از یک سلکتور گرفته می شود و ویژگی هایی که تنها در یک سلکتور وجود دارد، از همان گرفته می شوند، لذا با این تفاسیر نمی توانید از ویژگی های مشترک برای یک تگ استفاده کنید، تصور کنید که یک بلاک هم رنگ پس زمینه زرد داشته باشد و هم رنگ پس زمینه سبز! در اینگونه موارد باید بلاک مجزا برای هدفتان طراحی کنید.
نویسنده: داوود
۰۸:۱۴ ۱۳۹۴/۰۳/۱۷
سلام و صبحتون بخیر؛
فقط برای عرض تشکر و عرض ارادت این پست رو براتون ارسال کردم. یه دنیا ممنون و قدردان شما هستم و خواهم بود. باز هم متشکرم.
نویسنده: داوود
۲۰:۲۷ ۱۳۹۴/۰۳/۲۶
سلام آقای مهندس، عصرتون بخیر، ببخشید داشتم مطالعه می کردم میخواستم بپرسم آیا میشه یک المنت رو به صورت یه کلاس هم بنویسیم یا نه؟؟
مثلا الان اینجور نوشتن درسته یا از نظر معنایی غلطه؟
p .span{
color:green;
}
یا اینجوری مثلا:
.p .span{
color:green;
}
یا این حتی:
.p{
color:green;
}
یا از کلمات کلیدی (منظورم همون المنتها هستن) نباید به این جور و در واقع اسم یه کلاس استفاده کنیم؟؟!!
پاسخ: 
بله، تا آنجا که اطلاع داریم در CSS محدودیتی برای این شیوه نامگذاری وجود ندارد، در صورت نیاز قابل استفاده است؛ دقت کنید که در این حالت عنصر مورد نظر دیگر یک تگ نیست و صرفا یک کلاس است که می تواند به تگ های متفاوتی اعمال شود.
نویسنده: داوود
۱۰:۳۹ ۱۳۹۴/۰۳/۳۰
سلام آقای مهندس، روزتون بخیر و خوشی انشاالله
آقای مهندس در این تکه کد:
الف)
.class1{
color:red;
}
.class2{
color:blue;
}
.class1.class2{
color:gray;
background-color:yellow;
display:inline;
}
الان اگه من بیام و این خطوط رو حذف کنم:
.class1.class2{
color:gray;
background-color:yellow;
display:inline;
}
و کد html مون هم اینجوری باشه:
<div class="class1 class2">
in class1 and class2</div>
در واقع میاد از 2 تای اولی خواص رو میگیره دیگه درسته؟؟ اونوقت اینجاست که فکر کنم اهمیت بالا یا پایین بودن خطوط از نظر اولویت جهت اعمال بر روی عناصر؛ بالا میره! درست عرض کردم؟؟
ب)
ضمنا میشه بگیم عنصر با همون المنت و selector یکی هستش؟ اگه نه تفاوتهاشون چیه؟؟ به نظر من وقتی که میگیم سلکتور یعنی تگی که از پیش تو html تعریف شده، مثل p ، h1 و.. ولی وقتی که میگیم عنصر شامل تعریفی مثل زیر میشه:
div .list span{
display:list-item;
}
چون در این حالت دیگه سلکتور نیستن و شامل چند عنصر هستن.
و property هم با خاصیت و یا خواص هم معنا هستن دیگه درسته؟؟ که میتونن مقدار بگیرن.
متشکرم ازتون.
پاسخ: 
- در مورد قسمت اول برداشت شما کاملا صحیح است، منتها به تجربه در دنیای واقعی اغلب طراحان سعی می کنند در عین مختصر نویسی، از کلاس های تکی استفاده کنند تا کلاس های چندگانه (دقت کنید که برخی از موارد می تواند بین کلاس های تکی به اشتراک گذاشته شود و این شیوه متداولی است)، مثال:
<style type="text/css">
.class1, .class2, class3{
color:blue;
}
.class1{
font-size:12px;
}
.class2{
font-size:14px;
}
.class3{
font-size:16px;
}
</style>
چون حالت کلاس چندگانه کمی کار خواندن (و درک) کدها و تغییرات بعدی در سورس صفحه را پیچیده تر می کند.
در مورد بخش دوم منظور از Selector هر چیزی است که می تواند یک قانون برای انتخاب و استایل دهی به یک قسمت از سند HTML باشد، لذا مفهوم گسترده ای است که خود دربرگیرنده Element، Class، ID و... می شود، مشخص است که با اینها می توان قسمتی از یک سند را برای استایل دهی انتخاب کرد، اما Element معمولا به صورت HTML Element استفاده می شود و لذا ارجاع به عناصر HTML که همان تگ ها هستند، است؛ Property مترادف مقادیر یا دارایی است، به فرض اگر تگ زیر را در نظر بگیرید:
<img src="image/test.jpg">
- img تگ یا Element است.
- src یک خاصیت یا صفت (Attribute) است.
- image/test.jpg مقادیر یا Property برای Attribute است.
نویسنده: داوود
۱۰:۵۸ ۱۳۹۴/۰۳/۳۰
سلام آقای مهندس؛
استاد در تعریف نحوه کارکرد این خط دارم گیج میشم، امکانش هست یه راهنماییم بکنید؟
ببینید در این شبه کد:
div.list span{
display:list-item;
}
</style>
</head>
<body>
<div class="list">
<span>first list</span>
<span>first list</span>
<span>first list</span>
<span>first list</span>
</div>
و بخصوص در این خط:
div.list span{
display:list-item;
}
الان کدوم تعریف من درسته و چرا؟؟
الف) این خاصیت رو به کلاس list هایی اعمال کن که در تگ div قرار گرفتن و به نوعی محصور شده در div هستن؟؟
و یا این:
ب)انتخاب کلیه div هایی که دارای کلاس list هستن.
فکر کنم گزینه ب درست باشه، مگه نه؟؟ خوب الان اگه یه فاصله بدیم بین list و div چه اتفاقی میفته؟؟ خوب اینجوری در واقع list میشه فرزند div دیگه درسته؟؟ اونوقت کد css مون به این شکل میشه:
div .list span{
display:list-item;
}
خوب حالا تو این حالت باید کد html مون رو چطوری بنویسیم که خاصیت فوق اعمال بشه؟؟
اگه اینجوری بنویسیم که اصلا اعمال نمیشه:
<div class="list">
<span>first list</span>
<span>first list</span>
<span>first list</span>
<span>first list</span>
</div>
هیچ عجله ای در گرفتن پاسخ سریع از طرف شما بدلیل مشغله ای که دارید ندارم. ولی دلم میخواد مبسوط و با حوصله جواب بدین (مثل همیشه) تا ابهامم در این زمینه برطرف شه. هر وقت که حوصله و فرصت کافی داشتین لطفا و بیزحمت جوابمو بدین.
ممنون و سپاسگزارم از حضرتعالی.
مرسی
پاسخ: 
حالت دوم یعنی کلاس list (که به یک تگ HTML اختصاص داده شده باشد) درون تگ div و تگ span درون کلاس list یعنی به این صورت:
<style type="text/css">
div .list span{
display:list-item;
color:#F90004;
}
</style>
<div>
<ul class="list">
<span>first list</span>
<span>first list</span>
<span>first list</span>
<span>first list</span>
</ul>
</div>
نویسنده: davood
۰۰:۳۹ ۱۳۹۴/۰۳/۳۱
با عرض سلام و شب بخیر؛ دست گلتون درد نکنه و یک دنیا سپاسگزارم. ممنونم از محبتتون
نویسنده: داوود
۱۲:۴۵ ۱۳۹۴/۰۳/۳۱
سلام آقای مهندس،
وقتتون بخیر؛
الف) آقای مهندس فکر کنم در css انگار برعکس باشه ترتیب override.
یعنی در این تکه کد:
<link href='css/style.css' rel='stylesheet'>
<link href='css/custom.css' rel='stylesheet'>
در صورتی که مقادیر مشترکی در هر دو کلاس فوق وجود داشته باشد؛ عناصر بجای اینکه از style.css مقادیرشون رو بگیرن میان و از customs.css میگیرن. جالبه ها.
ب) آیا یادگیری sass خیلی در پیشبرد نوشتن کدهامون بهمون کمک میکنه؟؟ مثلا من که تو css متوسط هستم و هنوز دارم مطالعه کرده و یاد میگیرم نیازه که برم سمتش یا بعد از اینکه یه خورده راه افتادم یاد میگیرم؟؟
ممنونم ازتون
پاسخ: 
- این شاید به دلیل بحث DOM در HTML باشد، یک سند HTML همیشه از بالاترین سطح پردازش می شود.
- CSS به خودی خود به حد کافی کاربردی و قوی است و اصولا نیازی به اکستنشن های اضافی مانند SASS و ... نیست، با این حال اگر پس از فراگیری و تسلط بر روی آن (و البته استفاده کاربردی در چند پروژه کوچک و بزرگ)، کمبودی در CSS احساس کردید، می توانید برای یادگیری مباحث جدید (SASS) زمان صرف کنید! :-)
نویسنده: davood
۰۰:۵۳ ۱۳۹۴/۰۴/۰۱
با سلام؛ بامدادتون بخیر و خوشی انشاالله؛ ممنونم که هر شب پاسخم رو میدین؛ یکی از دلخوشی هام دیدن پاسخهای خوب شما در انتهای هرشب است و از اینکه بهتون زحمت میدم عذرخواهم. هر زمان خسته شدین بفرمایین تا کمتر مزاحم بشم دوست عزیز.
پاسخ: 
نظر لطفا شما است، خیر، تا زمانی که این سایت برپاست پاسخگویی متداول جزء خدمات آن خواهد بود! :-)
نویسنده: داوود
۰۸:۵۳ ۱۳۹۴/۰۴/۰۱
سلام و صبح بخیر؛ ممنونم ازتون آقای مهندس عزیز. دستتون واقعا درد نکنه؛ فقط مهندس جان امکانش هست همون دو خطی رو که نوشته بودم برام تعریف کنید: یعنی میخوام ببینم آیا تعریفی که خودم کردم درسته یا نه!
همین دو تا خط رو میشه برام تعریف کنید:
div.list span
و
div .list span

منظورم اینه که مثلا بگید span هایی که داخل کلاس لیست هستن و باز اینها خودشون داخل div هستن! اینجوری تقریبا (ببخشید سوالم اگه بی معنیه)
پاسخ: 
- حالت اول یعنی تگ div ای که کلاس list داشته باشد، تگ span (که درون این div باشد).
- حالت دوم یعنی تگ div، کلاس list (درون div)، تگ span (درون div و کلاس list).
نکته: در هر دو حالت استایل به آخرین عنصر (یعنی span) تعلق می گیرد.
نویسنده: داوود
۰۹:۵۶ ۱۳۹۴/۰۴/۰۱
سلام؛
آقای مهندس تو همین شبه کد:
div .list span{
display:list-item;
color:#F90004;
}
چرا حتما باید کلاس list به یه تگ html اختصاص داده بشه؟؟ آخه از نظر منطقی چرا نباید این خط جواب بده: (صرفنظر از اینکه اصلا لیست رو برای ایجاد لیستها میخوایم)
ببینید اینجوری:
<div class="list">
<span>first list</span>
<span>first list</span>
<span>first list</span>
<span>first list</span>
</div>
پاسخ: 
قاعدتا برای هدف قرار دادن یک عنصر خاص قوانینی در CSS تعریف شده که چرایی موضوع به آن بر می گردد، برای هدف شما باید استایل را به شیوه زیر تعریف کرد:
.list span{
display:list-item;
color:#F90004;
}
از نظر منطقی هم استایل شما به این صورت تفسیر می شود:
- تگ div در بالاترین سطح، تگی با کلاس list به عنوان فرزند div، تگ span درون تگ div و کلاس list.
نویسنده: داوود
۰۳:۲۳ ۱۳۹۴/۰۴/۰۲
با سلا مجدد؛
بازم ازتون ممنون و سپاسگزارم دوست و استاد عزیزم. انشاالله در این ساعات عزیز و مقدس؛ از خداوند هر چی آرزو دارین بهش برسین.
بازهم سپاس و تشکر. مرسی
نویسنده: داوود
۱۳:۴۶ ۱۳۹۴/۰۴/۰۲
سلام آقای مهندس، ظهرتون بخیر و خوشی انشالله؛
ببخشید که مزاحم شدم.
چند خط کد بدین نحو داریم؛ که شما نمیخواد خودتون رو درگیر دیدن همه ش بکنید؛ فقط من جای اصلی رو ازتون میپرسم.
کد الف:
<style type="text/css">
ul .accardion{
background-color:#9900FF;
}
</style>
</head>

<body>
<ul>
<div class="accardion">
<li>
<span>html</span>
<div><p>content 1</p></div>
</li>
<li>
<span>CSS</span>
<div><p>content 1</p></div>
</li>
<li>
<span>java</span>
<div><p>content 1</p></div>
</li>
<li>
<span>PHP</span>
<div><p>content 1</p></div>
</li>
</div>
</ul>
</body>
و حالا کد ب با تغییر خیلی جزئی:
<style type="text/css">
ul.accardion{
background-color:#9900FF;
}
</style>
</head>

<body>

<ul class="accardion">
<li>
<span>html</span>
<div><p>content 1</p></div>
</li>
<li>
<span>CSS</span>
<div><p>content 1</p></div>
</li>
<li>
<span>java</span>
<div><p>content 1</p></div>
</li>
<li>
<span>PHP</span>
<div><p>content 1</p></div>
</li>
</ul>
</body>
ببینید الان از نظر منطقی تغییر خاصی صورت نگرفته جز در اینکه در اولی ul .accardion بود و در دومی ul.accardion . میخواستم ببینم چرا خروجی این دو تا با همدیگه تفاوت داره ؟؟!! اگه اشکالی نداره بعد از پاسخ به این سوال یه قسمت دیگه هم مونده که تو سوال بعدیم ازتون میپرسم.
عذر میخوام ازتون.
پاسخ: 
تگ های HTML در CSS یک استایل پیش فرض دارند، به طور مثال تگ ul (مخفف unordered list) برای ایجاد لفاف یا Container تگ li (مخفف list item) استفاده می شود و به صورت پیش فرض کمی padding آن از li بیشتر است، این تغییرات جزئی به همین دلایل است، در واقع زمانی که به div استایل اختصاص می دهید، استایل ul در حالت پیش فرض است (منتها چون رنگ پس زمینه ندارد، متوجه آن نمی شوید!)
نویسنده: داوود
۰۹:۲۳ ۱۳۹۴/۰۴/۰۳
سلام و صبح بخیر آقای مهندس؛
ممنونم بخاطر پاسخگویی شب گذشته تون. دستتون درد نکنه.
خوب ببینید آقای مهندس طبق توضیحات حضرتعالی پس یک سری property ها وجود داره که خود تگ ها بطور پیش فرض اونها رو اعمال می کنن.
حالا من اومدم و این چند خط کد رو گذاشتم؛ الان دیگه خروجی هر دو کد فوق با این چند خط یکسان شد.
*
{
margin:0;
padding:0;
}
البته به body هم یه padding دادم که بیشتر قضیه رو لمس کنم:
body{
padding:30px;
}
پس میشه گفت که css reset خیلی واجب و مثمر ثمر میتونه باشه؟؟ چون الان اگه اونو نمیذاشتیم میدیدم که خروجی ها ممکنه متفاوت باشه و این میتونه گاها باعث سردرگمی کاربران بشه.
در واقع میشه اینجور گفت که گذاشتن css reset باعث میشه خروجی هایی از نوع 2 کد فوق (علیرغم تفاوت در ظاهر کد ولی باطنا یکی هستن) دارای خروجی های یکسانی بشن؟؟!!
مرسی و متشکرم دوست عزیزم.
پاسخ: 
استفاده از این حالت بستگی به نیاز و تا حدودی سلیقه دارد، برخی طراحان ترجیح می دهند ویژگی های پیش فرض را در کلاس مربوط به همان عنصر تغییر دهند و برخی نیز به صورت کلی این ویژگی های را Reset می کنند! در کل با کسب مهارت و تجربه این موضوع خیلی طراحان را به دردسر نمی اندازد.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





9 × 2
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form mohadeseh
در:
ممنون از راهنماییتون مشکلم حل شد
۱۳۹۹/۰۷/۲۸

form محمد
در:
سلام. یک کد نوشته ام بدین صورت: وقتی صفحه باز شده یک پنجره پیام خالی با یک ok باز شده هر چه ok را...
۱۳۹۹/۰۷/۲۸

form فایز پور جهانبخشی
در:
سلام اگر بخواهیم برنامه ای که داخل متلب نوشتیم تا یک ثانیه اجرا شود و بعد از ثانیه اول در حالت خطا که...
۱۳۹۹/۰۷/۲۸

form mohadeseh
در:
الان کد من که توی تگ <head> گزاشتم میخواستم بدونم ایا امکانش هست که توی تگ link که ایکون رو باهاش اوردم بتونم...
۱۳۹۹/۰۷/۲۷

form mohadeseh
در:
سلام ببخشید لطفا راهنمایی کنید که چجوری title برای favicon در html بزارم؟ جوری که وقتی موس روی icon قرار بگیره متن...
۱۳۹۹/۰۷/۲۷

form ryomaechizen
در:
سلام. اگه حافظه وب پر بشه و مجبورا عکسا کپی باشن چطور باید مشکل بارگزاریشون حل بشه؟
۱۳۹۹/۰۷/۲۶

form رونا
در:
پرونده فرستاده شده نمی‌تواند به wp-content/uploads/2020/10 برود. سلام این ارور برای چی رخ می ده
۱۳۹۹/۰۷/۲۵

form reza
در:
سلام خوبید انشاالله؟ خواستم بدونم این نوار ابزار رو چطور باید اونایی رو دوست دارم بزارم سمت راست وبلاگم. هر چی کد و ......
۱۳۹۹/۰۷/۲۴

form سینا
در:
چگونه میتوانیم با استفاده از HTML فرمول شیمیایی مواد را بنویسیم؟ با عدد اتمی، جرمی و بار اتمی
۱۳۹۹/۰۷/۲۱

form فاطمه
در:
سلام ممنونم... خیلی ساده و روون توضیح دادین.. اونقدر که تشویق شدم محتوای یه فایل تکس رو با ایجکس درون یه div بیارم ولی...
۱۳۹۹/۰۷/۲۱

form امیرحسین
در:
خب متوجه شدم. که باید خط اول عدد فانکشن رو تغییر بدم. بسته به تعداد آرایه یا هر عدد دیگه تغییر بدم جوابمو...
۱۳۹۹/۰۷/۲۱

form امیرحسین
در:
عالی بود. خیلی ممنونم. ولی هر چند کلمه داخل آرایه داشته باشم به همون میزان خروجی گرفته میشه. من اگه 10 کلمه در آرایه داشته...
۱۳۹۹/۰۷/۲۱

form سعادتی
در:
سلام کاش روش برطرف کردن این بهم ریختگی رو هم توضیح میدادید. ممنون
۱۳۹۹/۰۷/۲۰

form امیرحسین
در:
موفق شدم اینو پیدا کنم. ولی میخوام کلمات تکراری داخلشون نباشه. مثال AAA فقط یک بار در اون خط وجود داشته باشه.
۱۳۹۹/۰۷/۲۰

form امیرحسین
در:
سلام. نه محدودیت زمانی وجود نداره.
۱۳۹۹/۰۷/۲۰
form امیرحسین
در:
سلام خسته نباشید. میخوام از این تابع برای بدست آوردن لیست های متفاوت استفاده کنم. مثلا یه آرایه داشته باشم. امیدوارم کمکم...
۱۳۹۹/۰۷/۲۰
form ابوالفضل
در:
سلام وقتتون بخیر من میخوام یه افزونه برای مرورگر کروم طراحی کنم و میخوام یه متنی رو هر سری از سایت دریافت کنه و...
۱۳۹۹/۰۷/۲۰
form mahdi
در:
سلام چطور می تونم از ip خارجی استفاده کنم؟ برای دریافت لانچر میخام. مرسی
۱۳۹۹/۰۷/۱۹
form احسان عباسی
در:
با سلام و تشکر از سایت خوبتون من یه کد تعریف کردم که در بورس ایران سهم مدنظرمو بیاره .. میخواستم ببینم امکانش هست دستوری...
۱۳۹۹/۰۷/۱۷
form شبنم
در:
سلام وقتتون بخیر، ببخشید از کلمه event یا e دقیقا چه زمانی توی فانکشن استفاده میکنیم؟
۱۳۹۹/۰۷/۱۷
form احمد
در:
با عرض سلام مجدد ساختار کلی دستورم به این صورت هست. بعد از حلقه وایل اون دیو کلاس 1 و 2 و 3 میخواهم...
۱۳۹۹/۰۷/۱۶
form احمد
در:
با عرض سلام ببخشید چطوری میتونم یه قسمت از تگ ها رو داخل حلقه وایل رد کنم دوباره تگ های بعدی داخل حلقه قرار بگیرن...
۱۳۹۹/۰۷/۱۶
form ابوالفضل
در:
سلام واقعا من خیلی گشتم تا بتونم این آموزش رو پیدا کنم چون واقعا نمی دونستم چی بنویسم تا یک رتبه بندی برای نتایج جستجو...
۱۳۹۹/۰۷/۱۵
form mahtab
در:
سلام وقتتون بخیر ببخشید میشه بفرمایید چجوری کلیپ رو بزاریم وبلاگ ؟؟ بی زحمت کامل بفرمایین ممنون و متشکر
۱۳۹۹/۰۷/۱۴
form Saeid Azari
در:
سلام ببخشید اگه امکانش هست سوال منو جواب بدید یکم گیج شدم...من یک کد html دارم که باید یک سایت درست کنم و ان را...
۱۳۹۹/۰۷/۱۳
form ابوالفضل
در:
سلام یک سوال دارم چجوری یک متنی که درون تگ td هست و بعد تگ br هست (تگ br درون تگ td است) رو...
۱۳۹۹/۰۷/۱۳
form parnian
در:
با سلام با توجه به این که این مطلب در سال 91 نوشته شده ایا تغیری هم کرده؟ مثلا استفاده و مهم بودن تگ های...
۱۳۹۹/۰۷/۱۳
form fahimeh
در:
سلام من دارم پروژه واسه دانشگاه مینویسم طراحی سایتو کردم برای کار با پایگاه داده دستور insert و delete کار میکنه ولی...
۱۳۹۹/۰۷/۱۲
form امین
در:
با عرض سلام ببخشید یه فرم دارم اخر فرمم یه دکمه دارم میخواستم بدونم چطوری باید بعد از کلیک کردن دکمه به صفحه دیگه انتقال...
۱۳۹۹/۰۷/۱۱
form محسن
در:
سلام من از فرم ساز گرویتی استفاده میکنم آیا امکان استفاده همچین چیزی رو میتونم داخلش داشته باشم آیا کدی داره که در قسمت...
۱۳۹۹/۰۷/۱۱
form مالکی
در:
چرا وبلاگم بالا نمی یاد
۱۳۹۹/۰۷/۰۹
form احمد
در:
با عرض سلام مجدد و خسته نباشید ببخشید نمونه کد رو اگر امکانش هست نگاه کنید که چطوری این متغییری رو که بدست اوردم در...
۱۳۹۹/۰۷/۰۹
form الناز
در:
سلام وقتتون بخیر. چطور میشه برنامه ای رو در php نوشت که کدملی رو تبدیل به شماره دانشجویی کنه اگه برام بنویسید ممنون میشم.
۱۳۹۹/۰۷/۰۹
form محمد
در:
سلام من میخواستم بدونم چه طوری میشه بدون اینکه از کاربر بپرسی که میخواهد از حساب خروج پیدا کند خود سایت بفهمد که کاربر از...
۱۳۹۹/۰۷/۰۹
form احمد
در:
با سلام ببخشید چطوری باید در جکوری از یک متغییر در صفحات دیگه استفاده کنم مثال دو عدد را باهم جمع کردم و ریختم داخل...
۱۳۹۹/۰۷/۰۹
form مهسا
در:
سلام و خسته نباشید مشکلی برای وبلاگ من پیش اومده موقع ورود بهم پیام میده وبلاگ داره بروز رسانی میشه و بعدا وارد وبلاگ شوید...
۱۳۹۹/۰۷/۰۸
form Moshtagh
در:
سلام و خسته نباشید بنده چند روزه که وقتی اطلاعات ورود به وبلاگم رو وارد تیترها و کلیک میکنم با چنین پاسخی مواجه میشم...
۱۳۹۹/۰۷/۰۸
form mahtab
در:
سلام خسته نباشین ببخشید چرا بلاگفا باز نمیکنه ؟؟؟ میرم مدیریت وبلاگ نه تو بروز شده ها وبی هستم نه هم که...
۱۳۹۹/۰۷/۰۷
form جواد
در:
سلام و عرض ادب. سایت من هک شده و یک کد ریدایرکت تو دیتابیس هاستم بارگزاری شده که آخر همه پست ها تو...
۱۳۹۹/۰۷/۰۷
form نبی
در:
‏asc و desc رو جابجا نوشتی
۱۳۹۹/۰۷/۰۴
form ساناز محمدی
در:
سلام مرسی از کدی که گذاشتید ♥
۱۳۹۹/۰۷/۰۳
form mahtab
در:
سلام خسته نباشین ببخشید میخواستم بپرسم که چجوری میتونیم یه کلیپ رو از کامپیوتر از انیستا دانلود کنیم ؟؟ اها اینم بگم...
۱۳۹۹/۰۷/۰۲
form سعید
در:
سلام دستتون درد نکنه از پروژه شما استفاده کردم فقط یه مشکل اگه در یک صفحه دو تا لیست کشویی داشته باشیم چطوری...
۱۳۹۹/۰۷/۰۱
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.