موضوع: css

**~~sm_pakdel~~** · March 22nd, 2011, 17:10

سلام
خلاء قسمت آموزش سی اس اس در این انجمن احساس میشه که اگر لطف کنید و راه اندازی کنید ممنون می شم
در ضمن من چون سی اس اس بلد نیستم می خواستم بدونم چطور میشه از یک نقطه تا نقطه دیگری رو با کنک سی اس اس رنگ خاصی کرد
بطور مثال من می خوام یک مستطیل به عزض 600 و طول 90 رو با رنگ قرمز در صفحم داشته باشم چطور باید این کار رو انجام بدم؟

**EXXXIR** · March 22nd, 2011, 17:39

با سلام بستگی داره می خواین به چه روشی ایجاد کنید این یک مثال هست:

کد HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<style>
.sample
{
height:600px;
width:90px;
background-color:red;
}
</style>

<div class="sample">sina</div>

این مستطیل با دیو ایجاد شده و ابعاد و رنگ هم با سی اس اس که تو کد میبنید برای کلاس sample تعریف شده.

**~~e-741~~** · March 22nd, 2011, 17:50

برای اینکار شکل اول باید یه کد داخل بخش body بنویسید :

کد HTML:

<div class="ex"></div>

توضیح : بین دو تگ متنی که میخوای بزاری رو بنویس، یا کد html دیگه ای اگه مد نظرته.
حالا باید استایل براش تعریف کنی.
برای تعریف استایل در تگ <head></head> بنویس، <style></style>.
خب اگه از استایل internal استفاده کنی، داخل style از این کد استفاده کن :

کد HTML:

div.ex
{
width:870px;
padding:10px;
border:5px solid gray;
margin:5px;
height:60px;
}

توضیح :
بین محتوا و حاشیه (border) فاصله ای وجود دارد، که بهش padding می گویند، کار padding فاصلۀ بین محتوا را تعیین می کند، مثلا می خوای متن یا کد از حاشیه 5 پیکسل فاصله داشته باشه، باید مقدار padding رو برابر 5 پیکسل بزاری، حالا فاصلۀ کل این مستطیلی که می خوایم بسازیم، از اجسام اطراف رو با margin تعیین می کنیم.
دستوری که نوشته border میزان حاشیه را مشخص کرده و نوع آن که اینجا یک خط هست دور محتوا، می توان dotted یعنی نقطه های کنار هم دور محتوا (حاشیه)، یا dashed یعنی حاشیه خط های تیره باشد، استفاده شود و gray رنگ حاشیه است.
طول و عرض نداریم (من نشنیدم شاید باشه)، برای عرض و ارتفاع به ترتیب از width و height استفاده کن.
خب وقتی می خوای محاسبه کنی از فرمول زیر استفاده کن :
عرض کل : عرض + پدینگ و مارجین و حاشیه در سمت چپ و راست، که انگلیسی هم می نویسم :
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
برای ارتفاع کل هم مانند بالا عمل می کنیم :
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
توضیح : من تو کدهایی که قرار دادم، این محاسبه رو انجام ندادم، و فقط برای اینکه نحوۀ ساخت رو بدونین، کد رو نوشتم.

**Woshka** · March 22nd, 2011, 17:52

برای رسم یک مربع از css استفاده نمی کنند معمولا ولی در html5 این خصوصیات به رسم مربع اضافه شده مثل
<canvas style="border: 1px solid rgb(00, 00, 00);background-color:#000000;" height="100" width="200" id="myCanvas">
همش html5 هستش و border: 1px solid rgb(00, 00, 00);background-color:#000000; بخش css وان هستش که هاشیع و رنگ داخلشو معیین می کنه
درcss3 نیز امکان رنگ های gradiant اضافه شده که میشه رنگ های جالبی به جای رنگ ساده اضافه کرد

امیدوارم کمک کرده باشه

**~~sm_pakdel~~** · March 22nd, 2011, 18:40

نوشته اصلی توسط Woshka

برای رسم یک مربع از css استفاده نمی کنند معمولا ولی در html5 این خصوصیات به رسم مربع اضافه شده مثل
<canvas style="border: 1px solid rgb(00, 00, 00);background-color:#000000;" height="100" width="200" id="myCanvas">
همش html5 هستش و border: 1px solid rgb(00, 00, 00);background-color:#000000; بخش css وان هستش که هاشیع و رنگ داخلشو معیین می کنه
درcss3 نیز امکان رنگ های gradiant اضافه شده که میشه رنگ های جالبی به جای رنگ ساده اضافه کرد

امیدوارم کمک کرده باشه

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

**Woshka** · March 22nd, 2011, 18:53

در css3 میشه اینکار رو کرد

**~~sm_pakdel~~** · April 15th, 2011, 01:15

یه سوال داشتم م خواستم بدونم آیا میشه با س اس اس 3 استایل تعریف کرد و هر 3 استایل رو به یک تگ div داد؟
اگر میشه چطور ی؟

**Woshka** · April 15th, 2011, 01:20

اگر من درست متوجه منظورتون شده باشم آره میشه
چرا 3 تا استایل
خوب یکی بساز بده به اون تگ div

موضوع: css

ابزارهای موضوع

نحوه نمایش موضوع

css

پاسخ : css

تعداد تشکر ها از EXXXIR به دلیل پست مفید

پاسخ : css

تعداد تشکر ها از e-741 به دلیل پست مفید

پاسخ : css

تعداد تشکر ها از Woshka به دلیل پست مفید

پاسخ : css

پاسخ : css

پاسخ : css

پاسخ : css

اطلاعات موضوع

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

مجوز های ارسال و ویرایش