What Is a <div>?
تگی است که هر تگی را می‌توان درون آن قرار داد و برای طراحی ساختار صفحه به درد می‌خورد . div زمانی معنا پیدا می‌کند که برای آن کد css تعریف شده باشد .
اختصاص یک کد css به چند تگ : از گروه‌های سلکتور استفاده میکنیم . مثال : کد css :
h1 , h2 ,h3 ,h4 , h5 , h6
{
Color:#F1CD33 ;
}
کد html :
<h1>head1</h1>
<h2>head2</h2>
<h3>head3</h3>
<h4>head4</h4>
<h5>head5</h5>
<h6>head6</h6>
می‌توان حتی کلاس یا آی‌دی را در گروه ادغام کرد
مثال :
h1 , p , .copyright , #banner
{
color:#f1cd33;
}
Universal selector :
این کد css روی تمام تگ‌های صفحه اعمال می‌شود . با علامت * مشخص می‌شود . مثال :
*
{
font-weight:bold;
}
The Html Family Tree :
مثال برای تگ‌های پدر و فرزندی :
کد html :
<h1>
<strong>Mohsen is web developer</strong>
</h1>
<p>
A paragraph of <strong>important</strong> text.
</p>
کد css :
h1 strong
{
color:red;
}
این یعنی تگ strong که پدرش h1 است . پدر و فرزندی را با یک space بینشان نشان می‌دهند .
مثال برای درخت : کد html :
<h1>h1</h1>
<p>abc <strong><a href="http://www.google.com/">google</a></strong> def</p>
<h2>h2</h2>
<ul>
<li><a href="http://www.google.com/">google</a></li>
<li><a href="http://www.google.com/">google</a></li>
<li><a href="http://www.google.com/">google</a></li>
</ul>
کد css :
li a
{
font-family:Arial;
}
به جای اینکه بنویسیم li a می‌توانیم بنویسیم :
Ul li a
Body li a
Html li a
Html body ul li a
مثال : کد html :
<div id="content">
<h1>Heading here</h1>
<p class="intro">Lorem ipsum dolor sit amet .</p>
<p>Lorem ipsum dolor <a href="#">sit</a> amet .</p>
</div>
<div id="nav">
<ul>
<li><a href="#" class="intro">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
</ul>
</div>
<div id="footer">
Lorem ipsum dolor <a href="#">sit</a> amet .</div>
کد css اول :
#nav ul li a
{
color:green;
}
با اجرای این کد css کلمات ِ item1,item2.item3 سبز رنگ می‌شوند .
کد css دوم :
div .intro a
{
color:red;
}
تغییری ایجاد نمی‌کند ؛ این کد css یعنی تگ a ای که فرزند ِ یک تگ دیگر با کلاس intro است و پدر آن تگ div است و ما همچین تگی نداریم .
کد css سوم :
div.intro a
{
color:red;
}
تغییری ایجاد نمی‌شود .
فرق کد دوم و سوم : کد دوم یعنی تگ a ای که فرزند ِ یک تگ دیگر با کلاس intro است و پدر آن تگ div است ؛ اما کد سوم یعنی تگ div که کلاسشintro باشد و درون این تگ یک تگa باشد .
کد css چهارم :
.intro a
{
color:yellow;
}
این کد یعنی تگ a ای که کلاس پدرش intro است . که باز هم تغییری ایجاد نمی‌کند چون همچین تگی وجود دارد .
#foo td , th
{
Color:red;
}
این کد معادل است با :
#foo td
{
color:red;
}
th
{
color:red;
}
Attribute selectors :
مثال :
a[href="www.yahoo.com"]
{
color:red;
font-weight:bold;
}
این یعنی تمام لینک‌هایی که به سایت یاهو داده شده است رنگ قرمز داشته باشند و bold باشند .
Textbox :
<input type="text" name="firstname"/>
مثال :
<p>First name :
<input type="text" name="firstname"/>
</p>
<p>Last name :
<input type="text" name="lastname"/>
</p>
دو ویژگی برای textbox :
با استفاده از maxlength مشخص میکنیم که کاربر چند کاراکتر می‌تواند وارد کند .
با استفاده ازsize مشخص میکنیم که چند کاراکتر به کاربر نشان داده شود .
مثال :
<p>First name :
<input type="text" name="firstname" size="5" maxlength="5"/>
</p>
<p>Last name :
<input type="text" name="lastname"/></p>
Password :
مثال :
<p>password :
<input type="password" name="password"/></p>
Check boxes and radio buttons :
Check boxes : Choose more than one option
Radio buttons : Choose only one option
مثال :
<p>
what are some of your favorite food?</p>
<input type="checkbox" name="food" value="icecream" checked="checked"/>Ice cream<br/>
<input type="checkbox" name="food" value="eggsham"/>Green Eggs and Ham<br/>
<input type="checkbox" name="food" value="pizza"/>Pizza<br/>
<p>
What is your gender?</p>
<input type="radio" name="gender" value="male" checked="checked"/>Male<br/>
<input type="radio" name="gender" value="female"/>Female<br/>
Drop-down lists :
برای درست کردن drop-down از تگ select استفاده میکنیم و برای درست کردن list از option استفاده میکنیم .
اگر size را برابر یک قرار دهیم drop-down list و اگر بیشتر از یک قرار دهیم list box درست می‌شود . اگر برای سایز مقدار قرار ندهیم به صورت defult برابر یک می‌باشد .
مثال :
<p>What is your favorite food?</p>
<select name="food">
<option value="pizza">pizza</option>
<option value="icecream">Ice cream</option>
<option value="eggsham">Green Egg and Ham</option>
</select>
اگر size را برابر 2 یا 3 قرار دهیم تبدیل به listbox می‌شود .
Multi-line text boxes :
کاربرد : برای گرفتن آدرس ، صورت جلسه ، کامنت و ...
<textarea rows=”10” cols=”40” name=”comments” >please include any comments here .</textarea>