آموزش برنامه نویسی و مهارتهای وب
شنبه ۰۸ مهر ۱۴۰۲
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
مطالب بیشتر:کاربرد خاصیت height و width در CSS
مقدمه ای بر CSS و استایل دهی صفحات وب
کار با border و outline در CSS
خاصیت Background و ویژگی های آن در CSS
نحوه تنظیم لیست با تگ ul li در CSS
دیدگاه
۵۴ دیدگاه برای این مطلب ارسال شده است. دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.داوود
۱۹:۰۳ ۱۳۹۴/۰۳/۱۱
سلام آقای مهندس، عصرتون بخیر
استاد عزیز در مثالی که فرمودین یعنی این:
ب) اگه بخوایم دستور ما به همین div هم اثر بذاره، یعنی حتی اگه همین کد هم بود:
استاد عزیز در مثالی که فرمودین یعنی این:
p,div{
border:#CCC 1px solid;
padding:4px;
}<div id="main" class="text">ب) اگه بخوایم دستور ما به همین div هم اثر بذاره، یعنی حتی اگه همین کد هم بود:
<div id="main" class="text">خیر، ویژگی های عمومی به تمام تگ ها (حتی اگر کلاس یا آی دی داشته باشند) نیز اعمال می شوند، مگر در صورتی که همان ویژگی (به فرض 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;
}- مقادیر block حالت پیش فرض تگ div است، یعنی حتی اگر از display استفاده نشود، تگ div به صورت block پردازش می شود (در ادامه آموزش ها در این خصوص صحبت شده، در اینجا صرفا جهت جنبه آموزشی، مقدار تنظیم شده است).
- div مخفف division، معمولا برای فرمت بندی فضای صفحات وب و نمایش محتوا استفاه می شود.
- برای کنار هم قرار گرفتن باید از مقدار inline-block برای display استفاده کنید.
نکته: تگ p، article، div و سرتیترها (h1 تا h5) به صورت پیش فرض در حالت block پردازش می شوند (احتمالا چون اغلب شامل اطلاعات متنی هستند)، برای تگ های دیگر، در صورت نیاز باید این مقدار را تنظیم کنید چون قابلیت width و height معمولا تنها برای عناصر block و inline-block قابل تنظیم است (این اطلاعات بر منبای کاربردهای معمول CSS در صفحات وب است، لذا ممکن است مثال نقض نیز برای آنها وجود داشته باشد!).
- 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دقت کنید که p، div، main و... در CSS تنها یک سلکتور هستند که عنصر هدف در HTML را جهت اعمال استایل مشخص می کنند، لذا ممکن است چند سلکتور برای یک تگ قابل اعمال باشند که در این صورت خاصیت های مشترک (به فرض border که در چند قسمت تعریف شده باشد) بر اساس قانون ارجحیت تنها از یک سلکتور گرفته می شود و ویژگی هایی که تنها در یک سلکتور وجود دارد، از همان گرفته می شوند، لذا با این تفاسیر نمی توانید از ویژگی های مشترک برای یک تگ استفاده کنید، تصور کنید که یک بلاک هم رنگ پس زمینه زرد داشته باشد و هم رنگ پس زمینه سبز! در اینگونه موارد باید بلاک مجزا برای هدفتان طراحی کنید.
داوود
۰۸:۱۴ ۱۳۹۴/۰۳/۱۷
سلام و صبحتون بخیر؛
فقط برای عرض تشکر و عرض ارادت این پست رو براتون ارسال کردم. یه دنیا ممنون و قدردان شما هستم و خواهم بود. باز هم متشکرم.
فقط برای عرض تشکر و عرض ارادت این پست رو براتون ارسال کردم. یه دنیا ممنون و قدردان شما هستم و خواهم بود. باز هم متشکرم.
داوود
۲۰:۲۷ ۱۳۹۴/۰۳/۲۶
سلام آقای مهندس، عصرتون بخیر، ببخشید داشتم مطالعه می کردم میخواستم بپرسم آیا میشه یک المنت رو به صورت یه کلاس هم بنویسیم یا نه؟؟
مثلا الان اینجور نوشتن درسته یا از نظر معنایی غلطه؟
مثلا الان اینجور نوشتن درسته یا از نظر معنایی غلطه؟
p .span{
color:green;
}.p .span{
color:green;
}.p{
color:green;
}بله، تا آنجا که اطلاع داریم در CSS محدودیتی برای این شیوه نامگذاری وجود ندارد، در صورت نیاز قابل استفاده است؛ دقت کنید که در این حالت عنصر مورد نظر دیگر یک تگ نیست و صرفا یک کلاس است که می تواند به تگ های متفاوتی اعمال شود.
داوود
۱۰:۳۹ ۱۳۹۴/۰۳/۳۰
سلام آقای مهندس، روزتون بخیر و خوشی انشاالله
آقای مهندس در این تکه کد:
الف)
ب)
ضمنا میشه بگیم عنصر با همون المنت و selector یکی هستش؟ اگه نه تفاوتهاشون چیه؟؟ به نظر من وقتی که میگیم سلکتور یعنی تگی که از پیش تو html تعریف شده، مثل p ، h1 و.. ولی وقتی که میگیم عنصر شامل تعریفی مثل زیر میشه:
و property هم با خاصیت و یا خواص هم معنا هستن دیگه درسته؟؟ که میتونن مقدار بگیرن.
متشکرم ازتون.
آقای مهندس در این تکه کد:
الف)
.class1{
color:red;
}
.class2{
color:blue;
}
.class1.class2{
color:gray;
background-color:yellow;
display:inline;
}.class1.class2{
color:gray;
background-color:yellow;
display:inline;
}<div class="class1 class2">
in class1 and class2</div>ب)
ضمنا میشه بگیم عنصر با همون المنت و selector یکی هستش؟ اگه نه تفاوتهاشون چیه؟؟ به نظر من وقتی که میگیم سلکتور یعنی تگی که از پیش تو html تعریف شده، مثل p ، h1 و.. ولی وقتی که میگیم عنصر شامل تعریفی مثل زیر میشه:
div .list span{
display:list-item;
}و property هم با خاصیت و یا خواص هم معنا هستن دیگه درسته؟؟ که میتونن مقدار بگیرن.
متشکرم ازتون.
- در مورد قسمت اول برداشت شما کاملا صحیح است، منتها به تجربه در دنیای واقعی اغلب طراحان سعی می کنند در عین مختصر نویسی، از کلاس های تکی استفاده کنند تا کلاس های چندگانه (دقت کنید که برخی از موارد می تواند بین کلاس های تکی به اشتراک گذاشته شود و این شیوه متداولی است)، مثال:
در مورد بخش دوم منظور از Selector هر چیزی است که می تواند یک قانون برای انتخاب و استایل دهی به یک قسمت از سند HTML باشد، لذا مفهوم گسترده ای است که خود دربرگیرنده Element، Class، ID و... می شود، مشخص است که با اینها می توان قسمتی از یک سند را برای استایل دهی انتخاب کرد، اما Element معمولا به صورت HTML Element استفاده می شود و لذا ارجاع به عناصر HTML که همان تگ ها هستند، است؛ Property مترادف مقادیر یا دارایی است، به فرض اگر تگ زیر را در نظر بگیرید:
- src یک خاصیت یا صفت (Attribute) است.
- image/test.jpg مقادیر یا Property برای Attribute است.
<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">- src یک خاصیت یا صفت (Attribute) است.
- image/test.jpg مقادیر یا Property برای Attribute است.
داوود
۱۰:۵۸ ۱۳۹۴/۰۳/۳۰
سلام آقای مهندس؛
استاد در تعریف نحوه کارکرد این خط دارم گیج میشم، امکانش هست یه راهنماییم بکنید؟
ببینید در این شبه کد:
الف) این خاصیت رو به کلاس list هایی اعمال کن که در تگ div قرار گرفتن و به نوعی محصور شده در div هستن؟؟
و یا این:
ب)انتخاب کلیه div هایی که دارای کلاس list هستن.
فکر کنم گزینه ب درست باشه، مگه نه؟؟ خوب الان اگه یه فاصله بدیم بین list و div چه اتفاقی میفته؟؟ خوب اینجوری در واقع list میشه فرزند div دیگه درسته؟؟ اونوقت کد css مون به این شکل میشه:
اگه اینجوری بنویسیم که اصلا اعمال نمیشه:
ممنون و سپاسگزارم از حضرتعالی.
مرسی
استاد در تعریف نحوه کارکرد این خط دارم گیج میشم، امکانش هست یه راهنماییم بکنید؟
ببینید در این شبه کد:
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;
}اگه اینجوری بنویسیم که اصلا اعمال نمیشه:
<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.
یعنی در این تکه کد:
ب) آیا یادگیری sass خیلی در پیشبرد نوشتن کدهامون بهمون کمک میکنه؟؟ مثلا من که تو css متوسط هستم و هنوز دارم مطالعه کرده و یاد میگیرم نیازه که برم سمتش یا بعد از اینکه یه خورده راه افتادم یاد میگیرم؟؟
ممنونم ازتون
وقتتون بخیر؛
الف) آقای مهندس فکر کنم در css انگار برعکس باشه ترتیب override.
یعنی در این تکه کد:
<link href='css/style.css' rel='stylesheet'>
<link href='css/custom.css' rel='stylesheet'>ب) آیا یادگیری sass خیلی در پیشبرد نوشتن کدهامون بهمون کمک میکنه؟؟ مثلا من که تو css متوسط هستم و هنوز دارم مطالعه کرده و یاد میگیرم نیازه که برم سمتش یا بعد از اینکه یه خورده راه افتادم یاد میگیرم؟؟
ممنونم ازتون
- این شاید به دلیل بحث DOM در HTML باشد، یک سند HTML همیشه از بالاترین سطح پردازش می شود.
- CSS به خودی خود به حد کافی کاربردی و قوی است و اصولا نیازی به اکستنشن های اضافی مانند SASS و ... نیست، با این حال اگر پس از فراگیری و تسلط بر روی آن (و البته استفاده کاربردی در چند پروژه کوچک و بزرگ)، کمبودی در CSS احساس کردید، می توانید برای یادگیری مباحث جدید (SASS) زمان صرف کنید! :-)
- CSS به خودی خود به حد کافی کاربردی و قوی است و اصولا نیازی به اکستنشن های اضافی مانند SASS و ... نیست، با این حال اگر پس از فراگیری و تسلط بر روی آن (و البته استفاده کاربردی در چند پروژه کوچک و بزرگ)، کمبودی در CSS احساس کردید، می توانید برای یادگیری مباحث جدید (SASS) زمان صرف کنید! :-)
davood
۰۰:۵۳ ۱۳۹۴/۰۴/۰۱
با سلام؛ بامدادتون بخیر و خوشی انشاالله؛ ممنونم که هر شب پاسخم رو میدین؛ یکی از دلخوشی هام دیدن پاسخهای خوب شما در انتهای هرشب است و از اینکه بهتون زحمت میدم عذرخواهم. هر زمان خسته شدین بفرمایین تا کمتر مزاحم بشم دوست عزیز.
نظر لطفا شما است، خیر، تا زمانی که این سایت برپاست پاسخگویی متداول جزء خدمات آن خواهد بود! :-)
داوود
۰۸:۵۳ ۱۳۹۴/۰۴/۰۱
سلام و صبح بخیر؛ ممنونم ازتون آقای مهندس عزیز. دستتون واقعا درد نکنه؛ فقط مهندس جان امکانش هست همون دو خطی رو که نوشته بودم برام تعریف کنید: یعنی میخوام ببینم آیا تعریفی که خودم کردم درسته یا نه!
همین دو تا خط رو میشه برام تعریف کنید:
منظورم اینه که مثلا بگید span هایی که داخل کلاس لیست هستن و باز اینها خودشون داخل div هستن! اینجوری تقریبا (ببخشید سوالم اگه بی معنیه)
همین دو تا خط رو میشه برام تعریف کنید:
div.list spandiv .list spanمنظورم اینه که مثلا بگید span هایی که داخل کلاس لیست هستن و باز اینها خودشون داخل div هستن! اینجوری تقریبا (ببخشید سوالم اگه بی معنیه)
- حالت اول یعنی تگ div ای که کلاس list داشته باشد، تگ span (که درون این div باشد).
- حالت دوم یعنی تگ div، کلاس list (درون div)، تگ span (درون div و کلاس list).
نکته: در هر دو حالت استایل به آخرین عنصر (یعنی span) تعلق می گیرد.
- حالت دوم یعنی تگ div، کلاس list (درون div)، تگ span (درون div و کلاس list).
نکته: در هر دو حالت استایل به آخرین عنصر (یعنی span) تعلق می گیرد.
داوود
۰۹:۵۶ ۱۳۹۴/۰۴/۰۱
سلام؛
آقای مهندس تو همین شبه کد:
ببینید اینجوری:
آقای مهندس تو همین شبه کد:
div .list span{
display:list-item;
color:#F90004;
}ببینید اینجوری:
<div class="list">
<span>first list</span>
<span>first list</span>
<span>first list</span>
<span>first list</span>
</div>قاعدتا برای هدف قرار دادن یک عنصر خاص قوانینی در CSS تعریف شده که چرایی موضوع به آن بر می گردد، برای هدف شما باید استایل را به شیوه زیر تعریف کرد:
- تگ div در بالاترین سطح، تگی با کلاس list به عنوان فرزند div، تگ span درون تگ div و کلاس list.
.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>عذر میخوام ازتون.
تگ های HTML در CSS یک استایل پیش فرض دارند، به طور مثال تگ ul (مخفف unordered list) برای ایجاد لفاف یا Container تگ li (مخفف list item) استفاده می شود و به صورت پیش فرض کمی padding آن از li بیشتر است، این تغییرات جزئی به همین دلایل است، در واقع زمانی که به div استایل اختصاص می دهید، استایل ul در حالت پیش فرض است (منتها چون رنگ پس زمینه ندارد، متوجه آن نمی شوید!)
داوود
۰۹:۲۳ ۱۳۹۴/۰۴/۰۳
سلام و صبح بخیر آقای مهندس؛
ممنونم بخاطر پاسخگویی شب گذشته تون. دستتون درد نکنه.
خوب ببینید آقای مهندس طبق توضیحات حضرتعالی پس یک سری property ها وجود داره که خود تگ ها بطور پیش فرض اونها رو اعمال می کنن.
حالا من اومدم و این چند خط کد رو گذاشتم؛ الان دیگه خروجی هر دو کد فوق با این چند خط یکسان شد.
*
در واقع میشه اینجور گفت که گذاشتن css reset باعث میشه خروجی هایی از نوع 2 کد فوق (علیرغم تفاوت در ظاهر کد ولی باطنا یکی هستن) دارای خروجی های یکسانی بشن؟؟!!
مرسی و متشکرم دوست عزیزم.
ممنونم بخاطر پاسخگویی شب گذشته تون. دستتون درد نکنه.
خوب ببینید آقای مهندس طبق توضیحات حضرتعالی پس یک سری property ها وجود داره که خود تگ ها بطور پیش فرض اونها رو اعمال می کنن.
حالا من اومدم و این چند خط کد رو گذاشتم؛ الان دیگه خروجی هر دو کد فوق با این چند خط یکسان شد.
*
{
margin:0;
padding:0;
}body{
padding:30px;
}در واقع میشه اینجور گفت که گذاشتن css reset باعث میشه خروجی هایی از نوع 2 کد فوق (علیرغم تفاوت در ظاهر کد ولی باطنا یکی هستن) دارای خروجی های یکسانی بشن؟؟!!
مرسی و متشکرم دوست عزیزم.
استفاده از این حالت بستگی به نیاز و تا حدودی سلیقه دارد، برخی طراحان ترجیح می دهند ویژگی های پیش فرض را در کلاس مربوط به همان عنصر تغییر دهند و برخی نیز به صورت کلی این ویژگی های را Reset می کنند! در کل با کسب مهارت و تجربه این موضوع خیلی طراحان را به دردسر نمی اندازد.
صفحه 2 از 4آخرین دیدگاه ها
برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.javascript
سلام 🙌 توی جاوا اسکریپت چطور تگ آپشن رو پیش فرض بزاریم مثلا : تگ آپشن _استان محل صدور : همدان -...۱۴۰۲/۰۷/۰۶
Fateme
سلام مطالب عالی و استفاده می کنم دستتان درد نکنه . سوال من این هست چطور میتونم تاریخ تولد را وارد کنم سن شخص رو...۱۴۰۲/۰۷/۰۵
مجتهدزاده
سلام من در لاراول سعی دارم تا با یک لینک رو اجرا کنم تا یک اس ام اس به شماره ای که در...۱۴۰۲/۰۷/۰۳
پـــرتو
سلام جناب خسته نباشید شرمنده مزاحم میشم عه جناب ببخشید من دو سه تا وبلاگ دارم که یکیش یا دوتاشون هک میشن یعنی...۱۴۰۲/۰۷/۰۳
فاطمه سیداحمدی
با سلام و خسته نباشید من میخوام با استفاده از جاوااسکریپت یه کدی داشته باشم که وقتی کاربر چیزی رو از توی سایت من...۱۴۰۲/۰۷/۰۲
رضا جهانیان
درود برشما من تو گوگل که اسم سایت حراجستون را سرچ می کنم اسم دامنه نوشته شده به انگلیسی کدهای زیادی هم استفاده کردم...۱۴۰۲/۰۶/۳۱
سعید
نمای ظاهری من مثل قبل که در اوت لوک میفرستادم در نیو ایمیل نیست یعنی تغییر کرده چطور میتونم برگردم به همون حالت اول خودش...۱۴۰۲/۰۶/۲۷
سینا
با سلام و خسته نباشید من برای ترجمه متن از گوگل ترانسلیت استفاده می کنم یه مشکلی که دارم اینکه وقتی متنی رو برام...۱۴۰۲/۰۶/۲۵
کوروش
سلام خسته نباشید توضیح : سایتی که تگ های select option ها و همه div ها و label ها ( کلاس های...۱۴۰۲/۰۶/۲۴
عدم اجرای فونت فیس در تب منو
سلام برای تب منو فونت فیس برای تب اول کار میکند اما تب های بعدی اعمال نمیشود چکار باید کرد۱۴۰۲/۰۶/۲۲
محبوبه قاسم پور
سلام وقتتون بخیر برای منوهای کشویی سایت، اگر خاصیت overflow:hidden باشد، زیرمنوها نمایش داده نمی شود، از طرفی اگر این خاصیت فعال نباشد...۱۴۰۲/۰۶/۱۸
پـــرتو
سلام فکنم در یادداشت ها ارسال شده بود و تاریخشم یادم نیست ولی من واقعا نمی دونم کامنتش کجاست که برم برش دارم ...۱۴۰۲/۰۶/۱۴
پـــرتو
سلام خسته نباشید ببخشید مزاحم شدم می خواستم بگم که یه کدی داده بودین قبلا برای بلاگفا که آی پی کسایی که بهمون توهین می...۱۴۰۲/۰۶/۱۱
امیرحسین رستمی
سلام مجدد وقت بخیر لطفا لینک زیر را ببینید میخوام تمام متن های فارسی که اینجا انتخاب کردم رو با عبارت با قائده انتخاب...۱۴۰۲/۰۶/۱۱
امیرحسین رستمی
سلام وقت بخیر من این متنو دارم: میخوام فقط متن های فارسی رو انتخاب کنم با preg_match و متن جایگزین براش بزارم قبلا...۱۴۰۲/۰۶/۱۱
امیرحسین رستمی
در رابطه با دوتا سوال قبلی من این کد رو نوشتم شما بررسی کنید ببینید اگه مشکل دیگه ای نداره ، درست داره کار میکنه...۱۴۰۲/۰۶/۰۹
امیرحسین رستمی
سلام وقت بخیر من یک عبارات با قائده ای میخوام که این متن رو : من همچین عبارتی در نظرم هست ولی ...۱۴۰۲/۰۶/۰۹
hossein
سلام مجدد، ممنون از پاسخگویی شما از وردپرس استفاده میکنم و قالب وودمارت، هدر هم با هدر ساز قالب ساخته شده با اینکه...۱۴۰۲/۰۶/۰۹
امیرحسین
سلام وقت بخیر من یک برنامه نوشتم که از ایپی ای گوگل کمک میگیره و متن میدم بهش و ترجمه میکنه : شما فرض...۱۴۰۲/۰۶/۰۹
hossein
سلام وقت شما بخیر باشه ابتدا جا داره از شما تشکر کنم میخوام یک آیکن لینک دار توی هدر سایتم را از دید...۱۴۰۲/۰۶/۰۹
علی
سلام و با تشکر از راهنمایی شما بنده یک وب سرویس ارسال پیامک دارم که از طریق آن برای کابرانم پیامک ارسال می کنم....۱۴۰۲/۰۶/۰۷
مهدی
سلا چطوری میتونم کدام تو مرورگر دقیق نمایش بدم حتی >< تگ هام نمایش داده بشه در html تگ کد را هم معرف نکنید چون...۱۴۰۲/۰۶/۰۴
محمدرضا
سلام و خدا قوت حضور شما بزرگوار. اول یه تشکر و قدردانی از شما دارم که زمان میزارید و جواب همه دوستان رو میدید....۱۴۰۲/۰۶/۰۳
محمدرضا
سلام وقت شما بخیر لطف بفرمائید با switch و default کدی رو بنویسید که: اگه متغیر a یک باشد متغیر b دو...۱۴۰۲/۰۶/۰۱
پـــرتو
سلام بابت جواب به سوالم در مورد بلاگفا ممنون من خودم با پشتیبانی بلاگفا تماس گرفتم گفنن نمیشه اینکار ولی یه سوال دیگه ازتون داشتم...۱۴۰۲/۰۵/۲۸
fatima
سلام. خسته نباشید. ما با responsive هم میتوانیم اسکرول افقی را حذف کنیم؟۱۴۰۲/۰۵/۲۸
عاطفه
ممنون از پاسخگوییتون. اگر ممکنه این سوال رو هم جواب بدید ممنون میشم. معنی این ارور ها و راه حل رفع اونها رو میخواستم بدونم....۱۴۰۲/۰۵/۲۶
عاطفه
سلام، وقت بخیر. من چندتا مشکل سایتم داره که نمیدونم چطور باید برطرفشون کنم. یکی اینکه وقت لینکای شکسته رو چک میکنم برای لینکدین و...۱۴۰۲/۰۵/۲۵
در انتظار بررسی: ۰
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.