i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت به کلی متفاوت و کاملتر خواهد بود، این فرآیند زمانبر و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی مشخص است و به تناوب به روزرسانی می شود.
parsgreen.com
article

مقدمه ای بر CSS، جادوگر طراحی وب!

css-magic

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

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


کد زیر بدون استفاده از CSS فرمت بندی شده است (برای تست کافی است کد را در یک ویرایشگر متنی یا HTML کپی و ذخیره کنید):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | صفحه وب بدون استفاده از css</title>
<!-- http://webgoo.ir -->
</head>
<body bgcolor="#0099CC">
<div align="justify" dir="rtl">
<font color="#003366">
نمایش متن بدون استفاده از css
</font>
</div>
</body>
</html>

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


و همان کد با استفاده از CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | صفحه وب با استفاده از css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    background-color:#0099CC;
}
.mydiv{
    text-align:justify;
    direction:rtl;
    color:#003366;
}
</style>
</head>
<body>
<div class="mydiv">
نمایش متن با استفاده از css
</div>
</body>
</html>
قدرت این زبان به قابلیت ایجاد حالت های گوناگون و تعریف کلاس (CLASS) و آی دی (ID) است، به اینصورت که مثلا با تعریف یک کلاس، از آن در صفحات مختلف و بدون تکرار کدنویسی، استفاده می کنیم.
دو صفحه زیر هر دو از یک فایل CSS استفاده می کنند که در صفحه مورد نظر به اصطلاح ایمپورت شده اند (در این باره در مطالب بعدی بیشتر خواهیم گفت)،  و واضح است که این کار تا چه حد در ذخیره وقت و بالا بردن قدرت مانورمان موثر است (تا جایی که دیگر کسی به طراحی وب بدون CSS فکر نمی کند!).
صفحه اول
صفحه دوم
توضیح:
- css یک زبان کمکی است، یعنی به خودی خود کاربرد خاصی ندارد، ولی به تگ های html شکل و قالب می دهد.
- برای دیدن و مقایسه کد صفحات، کلیک راست و view source را انتخاب کنید.
- کد های css یا به صورت درون صفحه ای است یا ایمپورت به صورت فایل خارجی (شیوه استاندارد).
- تگ style برای ایجاد کدهای css داخلی کاربرد دارد.
- برای ایمپورت یک فایل css خارجی، از کد link و خاصیت های آن، درون تگ head استفاده می کنیم.
sectionدسته بندی: آموزش مقدماتی » CSS
related مطالب بیشتر:
» کار با ویژگی margin و padding در css
» کاربرد خاصیت display در CSS
» کار با border و outline در css
» آشنایی با کلاس (class) و آی دی (id) در css
» کاربرد خاصیت height و width در css
commentنظرات (۳۰ یادداشت برای این مطلب ارسال شده است)
نویسنده: داوود
زمان: ۰۸:۲۵:۳۸ - تاریخ: ۱۳۹۴/۰۳/۱۲
سلام آقای مهندس؛ عیدتون مبارک باشه؛ آقای مهندس ضمن قدردانی از حضرتعالی در خصوص پاسخدهی به سوالات من ، اشکال نداره من سوالام داره زیاد میشه؟؟ اگه روزی یک دونه بپرسم ایراد نداره؟؟ از نظر پاسخدهی عجله ای ندارم فقط از نظر شما میخواستم ببینم زحمتی نیست براتون!!!
پاسخ: 
سلام
تشکر، در صورت رعایت قوانین بخش ارسال یادداشت، مشکلی از نظر طرح سوال وجود ندارد.
نویسنده: داوود
زمان: ۱۱:۳۳:۲۸ - تاریخ: ۱۳۹۴/۰۴/۱۵
سلام استاد عزیزم؛ وقتتون بخیر و خوشی انشاالله
آقای مهندس من داشتم در خصوص 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 برای هدایت کردن عناصر زیرین به انتهای عناصر شناور استفاده می شود.
نویسنده: داوود
زمان: ۱۱:۴۸:۴۰ - تاریخ: ۱۳۹۴/۰۴/۱۶
سلام آقای مهندس، وقتتون بخیر؛
در اینجا که فرمودین "اگر از 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 شده هدایت می کند).
نویسنده: داوود
زمان: ۱۰:۵۶:۱۳ - تاریخ: ۱۳۹۴/۰۵/۱۲
سلام؛
آقای مهندس یه جا دیدم یه تعریف از import رو اینجوری نوشته بود:
"با استفاده از دستور import@ می توان دستورات css را به هر دو صورت استایل داخلی و استایل خارجی در یک فایل وارد کرد"
میخواستم ببینم درست نوشته؟ آخه ما دستوراتمون یا خارجی هستش یا داخلی یا Inline ، اینکه اینجوری نوشته یعنی در واقع به چه منظوری هستش؟؟
<style type="text/css">
@import url(style.css)
</style>
پاسخ: 
سلام
شاید منظور نویسنده این بوده که دستور import علاوه بر صفحه HTML (بین تگ style) در خود فایل CSS نیز قابل استفاده است، البته بهتر است خیلی به فکر استفاده از این دستور منسوخ شده نباشید!
نویسنده: amirARSHAN
زمان: ۱۹:۳۱:۴۹ - تاریخ: ۱۳۹۴/۰۵/۱۳
سلام؛ خسته نباشید. می خواستم بدونم که زبان css به حروف بزرگ و کوچک حساس است؟ (لطفا پاسخ را به ایمیل بنده ارسال نمایید)
پاسخ: 
سلام
خیر، CSS به حروف بزرگ یا کوچک حساس نیست!
نویسنده: داوود
زمان: ۰۹:۴۸:۱۴ - تاریخ: ۱۳۹۴/۰۶/۰۷
سلام آقای مهندس، صبحتون بخیر و خوشی
استاد یه سوال داشتم ازتون، این سایت رو ببینید:
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 نیز باید به کار گرفته شوند.
نویسنده: فرهاد ف
زمان: ۱۸:۱۷:۰۱ - تاریخ: ۱۳۹۴/۰۸/۰۴
با عرض سلام
خیلی خوشحالم که امروز با سایت خوب و وزین شما آشنا شدم؛ با پوزش برخی سوالاتم رو ازتون میپرسم. استاد چرا در این کدی که من نوشتم کد 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
نکته: علامت . برای کلاس استفاده می شود!
نویسنده: بهنام
زمان: ۱۰:۴۴:۳۳ - تاریخ: ۱۳۹۴/۰۸/۰۵
سلام استاد عزیز
تشکر میکنم بابت جوابایی که دادین مشکلاتم به تدریج حل شد امیدوارم همیشه موفق باشید...
سوالی راجع به direction داشتم و در input کاربر که فونت کامپیوترش روی فارسی باشه خود به خود direction از راست به چپ تنظیم شه و هر زمان که روی انگلیسی گذاشت direction از چپ به راست تنظیم شه و text-align نیز از چپ و در شرایط فارسی از راست ایا همچین امکانی هست؟؟
پاسخ: 
سلام
برای تغییر direction لطفا مطلب زیر را مطالعه کنید:
http://imohsen.net/change-input-direction-depend-on-language/
برای تغییر text-align می توانید نمونه کد زیر را با کد بالا ترکیب کنید:
 document.getElementById("id").style.textAlign = "left";
نویسنده: فرهاد ف
زمان: ۱۸:۰۰:۰۵ - تاریخ: ۱۳۹۴/۰۸/۰۵
درود استاد؛
حرف شما کاملا درست هستش. پس چرا این کد پاسخ نمیده:
کد css :
p .span{
color:green;
}
و کد html:
<p><div class="span">into p tag and span class</div></p>
و یا حتی این کد تغییر یافته css :
p div.span{
color:green;
}
و باز هم همون کد Html خط بالاتر:
<p><div class="span">into p tag and span class</div></p>
مزید امتنان است اگه هر دو تا مثال css رو با کد html ی که اعمال میشه بهش برام توضیح بدید.
البته میشه با این کد جواب گرفت ولی من هدفم این هستش که چرا با گذاشتن div انگار مشکل پیدا میشه.
پاسخ: 
سلام
استفاده از تگ div درون تگ p به لحاظ استاندارد HTML w3.org صحیح (valid) نیست، تگ p صرفا می تواند تگ های inline مانند span را درون خود داشته باشد!، برای پی بردن به معتبر بودن کدنویسی HTML می توانید به آدرس زیر مراجعه کنید:
https://validator.w3.org
نویسنده: فرهاد ف
زمان: ۱۸:۱۴:۳۸ - تاریخ: ۱۳۹۴/۰۸/۰۵
استاد این کد را هم مشاهده کنید:
p div.myspan{
background-color: blue;
}
الان چرا این کد از بالایی تاثیر نمی گیرد؟
<p><div class="myspan">test</div></p>
پاسخ: 
قبلا گفتیم که تگ div نمی تواند داخل تگ p استفاده شود!
نویسنده: بهنام
زمان: ۱۹:۳۳:۲۰ - تاریخ: ۱۳۹۴/۰۸/۰۵
راجع به سوال کاربر اخری
p.span
p .span
فرق میکنند یا هر دو یکی هستند؟
پاسخ: 
- وقتی سلکتور را به شکل div.class استفاده می کنید، یعنی کلیه div هایی را انتخاب کن که کلاس مورد نظر را داشته باشند.
- وقتی سلکتور را به شکل div .class استفاده می کنید، یعنی کلیه تگ هایی که کلاس مورد نظر را داشته و در تگ div نیز قرار گرفته باشند را انتخاب کن.
نکته: این قواعد در صورتی عمل می کنند که کدنویسی HTML شما معتبر یا به اصطلاح Valid باشد.
نویسنده: غریب
زمان: ۰۳:۳۶:۵۴ - تاریخ: ۱۳۹۵/۰۲/۲۳
سلام عزیز
در دو نمونه ای که گذاشتید ذکر کردید بارگذاری صفحه ای که از استایل خارجی استفاده میکنه بهتره حجم صفحات پایین میاد کاملا درسته ولی ایا خود فراخوانی فایل سی اس اس بارگذاری صفحه رو کندتر نمیکنه ؟
یعنی مرورگر جای اینکه بره فایل رو فراخونی کنه و بخونه و بعد برگرده صفحه رو بخونه ایا سی اس اس همون داخل باشه این کار سریعتر اتفاق نمیفته ؟ اخه تا الان اعتقاد من این بوده و متاسفانه همین کارم کردم در بعضی جاها حتی جاوا اسکریپت رو ممنون میشم تجربتون رو در اختیارم بزارید در این خصوص مرسی و موفق باشید
پاسخ: 
با توجه به اینکه پس از یک بار فراخوانی فایل ها، اطلاعات در حافظه موقت و در سیستم نگهداری می شوند، در صفحات دیگر از سایت دیگر نیازی به بارگذاری مجدد همان فایل ها نیست و سرور با ارسال تاریخ آخرین ویرایش فایل در سربرگ های HTTP، به مرورگر این امکان را می دهد که صرفا در صورت تغییر فایل، نسخه جدید را بارگذاری نماید، اما در حالتی که کدها داخل صفحه باشند، مرورگر در هر بارگذاری باید کل محتوا را دانلود کند که این از نظر اصول حرفه ای و بهینه سازی صحیح نیست!
نویسنده: غریب
زمان: ۰۳:۰۶:۲۱ - تاریخ: ۱۳۹۵/۰۲/۲۴
واقعا ممنون استاد این مورد رو واقعا نمیدونستم ممنون کمک بزرگی کردید من هر وقت سوالی داشته باشم به سایت شما سر میزنم چون از نظر علمی در این مورد واقعا قبولتون دارم پس مزاحمتهام رو ببخشید
موفق باشید
پاسخ: 
ممنون نظر لطف شما است، جای خوشحالی است اگر بتوانیم کمکی کنیم.
نویسنده: محمد
زمان: ۲۱:۱۸:۱۴ - تاریخ: ۱۳۹۵/۰۴/۱۷
سلام سايت شما واقعا عاليه خدا خيرتون بده انشاالله موفق باشيد
محمد
مدير سايت مجله شلوغ
نویسنده: mojtabaabdi
زمان: ۱۴:۴۴:۲۰ - تاریخ: ۱۳۹۵/۱۰/۱۲
سلام یه سایت دادم یه نفر برام نوشته با css و html این سایتو خودش بارگذاری کرد و رفت سایتو من deactive کردم الان بعد از حدود 1 ماه میخوام همون کد هارو بارگذاری کنم ولی متاسفانه بعد از بارگذاری کلا 4 تا نوشته میاد نه خبری از جدولا هست و نه از عکس ها ممنون از سایت خوبتون
پاسخ: 
حل این نوع مشکلات نیاز به بررسی دقیق سایت شما است، صرفا با شرح ماجرا نمی توان نظر خاصی ارائه کرد!
paged صفحه 2 از 2




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

9 × 7
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...
پرشین آی تی
Persianit.net

آموزش و دانلود پروژه های برنامه نویسی سی شارپ (#C)