کتاب 101 نکته و ترفند و هک css 2.1

سي اس اس و تمام زبان هاي برنامه نويسي داراي چند ضابطه و دستور عمل هستند که برنامه نويس پس از يادگيري اين دستور عمل ها مي تواند استايل مورد نظر خود را بنويسد. اما سي اس اس و يادگيري آن صرفا به يادگيري قوانين آن نمي شود. بلکه بايد با تمرين بيشتر و يادگيري نکات ظريف آن قدرت خود را در سي اس اس افزايش دهيم. کتاب The CSS Anthology: 101 Essential Tips, Tricks & Hacks علاوه بر اينکه براي تازه کار ها نوشته شده حاوي نکاتي است که کمتر جايي مي توان به آن ها دست يافت. البته اين کتاب داراي 9 فصل و 377 صفحه  مي باشد که تنها 4 فصل اول آن رايگان مي باشد. من اين کتاب را براي تمام کساني که تمايل به ياد گرفتن سي اس اس در سطح نه زياد حرفه اي هستند پيشنهاد مي کنم. حتي در صورتي که سي اس اس را به خوبي ياد گرفته ايد پيشنهاد من اين است که يک مروري روي آن داشته باشيد.

نويسنده: Rachel Andrew
صفحات: 377
ناشر: SitePoint.com
دانلود 4 فصل اول کتاب
اطلاعات بيشتر

Display Code In Entries

بعضي مواقع شما احتياج داريد کدي در پست خود نمايش دهيد. براي مثال من مي خواهم کدي براي لينک به وبلاگم نمايش دهم شبيه کد زير:  

<a href=”http://wintip.caspianblog.com”>WinTip</a&gt;

به هر حال اگر شما کد بالا را  در هنگام نوشتن پست بنويسيد هنگام نمايش آن پست در وبلاگ اين کد به صورت حقيقي نمايش داده نمي شود بلکه به صورت يک لينک نمايش داده مي شود: WinTip 

پس براي نمايش کد ها در پست ها چه بايد کرد؟ چند راه براي اين کار وجود دارد:

1– به صورت دستي معادل کد هاي خود را بنويسيد:
اگر تمام چيزي که شما مي خواهيد بنويسد نوشتن تگي کوتاه باشد راحت ترين راه  شايد نوشتن کاراکترهاي  < و > به صورت زير مي باشد:
 &lt;  به صورت  <
 &gt;  به صورت  >

پس در صورتي که در پست خود عبارت زير را تايپ کنيد:

 &lt;MTEntries&gt;

به صورت <MTEntries> توسط مرورگر تفسير ميشود.

در اينجا چند نمونه از معادل هاي نماد ها را آورده ام:

&raquo;     »      right double angle quotes
&laquo;     «       left double angle quotes
&lt;     <      less than sign
&gt;     >      greater than sign
&bull;     •      bullet
     or     &hearts;      ?      black heart
    ?      infinity symbol
&mdash;    —      long dash
&amp;    &      ampersand
&quot;    »      double quotes

براي اطلاعات بيشتر درمورد کد هاي اسکي و کارکترها و نمادها به اينجا مراجعه کنيد.

2–نرم افزارهاي انکودر
به اين ترتيب که شما با وارد کردن کدهاي خود در اين نرم افزار هاي مي توانيد معادل کدهاي خود براي استفاده در پست ها برداشت کنيد. براي نمونه نرم افزار SimpleCode HTML Encoder نرم افزار خوبي براي اين کار به شمار مي آيد.

3– استفاده از تگ text area
شما مي توايند کد هاي خود را در يک text box قابل اسکرول قرار دهيد و اين راهي بسيار خوب براي قرار دادن کدهاي بسيار بزرگ مي باشد.

براي اين کار کدهاي خود را بين تگ هاي باز و بسته ي textarea قرار دهيد. لازم به ذکر است که در اين روش احتياجي با انکود کردن نداريد.

 <textarea cols=»60″ name=»text» rows=»10″> Put your code here</textarea>

با عوض کردن تعداد رديف ها و ستون ها در rows و cols مي توانيد ابعاد text box خود را تغيير دهيد.

4– تگ نقل قول يا blockquote 
استايل زير را به استايل تمپليت خود اضافه کنيد:

 .content blockquote {
padding: 10px 10px 10px 10px;
border: solid 1px #cccccc;
background-color: #E7F1FD;
text-align: left;
}

به جاي content کلاس div اي که مربوط به محتواي پست ها مي شود را وارد کنيد در صورتي که از قالب اوليه ي MT 3 استفاده مي کنيد احتياجي به تغييرآن نداريد.و در صورتي که شما در طراحي قالب MT از تگ blockquote استفاده نکرده ايد مي توانيد content را از انتخاب کننده خدف کنيد و به صورت زير قانون css را بنويسيد:

  blockquote {
padding: 10px 10px 10px 10px;
border: solid 1px #cccccc;
background-color: #E7F1FD;
text-align: left;
}

از اين به بعد هرگاه خواستيد که کدي در وبلاگ قرار دهيد مي توانيد کدهاي انکود شده ي خود را داخل دو تگ باز و بسته ي blockquote قرار دهيد.

<blockquote>put your code here </blockquote>

نکته: در اين روش بايد کدهاي انکود شده را در داخل تگ هاي مربوطه قرار دهيد. 
مي توانيد از چند استايل زير نيز استفاده کنيد::

مثال 1

blockquote {
 background: #EEEEEE;
 border: thick solid Gray;
 border-left: none;
 border-right: none;
 font: 12px «Courier New», cursive;
 text-align: left;
 padding: 10px 20px 10px 20px;
}

در صورتي که از استايل بالا استفاده کنيد و کد هاي خود را بين دو تگ باز و بسته ي <blockquote> قرار دهيد کد هاي شما به صورت زير نمايش داده مي شوند:

You can insert your Code or  Blockquote here. e.g. :
The Blockquote element usually indicates content quoted from another source. This block element should be used ideally only when the quotation is longer and will likely span several lines (for shorter, in-line quotations using the Q element is suggested.)

مثال 2:

blockquote {
 border-left: 9px solid gray;
 background: #EEEEEE;
 text-align: left;
 padding: 14px 14px 14px 14px;
 font: 12px «Courier New», cursive;
 border-bottom: none;
 border-right: none;
 border-top: none;
}

هرگاه کدي در بين تگ هاي باز و بسته ي <blockquote>قرار گيرد کد ها به صورت زير نمايش داده مي شوند:

Insert your code and blockquote here. e.g.: blockquote {
 border-left: 9px solid gray
 background: #EEEEEE;
 text-align: left;
 padding: 14px 14px 14px 14px;
 font: 12px «Courier New», cursive;
}

5– ساخت کلاس جديدي براي کدها 
شما مي توانيد کلاس جديد فقط براي کدها بسازيد و براي آن ها استايل بسازيد.
در زير کلاس جديدي به نام  message تعريف کرده ايم و استايلي

 .message {
font-family: Courier New,Courier,monotype;
font-weight: bold;
font-size: 11px;
padding: 10px 10px 10px 10px;
background-color: #E8F2FB;
border: solid 1px #CADFEF;
}

و در پست هايتان يک span با کلاس message ايجاد کنيد و کدهايتان را در داخل دي تگ باز و بسته ي span وارد کنيد مانند زير:

 <span class=»message»>Your code would go here.</span>

6-استفاده از تگ هاي <pre> و  <code>
کدهاي خود را با تگ هاي باز و بسته ي code پوشش دهيد که به صورت زير نمايش داده مي شوند.

This is what your code looks like when placed within <code> and </code> tags
و هم چنين مي توانيد با استفاده از تگ <pre> از شکستن متن جلوگيري کنيد.

7–استفاده از تگ <xmp>
اين تگ کارش اينه که شما ديگه احتياج نداريد کدهاي خود را انکود کنيد بعني شما مي توانيد کدهاي حقيقي را بين دو تگ باز و بسته ي <xmp> قرار دهيد در اين صورت مرورگرها تا به اين تگ برخورد مي کنند بدون اينکه محتواي آنها را ترجمه کنند نمايش مي دهند. به مثال زير توجه کنيد:

<xmp><a href=”http://wintip.caspianblog.com”>WinTip</a></xmp&gt;

در اين صورت مرورگر به جاي اينکه کد بالا را به صورت يک لينک WinTip در آورد. شکل آن را حفظ خواهد کرد و به صورت زير تمايش مي دهد:

<a href=”http://wintip.caspianblog.com”>WinTip</a&gt;

من خيلي دوست داشتم اين روش را جزء اولين روش معرفي کنم ولي هنوز در مورد ساپورت مرورگرها در مورد اين تگ ترديد دارم.

من خودم اين تگ را روي Explorer 6 و Mozila Firefox امتحان کردم به خوبي جواب دادند ولي بقيه ي مرورگر ها را به طور دقيق نمي دونم. اينجور که اينجا نوشته به opera 2.1 و Netscape 2 beta 1 هم مي خوره.
دوستان اگه مرورگرهاي Netscape و opera آخرين ورژن دارند چک بکنند ببينم کار ميده يا نه.

به هر حال اگه به نتيجه رسيديد که اين راه بهتر از روش هاي ارائه شده است مي توانيد انتخاب گر يا همان selector را استايل هاي بالا را به xmp تغير دهيد براي مثال استايل هاي مثال 1 در بالا به صورت زير در مي آيند:

  xmp {
 background: #EEEEEE;
 border: thick solid Gray;
 border-left: none none;
 border-right: none;
 font: 12px «Courier New», cursive;
 text-align: left;
 padding: 10px 20px 10px 20px;
}

 مشکل کدهاي بسيار بلند

در صورتي که بخواهيد کد هاي بزرگ را در صفحات وبلاگ خود قرار دهيد باعث طولاني شدن آرشيوهاي تکي و غيره مي شود در اين حالت صفحات وبلاگ خسته کننده مي شوند براي جلوگيري از اين امر از ويژگي overflow سي اس اس کمک مي گيريم. 

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

ابتدا استايلي براي کد هاي overflow بنويسيد يا از کد هاي زير براي نمونه استفاده کنيد:

.overflowcode {
background: #EEEEEE;
width: 500px;
height: 150px;
overflow: auto;
text-align: left;
font: 12px «Courier New», cursive;
/* These code usuful for formatting scrollbars. You can change or delete these following code. */
scrollbar-3dlight-color : #999999;
scrollbar-arrow-color : #999999;
scrollbar-base-color : #666666;
scrollbar-darkshadow-color : Black;
scrollbar-face-color : #666666;
scrollbar-highlight-color : #999999;
scrollbar-shadow-color : #999999;
scrollbar-track-color : #8B8B8B;
}

هنگامي که ميخواهيد از کد هاي overflow در پست هايتان استفاده کنيد کافيست که کد هاي خود را در بين blockquote اي با کلاس overflowcode قرار دهيد

<blockquote class=”overflowcode”>Insert your code here <blockquote>

هر گاه طول و عرض پاراگراف هاي شما بيشتر از 500px و 150px شود بقيه ي کد ها به صورت اسکرول نمايش داده مي شود. به مثال زير توجه کنيد:

This code useful for MT Celender

<table border=»0″ cellspacing=»4″ cellpadding=»0″ summary=»Monthly calendar»>
<caption><$MTDate format=»%B %Y»$></caption>
<tr>
<th abbr=»Sunday» align=»center»>Sun</th>
<th abbr=»Monday» align=»center»>Mon</th>
<th abbr=»Tuesday» align=»center»>Tue</th>
<th abbr=»Wednesday» align=»center»>Wed</th>
<th abbr=»Thursday» align=»center»>Thu</th>
<th abbr=»Friday» align=»center»>Fri</th>
<th abbr=»Saturday» align=»center»>Sat</th>
</tr>
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td <MTCalendarIfToday>bgcolor=»#EEEEEE»</MTCalendarIfToday> align=»center»>
<MTCalendarIfEntries><MTEntries lastn=»1″><a href=»<$MTEntryLink$>»><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries>
<MTCalendarIfBlank>&nbsp;</MTCalendarIfBlank></td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>
</table>

 

شرح بعضي از قوانين CSS:

  • background
    استايل خود را براي background پس زمينه ي کدها تعريف کنيد
  • border
    استايل  حاشيه ي مورد نظر خود را وارد نماييد.
  • float
    براي تعريف مکان قرار گيري کدهاي خود از اين سلکتور استفاده کنيد.
  • font
    استايل مربوط به خصيصه ي font را وارد نماييد..
  • padding
    متن خود را از لبه ي حاشيه ها تراز کنيد و يک فضاي خالي براي خوانايي بيشتر ايجاد نماييد.
  • overflow
    که همين الان توضيح دادم

بهينه سازي استايل ها

در صورتي که شما در طراحي صفحات و تمپليت خود از blockquote استفاده کرده باشيد استايل هاي بالا موجب مي شود که تمام blockquote ها را تحت تاثير خود قرار دهد پس بايد کاري کنيم که فقط blockquote هاي درون پست ها فرمت شوند نه همه ي blockquote ها.
در اين صورت selector  هاي استايل هاي بالا را به شکل زير تغيير دهيد:

.content blockquote

به جاي content کلاس اي را قرار دهيد که حاي پست هاي شما باشد. معمولا افراد محتواي پست هاي خود را با کلاس content فرمت مي کنند.
در اين صورت استايل ها را مي توانيد به صورت زير وارد کنيد:

.content blockquote {
 border-left: 9px solid gray
 float: left;
 background: #EEEEEE;
 text-align: left;
 padding: 14px 14px 14px 14px;
 font: 12px «Courier New», cursive;
}

بر گرفته از مقاله ي  Display Code In Entries  و اطلاعات بنده ي حقير

اطلاعات بيشتر:

 MT Forums support thread on this subject
Another MT Forum Support thread
Code Beautifier plugin
Quickcode Plugin – a plugin for encoding code, but rather buggy with some browsers.
ScriptyGoddess code decoder – bookmarklet that will easily generate code. Only works on Windows machines.

ادامهٔ مطلب »

المان هاي مادر و فرزند

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

<div>
      <img scr=”blueflax.jpg” …>
      <p> … of
                <em>ephemera</em>
       </p>
       <p> … by Blue Flax Society </p>
</div>

در اين کد المان div مادر المان img و هر دو المان p محسوب مي شود. اولين المان p مادر المان em مي باشد. المان em يه عنوان فرزند p و نوه ي المان div در نظر گرفته مي شود.

بر گرفته از کتاب راهنماي سريع ويژوال HTML
نام کتاب اصلي: HTML for World Wide Web 5th Edition
نويسنده: Elizabeth Castro
مترجم: ماني قاسم نيا همداني

صرف و نحو CSS

 

قسمت هاي مختلف يك فرمان Css:

1-selector

2-property

3-value

كه به ترتيب به معناي گزينش گر، مشخصه، ارزش مي باشد.

 

selector {property: value}

 

  • selector: قسمتي از فرمان مي باشد كه شما بايد مشخص كنيد چه قسمتي از تگ HTML را ميخواهيد تغيير دهيد.
  • ‍‍Property: صفتي است كه شما قصد تغيير آن راد داريد. هر Property ميتواند يك ارزش اختيار كند.
  • Value: ازشي است كه مقدار و نوع و كلا ارزش Property را معلوم ميكند.

Propery و Value توسط يك Colon (دونقطه 🙂 جدا مي شوند و هر دوي آن ها بين دو آكولاد قرار ميگيرند:

 

body {color: black}

 

در صورتي كه ارزش (Value) بيش از يك كلمه باشد بين Double Quote («) قرار مي گيرد.

 

p {font-family: «sans serif»}

 

نكته: در صورتي كه بخواهيد بيشتر از يك خصلت (Property) مشخص كنيد. شما بايد هر خصلت را با يك Semi-colon (;) جدا كنيد.

مثال زير چند خصلت با هم تعريف شده اند. سطر بند: وسط چين، رنگ متن: قرمز

 

p {text-align:center;color:red}

 

براي اين كه استايل شما راحت تر خوانده شود بهتر است كه هر خصلتي را در يك سطر تعريف كنيد، در اين صورت نوشته خوانا تر مي شود. مشابه مثال زير:

 

p

{

text-align: center;

color: black;

font-family: arial

}

 

ادامهٔ مطلب »