آموزش برنامه نویسی وب و مهارتهای مرتبط

پنجشنبه ۰۴ اردیبهشت ۱۴۰۴

Thursday, April 24, 2025 GMT +3:30

مقدمه ای بر CSS و استایل دهی صفحات وب

پس از آشنایی و تسلط بر کدنویسی HTML روند فراگیری مهارتهای حرفه ای وب با مبحث دیگری تحت عنوان CSS ادامه می یابد، CSS مخففی از سرواژه های Cascading Style Sheets و در اصطلاح به معنی شیوه ای جهت شکل دهی ظاهر و فرم صفحات وب است، CSS را باید به نوعی جادوگر طراحی وب نامید چرا که کدنویسی بی روح و اسکلتی HTML با کمک CSS تبدیل به طراحی جذاب و کاربر پسند می شود، فلسفه پیدایش این زبان به آسان کردن کار طراحان صفحات وب جهت شکل دهی و فرم بندی ایده هایشان بر می گردد، پیش از این برای اینکه به فرض رنگ فونت یک متن را در صفحات مختلف یک سایت تغییر دهیم ناچار بودیم در هر صفحه فونتمان را پیدا کرده و با صرف زمان زیاد، تک تک آنها را ویرایش کنیم، اما با معرفی CSS انجام این موارد بسیار ساده تر و البته حرفه ای تر شد، بنابراین می توان گفت گام دوم در یادگیری کدنویسی و طراحی وب فراگیری CSS است.

معنی و مفهوم CSS

همان طور که پیش از این اشاره شد، CSS مخفف عبارت Cascading Style Sheets است که با ترجمه کلمه به کلمه "شیوه نامه های آبشاری" معنی می شود، منظور از شیوه نامه این است که دستورات CSS به صورت جداگانه و معمولا در فایل هایی با فرمت css (یا به صورت داخلی در کدنویسی HTML) وارد شده و مرورگر با پیروی از این دستورات، به تگ های HTML جلوه مورد انتظار را نسبت می دهد، کلمه "آبشاری یا Cascading" نیز به این دلیل است که اولویت دستورات در CSS در حالت پیش فرض به صورت سلسله مراتبی (از پائین صفحه وب به بالا) هستند و در صورت تداخل صرفا یک ویژگی غالب می شود، به فرض اگر در یک فایل استایل که در بالای صفحه وب وارد شده برای بلاکی رنگ زمینه آبی در نظر گرفته شده باشد، فایل استایلی که در ادامه در صفحه وارد شود و برای همان بلاک رنگ زمینه خاکستری تعیین کند، ویژگی غالب می شود که در پائین ترین قسمت صفحه وجود داشته باشد، بنابراین با این توصیف، رنگ خاکستری به عنوان رنگ زمینه در نظر گرفته خواهد شد و ویژگی مشترک بالادستی (پس زمینه آبی) نادیده گرفته می شود.

فرمت بندی بدون استفاده از CSS

در ابتدای پیدایش HTML به عنوان ابزاری جهت ایجاد صفحات وب، جلوه های ظاهری مانند اندازه، رنگ، ویژگی های مربوط به متن و... توسط خاصیت های داخلی و اغلب به صورت خطی اعمال می شدند، این شیوه تا مدتها تنها راه اعمال استایل به صفحات وب بود تا اینکه رفته رفته با پیشرفت و توسعه وب، طراحان با محدودیت های مختلفی روبرو شدند که نیاز به معرفی روشی ساده تر و حرفه ای تر را یادآور می شد، از این رو در سال 1998 اولین نسخه از CSS توسط کنسرسیوم جهانی وب W3C معرفی و در کنار کدهای HTML در ساخت صفحات نوین وب به کار گرفته شد، با این پیش آگاهی دو نمونه کد که با دو روش قدیمی و جدید استایل دهی شده را با هم مقایسه می کنیم، کد اول بدون استفاده از CSS و صرفا توسط خاصیت های خطی HTML فرمت بندی شده است (برای تست کافی است کد را در یک ویرایشگر متنی یا HTML کپی، ذخیره و در مرورگر اجرا کنید، همچنین می توانید از پیش نمایش آنلاین استفاده نمائید):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | صفحه وب بدون استفاده از CSS</title>
<!-- Webgoo.ir -->
</head>
<body bgcolor="#0099CC">
<div align="justify" dir="rtl">
<font color="#003366">
نمایش متن 1 بدون استفاده از CSS
</font>
</div>
<div align="justify" dir="rtl">
<font color="#003366">
نمایش متن 2 بدون استفاده از CSS
</font>
</div>
<div align="justify" dir="rtl">
<font color="#003366">
نمایش متن 3 بدون استفاده از CSS
</font>
</div>
</body>
</html>

پیش نمایش

استایل دهی با استفاده از CSS

شاید با اجرای کد بالا و مشاهده نتیجه در مرورگر به این فکر افتاده باشید که وقتی می توان به شیوه خطی به هدفمان برسیم، چه نیازی به CSS است؟! در پاسخ باید گفت که صفحات در پروژه های وب معمولا به یک یا چند مورد محدود نمی شوند که بتوانیم مورد به مورد با استایل خطی به آنها ویژگی های ظاهری را نسبت دهیم، اغلب نیاز است که یک ویژگی و حالت به تگ های مختلفی در صفحات مختلف نسبت داده شود، واضح است که به شیوه خطی باید تک تک این صفحات و تگ ها ویرایش شوند که از نظر حرفه ای قابل قبول و بهینه نیست، در دنیای حرفه ای و مخصوصا در کدنویسی وب این قانون نانوشته جاری است که کم بنویس و زیاد استفاده کن! لذا 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{
    background-color:#0099CC;
}
.mydiv{
    text-align:justify;
    direction:rtl;
    color:#003366;
}
</style>
</head>
<body>
<div class="mydiv">
نمایش متن 1 با استفاده از CSS
</div>
<div class="mydiv">
نمایش متن 2 با استفاده از CSS
</div>
<div class="mydiv">
نمایش متن 3 با استفاده از CSS
</div>
</body>
</html>

پیش نمایش
در کد دوم اگرچه چند بلاک div وجود دارد، اما برای فرمت بندی آنها صرفا از یک شیوه استفاده شده، در واقع یکی از قابلیت های اصلی و کلیدی CSS امکان ایجاد و تعریف کلاس (Class) و آی دی (ID) است، به اینصورت که به طور مثال با تعریف یک کلاس، از آن در صفحات مختلف و بدون تکرار کدنویسی، به دفعات دلخواه استفاده می کنیم.
چند توضیح:
- CSS یک زبان کمکی است، یعنی به خودی خود کاربرد خاصی ندارد، ولی به تگ های HTML شکل و قالب می دهد.
- برای دیدن و مقایسه کد صفحات وب قسمت پیش نمایش، کلیک راست کرده و View Page Source را انتخاب نمائید.
- کدهای CSS در صفحات وب یا به صورت درون صفحه ای یا ایمپورت به صورت فایل خارجی هستند، در شیوه درون صفحه ای استایل CSS در قسمت head صفحه یا بین تگ های HTML به صورت خطی (Inline) تعریف می شود، در شیوه ایمپورت به صورت فایل خارجی نیز استایل CSS به صورت یک فایل خارجی در قسمت head صفحه و در تگ link درج می شود.
- تگ style برای ایجاد و تعریف کدهای CSS درون صفحه ای کاربرد دارد، مانند آنچه در صفحات بالا دیدیم.
- برای ایمپورت یک فایل CSS خارجی، از تگ link و خاصیت های آن، درون تگ head استفاده می کنیم، به طور مثال:

<link rel="stylesheet" type="text/css" href="style/style.css">

در این رابطه در آموزش های بعدی بیشتر خواهیم گفت.

دسته بندی: آموزش مقدماتی » CSS

برچسب ها: CSS

قبلی »

« بعدی

مطالب بیشتر:
کاربرد خاصیت height و width در CSS
سلکتور آی دی (ID) و کلاس (Class) در CSS
ویژگی های Font و Text در CSS
کاربرد ویژگی position و float در CSS
نحوه تنظیم لیست با تگ ul li در CSS

دیدگاه

۳۶ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

فرهاد ف

۱۸:۱۷ ۱۳۹۴/۰۸/۰۴

با عرض سلام
خیلی خوشحالم که امروز با سایت خوب و وزین شما آشنا شدم؛ با پوزش برخی سوالاتم رو ازتون میپرسم. استاد چرا در این کدی که من نوشتم کد css سوم من کار نمی کند.
ببینید این کد css من هستش:

p{
    background-color: aqua;
}
p.span{
    background-color: chocolate;
}
p .span{
    background-color: red;
}

منظور از آخرین خاصیت css ی که نوشته ام این است که کلیه span هایی که بچه تگ p هستند را تحت پوشش خود بگیر ولی انگار بخاطر کلمه کلیدی span این کد عمل نمی کند. آیا دلیلش رو میشه بگید.

<p>in p tag only</p>
<p class="span">in p tag and span class</p>
<p><div class="span">in p tag father and span is child </div></p>

ولی اگر همین کلمه span را به myspan تغییر دهم و کد html را هم بدین روش تغییر بدم عمل میکنه.

<p><span class="myspan">in p tag father and span is  child </span></p>

و البته کد css هم این خواهد شد:

p .myspan{
    background-color: red;
}

با عرض تشکر و امتنان از شما استاد گرامی.

زمانی که دستور را به شکل زیر تعریف می کنید:

p .span

در واقع مفهوم آن این است: عناصری که داخل تگ p باشند و کلاس span داشته باشند را انتخاب کن، اگر بخواهید کلیه span هایی که فرزند تگ p هستند را انتخاب کنید باید دستور مطابق زیر باشد:

p span

نکته: علامت . برای کلاس استفاده می شود!

داوود

۰۹:۴۸ ۱۳۹۴/۰۶/۰۷

سلام آقای مهندس، صبحتون بخیر و خوشی
استاد یه سوال داشتم ازتون، این سایت رو ببینید:

http://oxdemo.ow-visuals.com/index?layout=flatty

بالای صفحه یه پنجره drop down ی داره که میذاره یه template رو انتخاب کنی، اون برای چه مواقعی کاربرد بیشتری داره؟ اونوقت با توجه به سوالاتی که ازتون میپرسم و سطح من رو تقریبا میدونید، خیلی طول میکشه ما به این حد برسیم؟ همچنین در همین طرح flatty-responsive که فکر کنم بصورت default هم همین فعال باشه، اون پس زمینه ای که مثلا به گزینه های Slideshow ، Users ،Video و یا Blogs رو داده میشه با خود css هم ایجاد کنیم، درست میگم؟؟

به طور کلی تگ های مربوط به فرم (از قبیل select یا همان پنجره Drop Down) برای رد و بدل کردن اطلاعات و پارامترهایی از صفحه وب (سمت کاربر) به سرور (سمت سرور) در چارچوب متدهای GET یا POST کاربرد دارند که در اینجا برای انتقال مقادیر layout انتخاب شده توسط کاربر به سرور (در آدرس URL مشخص است) از طریق متد GET از این قابلیت استفاده شده، پس زمینه ای که به تیتر باکس ها نسبت داده شده را می توان با یک آیکن وکتور ساده و استفاده از خاصیت background در CSS ایجاد کرد، قاعدتا مواردی مثل background-position و background-repeat نیز باید به کار گرفته شوند.

amirARSHAN

۱۹:۳۱ ۱۳۹۴/۰۵/۱۳

سلام؛ خسته نباشید. می خواستم بدونم که زبان css به حروف بزرگ و کوچک حساس است؟ (لطفا پاسخ را به ایمیل بنده ارسال نمایید)

خیر، CSS به حروف بزرگ یا کوچک حساس نیست!

داوود

۱۰:۵۶ ۱۳۹۴/۰۵/۱۲

سلام؛
آقای مهندس یه جا دیدم یه تعریف از import رو اینجوری نوشته بود:
"با استفاده از دستور import@ می توان دستورات css را به هر دو صورت استایل داخلی و استایل خارجی در یک فایل وارد کرد"
میخواستم ببینم درست نوشته؟ آخه ما دستوراتمون یا خارجی هستش یا داخلی یا Inline ، اینکه اینجوری نوشته یعنی در واقع به چه منظوری هستش؟؟

<style type="text/css">
    @import url(style.css)
</style>

شاید منظور نویسنده این بوده که دستور import علاوه بر صفحه HTML (بین تگ style) در خود فایل CSS نیز قابل استفاده است، البته بهتر است خیلی به فکر استفاده از این دستور منسوخ شده نباشید!

داوود

۱۱:۴۸ ۱۳۹۴/۰۴/۱۶

سلام آقای مهندس، وقتتون بخیر؛
در اینجا که فرمودین "اگر از clear استفاده کنیم عنصر زیرین به انتهای عنصر float شده منتقل می شود". ببینید منظورتون از عنصر زیرین همون عنصری هست که در اون قرار گرفتیم و داریم بهش clear میدیم دیگه درسته؟؟ الان برای یک footer مثلا ما میخوایم بگیم که بیاد زیر sidebar و content هم ردیف sidebar ها قرار بگیره؛ خوب در این حالت ما باید به footer خاصیت clear رو اعمال کنیم دیگه! درست عرض می کنم خدمتتون؟؟
این کد رو اگه زحمتی نیست امکانش هست یه copy و paste بفرمایین و ببینید منظورم رو؟؟

http://jsfiddle.net/jhkokggh

البته برای اینکه وقتتون گرفته نشه فقط همین دو خط منظور حقیر هستش:

<div class="clear"></div>
<div id="footer"></div>

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

<div style="clear:both" id="footer"></div>

ببخشید که وقتتون رو گرفتم و واقعا عذرخواهم.

منظور از عنصر زیرین یعنی همان عنصری که بر اساس HTML DOM در سطح پائین تر از عنصر float شده قرار می گیرد، اما اینکه به همان عنصر clear را نسبت دهید یا از یک بلاک واسط دیگر استفاده کنید، بستگی به شرایط دارد (گاهی clear شدن خود عنصر زیرین باعث ایجاد مشکلات دیگر می شود، لذا در اینگونه موارد از یک بلاک واسط استفاده می کنند که همان نقش را دارد و محتوا را به انتهای عنصر float شده هدایت می کند).

داوود

۱۱:۳۳ ۱۳۹۴/۰۴/۱۵

سلام استاد عزیزم؛ وقتتون بخیر و خوشی انشاالله
آقای مهندس من داشتم در خصوص clear مطالعه میکردم، بعدش اومدم که اینجا هم مطالب نهایی رو بخونم و یه خورده جمع و جور کنم مطالب رو؛
الف) ولی انگار تو سایتمون جایی رو برای آموزش clear نذاشتین، درست میگم؟؟ آخه تو فهرست هم نبود. البته یه سرچ اینجوری توسط گوگل داشتم ولی خیلی نکته خاصی دستگیرم نشد.

https://www.google.com/?gws_rd=ssl#q=clear+site:webgoo.ir&start=0

ب) در واقع وقتی ما میایم و به یه عنصر خاصیت یا همون property با مقدار یا attribute از نوع clear میدیم، یعنی میگیم با توجه به عناصر قبلی و بعدی بیا خودت رو وفق بده! درست میگم؟؟ یعنی اگه قبلش عنصری نباشه، عنصر ما هیچ تکونی نمیخوره یا اینکه تاثیر پذیر نیست از clear.
ممنون میشم حالا که تو درسها، clear نیست، یه توضیح دو خطی رو مرقوم بفرمایین. (البته راستش رو بخواین مطلب در این خصوص خوندم ها ولی چون شیوه نوشتن شما خیلی خوب و طوریه که بهتر می فهمیم برای این گفتم).

- مطالب بخش ها هنوز کامل نیست و پس از به روزرسانی سایت به نسخه جدید، تکمیل خواهند شد!
- خاصیت clear به معنی پاکسازی کردن، در مواردی استفاده می شود که بخواهیم تعیین کنیم آیا یک عنصر می تواند در کنار عنصر شناور (float شده) دیگر قرار گیرد یا خیر، اگر از clear استفاده کنیم عنصر زیرین به انتهای عنصر float شده منتقل می شود (البته موارد استثناء نیز وجود دارد، مانند حالتی که عنصر زیرین خاصیت position با مقادیر absolute دارد).
نکته: در طراحی کاربردی مواردی پیش می آید که از یک بلاک clear:both برای هدایت کردن عناصر زیرین به انتهای عناصر شناور استفاده می شود.

داوود

۰۸:۱۳ ۱۳۹۴/۰۳/۱۲

سلام آقای مهندس؛
صبحتون بخیر و خوشی انشاالله؛ خیلی ممنونم که به سوالای من پاسخ میدین. دستتون درد نکنه و یه دنیا تشکر. آقای مهندس یکی از دوستان در خصوص + و ~ سوالی پرسیده بود که شما فرموده بودین، + سخت گیرتره و فقط به عنصر بعد از تگ مورد نظر اعمال میشه ! من به نکته ی بنظرم خیلی جالبی برخورد کردم. شما میدونستین بالا یا پایین تر نوشتن این دو تا کد میتونه روی خروجی تاثیر بذاره؟؟؟ من واقعا نمیدونستم و میگن این موضوعی است به نام ارجحیت در css. واقعا جالب بود برام. آیا شما در این باره چیزی شنیده بودین؟؟
تو این آدرس یه مثال گذاشتم:

http://www.cssdesk.com/CABmJ

حالا شما اگه جای

h1~p{
color:yellow;
font-size:28px;
}

رو با

h1+p{
color:blue;
font-size:20px;
}

عوض کنین، شاهد خروجی متفاوتی خواهید بود.
واقعا چرا اینجوری میشه؟؟
البته من همون روز یه مقاله پیدا کردم که براتون میذارم،
البته اگه شما هم مطلب دیگه ای داشتین ممنون میشم در اختیار ما مبتدی ها بزارین.

http://front-end.ir/ui/css-specificity

بازم ممنون و سپاسگزارم ازتون آقای مهندس عزیز.

به طور کلی در CSS زمانی که برای یک عنصر مشابه (تگ، کلاس، آی دی و...) چند بار تکرار صورت می گیرد (در مثال شما استایل تگ h1)، بر اساس نحوه تفسیر مرورگر، آخرین دستورات کاربر در اولویت هستند و عموما زمانی از موارد مشابه مقدم تر پیروی می شود که در آخرین دستور چنین خاصیتی تعریف نشده (به فرض در یک مورد color باشد و در دیگری خیر) یا نوع دستور متفاوت باشد (این یک اصل کلی است، در طراحی واقعی معمولا نیاز چندانی به استفاده از عناصر مشابه نیست و جنبه کاربردی زیادی ندارد!)

داوود

۰۸:۲۳ ۱۳۹۴/۰۳/۱۱

سلام آقای مهندس، صبحتون بخیر و شادی؛
استاد در خصوص ارث بری و اینکه نحوه صحیح کد نوشتن تو css به چه نحوی باشه یه خورده دارم گیج میشم. امکانش هست یه راهنماییم بکنید یا اینکه ادامه درسها رو بخونم کاملا میفهمم.
ببینید الان در این کد:

.mydiv span{
   
}

منظورمون اینه که کلیه تگهای span ای که داخل کلاس mydiv هستند رو تحت تاثیر قرار بده.
حالا در این یکی:

.mydiv .span{
   
}

کلاس mydiv با یک فاصله از کلاس span جدا شده!
منظورمون اینه که تگهایی رو تحت تاثیر قرار بده که داخل کلاس span هستن و باز خود span داخل کلاس mydiv هستش.
حالا اگه بدون فاصله باشن؛ یعنی اینجوری:

.mydiv.span{
   
}

منظورمون اینه که اگه کد html ای شامل هر دو کلاس بود، اون رو تحت تاثیر قرار بده، یعنی کد html مون اینجوری باشه:

<div class="mydiv span">

راستش رو بخواین دارم تو این قضیه ها گیج میشم. البته بازم اگه راستش رو بخواین من هنوز مطالب css سایت رو کامل نخوندم و میخوام هر روز حدالامکان دروس رو بخونم.
البته دیروز تو پرسش و پاسخهایی که دیدم و تست کردم به یه نکته خیلی جالبی برخوردم که شاید خیلی از دوستان ندونسته باشن که بعد از پاسخ به این سوال اون رو هم براتون مطرح می کنم.
آقای مهندس واقعا از دروس شما و بخصوص پرسش و پاسخهای شما ممنون و متشکرم. خیلی کاربردی و عالی هستن.
در خصوص همین قضیه فرزند و پدری و نحوه اعمال صحیح کدهای css ممنون میشم اگه منبعی رو نیز سراغ دارین برام معرفی کنین.
ببخشید زیاد مطلب نوشتم. عذرخواهی می کنم.

برداشت شما صحیح است، ضمن اینکه برای اعمال یک استایل برای چندین کلاس می توان از حالت زیر استفاده کرد:

.mydiv, .span{
   
}

در خصوص منبع لطفا در خصوص هر موضوعی که نیاز به اطلاعات بیشتر دارید، در وب (به فارسی و انگلیسی) جستجو کنید.

داوود

۰۷:۵۸ ۱۳۹۴/۰۳/۱۱

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

h1
font
span

و بعدش مقادیر مورد نظر رو طبق معمول {} بهش بدیم.
نکته ای که فرمودین معمولا نیازی به استفاده از تگ font درون بلاک div نیست، یعنی اینکه ما از h1 یا p یا span استفاده می کنیم این روزها، درست میگم؟؟ دیگه نیاز نیست که تگ فونت رو داخل div بنویسیم.
میشه نکته رو یه خورده بیشتر توضیح بدین؟؟ چون تو مثال شما اگه نیازی نباشه پس mydiv font . هم در واقع نباید به این شکل نوشته بشه. ببخشید.

بله، بر اساس اصول جدید وب توصیه می شود مواردی که مربوط به استایل و شکل ظاهری می شوند و با CSS قابل اعمال هستند، حتما به همین صورت استفاده شوند نه با کدهای HTML، در اینجا نیز می توان برای font از خاصیت های متفاوتی (بسته به نیاز) در CSS استفاده کرد (در قالب کلاس، آی دی و...)، از جمله font-family، font-size، color و... و لذا نباید از این تگ استفاده کرد.

داوود

۰۸:۳۳ ۱۳۹۴/۰۳/۱۰

سلام آقای مهندس، وقتتون بخیر و سپاسگزارم که مطالب خوب و کاربردی رو در اختیار ما قرار میدین. آقای مهندس طبق اولویت بندی اگه بخوایم کار کنیم، ابتدا style های inline در اولویت بالاتری هستند. بعدش style بندی که در بالای صفحه html نوشته شده باشه و بعدش style خارجی که به صفحه import شده باشه. درست دارم میگم دیگه ، آره؟؟
اگه پاسخ مثبت هستش پس چرا الان در این شبه کد، که مثال خودتون هم هستش، در مورد رنگ فونت درست داره اولویت بندی رو کار میکنه ولی اگه بیایم و به body یه پس زمینه رنگی بدیم از همین طریق، انگار میره و از اولویت دوم یعنی css بالای صفحه استفاده میکنه و inline رو اعمال نمیکنه.

<style type="text/css" media="screen">
body{
    background-color:#0099CC;
}
.mydiv{
    text-align:justify;
	direction:rtl;
	color:#003366
}
</style>
<!-- http://webgoo.ir -->
</head>
<body bgcolor="#000000">
<div class="mydiv">
<font color="red">نمایش متن بدون استفاده از css</font>
</div>
</body>
</html>

- منظور از استایل، در واقع ویژگی style یک تگ HTML است نه مواردی مانند bgcolor و...، به عبارتی مقایسه در صورتی صحیح است که به تگ body به این صورت استایل اختصاص دهید:

<body style="background-color:#000000">

- در مورد اینکه چرا برای body از استایل پیروی شده و برای font خیر، به این علت است که وقتی از سلکتور body در استایل CSS خود استفاده می کنید، به صورت مستقیم شامل تگ body در HTML می شود، اما برای تگ font استایل مستقیمی تعریف نکرده اید (هرچند درون کلاس mydiv قرار دارد) و لذا خاصیت های خود HTML در اولویت قرار می گیرند، اگر برای تگ font به این صورت کدها را ویرایش کنید، متوجه تغییرات خواهید شد:

.mydiv font{
    text-align:justify;
	direction:rtl;
	color:#003366
}

نکته: معمولا نیازی به استفاده از تگ font درون بلاک div نیست!

sajjad parhizkar

۱۱:۵۵ ۱۳۹۳/۱۰/۳۰

سلام باز من مزاحم شدم و به شما احتیاج دارم. شرمنده
ببخشید من مثل شما حرفه ای نیستم و دانشجوی نرم افزار تازه واردم.
من الان قالب سایتمو با css , html ساختمش اما یه سوال برام پیش اومده اساسی .
به نظر شما من هاست بخرم بعد از وردپرس استفاده کنم یا یک راست از زمپ ؟؟؟؟؟؟؟ به خدا دقیقا نمیدونم ازکجاش شروع کنم تجربه ندارم. اما به این مرحله که رسیدم توش موندم . یه کمی به خودم سخت میگیرم . ولی اصلا منظور از زمپ و نفهمیدم . اما کمکم کنید ممنونم از شما .

برای یادگیری نیازی به خرید هاست آنلاین نیست، نرم افزارهایی برای شبیه سازی محیط سرور در سیستم (لوکال هاست) وجود دارند که یکی از آنها برنامه XAMPP است، نرم افزار مناسب دیگر برنامه Wamp Server است (توصیه می کنیم)، با نصب و فعالسازی این قبیل برنامه ها، می توانید بدون اتصال به اینترنت از طریق مرورگر خود سایتتان را در localhost (یعنی در محیط سیستم عاملتان) پیکربندی و فراخوانی کنید.

amir

۱۳:۲۵ ۱۳۹۳/۰۴/۲۴

ببخشيد. من سورس اين صفحه رو نگاه كردم. و به يه مشكلي برخوردم. استفاده از شروط آي اي چه كاربردي داره و آيا تو كد نويسي ما تاثير مثبتي داره؟؟؟؟

آدرس صفحه درج نشده؟! برای دستورات شرطی IE لطفا در وب عبارت "دستورات شرطی مخصوص مرورگر IE" را جستجو کنید.

کیانی

۱۸:۴۵ ۱۳۹۳/۰۱/۱۴

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

از دو طریق این کار شدنی است، اول اینکه به جای div این حالت را برای تگ a در نظر بگیرید، برای اینکه تگ a قابل تنظیم باشد، از خاصیت display با مقادیر block (یا inline-block) برای آن استفاده کنید.
راه حل دوم قرار دادن تگ div درون تگ a است، به این ترتیب نیز بلاک مربوطه به صورت قابل کلیک و لینک شده نمایش داده می شود (در این حالت نیز ممکن است خاصیت display و طول و ارتفاع برای تگ a نیاز به مقداردهی باشد).

محمد

۲۲:۰۳ ۱۳۹۲/۱۲/۲۲

سلام
در css با انتخاب یک تگ یا گروهی از تگها بهشون استایل میدیم
مثلا وقتی میخوایم به تگ a استایل بدیم در قسمت انتخابگر مینویسیم
ولی من میخوام عملیاتی برای یک تگ در استایل تگ دیگری بنویسم مثلا بگم وقتی ماوس روی تگ a اومد تگ img بچرخه !
این کار با css شدنیه؟

بله، کافی است استایل را به صورت a img بنویسید که در این صورت استایل به تگ img که داخل a باشد اعمال می شود!
مثال:

a img {
 border:none;
}

بهنام

۱۷:۵۵ ۱۳۹۲/۱۲/۰۸

اگه امکانش هست این علامت ~ را هم در سی اس توضیح بدید چی کار میکنه

.switch-input:checked + .switch-label-on ~ .switch-selection{left:60px}

و علامت . بعد از یک چیزی مثلا

div.div{}

سلکتور ~ مشابه سلکتور + است با این تفاوت گه سلکتور + حالت strict یا سختگیرانه دارد، یعنی تنها عنصری را شامل می شود که بلافاصله بعد از عنصر اول آمده باشد، اما سلکتور ~ تمام تگ هایی که بعد از تگ اول آمده باشد را تا زمانی که تگ متفاوت دیگری بین آنها نباشد را شامل می شود.
استفاده از علامت نقطه، توالی تگ ها را نشان می دهد، به فرض div.div یعنی تگ div که قبل از آن تگ div دیگری باشد (در عمل تست کنید).

صفحه 2 از 3

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