░▒▓█ مرجع آموزش و پـرسش و پـاسخ جـــامع CSS █▓▒░

Printable View

نمايش 40 تاپيکها در يک صفحه

10-08-2014, 07:58
kian98

░▒▓█ مرجع آموزش و پـرسش و پـاسخ جـــامع CSS █▓▒░

باسلام خدمت دوستان

قصد دارم در این تاپیک به آموزش کامل سی اس اس بپردازم. سوالاتتون رو هم میتونید همینجا بپرسید.

مخفف واژه Cascade Style Sheets مییباشد.از Css برای استایل دهی به صفحات وب به صورت اصولی استفاده میشود.توصیه می شود در کنار Html ( آموزش Html ) به آموزش css نیز پرداخت زیرا این دو در طراحی سایت بهینه بسیار موثر می باشند.
زبان css دارای انعطاف پذیری ویژه ای میباشد و با استفاه از این زبان میتوان پیچیده ترین قالب ها را پیاده سازی کرد.
زبان css را میتوان به صورت های مختلف مورد استفاده قرار داد.در صفحه طریقه نوشتن Css به صورت کامل در این باره توضیح داده شده است.
زبان css در سرعت بارگزاری صفحات وب بسیار موثر است.
از زبان css بیشتر برای ایجاد ظاهر زیبا و ایجاد پس زمینه و رنگ فونت و ... استفاده می شود.توصیه می شود از این زبان در کنار زبان html که در بخش آموزش html به طور کامل آموزش داده شده است استفاده شود.
در این بخش به صورت کامل به آموزش css میپردازیم.

باتشکر
10-08-2014, 07:59
kian98

Css نوعی زبان نشانه گذاری می باشد که معمولا همرا با زبان Html به کار می رود.این دو زبان معمولا همراه با هم استفاده می شود.از این زبان بیشتر برای طراحی صفحات استفاده می شود.برای مثال برای تغییر فونت یا تصویر زمینه ی وب سایت از این زبان استفاده می شود.
با توجه به اینکه امروزه در هر شغلی افراد به طراحی وب سایت روی آورده اند باید طراحی سایت بصورت بهینه و طبق اصول Html و Css طراحی شود تا سایت کارایی داشته باشد.
در این جا نکاتی را در مورد سی اس اس برای شما بیان می کنیم:

دستورات وارده حتما باید بین علامت {} قرار بگیرد و همچنین پس از نوشتن دستور با قرار دادن : مقدار آن را تعیین کنید.

می توانید دستورات نوشته شده را پشت سرهم نوشته به شرطی که بین آنها با علامت ؛ از هم جدا شود.

می توانید هرکدام از تگ ها را با علامت , از هم جدا کرد
10-08-2014, 08:04
kian98

در این قسمت می خواهیم روش های استفاده و یا قراردادن کد CSS در سند HTML را برایتان توضیح بدهیم.

1) قرار دادن دستورات CSS در داخل فایل HTML یا (Embeded Style Shet)

کد:

<style type="text/css"> yor codes <style/>

کد فوق باید در بالای سند و در داخل تگ <head/> قرار بگیرد.

2) قرار دادن دستورات CSS در یک فایل متنی جداگانه با پسوند CSS. و استفاده از تگ <link/> برای ارتباط این فایل به فایل HTML.

کد:

<"/link rel="stylesheet" type="text/css" href="style.css">

در کد بالا یک فایل CSS خارجی با نام style.css به صفحه لینک داده شده است. کد فوق باید در بالای سند HTML و در داخل تگ <head/> قرار بگیرد.

3) دستورات CSS می توانند به طور مستقیم در داخل عناصر HTML و با استفاده از صفت عمومی style در تگ های HTML استفاده شوند.

کد:

<body style="your codes"> <body/>

4) با استفاده از دستور import@ می توان دستورات CSS را به هر دو صورت Embeded و Linked در یک فایل وارد کرد.

کد:

<style type="text/css"> import@ <style/>

در استفاده از CSS به صورت Linked (روش دوم) ممکن است این فایل CSS توسط مرورگر ذخیره شده و با Refresh کردن صفحه آپدیت نشود.
10-08-2014, 08:09
kian98

توضیحاتی ساده تر
طریقه نوشتن Css - خاصیت Style تگ ها

سبک درون خطی
این روش از مهمترین سبک ها در نوشتن Css می باشد.این روش سایر روش ها را شامل می شود اما توصیه می شود جهت بهینه سازی سایت از این روش کمتر استفاده شود.فراموش نشود که پس از وارد کردن دستورات خود حتما پسوند Css را وارد نمایید.
مثال زیر کاربرد سبک درون خطی در Css می باشد.
[HTML]<p style="backgroun:blue; color: white;">A new background and font color with inline CSS</p>[/HTML]
طریقه نوشتن Css - تگ Style در Head صفحه
Css داخلی
در وب سایت هایی که تعداد صفحات کمی دارند از روش css داخلی برای طراحی سایت استفاده می کنند.همچنین این لینک داخل تگ Head قرار می گیرد.این سبک دارای مزایایی می باشد که عبارتند از :

این سبک فقط برای صفحاتی قابل جرا می باشد که از این سبک استفاده شده است.
با استفاده از این روش می توان خاصیت ارث بری کلاس ها استفاده کرد.به عبارتی می توانید از چند جای همان صفحه استفاده کنید.
همچنین این سبک می تواند سرعت بارگزاری صفات را پایین بیاورد.
مثال زیر کاربرد Css داخلی را نشان می دهد.
[HTML]<head> <style> hr {color:silver;} p {margin-left:20px;} body {background-image:url("http://forum.persiantools.com/images/bg.gif");} </style> </head>[/HTML]
طریقه نوشتن Css - فایل خارجی در پروژه
Css خارجی

این سبک را باید در تگ لینک داخل تگ head قابل استفاده می باشد.با استفاده از این سبک شما می توانید از چندین صفحه وب سایت خود استفاده کنید.در این سبک می توانید با تغییر یک فایل کل ظاهر وب سایت خود را عوض کنید.
مثال زیر کاربرد Css خارجی را نشان می دهد.
[HTML]<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>[/HTML]
10-08-2014, 08:10
kian98

در این بخش از آموزش css واحدهای شمارش مورد قبول در سی اس اس را برای شما بیان می کنیم.
واحدهای شمارش قابل استفاده در Css شامل موارد زیر می باشند:

1.درصد(%)
2.اینچ(in)
3.سانتیمتر(cm)
4.میلیمتر(mm)
5.em
6.ex
7.pt(برابر با 1/72 اینچ)
8.pc(برابر با 12 point)
9.پیکسل(px)
10-08-2014, 08:11
kian98

در این بخش از آموزش css ، ویژگی Opacity را توضیح می دهیم.
این خاصیت مقدار وضوح عکس را نشان می دهد به این ترتیب که هرچقدر opacity مقدار بالاتری داشته باشد عکس واضح تر است و هرچقدر Opacity کمتر باشد شفافیت تصویر کمتر می شود.

مثال زیر کاربرد ویژگی Opacity در بخش آموزش Css نشان می دهد.
[HTML]img { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ } img:hover { opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ }[/HTML]
نکته ی قابل توجه این است که مرورگر اکسپلورر 6و7و8 از خاصیت Opacity پشتیبانی نمی کند.در این روش برای مقدار opacity اعدا را بین 0 تا 100 انتخاب می کنیم.در سایر مرورگرها این مقدار را بین 1 تا 0 در نظر می گیریم به این ترتیب که هرچه از 0 به سمت 1 برویم از شفافیت عنصر کاسته می شود.

[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
10-08-2014, 08:12
kian98

نحوه دادن پیش زمینه به body :
[HTML]body { background: url("../upload.php/Files/98ia/bg.jpg") no-repeat scroll center 29px #FFFFFF; color: #666666; font-family: 'MyriadProRegular'; font-family: Tahoma; line-height: 170%; font-size: 10pt; margin: 0; padding: 0; direction: rtl; }[/HTML]
تعریف هریک از این ویژگی ها :
background : از این ویژگی برای تعریف حالت های مختلف پس زمینه برای یک عنصر بکار می رود.
color : از این خاصیت برای تنظیم رنگ متن استفاده می کنند.
font-family : با استفاده از ویژگی Font-Family می توان قلم مورد نظر را برای متن خود انتخاب کنید.
line-height : به وسيله اين خاصيت می توان فاصله بين خطوط را در پاراگراف تعيين کرد .
font-size : به وسيله اين خاصيت می توان سايز قلم نوشته را تعيين کرد .
margin :با استفاده از خاصيت margin در CSS ، می توان فضای خالی به دور عناصر ايجاد کرد
padding :با استفاده از خاصيت padding در CSS ، می توان فاصله بين خطوط حاشيه دور يک عنصر را با محتويات درونی آن تنظيم کرد .
direction : جهت نوشته را مشخص می کند که بر حسب زبان نوشته می تواند يکی از حالت های rtl یا ltr باشد
اطلاعات بیشتر در این زمینه را میتوانید در بخش آموزش css ببینید.
10-08-2014, 08:13
kian98

برای داشتن یک جدول با استایل شکیل میتوانیم از کد css زبر استفاده کنیم :
برای مشاهده نمونه روی لینک مقالات طراحی سایت کلیک کنید
هردو بخش HTML ( آموزش html ) و CSS ( آموزش css ) را توضیح میدهیم :
[HTML] <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <div class="RepeaterArchive"> <div class="Row"> <asp:Image CssClass="TitleImage" ID="Image1" ImageUrl="~/Administrator/Files/Design/puce_menu.gif" runat="server" /> <h2> <asp:HyperLink ID="HyperLink1" CssClass="Title" NavigateUrl='<%# "~/مقالات-طراحی-سایت/" +Eval("PageAddress").ToString() %>' runat="server" Text='<%# Eval("Title") %>'></asp:HyperLink></h2> </div> <div class="Row"> <asp:Label ID="Label2" CssClass="Text" runat="server" Text='<%# new BLL.PublicClass().SubStringHtml(Eval("Text"),0,300 ) %>'></asp:Label> </div> <div class="Row Under"> <asp:Label runat="server" ID="lblUnder" CssClass="GridItemUnderText" Text='<%#"ارسال شده در تاریخ :  <b>" + new BLL.PublicClass().Convert_to_Shamsi(DateTime.Parse (Eval("DateRegister").ToString()))+ "</b>"%>'></asp:Label> <asp:Label Visible="false" ID="Label3" runat="server" Text='<%# Eval("DateRegister") %>'></asp:Label> </div> </div> </ItemTemplate> </asp:Repeater>[/HTML]برای شکیل نمودن این Repeater از استایل زیر استفاده شده است :
[HTML]background: url("../Administrator/Files/Design/bg.jpg") no-repeat scroll center 29px #FFFFFF; color: #666666; font-family: 'MyriadProRegular'; font-family: Tahoma; line-height: 170%; font-size: 10pt; margin: 0; padding: 0; direction: rtl; .RepeaterIndexItemTag { float: right; width: 280px; padding:5px; borderolid 1px #eee; margin-right:5px; margin-left:5px; -moz-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; -webkit-transition: all 0.1s ease-out; transition: all 0.1s ease-out; margin-top: 10px; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; overflow: hidden; } .RepeaterIndexItemTag:hover > .Left h3, .RepeaterIndexItemActive .Left h3 { } .RepeaterIndexItemTag .Image { width: 130px; height: 90px; border: solid 1px #aaa !important; margin-top: 3px; margin-bottom: 3px; -moz-box-shadow: 0px 1px 1px #777; -webkit-box-shadow: 0px 1px 1px #777; box-shadow: 0px 1px 1px #777; } .RepeaterIndexItemTag h3 { font-size: 8pt; margin: 0; padding: 0; float: right; font-weight : bold; width:100%; text-align:center; } .RepeaterIndexItemTag .Text { font-size: 8pt; float: right; width: 100%; margin: 0; text-align: justify; }[/HTML]
22-08-2014, 13:04
mr.hamed77

سلام
نمیدونم باید مشکلم رو اینجا مطرح می کردم اینقد شلوغ بود گیج شدم
مشکل من با قالب وبلاگمه نمیدونم چشه . می خواستم هدر قالب رو عوض کنم فایل css بود .
بعد کلی زحمت آخرش فهمیدم چجوریه ، بعدش که رفتم لینک هارو توی فایل css عوض کردم . درست شد البته تو مرورگر
کروم میزنم درست میاد ولی توی بقیه مرورگرا نه خرابه ، نمیدونم چشه شاید همونطور شما گفتید ذخیره شده و رفرش می کنم عوض نمیشه ، ولی
بازم اینطوری نیست رفرش میشه یه جوریه شاید مشکل از فرمت ذخیره ایه تو کروم نشون میده بقیه نه ، الان با پسوند txt هست نمیدونم می ذارم ببینید.
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
27-12-2014, 15:47
Francesco Redi

باسلام بنده یک قالب با HTML و CSS ساختم و براش ستون هایی مثل بخش موضوعات و کدهای اختصاصی و بخش تبلیغات قرار دادم. براش ارتفاعشون رو هم visible گذاشتم و عناصر داخل دیو ازش بیرون نزنن. مشکلم اینه که برای مثال وقتی موضوع و خط جدیدی به بخش موضوعات و یا سایر ستون ها اضافه می شه و دیو به همون اندازه کش میاد با دیو های زیریش قاطی میشه و فاصله اش رو با دیو پایینیش حفظ نمی کنه و وارد div زیریش میشه. مثل عکس زیر: [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] همین طور بگید چطور کاری کنیم که DIV ها به هم وابسته نشن. یعنی برای مثال اگه Margin یه دیو رو کم و زیاد کردیم دیو های دیگه هم باهاش حرکت نکنن. وقتی از پوزیشن ها ستفاده می کنم هم باز دیو ها قاطی میشن و باید دوباره صدبار چپ و راستشون بکنم.

نمايش 40 تاپيکها در يک صفحه