تحلیل کد سی اس اس [بایگانی]

csharpprogramer88

پنج شنبه 26 بهمن 1391, 15:27 عصر

div#outerDiv{
width: 500px;
height: 100px;
border-right-color: red;
border-right-width: 2px;
border-right-style: dashed;

border-left-color: blue;
border-left-width: 1px;
border-left-style: solid;
margin: 0 auto;
}

#innerDiv{
width: 400px;
height: 80px;
margin-left: 10px;
margin-top: 10px;

border-color: green;
border-width: 1px;
border-style: dotted;
}
#coverDiv{
width: 300px;
height: 50px;
margin: 10px 5px 3px 10px;
border: 1px black solid;
}

سلام
من تازه دارم سی اس اس یاد میگیرم لطف کنید و خط به خط برایم تحلیل کنید

با تشکر

tamafi6

پنج شنبه 26 بهمن 1391, 16:16 عصر

این کتاب رامطالعه کن به جواب میرسی
http://veyq.ir/book/id/11130/%D8%AF%D8%A7%D9%86%D9%84%D9%88%D8%AF-%DA%A9%D8%AA%D8%A7%D8%A8-%D9%85%D8%B1%D8%AC%D8%B9-%D9%81%D8%A7%D8%B1%D8%B3%DB%8C-CSS-2

csharpprogramer88

پنج شنبه 26 بهمن 1391, 16:46 عصر

این کتاب رامطالعه کن به جواب میرسی
http://veyq.ir/book/id/11130/%D8%AF%D8%A7%D9%86%D9%84%D9%88%D8%AF-%DA%A9%D8%AA%D8%A7%D8%A8-%D9%85%D8%B1%D8%AC%D8%B9-%D9%81%D8%A7%D8%B1%D8%B3%DB%8C-CSS-2

دوست عزیز چند تا یی کتاب و مطالب سایت خوندم چون با اصول سی اس اس آشنا نیستم نمیتونم کد ها رو خوب تحلیل کنم و بعضی جاهاش برام گنگه

width: 500px; height: 100px;

این دو خط احتمالا داره یه محدووده را مشخص میکنه حالا چطور میشه که دو خط موازی هم اینجا شکل میگیره؟ چطور میشه در یک div خصوصیت دو تا خط را تعریف کرد؟

dr.undead

پنج شنبه 26 بهمن 1391, 17:17 عصر

برای ایجاد دو خط موازی میتونی با تگ <hr> یا خاصیت css > border-top و border-bottom استفاده کنی
سوالتو واضحتر بپرس

csharpprogramer88

پنج شنبه 26 بهمن 1391, 17:30 عصر

برای ایجاد دو خط موازی میتونی با تگ <hr> یا خاصیت css > border-top و border-bottom استفاده کنی
سوالتو واضحتر بپرس

میخوام برام این کد را توضیح بدید دقیقا داره چیکارا میکنه فک میکنم داره دو سه تا کادر میکشه اینجوریه؟

tamafi6

پنج شنبه 26 بهمن 1391, 18:14 عصر

width: 300px;
height: 100px;
مقداراندازه طول وعرض

border-right-color: red;
رنگ خط راست قرمز

border-right-width: 2px;
قطرخط سمت راست 2px

border-right-style: dashed;
شکل وشمایل خط به صورت خط چین

border-left-color: blue;
رنگ خط سمت چپ آبی

border-left-width: 1px;
قطرخط سمت چپ 1px

border-left-style: solid;
شکل وشمایل خط سمت چپ ساده

margin: 0 auto;
محل قرارگیری ازبالا0px وسط

.innerDiv{
margin-left: 10px;
margin-top: 10px;
border-color: green;
border-width: 1px;
border-style: dotted;
}
به ترتیب محل قرارگیری ازسمت چپ 10pxازبالا10pxرنگ خطوط سبز-قطرخط 1px-شکل وشمایل خط نقطه چین واین

.coverDiv{
width: 300px;
height: 50px;
margin: 10px 5px 3px 10px;
border: 1px black solid;
}
به ترتیب مقدارطول وعرض یک مکعب 300در50پیکسل-محل قرارگیری ازچهارسمت باmarginوخط چهارم یک خط به قطر1px رنگ سیاه وشکل خط ساده

csharpprogramer88

شنبه 28 بهمن 1391, 08:01 صبح

width: 300px;
height: 100px;
مقداراندازه طول وعرض

border-right-color: red;
رنگ خط راست قرمز

border-right-width: 2px;
قطرخط سمت راست 2px

border-right-style: dashed;
شکل وشمایل خط به صورت خط چین

border-left-color: blue;
رنگ خط سمت چپ آبی

border-left-width: 1px;
قطرخط سمت چپ 1px

border-left-style: solid;
شکل وشمایل خط سمت چپ ساده

margin: 0 auto;
محل قرارگیری ازبالا0px وسط

.innerDiv{
margin-left: 10px;
margin-top: 10px;
border-color: green;
border-width: 1px;
border-style: dotted;
}
به ترتیب محل قرارگیری ازسمت چپ 10pxازبالا10pxرنگ خطوط سبز-قطرخط 1px-شکل وشمایل خط نقطه چین واین

.coverDiv{
width: 300px;
height: 50px;
margin: 10px 5px 3px 10px;
border: 1px black solid;
}
به ترتیب مقدارطول وعرض یک مکعب 300در50پیکسل-محل قرارگیری ازچهارسمت باmarginوخط چهارم یک خط به قطر1px رنگ سیاه وشکل خط ساده

div#outerDiv{
width: 500px;
height: 100px;
border-right-color: red;
border-right-width: 2px;
border-right-style: dashed;

border-left-color: blue;
border-left-width: 1px;
border-left-style: solid;
margin: 0 auto;
}

با تشکر از توضیح کامل شما
این چند خط کد داره 2 خط موازی بصورت عمودی ایجاد میکنه ، آیا این یعنی من هر جا از outerDiv در صفحه HTML استفاده کنم ، دو خط عمود موازی در صفحه HTML رسم میشه؟

tamafi6

شنبه 28 بهمن 1391, 10:56 صبح

نخيركدبالايك مكعب هست كه چون براي اون رنگ پس زمينه قرارنداده ودوتاضلع اون راخط قرارداده اونطوربه نظرميادبراي رسم خط كافيه ازاين كداستفاده كني

<div style="border-left:2px #000000 solid; height:40px"> </div>

pnusharp

دوشنبه 30 بهمن 1391, 01:47 صبح

نخيركدبالايك مكعب هست كه چون براي اون رنگ پس زمينه قرارنداده ودوتاضلع اون راخط قرارداده اونطوربه نظرميادبراي رسم خط كافيه ازاين كداستفاده كني

<div style="border-left:2px #000000 solid; height:40px"> </div>

منظوردوستمون اینه که 2 بار این div رو به این صورت پشت سرهم کد بزنی:

<div style="border-bottom:2px #000000 solid; height:40px"> </div>
border-botoom بجا border-left. البته همونطور که همه میدونیم، میشه با دو بار تایپ </hr> هم دو خط موازی زد.