نمایش نسخه قابل چاپ
با سلام به همه دوستان جوملا کار و اعضای محترم انجمن جوملا فارسی
در این تایپیک قصد دارم به معرفی کدهای سی اس اس نسخه های 1 و 2 و 3 بپردازم!
لطفا از طرح سوال در این بپرهیزید و در صورتی که از مطلبی خوشتون اومد از کلید تشکر استفاده کنید!
ممنون از همگی دوستان :d
سلام
به جوملا فارسی خوش آمدید.
اگر مطالب آموزشی دارید البته با ذکر منبع می تونید در [مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید] منتشر کنید.
موفق باشید
ابتدا از نحوه بارگذاری یک فایل سی اس اس در وب شروع میکنیم
برای این کار سه راه وجود دارد
1- بارگذاری از فایل سی اس اس
2- درج کد های سی اس اس در صفحه مورد نظر
3- درج کد استایل شی مورد نظر
پیشنهاد من راه اول هست
برای راه کد زیر را در قسمت head سایت (قالب) قرار بدید:
<link rel="stylesheet" type="text/css" href="mystyle.css" />
برای راه دوم از کد زیر در قسمت head استفاده کنید:
<style type="text/css"> مجل درج کدهای سی اس اس </style>
و راه سوم: برای مثال درج سی اس اس برای یک پاراگراف
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>
منبعش خودمم مشکلی نداره همینجا ذکر کنم؟ درج در دانشنامه چطوریه؟نقل قول:
نوشته اصلی توسط hamidy [مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]
سلام
اگر با ویکی اشنایی ندارید از [مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید] استفاده کنید .
مطالب آموزشی رو در رده های خاص خودش قرار بدید.
موفق باشید
اگه مشکلی نداره همینجا بزارم اگر داره هم کلا نذارم :dنقل قول:
نوشته اصلی توسط hamidy [مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]
سلام
آموزش ها باید دارای هدف و عنوان مناسب باشد.
اگر با فرمت ویکی آشنایی ندارید، مشکلی نیست همینجا قرار بدید. سعی کنید تا محتوا کامل باشه
موفق باشید
تشکرنقل قول:
نوشته اصلی توسط hamidy [مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]
هدف و عنوانش کلا سی اس اس هست که تو این فعالیت کوتاهم تو این انجمن متوجه شدم دوستان نیازشون میشه
پس تقاضا دارم غیر از دو پست آموزشی بقیه پست ها در این تاپیک رو پاک کنید با تشکر!
نحوه خواصیت دادن به یک تگ اچ تی ام ال
برای خواصیت دادن به یک تگ اچ تی ام ال مثل body , table , a و... از روش زیر استفاده میکنیم:
نام تگ}
خواص
}
به طور مثال:
body{
background-color:#ccffcc;
}
و برای کسانی که از روش خواصیت دادن مستقیم به شی در وب استفاده میکنند
<نام تگ style="خواص">
به طور مثال:
<body style="background-color:#ccffcc">
خواص پس زمینه:
نمونه رنگ پس زمینه:
background-color:#ccffcc;
نمونه تصویر پس زمینه:
background:url('bg.png');
حرکت پس زمینه با اسکرول:
background-attachment:scroll;
عدم حرکت پس زمینه با اسکرول:
background-attachment:fixed;
چینش تصویر پس زمینه:
background-position:top rigth;
و
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
تکرار تصویر پس زمینه:
background-repeat:repeat;
و
تکرار افقی
repeat-x
تکرار عمودی
repeat-y
بدون تکرار
no-repeat
کد توضیحات حالت ها نسخه سی اس اس color تعیین رنگ فونت color CSS1 direction چینش فونت ltr
rtlCSS2 text-align سمت نوشته left
right
center
justifyCSS1 text-decoration خواصی مثل خط زیر متن none
underline
overline
line-through
blinkCSS1
خوص توضیح حالت ها نسخه font کل خواص فونت font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-barCSS1 font-family نوع فونت family-name
generic-familyCSS1 font-size تعیین سایز فونت xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%CSS1 font-style خواص فونت مثل کج بودن normal
italic
obliqueCSS1 font-weight خواص فونت مثل حالت bold normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900CSS1
ایجاد فاصله
خواص توضیح حالت ها نسخه margin کل خواص فاصله margin-top
margin-right
margin-bottom
margin-leftCSS1 margin-bottom فاصله از پایین auto
length
%CSS1 margin-left فاصله از چپ auto
length
%CSS1 margin-right فاصله از راست auto
length
%CSS1 margin-top فاصله از بالا auto
length
%CSS1
نمونه:
فاصله از همه جهات:
margin:10px;
فاصله از بالا:
margin-top:10px;
فاصله از داخل
خواص توضیحات حالات نسخه padding کل خواص padding-top
padding-right
padding-bottom
padding-leftCSS1 padding-bottom فاصله از پایین length
%CSS1 padding-left فاصله از چپ length
%CSS1 padding-right فاصله از راست length
%CSS1 padding-top فاصله از بالا length
%CSS1
نمونه:
فاصله از همه جهات:
padding:10px;
فاصله از بالا:
padding-top:10px;