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 مطالب بیشتر:
» کار با ویژگی های font و text در css
» نحوه تنظیم لیست با تگ ul li در css
» کار با Backgrounds و ویژگی های آن در CSS
» نحوه تنظیم لینک (link) در استایل css
» کاربرد خاصیت height و width در css
commentنظرات (۲۹ یادداشت برای این مطلب ارسال شده است)
نویسنده: ali
زمان: ۲۳:۲۱:۵۵ - تاریخ: ۱۳۹۱/۰۸/۰۱
سلام...
سه سالی میشه که دنبال اینجور وبی میگشتم..! ممنون بابت تمامی زحماتتون...
سبک آموزشتون خیلی خوبه...
واسه تشکر کوچیک یه هیدر خیلی ساده واستون زدم...
http://irphoto.ir/uploads/13509352071.gif
ببخشید که در مقابل زحماتتون خیلی کمه، راستش وقت زیادی واسه طراحی ندارم ...
اگه وقت کردی یه سر بزن...!
بازم ممنون...
یاعلی
پاسخ: 
سلام
نظر لطف شما است، ممنون که وقت گذاشتید، ارزش این کار شما نزد ما خیلی خیلی زیاد است.
نویسنده: setare
زمان: ۲۰:۱۷:۰۵ - تاریخ: ۱۳۹۱/۰۸/۰۲
سلام
ببخشید من تازه میخواهم کدنویسی با زبان css را شروع کنم. سوال من این است که برای نوشتن این کدهای CSS باید از چه نرم افزاری استفاده کنیم تا اجرا بگیریم؟
پاسخ: 
سلام
برای اجرای کدهای css به نرم افزار خاصی نیاز نیست، باید استایل خود را در یک صفحه html برای عناصر و تگ ها به کار ببرید و پس از ذخیره کردن فایل، در مرورگر آن را اجرا کرده و نتیجه کار خود را ببینید، به فرض اگر یک کلاس تعریف می کنید، آن کلاس را به یک تگ div نسبت دهید و فایل را با فرمت html ذخیره کرده و اجرا کنید.
نویسنده: shaian
زمان: ۲۲:۰۱:۰۳ - تاریخ: ۱۳۹۲/۰۶/۰۳
در ‏Dreamweaver‏ میشه از کدهای ‎ CSSاستفاده کرد.‏‎ ‎
پاسخ: 
منظورتان از استفاده مشخص نیست، دریم ویور صرفا یک محیط کدنویسی است که امکان نوشتن کدهای مربوط به وب (از جمله CSS) را فراهم می کند، اما از نظر استفاده، CSS را باید در داخل صفحات HTML استفاده کنید.
نویسنده: amir
زمان: ۱۵:۲۱:۱۸ - تاریخ: ۱۳۹۲/۱۱/۰۵
سلام
من شنیدم که اگه قالب سایت (وردپرسی) رو به css تبدیل کنیم سرعت باز شدن صفحات سایت بالا میره
لطفا یه پست راجع به افزایش سرعت باز شدن سایت بدون استفاده از پلاگین بذارید و راهنمایی کنید
*جواب روبه ایمیلم هم ارسال کنید*
همچنین چه جوری سئو سایت رو افزایش بدیم بدون این که از پلاگین خاصی استفاده کنیم
موفق باشید
یاحق
پاسخ: 
سلام
امروزه تقریبا تمام قالب های وب مبتنی بر ترکیب HTML و استایل CSS طراحی می شوند، چیزی به عنوان تبدیل به CSS وجود ندارد!
در مورد سئو نیز هیچ ترفند معجزه گری وجود ندارد، باید مجموعه ای از قواعد مربوط به بهینه کردن صفحات وب را بیاموزید که شامل مباحث زیادی می شود (به بخش بهینه سازی و همچنین منابع مرتبط با سئو مراجعه کنید).
نویسنده: بهنام
زمان: ۰۲:۴۳:۱۶ - تاریخ: ۱۳۹۲/۱۲/۰۸
سلام خسته نباشید
میشه به من بگین نقش + در سی اس اس چیست ؟ برای نمونه
.sgender input[type=radio] + label, input[type=checkbox] + label {}
پاسخ: 
سلام
علامت + یا plus برای مشخص کردن دقیق عنصری است که قصد اعمال استایل بر روی آن را داریم، به فرض حالت زیر را در نظر بگیرید:
h1 + p {font-weight: bold;}
این استایل تنها به تگ p اختصاص می یابد که بلافاصله بعد از h1 آمده باشد، در مورد استایل شما تنها به label هایی اختصاص می یابد که بلافاصله بعد از input از نوع radio یا checkbox آمده باشد.
نکته: این دستورات ممکن است در برخی مرورگر ها مانند IE 6 به خوبی عمل نکنند.
نویسنده: بهنام
زمان: ۱۶:۰۵:۴۶ - تاریخ: ۱۳۹۲/۱۲/۰۸
بله متوجه شدم ممنون از راهنماییتون
میشه بجای علامت پلاس از علامت اسپیس یا همون خط فاصله استفاده کرد هر دوش یکی هستش درسته؟
h1 + p {font-weight: bold;}
h1 p {font-weight: bold;}
اگه نه فرقشون رو بگین لطفا
پاسخ: 
طبق توضیح سایت w3.org حالت دوم (فاصله) تمام تگ های p که درون تگ h1 باشند را شامل می شود (یعنی حتی اگر بین تگ های تو در توی دیگری باشند)، اطلاعات بیشتر:
http://www.w3.org/TR/CSS21/selector.html
این مورد را باید با تست های بیشتر به صورت عملی درک کنید.
نویسنده: بهنام
زمان: ۱۷:۵۵:۵۱ - تاریخ: ۱۳۹۲/۱۲/۰۸
اگه امکانش هست این علامت ~ را هم در سی اس توضیح بدید چی کار میکنه
.switch-input:checked + .switch-label-on ~ .switch-selection{left:60px}
و علامت . بعد از یک چیزی مثلا
div.div{}
پاسخ: 
سلکتور ~ مشابه سلکتور + است با این تفاوت گه سلکتور + حالت strict یا سختگیرانه دارد، یعنی تنها عنصری را شامل می شود که بلافاصله بعد از عنصر اول آمده باشد، اما سلکتور ~ تمام تگ هایی که بعد از تگ اول آمده باشد را تا زمانی که تگ متفاوت دیگری بین آنها نباشد را شامل می شود.
استفاده از علامت نقطه، توالی تگ ها را نشان می دهد، به فرض div.div یعنی تگ div که قبل از آن تگ div دیگری باشد (در عمل تست کنید).
نویسنده: محمد
زمان: ۲۲:۰۳:۴۷ - تاریخ: ۱۳۹۲/۱۲/۲۲
سلام
در css با انتخاب یک تگ یا گروهی از تگها بهشون استایل میدیم
مثلا وقتی میخوایم به تگ a استایل بدیم در قسمت انتخابگر مینویسیم
ولی من میخوام عملیاتی برای یک تگ در استایل تگ دیگری بنویسم مثلا بگم وقتی ماوس روی تگ a اومد تگ img بچرخه !
این کار با css شدنیه؟
پاسخ: 
سلام
بله، کافی است استایل را به صورت a img بنویسید که در این صورت استایل به تگ img که داخل a باشد اعمال می شود!
مثال:
a img {
border:none;
}
نویسنده: کیانی
زمان: ۱۸:۴۵:۴۱ - تاریخ: ۱۳۹۳/۰۱/۱۴
سلام
ببخشید که اینجا این سوال رو مطرح می کنم
من یک دایو دارم که درونش چندتا عکس هستش
به طور مثال یک دایو درست کردم که مثلا طول و عرضش 200 در 200 است و درون این دایو چند تا عکس گذاشتم من میخوام این دایو رو لینک دار کنم
یعنی هر وقت موس بر روی کادر دایو قرار گرفت علامت موس به شکل دست در بیاد
ممنون میشم اگر راهنمایی کنید
پیروز باشید
پاسخ: 
سلام
از دو طریق این کار شدنی است، اول اینکه به جای div این حالت را برای تگ a در نظر بگیرید، برای اینکه تگ a قابل تنظیم باشد، از خاصیت display با مقادیر block (یا inline-block) برای آن استفاده کنید.
راه حل دوم قرار دادن تگ div درون تگ a است، به این ترتیب نیز بلاک مربوطه به صورت قابل کلیک و لینک شده نمایش داده می شود (در این حالت نیز ممکن است خاصیت display و طول و ارتفاع برای تگ a نیاز به مقداردهی باشد).
نویسنده: amir
زمان: ۱۳:۲۵:۰۵ - تاریخ: ۱۳۹۳/۰۴/۲۴
ببخشيد. من سورس اين صفحه رو نگاه كردم. و به يه مشكلي برخوردم. استفاده از شروط آي اي چه كاربردي داره و آيا تو كد نويسي ما تاثير مثبتي داره؟؟؟؟
پاسخ: 
کدام صفحه دوست گرامی؟! برای دستورات شرطی IE لطفا در وب عبارت "دستورات شرطی مخصوص مرورگر IE" را جستجو کنید.
نویسنده: sajjad parhizkar
زمان: ۱۱:۵۵:۰۳ - تاریخ: ۱۳۹۳/۱۰/۳۰
سلام باز من مزاحم شدم و به شما احتیاج دارم. شرمنده
ببخشید من مثل شما حرفه ای نیستم و دانشجوی نرم افزار تازه واردم.
من الان قالب سایتمو با css , html ساختمش اما یه سوال برام پیش اومده اساسی .
به نظر شما من هاست بخرم بعد از وردپرس استفاده کنم یا یک راست از زمپ ؟؟؟؟؟؟؟ به خدا دقیقا نمیدونم ازکجاش شروع کنم تجربه ندارم. اما به این مرحله که رسیدم توش موندم . یه کمی به خودم سخت میگیرم . ولی اصلا منظور از زمپ و نفهمیدم . اما کمکم کنید ممنونم از شما .
پاسخ: 
سلام
برای یادگیری نیازی به خرید هاست آنلاین نیست، نرم افزارهایی برای شبیه سازی محیط سرور در سیستم (لوکال هاست) وجود دارند که یکی از آنها برنامه XAMPP است، نرم افزار مناسب دیگر (توصیه می کنیم) برنامه Wamp Server است، با نصب و فعالسازی این قبیل برنامه ها، می توانید بدون اتصال به اینترنت از طریق مرورگر خود سایتتان را در localhost (همان کامپیوتر شخصی) پیکربندی و فراخوانی کنید.
نویسنده: داوود
زمان: ۰۸:۳۳:۵۳ - تاریخ: ۱۳۹۴/۰۳/۱۰
سلام آقای مهندس، وقتتون بخیر و سپاسگزارم که مطالب خوب و کاربردی رو در اختیار ما قرار میدین. آقای مهندس طبق اولویت بندی اگه بخوایم کار کنیم، ابتدا 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 نیست!
نویسنده: داوود
زمان: ۰۷:۵۸:۴۵ - تاریخ: ۱۳۹۴/۰۳/۱۱
سلام آقای مهندس عزیز، واقعا ممنون و خوشحال شدم از اینکه پاسختون رو در اواخر شب دیدم. یه دنیا ممنون و سپاس.
آقای مهندس برای اینکه مطلب بیشتر برام جا بیفته با اینجور که شما فرمودین، پس چون من به طور مستقیم تگی رو در css ننوشته بودم اونجوری بود. یعنی باید مثلا اینجوری بنویسیم که کل تگها رو در بر بگیره:
h1
font
span
و بعدش مقادیر مورد نظر رو طبق معمول {} بهش بدیم.
نکته ای که فرمودین معمولا نیازی به استفاده از تگ font درون بلاک div نیست، یعنی اینکه ما از h1 یا p یا span استفاده می کنیم این روزها، درست میگم؟؟ دیگه نیاز نیست که تگ فونت رو داخل div بنویسیم.
میشه نکته رو یه خورده بیشتر توضیح بدین؟؟ چون تو مثال شما اگه نیازی نباشه پس mydiv font . هم در واقع نباید به این شکل نوشته بشه. ببخشید.
پاسخ: 
سلام
بله، بر اساس اصول جدید وب توصیه می شود مواردی که مربوط به استایل و شکل ظاهری می شوند و با CSS قابل اعمال هستند، حتما به همین صورت استفاده شوند نه با کدهای HTML، در اینجا نیز می توان برای font از خاصیت های متفاوتی (بسته به نیاز) در CSS استفاده کرد (در قالب کلاس، آی دی و...)، از جمله font-family، font-size، 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. واقعا جالب بود برام. آیا شما در این باره چیزی شنیده بودین؟؟
تو این آدرس یه مثال گذاشتم:
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 باشد و در دیگری خیر) یا نوع دستور متفاوت باشد (این یک اصل کلی است، در طراحی واقعی معمولا نیاز چندانی به استفاده از عناصر مشابه نیست و جنبه کاربردی زیادی ندارد!)
paged صفحه 1 از 2




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

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

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