آموزش CSS

Lantern

CSS یا Cascading Style Sheet روشی برای قالب بندی و طراحی اجزای صفحه از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده میشه بدون استفاده از کدهای HTML هستش.به کمک CSS میتونیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کدنویسی و همچنین کند شدن سرعت بارگذاری صفحه در اینترنت میشه جلوگیری کنیم. برای مثال می تونیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کارببریم.
در واقع بطور کلی میشه گفت CSS این امکان رو ایجاد میکنه تا طراح بتونه چندین مشخصه توی طراحی صفحه رو به یکباره تعیین کنه و همچنین میشه گفت برای کنترل دقیق مشخصات صفحه و استاندارد کردن تگ های غیراستاندارد HTML و طراحی Layout صفحه میتونیم CSS رو بکار ببریم.
------------------------------------------------------------------------------
*مزایای CSS : (در مورد هرکدوم از این مزایا میشه مفصل صحبت کرد و مفهوم اونا رو در عمل باید دید)
- CSS در وقت صرفه جویی میکنه (همونطور که گفتم با تعیین یکباره مشخصات)
- تغیییرات مجدد تگ های HTML بسیار راحت میشه.
- طراحی صفحه بدون نیاز به تگ های قالب بندی HTML
- طراحی صفحات دینامیک به کمک javascript
- و ...
------------------------------------------------------------------------------
*تشریح دستور CSS :
دستورات CSS از دو بخش تشکیل میشن :
یکی نام تگ(همون تگ های HTML ) و دیگری هم مشخصات اون تگ که بیان کننده ی چگونگی نمایش اجزای انتخاب شدست که داخل {} قرار میگیرن.
هر کدوم از مشخصه ها شامل یک خصوصیت و علامت : و یک یا چند مقدار (Value) و علامت ; در پایان هستن.
مثال :
body{font-family: Tahoma, Arial, sans-serif;color: black;background: white;margin: 8px;}
------------------------------------------------------------------------------
*روش های بکارگیری CSS :
- CSS محلی
- CSS داخلی
- CSS خارجی

روش محلی بر داخلی تقدم داره و روش داخلی بر روش خارجی تقدم داره.

- CSS محلی در داخل یک تگ HTML اسفاده میشه که مزایایی نسبت به تگ های HTML داره ولی قدرت زیادی نداره.
- CSS داخلی برای صفحات مجزایی که متن طولانی دارن بکار میره.تو این روش میشه Style رو بالای HTML گذاشت و برای کل اون صفحه تعریف کرد.(داخل تگ Head از HTML تعریف میشه.)
- CSS خارجی که بهترین و قویترین (و به نظر من ساده تر از دو نوع قبلی) نوع CSS هستش رو میشه برای تمام صفحات وب بصورت یکپارچه بکار برد.این نوع CSS برای تمام صفحات ظاهر یکسان و متداول میتونه بوجود بیاره.
------------------------------------------------------------------------------
*نحوه ی ایجاد CSS محلی
-درون تگ ویژگی “ =style تایپ کنید
-نوشتن خصوصیت ها و مقادیر (علامت ; بین هر یک از آن ها)
-علامت “(گیومه برای بستن)
------------------------------------------------------------------------------
*نحوه ی ایجاد CSS داخلی
-ایجاد تگ <style> داخل تگ <head>
-تایپ نام تگ
-علامت }
-نوشتن خصوصیت ها و مقادیر (علامت ; بین هر یک از آن ها)
-علامت {
-تایپ تگ پایانی <style/>
------------------------------------------------------------------------------
*نحوه ی ایجاد CSS خارجی
-ایجاد یک سند متنی (فایل Notepad)
-تایپ نام تگ
-علامت }
-نوشتن خصوصیت ها و مقادیر (علامت ; بین هر یک از آن ها)
-علامت {
-ذخیره سند در قالب Text only و با پسوند CSS
-لینک کردن در صفحه ی وب به CSS خارجی فرضاً به شکل زیر :
<link href="Site.css" rel="stylesheet" type="text/css" />
============================================
*مباحث دیگه ای هم که بعنوان کلیات تو مبحث CSS میشه بهش پرداخت اینا هستن که ان شاءالله اگه عمری بود توی ارسالای بعدی بهشون اشاره میکنم:
- استفاده ازCLASSو ID درطراحی با CSS
- تگ های تولیدکننده برای ترکیب با CLASS ها و IDها
- مشخص کردن style برای لینک ها
- تعیین فرمت متن با استفاده از CSS(مبحث کلی)
- طراحی Layout صفحه با استفاده از CSS (مبحث کلی)
============================================
دوستان توجه کنن کسانی که مایل به یادگیری CSS هستن قبلش حتماً باید با HTML آشنا (و البته تا حدودی مسلط!) باشن وگرنه یادگیری CSS به تنهایی و قبل از HTML معنایی نداره!

Lantern

همان طور که به دوستان عزیز قول داده بودم مباحث دیگه ای از CSS رو با هم دنبال می کنیم:
--------------------------------------------------------------------

*استفاده از CLASS درطراحی با CSS :

می تونیم اجزای داخل HTML رو بصورت CLASS های مختلف طبقه بندی کنیم.فایده ی این کار اینه که برای یه تگ خاص میشه استایلهای متفاوتی را تعریف کنیم. مثلاً توی HTML ممکنه چند تا تگ p داشته باشیم حالا می خوایم توی صفحه دو نوع پاراگراف داشته باشیم: یکی با متن مشکی و یکی با متن قرمز. برای تعیین این دو نوع پاراگراف می تونیم از سلکتور کلاس استفاده کنیم.
اول استایل را به صورت زیر می نویسیم:

کد: 

p.black {color: black}

p.red {color:red}

بعد از تعریف کلاس در داخل CSS حالا باید در داخل HTML هم برای هر تگ کلاس بخصوص رو استفاده کنیم که برای مثال بالا به این صورت میشه گفت :

کد: 

<p class="black"> پاراگراف با رنگ متن مشکی </p>

<p class="red"> پاراگراف با رنگ متن قرمز </p>

نکته اول اینکه : انتخاب نام کلاس هم اختیاریه و البته بهتره که اسامی معنادار و مرتبط انتخاب بشه.
نکته دوم اینکه : برای یک تگ بخصوص HTML میشه چندین کلاس تعریف کرد اما موقع تعریف باید دقت کنیم که فقط یکبار کلمه class رو بکار ببریم و فقط اسامی کلاس ها رو با یک فاصله پشت سر هم ردیف کنیم مثال :

کد: 

<p class="red center">پاراگرافی که از دو کلاس همزمان استفاده میکند  </p>

مساله ی مهم و بسیار کاربردی که توی این مسئله وجود داره اینه که هنگام تعریف CSS خارجی میتونیم از این قابلیت پرکاربرد استفاده کنیم که نام تگ رو در سلکتور کلاس ننویسیم. در این صورت ویژگیهای تعریف شده برای اون کلاس رو میتونیم برای هر تگ دلخواه داخل HTML بکار ببریم و حالا دیگه اون کلاس محدود برای همون تگ خاص تعریف شده توی CSS نمیشه(مثل بالا) مثال :

کد: 

.black {color: black}

.center {text-align: center}

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

کد: 

<p class="center"> پاراگراف به صورت وسط چین  </p>

<div class="center"> متن این قسمت به صورت وسط چین  </div>

<h2 class="black">  سرفصل به رنگ مشکی </h2>

<p class="black"> پاراگراف به رنگ مشکی  </p>

--------------------------------------------------------------------

*استفاده از ID درطراحی با CSS :

روش دیگه ای که توی تعریف استایل کاربرد داره استفاده از ID هستش.گاهی به ID سلکتور خصوصی هم گفته میشه.به ظاهر Class و ID توی نگاه اولیه از نظر عملکرد شبیه هم هستن ولی در نحوه ی کاربرد و مفهوم و شکل دستور با هم متفاوتن.
سلکتور ID در داخل CSS با علامت # مشخص میشه که اون رو از سایر آیتم های داخل CSS متمایز میکنه.
با یه مثال میتونیم نحوه ی تعریف سلکتور ID در داخل CSS و بعدش نحوه ی استفاده از اون در داخل HTML رو ببینیم :

تعریف سلکتور ID در داخل CSS :

کد: 

#border { border: green thin solid }

نحوه ی استفاده در داخل HTML :

کد: 

<h3 id="border"> سرفصل با اندازه ۳  </h3>

<div id="border"> این قسمت از مشخصات تعریف شده بهره می بره </div>

البته قابل ذکره که می تونیم مثل کلاس، ID رو هم برای یک عنصر مشخص تعریف کنیم که در این صورت اون ID صرفاً روی تگی که براش تعریف شده اثر میذاره.

--------------------------------------------------------------------

بخشی از یک کد CSS خارجی کامل رو اینجا قرار دادم تا بعنوان یه مثال کلی از مطالبی باشه که تا الان گفته شده :

کد: 

body {

    margin-top: 30px;

    padding: 0;

    background: #000000;

    font-size: 13px;

    text-align: justify;

    color: #ADADAD;

}

h1, h2, h3 {

    font-family: Arial, Helvetica, sans-serif;

    font-weight: normal;

    color: #819CDB;

}

h1 {

    font-size: 36px;

}

h2 {

    font-size: 2em;

}

h3 {

    font-size: 1em;

}

#header {

    width: 800px;

    height: 143px;

    margin: 0 auto;

    padding-bottom: 30px;

    background: url(images/img01.jpg) no-repeat left top;

}

#content {

    float: right;

    width: 480px;

    margin: 0;

    margin-bottom: 30px;

}

.post {

    padding: 0px 0px 0 0px;

}

.title {

    margin: 0;

    padding-bottom: 5px;

    font-size: 24px;

    font-family: Georgia, "Times New Roman", Times, serif;

    color: #FFFFFF;

}

--------------------------------------------------------------------

ان شاء الله باقی مباحث توی فرصت های بعدی...

Lantern

فایلی که ضمیمه کردم یه نمونه از Free CSS هایی هست که توی اینترنت هست . با استفاده از CSS نوشته شده یه صفحه وب کامل و خوب طراحی شده.هدفم از گذاشتن این فایل هم اینه که :
۱) مطالب گفته شده تا حالا و باقی مطالب که در ادامه دنبال میکنیم توی این مثال به خوبی دیده میشه.
۲) با تغییر توی CSS می تونید تغییرات صفحه وبی که از اون CSS استفاده میکنه رو به درستی ببینین.

sasanlive

دم همه بچه های فعال گرم.
هرچند شما دیگه سبیل داری جزء بچه ها به حساب نمیاین , پس دم سیبیلوها هم گرم Big Grin

.

Lantern

با همراهی دوستان عزیز ادامه مباحث CSS رو دنبال می کنیم :
--------------------------------------------------------------------

* تگ های تولیدکننده برای ترکیب با CLASS ها و ID ها :

برای این منظور تگ های DIV و SPAN بکار برده میشن.
این دو تگ به تنهایی کار زیادی در HTML انجام نمی دن ولی با ترکیب آن ها با CLASS ها و ID ها میشه تگ های موردنظر رو تولیدکنیم.

تگ DIV برای اجزای BLOCK-LEVEL (تگ هایی که ادامه متن رو از سطر جدید شروع می کنن مانند <BODY>و<H1>و<P>) و تگ SPAN برای اجزای INLINE (تگ هایی که ادامه متن رو در دنباله همون سطر قرار می دن مانند <B>و<FONT>و<IMG>) بکار می ره.

میتونیم با اضافه کردن یک ID و یا یک CLASS به تگ DIV و تعیین style مربوطه تگ مورد نظر را تولید کنیم.

مثال ۱:

در CSS استایل را به صورت زیر می نویسیم: (فرضی)

کد: 

Div.intro{background:red}

در داخل HTML هم از کلاس تعریف شده میتونیم بصورت زیر استفاده کنیم :

کد: 

<Div CLASS=“intro”>

<H1>متن داخل تگ</H1>

<P> متن داخل تگ

</Div>

مثال ۲ :

در CSS استایل را به صورت زیر می نویسیم: (فرضی)

کد: 

#header

{

    height: 100px;

    padding: 0 0 0 0;

    background-color: #fff9c1;

    background: url(Soap.bmp) repeat-x top;

    border-top: red 0.4em ridge;

    border-bottom: red 0.4em ridge;

    border-left: red 0.4em ridge;

    border-right: red 0.4em ridge;

}

در داخل HTML هم از ID تعریف شده میتونیم بصورت زیر استفاده کنیم :

کد: 

.

.

.

<div id="header">

.

.

.

--------------------------------------------------------------------

*مشخص کردن style برای لینک ها :

برای تغییر فرمت لینک ها شامل رنگ پیش زمینه و پس زمینه و ... از روش زیر میتونیم استفاده کنیم :

a:link
با این مشخصه میتونیم روش نمایش لینک هایی رو که توی صفحه وب ما وجود دارن و هنوز روی اون لینک ها کلیک نکردیم تعیین کنیم.

a:hover
با این مشخصه میتونیم روش نمایش لینک هایی رو که ماوس ما فقط روی اون ها قرار گرفته تعیین کنیم.

a:active
با این مشخصه میتونیم روش نمایش لینک هایی رو که ماوس ما روی اونها در حال کلیک کردن هستش تعیین کنیم.

a:visited
با این مشخصه میتونیم روش نمایش لینک هایی رو که ماوس ما روی اون ها کلیک کرده و اون لینک حالا دیگه یه لینک بازدید شده هست تعیین کنیم.

مثال :

ابتدا ایجاد یک CSS داخلی (توی پست اول همین تاپیک تشریح شده) و بعد با تعریف چهار لینک فرضی میتونیم هر یک از این حالات مختلف رو توی صفحه وب بر روی هرکدوماز لینک ها ببینیم :

کد: 

<HTML>

<HEAD>

<title>test</title>

<style>

A:link{color:blue}

A:visited{color:red}

A:hover{color:black}

A:active{color:yellow}

</style>

</HEAD>

<BODY>

<a href="http://www.google.com">google</a>

<a href="http://www.yahoo.com">yahoo</a>

<a href="http://www.bing.com">bing</a>

<a href="http://www.ask.com">ask</a>

</BODY>

</HTML>

دوستان عزیز میتونن با ایجاد یه صفحه وب (HTML) عیناً بصورت مثال بالا تغییرات و مفهوم این دستور ها برای لینک ها رو مشاهده کنن.

--------------------------------------------------------------------

ان شاء الله باقی مباحث توی فرصت های بعدی...

Lantern

ادامه مبحث آموزش CSS رو پی میگیریم :
===================================

* تعیین فرمت متن با استفاده از CSS :

همونطور که قبلاً هم گفته شد به کمک Style ها میشه کنترل بیشتری و ساده تری در مقایسه با تگ های HTML روی متن داشت.
توی این مبحث میتونیم نحوه ی ایجاد هر کدوم از Style های فرمت متن صفحه وب رو دنبال کنیم :

روش ارائه این مطلب هم به جهت اختصار به این صورته که ابتدا موضوع کلی دستورات رو مطرح میکنم و بعد انواع دستورات برای اون موضوع و اینکه اون دستور چه مقادیری رو میتونه داشته باشه و بعد یک مثال برای هر موضوع کلی بیان میکنم.

--------------------------------------------------------------

*فونت ها :

- دستور Font-family :
با این دستور میشه چندین فونت رو برای نمایش متن صفحات در نظر گرفت تا در هر صورت کاربر صفحه وب رو با هر کدوم از فونت های نام برده موجود در مرورگر خودش بتونه ببینه. البته بیاد بین هر دو فونت یک فاصله و یک کاما قرار بدید.
مقادیر فرضی : Tahoma, Arial, …

- دستور Font-style :
با این دستور میشه نحوه نمایش فونت از نظر italic بودن یا نبودن رو تعیین کرد.
مقادیر فرضی : italic/normal (علامت / یعنی هر کدوم از اون مقادیر میتونه باشه نه اینکه هر دو رو همزمان استفاده کنیم)

- دستور Font-weight :
با این دستور میشه نحوه نمایش فونت از نظر bold بودن یا نبودن رو تعیین کرد. ابته با ععد هم میشه این قسمت رو مقداردهی کرد.(معمولاً ۴۰۰ رو نرمال در نظر میگیرن و ۷۰۰ رو bold در نظر میگیریم که این عدد میتونه بالاتر یا پایین تر هم انتخاب بشه)
مقادیر فرضی : bold/normal/500 (علامت / یعنی هر کدوم از اون مقادیر میتونه باشه نه اینکه هر دو رو همزمان استفاده کنیم)

- دستور Font-size :
با این دستور میشه اندازه فونت رو تعیین کرد.
مقادیر فرضی : small/medium/12pt/150% /... (علامت / یعنی هر کدوم از اون مقادیر میتونه باشه نه اینکه هر دو رو همزمان استفاده کنیم)

- دستور Line-height :
البته این دستور برای فرمت دهی فونت نیست ولی برای تنظیم فاصله بین خطوط از همدیگه بکار میره.
مقادیر فرضی : ۱۵pt/100%/... (علامت / یعنی هر کدوم از اون مقادیر میتونه باشه نه اینکه هر دو رو همزمان استفاده کنیم)

نکته : نکته مهمی که اینجا وجود داره اینه که به جهت تسهیل توی کار و خلاصه نویسی میشه تمامی خصوصیات فونت مثل family و style و weight و size و ... رو به یکباره با یه دستور Font تعیین کنیم.

مثال :

کد: 

font-family: Arial,Tahoma, Verdana, sans-serif;

    font-size: 1.2em;

    font-weight: normal;

--------------------------------------------------------------

* رنگ متن و پیش زمینه :

- دستور Color :
با این دستور میشه رنگ متن کلاس یا id یاهر بخش یا تگ رو تعیین کرد.
مقادیر فرضی : yellow/ #fff9c1 (علامت / یعنی هر کدوم از اون مقادیر میتونه باشه نه اینکه هر دو رو همزمان استفاده کنیم)

- دستور Background-Color :
با این دستور میشه رنگ Background هر بخش یا کل صفحه رو تعیین کرد.
مقادیر فرضی : yellow/ #fff9c1 (علامت / یعنی هر کدوم از اون مقادیر میتونه باشه نه اینکه هر دو رو همزمان استفاده کنیم)

- دستور Background-Image :
با این دستور میشه Background صفحه رو یک تصویر تعیین کرد. روش این کار هم بصورت زیر با دستور url و یه عکس دلخواه فرضی هستش:

کد: 

Background-Image: url(2.jpg)

در دنباله این دستور Background-Image میتونیم از دستوراتی برای تعیین فرمت بکارگیری عکس در پیش زمینه صفحه استفاده کنیم از جمله دستورات زیر :

- background-repeat : نوع تکرار تصویر رو مشخص میکنه
مقادیر :
repeat : تکرار تصویر در هر دو جهت x و y
repeat-x : تکرار تصویر در جهت x
repeat-y : تکرار تصویر در جهت y
no-repeat : عدم تکرار تصویر

- دستور background-attachment :
با این دستور میشه مشخص کرد که آیا تصویر زمینه با اسکرول کردن صفحه حرکت می کنه یا در جای خودش ثابته.
مقادیر : scroll/ fixed (علامت / یعنی هر کدوم از اون مقادیر میتونه باشه نه اینکه هر دو رو همزمان استفاده کنیم)

- دستور background-position :
با این دستور میشه موقعیت تصویر زمینه در صفحه رو مشخص کرد.
مقدار اول : top/center/bottom (علامت / یعنی هر کدوم از اون مقادیر میتونه باشه نه اینکه هر دو رو همزمان استفاده کنیم)
مقدار دوم :right /center/left (علامت / یعنی هر کدوم از اون مقادیر میتونه باشه نه اینکه هر دو رو همزمان استفاده کنیم)

مثال :

کد: 

body

{

    background-color: #fff9c1;

        background-image: url(2.jpg);

        background-repeat: repeat;

        background-attachment: scroll;        

        background-position: center center;

}

--------------------------------------------------------------

*کنترل کردن فاصله ها :

- دستور word-spacing :
با این دستور میشه فاصله بین لغات رو تعیین کرد.
مقادیر : بر حسب point یا pixel یا درصد و یا ...

- دستور letter-spacing:
با این دستور میشه فاصله بین حروف رو تعیین کرد.
مقادیر : بر حسب point یا pixel یا درصد و یا ...

- دستور text-indent:
با این دستور میشه فرورفتگی اول پاراگراف رو تعیین کرد.
مقادیر : بر حسب درصد و یا اعداد منفی و مثبت

--------------------------------------------------------------------

ان شاء الله باقی مباحث توی فرصت های بعدی...

Lantern

با همراهی دوستان عزیز ادامه مباحث CSS رو دنبال می کنیم :
-------------------------------------------------------------------

* ادامه تعیین فرمت متن با استفاده از CSS :

-------------------------------------------------------------------

* مکان متن در صفحه :

- دستور Text-align :
این دستور یکی از پرکاربردترین ومفیدترین دستوراتی هست که در CSS استفاده میکنیم.
با این دستور میشه مکان قرارگیری متن در صفحه وب رو تعیین کرد.البته عملکرد این دستور عیناً شبیه همید دستور توی برنامه Word هستش.
مقادیر : Left/right/center/justify (علامت / یعنی هر کدوم از اون مقادیر میتونه باشه نه اینکه هر دو رو همزمان استفاده کنیم)
البته بدیهیه که بسته به نوع زبان از لحاظ راست نویس بودن یا چپ نویس بودن (فارسی و انگلیسی و ...) میتونیم از دستورات Left/right استفاده کنیم و یا اینکه تعمداً مطلب را در مکان دلخواه قرار بدیم.

-------------------------------------------------------------------

استفاده از خط زیر متن :

- دستور Text-decoration :
با این دستور میشه مکان قرارگیری خط نسبت به متن در صفحه وب رو تعیین کرد.البته بسته به مکان قرارگیری خط نسبت به متن میشه مقادیر متفاوتی رو به این ویژگی نسبت داد.
مقادیر : underline/overline/line-through/none (علامت / یعنی هر کدوم از اون مقادیر میتونه باشه نه اینکه هر دو رو همزمان استفاده کنیم)
underline : خط در زیر متن
overline : خط در بالای متن
line-through : خط در وسط متن
none : متن بدون خط (حالت پیش فرض)

-------------------------------------------------------------------

روشن و خاموش شدن متن:

- دستور Text-decoration :
علاوه بر اینکه با این دستور میشه مکان قرارگیری خط نسبت به متن در صفحه وب رو تعیین کرد با نسبت دادن یک مقدار خاص میشه متن رو به متن چشمک زن تبدیل کرد.
البته قابل ذکره که این شیوه امروزه تقریباً منسوخ شده و استفاده از تصاویر متحرک و فلش دیگه جایی برای کاربرد این دستور باقی نذاشه!
مقدار : blink

-------------------------------------------------------------------

تغییرحالت متن:

- دستور Text-transform :
با این دستور میشه حالت متن یعنی اینکه با حروف بزرگ یا کوچک نوشته شود و ... بسته به مقادیر مختلف میشه تعیین کرد.
مقادیر : Capitalize/uppercase/lowercase/none (علامت / یعنی هر کدوم از اون مقادیر میتونه باشه نه اینکه هر دو رو همزمان استفاده کنیم)
Capitalize : حروف اول تمامی کلمات بصورت بزرگ
uppercase : تمامی حروف کلمات بصورت بزرگ
lowercase : تمامی حروف کلمات بصورت کوچک
none : حالت پیش فرض

=====================================

خوب تقریباً مهمترین و اصلی ترین دستورات تعیین فرمت متن با استفاده از CSS اینجا مطرح کردم و نحوه ی استفاده و مقادیر اون ها تشریح شد.
در مبحث بعدی طراحی Layout صفحه با استفاده از Style ها رو دنبال می کنیم .

ان شاء الله باقی مباحث توی فرصت های بعدی...

Lantern

ادامه مبحث آموزش CSS رو پی میگیریم :
===================================

* طراحی Layout صفحه با استفاده از CSS

---------------------------------------------------------------

- هر کدوم از اجزای صفحه وبمون که با CSS تعریف میشن رو میشه طوری در نظر گرفت که انگار اون رو داخل یه جعبه نامرئی قراردادیم که میشه انداره و رنگ و فضاهای درونی جعبه رو نسبت به بقیه اقلام صفحه کنترل کرد.

همان طور که قبلاً هم گفته هر کدوم از این اجزای داخل جعبه فرضی می تونن خودشون شروع کننده ی یه پاراگراف جدید باشن (Block-level) و یا اینکه فاقد این قدرت باشن (Inline)

- با توجه به این مفاهیم میشه سه قسمت اصلی موجود توی جعبه رو کنترل کرد:
اولی فضای اطراف محتوی درونی جعبه هستش که به اون Padding میگن که میشه پهنای این فضا رو کنترل کرد.
دومی اطراف فضای Padding هستش که خطوط مرزی یا همون Border قرار داره که میشه ضخامت و رنگ اون رو تعیین کرد.(البته در نظر بگیرید که ممکنه برای اون بخش اصلاً Border قابل رویت در نظر نگیریم)
سومی هم فضای شفاف اطراف Border هستش که به اون Margin گفته میشه.ما نمیتونیم رنگ این قسمت رو تغییر بدیم ولی میتونیم طول و عرض اون رو کنترل کنیم که نتیجه این کار کنترل اجزای داخل صفحه هستش.

بعنوان مثال نمونه کدی از یک CSS رو قرار میدم تا با نحوه ی تعریف این ۳ قسمت آشنا بشید:

کد: 

    border-right: #007800 double;

    border-top: #007800 double;

    border-left: #007800 double;

    border-bottom: #007800 double;

     margin-top:0.5em;

     margin-bottom:0em;

     margin-left:11em;

     margin-right:11em;

     padding-top:0em;

     padding-bottom:0.5em;

     padding-left:0.5em;

     padding-right:0.5em;

سه پارامتر فوق در ۴ جهت اصلی بالا و پایین و چپ و راست با مقادیر نسبت داده شده فرضی در نظر گرفته شدن.
البته روش تنظیم این سه پارامتر هم خودش یکی از مباحث هستش که توی ایم سرفصل باید بهش پرداخته بشه ولی من فکر میکنم اکثر شما دوستان عزیز باهاش آشنایی دارین چون دقیقاً شبیه سایر موارد توی CSS هستش. یعنی به سادگی بعد از تعیین جهت پارامتر مقدار دهی میشه و تمام. Tongue

---------------------------------------------------------------

- توی این مبحث یکی از مفاهیمی که باید باهاش آشنا بود مکان نسبی و مکان مطلق هستش.

تعیین مکان نسبی : هز جزئی از صفحه توی یک مکان بطور طبیعی قرار میگیره.به حرکت دادن جزء صفحه باتوجه مکان اصلی اون تغییر مکان نسبی میگن بطوریکه اجزای صفحه که اطرافش هستن هرگز تغییر مکان نمیدن.

مثال :

کد: 

IMG{position :relative;top:30;left:40}

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

تعیین مکان مطلق : محتویات صفحه بطور عمومی متاثراز ترتیب نوشتن توی HTML نمایش داده میشن.یعنی اگه یه تگ بالاتر از یه تگ دیگه باشه توی صفحه وب هم بالتر از اون دومی نمایش داده میشه که جریان طبیعی کاره.
درحالیکه میشه از ابتدا برای هر جزء صفحه مکام مطلقی روتعیین کرد.

مثال :

کد: 

IMG{position:absolute;left:10;top:20}

---------------------------------------------------------------

- نوشتن متن در اطراف اجزای داخلی صفحه :

میشه تصاویر و یا اجزای دیگه ای ازصفحه رو طوری مشخص کرد که متن رو در سمت چپ و یا راست یا بالا و یا پایین نوشت.
روش این کار استفاده از دستور Float هستش.
بعد از مشخص کردن جزء موردنظر و نوشتن دستور میتونیم مقدار دهی کنیم.
فرضاً اگه بخوایم جزء یا تصویر مورد نظر سمت چپ متن قرار بگیره کلمه Left رو تایپ می کنیم و اگه بخوایم جزء یاتصویر موردنظر در سمت راست متن قرار بگیره کلمه Right رو تایپ می کنیم.

کد: 

IMG{.......}

IMG.Right{float:right}

H1{...}

---------------------------------------------------------------

- جلوگیری از نوشتن متن در اطراف تصویر یا سایر اجزای صفحه :

برای متوقف کردن و ننوشتن متن در اطراف تصویر یا سایر اجزای صفحه از دستور clear استفاده می کنیم.
بعد از مشخص کردن جزء موردنظر و نوشتن دستور میتونیم مقدار دهی کنیم.
فرضاً برای ننوشتن متن در سمت چپ کلمه left رو تایپ می کنیم و برای ننوشتن متن در سمت راست کلمه Right رو تایپ می کنیم و برای ننوشتن متن در هر دو سمت چپ و راست کلمه both رو تایپ می کنیم و برای ننوشتن متن در اطراف اجزا بطور کلی کلمه none رو تایپ می کنیم.

کد: 

IMG{.......}

IMG.Right{float:right;clear:right}

H1{...}

---------------------------------------------------------------

با اتمام این بخش غالب مفاهیم کلی و اساسی CSS رو اینجا مطرح کردم و دستورات مهم و کاربردی و اساسی CSS رو ذکر کردم و روش استفاده و بکارگیری اون ها رو مطرح کردم و تا حر امکان از مثال های کلی و جزئی برای بیان مطلب استفاده کردم.

حالا دیگه دوستان عزیزی که حداقل با این آموزش جلو اومدن و براشون مفید بوده و تونستن برای یادگیری به این مباحث اکتفا کنن (که به نظرم نسبتاً مناسب و کافی بوده) باید قادر باشن یه CSS (خارجی)خودشون طراحی کنن و بعد یه صفحه وب دلخواه با اجزای مختلف طراحی کنن و و سرآخر هم با لینک کردن صفحه به CSS بتونن تاثیر CSS رو روی صفحه وب و قالب بندی اون ببینن.

برای مطالعه نکات خوبی که توی طراحی با CSS میشه مد نظر قرار داد میتونید به لینک زیر خصوصاً مبحث " موارد مربوط به استانداردهای طراحی " سری بزنین که خوندنش خالی از لطف نیست.

مهمان عزیز شما قادر به مشاهده پیوندهای انجمن مانشت نمی‌باشید. جهت مشاهده پیوندها ثبت نام کنید.

---------------------------------------------------------------

مباحث اصلی و مقدماتی CSS به پایان رسید.امیدوارم مورد استفاده دوستان عزیز قرار گرفته باشه.(هر چند متاسفانه چندان مورد استقبال قرار نگرفت Confused

)
در ادامه اگه عمری بود مباحث تکمیلی و مثال های کلی رو دراین باره مطرح می کنم.
والسلام...

Lantern

یه سری دیگه از Free CSS هایی که به نظر من خیلی خوب و مناسب نوشته شده رو قرار دادم .هم می تونید برای آموزش و حتی می تونید برای صفحات وب خودتون از اون ها استفاده کنید و یا حتی با تغییر دادن اونا به صورت دلخواه CSS مناسب خودتون رو تولید کنید.

simorghsimorgh

(۰۴ اردیبهشت ۱۳۹۱ ۰۶:۳۳ ب.ظ)Lantern نوشته شده توسط: بخشی از یک کد CSS خارجی کامل رو اینجا قرار دادم تا بعنوان یه مثال کلی از مطالبی باشه که تا الان گفته شده :

کد:

body { margin-top: 30px; padding: 0; background: #000000; font-size: 13px; text-align: justify; color: #ADADAD; } h1, h2, h3 { font-family: Arial, Helvetica, sans-serif; font-weight: normal; color: #819CDB; } h1 { font-size: 36px; } h2 { font-size: 2em; } h3 { font-size: 1em; } #header { width: 800px; height: 143px; margin: 0 auto; padding-bottom: 30px; background: url(images/img01.jpg) no-repeat left top; } #content { float: right; width: 480px; margin: 0; margin-bottom: 30px; } .post { padding: 0px 0px 0 0px; } .title { margin: 0; padding-bottom: 5px; font-size: 24px; font-family: Georgia, "Times New Roman", Times, serif; color: #FFFFFF; }

--------------------------------------------------------------------

ان شاء الله باقی مباحث توی فرصت های بعدی...

این خصوصیاتی که در بخشی از یک کد CSS خارجی کامل برای هر تگی نوشته شده به طور پیش فرض برای اون تگ مورد نظر استفاده میشه ؟
یعنی منظورم اینه که مثلا وقتی توی Html تگ body رو همین جوری ساده به کار ببریم:

کد php: 

<body>
// بدنه ی برنامه
</body> 

مشخصاتی که توی CSS برای تگ body نوشته شده اعمال میشه ؟

Lantern

(۲۹ تیر ۱۳۹۲ ۰۷:۰۵ ب.ظ)simorghsimorgh نوشته شده توسط: این خصوصیاتی که در بخشی از یک کد CSS خارجی کامل برای هر تگی نوشته شده به طورپیش فرض برای اون تگ مور نظر استفاده میشه ؟
یعنی منظورم اینه که مثلا وقتی توی Html تگ body رو همین جوری ساده به کار ببریم:

کد php:

<body> // بدنه ی برنامه </body>

مشخصاتی که توی CSS برای تگ body نوشته شده اعمال میشه ؟

هر چند بیش از یک ساله که توی مانشت بجز یک پست چیزی ننوشتم ولی به احترام شما دوست عزیز که سوالی رو در تاپیک آموزش CSS که سال قبل ایجاد کرده بودم پرسیدید تصمیم به پاسخ دادن به شما گرفتم ...

بله ، استنباط شما درسته . دقت کنین که کد ذکر شده یک CSS خارجی هستش و در CSS خارجی میتونید برای تگ های HTML خصوصیات و ویژگی هایی رو تعریف کنید و بعد در داخل کد HTML دیگه نیازی به تعربف اون ویژگی ها برای اون تگ ندارید و هر چند بار هم که از یک تگ بخصوص استفاده کنید بطور خودکار ویژگیهای اون تگ از CSS خارجی واکشی میشه و اساساً یکی از مزیت های CSS خارجی نسبت به CSS داخلی و CSS محلی همینه.

simorghsimorgh

ممنونم از شما دوست عزیز، از دوباره این تاپیک رو احیا می کنیم
.
.
.
خودت هم می دونی که یه آدم تازه وارد زیاد براش سؤال پیش میاد ... اونم سؤالات پایه ای
مثلا این سؤال:
این فایل های CSS رو کجا باید ذخیره کرد ؟ چجوری فایل html متوجه میشه که باید از یک فایل CSS خاص استفاده کنه ؟
واضح تر صحبت کنیم، آیا فایل CSS هم باید توی پوشه ی www کنار فایل html ذخیره بشه ؟

phoenix021

(۲۹ تیر ۱۳۹۲ ۰۹:۳۴ ب.ظ)simorghsimorgh نوشته شده توسط: ممنونم از شما دوست عزیز، از دوباره این تاپیک رو احیا می کنیم
.
.
.
خودت هم می دونی که یه آدم تازه وارد زیاد براش سؤال پیش میاد ... اونم سؤالات پایه ای
مثلا این سؤال:
این فایل های CSS رو کجا باید ذخیره کرد ؟ چجوری فایل html متوجه میشه که باید از یک فایل CSS خاص استفاده کنه ؟
واضح تر صحبت کنیم، آیا فایل CSS هم باید توی پوشه ی www کنار فایل html ذخیره بشه ؟

معمولا جایی که پروژتون رو ساختین یه فولدر static می سازین و توش یه فولدر css و یه فولدر js می سازین که می تونین توش فایل های css تون رو بریزین ، بعد برای اینکه css به کدتون اعمال بشه ، باید اونو import کنین ، توی صفحه ی html تون ، توی قسمت head ، دستور زیر رو قرار بدین :

کد: 

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

Lantern

(۲۹ تیر ۱۳۹۲ ۰۹:۳۴ ب.ظ)simorghsimorgh نوشته شده توسط: ممنونم از شما دوست عزیز، از دوباره این تاپیک رو احیا می کنیم
خودت هم می دونی که یه آدم تازه وارد زیاد براش سؤال پیش میاد ... اونم سؤالات پایه ای
مثلا این سؤال:
این فایل های CSS رو کجا باید ذخیره کرد ؟ چجوری فایل html متوجه میشه که باید از یک فایل CSS خاص استفاده کنه ؟
واضح تر صحبت کنیم، آیا فایل CSS هم باید توی پوشه ی www کنار فایل html ذخیره بشه ؟

توضیح دوستمون توی پست بالایی کافی بود
ضمناً اگه تازه کارید پیشنهاد میکنم این تاپیک رو کامل مطالعه کنید چون به زبان ساده تمام نکات اساسی CSS رو تقریباً توش گفتم و باقیش به تمرین و البته نکات اضافی دیگه ای که وجود داره بستگی داره.
فرضاً پاسخ همین سوال شما هم توی پست اول همین تاپیک اومده که عیناً نقل قولش میکنم :

*نحوه ی ایجاد CSS خارجی
-ایجاد یک سند متنی (فایل Notepad)
-تایپ نام تگ
-علامت }
-نوشتن خصوصیت ها و مقادیر (علامت ; بین هر یک از آن ها)
-علامت {
-ذخیره سند در قالب Text only و با پسوند CSS
-لینک کردن در صفحه ی وب به CSS خارجی فرضاً به شکل زیر :
<link href="Site.css" rel="stylesheet" type="text/css" />

پس بطور خاص خلاصه فایل CSS تون ابتدا ایجاد کنید و بعد با دستور لینک بالا در کد HTML اون رو بکار بگیرید.

simorghsimorgh

من یک فایل CSS با نام Site.css ایجاد کردم و برای امتحان فقط همین یه تکه رو نوشتم که پشت زمینه ، سبز رنگ بشه
body{bgcolor:#0F0;}

ولی وقتی لینک دادن به CSS خارجی یعنی این خط :
<link href="Site.css" rel="stylesheet" type="text/css" />
رو توی یک صفحه ی html داخل تگ body قرار دادم ، اتفاقی نیفتاد (پشت زمینه ی صفحه، سبز نشد ! )

چرا به نظرتون این اتفاق نیفتاد ؟

موضوع‌های مرتبط با این موضوع...
موضوع:		نویسنده	پاسخ:	بازدید:	آخرین ارسال
	درخواست معرفی منبع برای دروس پایگاه داده پیشرفته، تجارت و آموزش الکترونیکی	ehsannaq3	۱۲	۱۴,۱۰۷	۰۵ اردیبهشت ۱۴۰۳ ۱۱:۵۹ ب.ظ آخرین ارسال: bijibuji
	آموزش زبان ترکی ( آذری )	Eternal	۱۴۶	۶۲۷,۶۲۰	۰۳ دى ۱۴۰۱ ۰۸:۱۸ ب.ظ آخرین ارسال: yeni_iran_1290
	فیلم آموزش ساختمان داده	negin_bt	۰	۱,۲۵۴	۲۰ مهر ۱۴۰۱ ۰۷:۵۶ ب.ظ آخرین ارسال: negin_bt
	آموزش نحوه گرفتن پرتره ای حرفه ای	mortazangz	۰	۱,۵۰۹	۲۵ بهمن ۱۴۰۰ ۰۲:۱۹ ب.ظ آخرین ارسال: mortazangz
	سایت آموزش زبان	H-Arshad	۳	۴,۵۹۲	۱۴ اردیبهشت ۱۴۰۰ ۱۱:۴۶ ب.ظ آخرین ارسال: cyruskingsolomon
	آموزش زبان انگلیسی:اصطلاح حساب حساب کاکا برادر!	cyruskingsolomon	۰	۲,۵۸۶	۱۴ اردیبهشت ۱۴۰۰ ۱۲:۴۵ ق.ظ آخرین ارسال: cyruskingsolomon
	آموزش مکالمه زبان انگلیسی برای مبتدی ها + مکالمه وحشتناک واقعی	cyruskingsolomon	۰	۱,۹۳۵	۲۸ فروردین ۱۴۰۰ ۰۲:۵۸ ب.ظ آخرین ارسال: cyruskingsolomon
	اصطلاحات انگلیسی با رنگ‌ها آموزش زبان انگلیسی	cyruskingsolomon	۰	۱,۸۷۷	۲۸ فروردین ۱۴۰۰ ۱۲:۳۰ ق.ظ آخرین ارسال: cyruskingsolomon
	کتابهای چاپی آموزش اندروید	h_kh	۰	۲,۰۶۷	۲۲ فروردین ۱۴۰۰ ۱۱:۴۶ ب.ظ آخرین ارسال: h_kh
	آموزش زبان انگلیسی:گرامر	cyruskingsolomon	۱	۳,۳۴۰	۲۲ فروردین ۱۴۰۰ ۰۱:۲۲ ب.ظ آخرین ارسال: cyruskingsolomon

آموزش CSS

Can I see some ID?

Feeling left out?

رمزت رو فراموش کردی؟

Feeling left out?