سلکتور های Grouping و Nesting در CSS
سلکتورهای Grouping
در style sheetها، اغلب عناصری با یک استایل وجود دارند.
h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
برای کوتاه کردن کد، می توان سلکتورها را group کرد.
هر سلکتور را باید با یک علامت ویرگول جدا کرد.
در مثلا زیر، سلکتورهای کد بالا با هم group شده اند:
Nest کردن سلکتورها
اعمال کردن استایل برای سلکتور درون سلکتوری دیگر امکان پذیر است.
در مثال زیر، یک استایل برای همه عنصرهای p، تعیین شده است، و استایلی دیگر نیز برای عنصرهای p، که درون کلاس "marked" نست شده اند، تعیین شده است.
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:blue;
}
.marked p
{
color:white;
}
نمایش و قابلیت دیده شدن در CSS
پراپرتی display تعیین می کند چگونه/آیا یک عنصر نمایش داده می شود، و پراپرتی visibility تعیین می کند آیا یک عنصر با قابل دیدن (visible) یا مخفی (hidden) باشد.
مخفی کردن عنصر
Display: none
یا
Visibility: hidden
مخفی کردن عنصر را می توان با تنظیم پراپرتی display روی "none" یا تنظیم پراپرتی visibility
روی "hidden" انجام داد. اما توجه داشته باشید که این دو متد نتایج متفاوتی دارد:
visibility:hidden، عنصری را مخفی کرد، اما همان فضای سابق را اشغال می کند. آن عنصر مخفی می شود، اما روی layout تاثیر خواهد گرفت.
h1.hidden {visibility:hidden;}
نمایش CSS – عنصرهای Block و Inline
عنصر block، عنصری است که کل پهنای موجود را اشغال می کند، و دارای فاصله ای (line break) قبل و بعد از کنترل است.
نمونه هایی از عنصر block:
عنصر inline، فقط پهنایی را اشغال می کتد که لازم است، و فاصله ای ندارد.
نمونه هایی ار عنصر inline:
تغییر چگونگی نمایش عنصر
تغییر دادن عنصر inline به یک عنصر block یا بالعکس، می تواند برای ظاهر صفحه مفید باشد، و همچنان از استانداردهای وب تبعیت می کند.
مثال زیر، عنصرهای span را بصورت عناصر block نمایش می دهد:
نکته مهم: تغییر نوع نمایش عنصر تنها چگونگی نمایش عنصر را نشان می دهد، دهد نه نوع عنصر را. مثلاً، عنصر Inline که display:block تنظیم شده است، اجازه ندارد عنصر block را درون خودش nest کند.
موقعیت یابی در CSS
موقعیت یابی
پراپرتی موقعیت یابی در CSS، به شما اجازه می دهد موقعیت عنصری را پیدا کنید. همچنین می تواند عنصری را پشت عنصری دیگر قرار دهد، و تعیین می کند هنگامی که محتویات یک عنصر زیاد است چه اتفاقی باید بیافتد.
می توان عنصرها را با استفاده از پراپرتی top، bottom، left، و right نیز موقعیت یابی کرد. اما، این پراپرتی ها اثر نخواهند داشت مگر اینکه ابتدا پراپرتی position تنظیم و تعیین شود. همچنین این پراپرتی ها بسته به متد موقعیت یابی، عملکرد متفاوتی دارند.
چهار متد متفاوت موقعیت یابی وجود دارد.
موقعیت یابی استاتیک (Static Positioning)
عنصرهای HTML به طور پیش فرض بصورت استاتیک موقعیت یابی می شوند. عنصری که بصورت استاتیک موقعیت یابی شده، همیشه طبق جریان نرمال صفحه موقعیت یابی می شود.
عنصرهایی که بصورت استاتیک موقعیت یابی شده اند، تحت تاثیر پراپرتی های top، bottom، left، و right قرار نمی گیرند.
موقعیت یابی ثابت (Fixed Positioning)
عنصری با موقعیت ثابت، نسبت به پنجره مرورگر موقعیت یابی می شود.
حتی اگر پنجره scroll نیز بشود، حذف نخواهد شد:
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
نکته: IE، فقط زمانی valueهای fixed ساپورت می کند که یک !DOCTYPE تعیین شده باشد.
عنصرهای موقعیت یابی شده ثابت، از جریان (flow) صفحه حذف می شوند.
این عنصرها ممکن است با عنصرهای دیگر تداخل داشته باشند.
موقعیت یابی نسبی (Relative Positioning)
عنصر موقعیت یابی شده نسبی، بسبت به موقعیت نرمالش موقعیت یابی می شود.
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
محتوای عنصرهایی که بصورت نسبی موقعیت یابی شده اند را می توان جابجا و روی عنصرهای دیگر انداخت، اما فضای اشغال شده برای عنصر در جریان اصلی صفحه حفظ می شود.
h2.pos_top
{
position:relative;
top:-50px;
}
موقعیت یابی مطلق (Absolute Positioning)
عنصر موقعیت مطلق، نسبت به عنصر اصلی اول؛ که موقعیتی غیر از استاتیک دارد، موقعیت یابی می شود. اگر چنین عنصری پیدا نشود، آنگاه containing block، <html> خواهد بود:
h2
{
position:absolute;
left:100px;
top:150px;
}
عنصرهایی که بصورت مطلق موقعیت یابی شده اند، از جریان نرمال حذف می شوند.
این عنصرها ممکن است با عنصرهای دیگر تداخل داشته باشند.
عنصرهای روی هم افتاده (Overlapping Elements)
هنگامی که عنصرها خارج از جریان نرمال موقعیت یابی می شوتد، ممکن است با عنصرهای دیگر تداخل د اشته باشند.
پراپرتی z-index، stack order یک عنصر را تعیین می کند ( که باید در جلو، پشت دیگران قرار گیرد)
عنصر ممکن است stack order مثبت یا منفی داشته باشد:
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
عنصری با stack order بیشتر همیشه در جلوی عنصری با stack order کمتر قرار می گیرد.
CSS Float
CSS Float چیست؟
با CSS Float می توان عنصری را به چپ یا راست هل یا حرکت داد، که به عناصر دیگر اجازه می دهد اطرافش را wrap کنند.
از float اکثرا برای تصاویر استفاده می شود، اما هنگام کار کردن با layoutها نیز مفید است.
چگونگی حرکت (float) عنصرها
عنصرها به صورت افقی float می کنند، بدین معنا که یک عنصر فقط در جهات چپ یا راست حرکت می کند نه در جهات بالا یا پایین.
یک عنصر float شده تا جاییکه می تواند به سمت چپ یا راست حرکت می کند. یعنی تا منتهی الیه سمت چپ یا راست عنصر دربرگیرنده.
عنصر بعد از عنصر حرکت کننده، در اطراف آن flow خواهد کرد.
عنصر بعد از عنصر حرکت کننده، تحت تاثیر قرار نخواهد گرفت.
اگر تصویری به سمت راست حرکت کند، متنی نیز در اطراف آن به سمت چپ حرکت می کند:
عنصرهای حرکت کننده کنار یکدیگر
اگر چندین عنصر متحرک را پشت سر هم قرار دهید، در کنار هم حرکت خواهند کرد به شرطی که فضای لازم موجود باشد.
در اینجا، ما یک گالری عکس با استفاده از پراپرتی float درست کرده ایم:
thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
غیر فعال کردن Float- استفاده از Clear
عنصرهای بعد از عناصر متحرک در اطراف آن flow خواهند کرد. برای پرهیز از این موضوع، از پراپرتی clear استفاده کنید.
این پراپرتی تعیین می کند عنصرهای متحرک دیگر به کدام سمت های یک عنصر اجازه ندارند.
با استفاده از پراپرتی clear، یک text line به گالری عکس اضافه کنید:
تراز کردن افقی CSS
تراز کردن عنصرهای block
عنصر block، عنصری است که کل پهنای موجود را اشغال می کند، و دارای فاصله ای (line break) قبل و بعد از کنترل است.
نمونه هایی از عنصر block:
برای تراز کردن متن به قسمت اول مقاله مراجعه کنید.
در این بخش، به شما نشاه می دهیم چگونه عنصر block را برای استفاده در layout تراز کنید.
تراز کردن در مرکز با استفاده از پراپرتی margin
عنصرهای block را می توان با تنظیم مارجین های چپ و راست روی "auto" تراز کرد.
نکته مهم: استفاده از margin:auto در IE کار نمی کند مگر اینکه یک !DOCTYPE تعریف شود.
تنظیم مارجین های چپ و راست روی auto، تعیین می کند که آنها باید مارجین موجود را بطور مساوی تقسیم کنند. نتیجه این کار، عنصری در مرکز خواهد بود:
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
اگر پهنا 100% باشد، تراز کردن اثر نخواهد داشت.
در IE، یک margin handling bug برای عنصرهای block وجود دارد. برای اینکه مثال های بالا در IE5 کارکند، باید کدهای بیشتری وارد کنید.
تراز چپ و راست با استفاده از پراپرتی Position
یکی از متدهای تراز کردن عنصرها، استفاده از موقعیت یابی مطلق (absolute positioning) است:
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
نکته مهم: عنصرهای موقعیت مطلق، از جریان نرمال حذف می شوند، و ممکن است با عناصر دیگر تداخل داشته باشند.
مسئله سازگاری Crossbrowser
هنگام تراز کردن عناصری مانند این، از پیش تعریف کردن margin و padding برای عنصر <body> ایده خوبی است. این کار بمعنای پرهیز از تفاوتهای visual در مرورگرهای مختلف است.
IE هنگام استفاده از از پراپرتی position مشکل دیگری نیز دارد. اگر عنصر دربرگیرنده (در caseما، <div class="container">) دارای پهنایی مشخص است، و هیچ !DOCTYPE تعریف نشده است؛ IE یک مارجین 17px در سمت راست اضافه خواهد کرد. ظاهراً این فضا برای scrollbar رزرو شده است. هنگام استفده از پراپرتی position، !DOCTYPE تعریف کنید:
body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
تراز چپ و راست با استفاده از پراپرتی float
یکی از متدهای تراز کردن عنصرها، استفاده از از پراپرتی float است:
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
مسئله سازگاری Crossbrowser
هنگام تراز کردن عناصری مانند این، از پیش تعریف کردن margin و padding برای عنصر <body> ایده خوبی است. این کار بمعنای پرهیز از تفاوتهای visual در مرورگرهای مختلف است.
IE هنگام استفاده از از پراپرتی float مشکل دیگری نیز دارد. اگر هیچ !DOCTYPE تعریف نشده باشد، IE یک مارجین 17px در سمت راست اضافه خواهد کرد. ظاهراً این فضا برای scrollbar رزرو شده است. هنگام استفده از پراپرتی float، !DOCTYPE تعریف کنید:
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
کلاس های قلابی در CSS( CSS Pseudo-classes)
از این کلاس ها در CSS برای اضافه کردن جلوه های ویژه به بعضی از سلکتورها استفاده می شود.
سینتکس (syntax)
سیتتکس این کلاس:
selector:pseudo-class {property:value;}
همچنین می توان کلاس های CSS را با pseudo-classes نیز استفاده کرد:
selector.class:pseudo-class {property:value;}
Anchor Pseudo-classes
لینک ه8ا را می توان به روش های مختلفی در مرورگری که CSS را ساپورت می کند، نمایش داد:
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
نکته مهم: یک hover باید بعد از a:link و a:visited در تعریف CSS قرار گیرد تا موثر واقع شود.
نکته مهم: a:active باید بعد از a:hover در تعریف CSS قرار گیرد تا موثر واقع شود.
نکته مهم: نام های Pseudo-class به حروف بزرگ حساس نیستند.
Pseudo-classes و کلاس های CSS
می توان Pseudo-classes را با کلاس های CSS ترکیب کرد.
a.red:visited {color:#FF0000;}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
اگر لینک مثال بالا بازدید شده باشد، قرمز نمایش داده خواهد شد.
CSS- The :first-child Pseudo-class
:first-child pseudo-class با عنصری معین شده که اولین child عنصر دیگر است، match می شود.
نکته مهم: برای اینکه :first-child در IE کارکند، یک <!DOCTYPE> باید تعریف شود.
عنصر اول <p> را match کنید
در مثال زیر، سلکتور با هر عنصر <p> که اولین child هر عنصر است، match می شود:
<html>
<head>
<style type="text/css">
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
عنصر اول <i> را در همه عنصرهای <p> مچ کنید
در مثال زیر، سلکتور با اولین عنصر <i> در همه عنصرها مچ می شود:
<html>
<head>
<style type="text/css">
p > i:first-child
{
font-weight:bold;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
همه عنصرهای <i> را همه عنصرهای first child <p> مچ کنید
در مثال زیر، سلکتور با همه عنصرهای <i> در عنصرهای <p> که اولین child عنصر دیگر است، مچ می شود:
<html>
<head>
<style type="text/css">
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
CSS- The :lang Pseudo-class
:lang pseudo-class به شما اجازه می دهد قوانین مخصوصی بر ای زبان های مختلف تعریف کنید.
نکته مهم: Internet Explorer 8 و بالاتر، :lang pseudo-class را ساپورت می کند، اگر یک <!DOCTYPE> تعریف شده باشد.
در مثال زیر، :lang class برای عنصر q با lang="no" علامت نقل قول تعریف می کند:
<html>
<head>
<style type="text/css">
q:lang(no) {quotes: "~" "~";}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
ستون CSS نشان می دهد پراپرتی در کدام ورژن CSS تعریف می شود (CSS1 یا CSS2).
Pseudo-elements در CSS
سینتکس
سیتنکس pseudo-elements:
selector:pseudo-element {property:value;}
کلاس های CSS را می توان با pseudo-elements نیز می توان استفاده کرد:
selector.class:pseudo-element {property:value;}
:first-line Pseudo-element
از "first-line" pseudo-element برای اضافه کردن استایل ویژه به اولین خط متن استفاده می شود.
در مثال زیر، مرورگر خط اول متن را در عنصر p، مطابق با استایل "خط اول pseudo-element " آرایش می کند.
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
نکته مهم: "خط اول pseudo-element " را فقط می توان با عنصرهای block-level
استفاده کرد.
نکته مهم پراپرتی های زیر به "خط اول pseudo-element " اعمال می شوند:
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
:first-letter Pseudo-element
از "حرف اول pseudo-element" برای اضافه کردن استایلی ویژه به اولین حرف متن استفاده می شود.
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
نکته مهم: "حرف اول pseudo-element " را فقط می توان با عنصرهای block-level
استفاده کرد.
نکته مهم پراپرتی های زیر به "حرف اول pseudo-element " اعمال می شوند:
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (only if "float" is "none")
- text-transform
- line-height
- float
- clear
Pseudo-elements و کلاس های CSS
Pseudo-elements را می توان با کلاس های CSS ترکیب کرد:
p.article:first-letter {color:#ff0000;}
<p class="article">A paragraph in an article</p>
مثلا بالاحرف اول همه پاراگراف ها با class="article" را قرمز نشان می دهد.
Pseudo-elements چندگانه
می توان چندین pseudo-elements را نیز با هم ترکیب کرد.
در مثال زیر، حرف اول پاراگراف قرمز خواهد شد، با سایز فونت xx-large. بقیه خط اول، آبی و بصورت حروف کوچک خواهد بود. بقیه پاراگراف دارای اندازه فونت و رنگ پیش فرض خواهد بود.
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
:before Pseudo-element
":before" pseudo-element را می توان برای insert کردن مقداری content قبل از content یک عنصر استفاده کرد.
مثلا زیر، تصویری را قبل از هر عنصر <h1> درج کرد.
h1:before
{
content:url(smiley.gif);
}
Pseudo-elements
ستون CSS نشان می دهد پراپرتی در کدام ورژن CSS تعریف می شود (CSS1 یا CSS2).
نوار پیمایش (Navigation Bar) در CSS
نوارهای پیمایش
داشتن نوار پیمایش که استفاده از آن آسان باشد، برای هر وب سایتی مهم است.
با CSS می توان منوهای کسل کننده HTML را تبدیل به نوارهای پیمایش زیبا و جذاب کرد.
نوار پیمایش – لیست لینک ها
نوار پیمایش نیاز به HTML استاندارد بعنوان پایه اش دارد.
ما در مثال هایمان، نوار پیمایش را از روی لیست استاندارد HTML می سازیم.
اساساً نوار پیمایش لیستی از لینک هاست، پس استفاده از عنصرهای <ul> و <li> بسیار مناسب است:
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
حالا بیایید bulletها و marginها و padding را از لیست حذف کنیم:
ul
{
list-style-type:none;
margin:0;
padding:0;
}
مثال بالا توضیح می دهد:
- list-style-type:none — بولت ها را حذف می کند. نوار پیمایش نیاز به لیستmarker ها ندارد.
- تنظیم marginها و padding روی 0، تنظیمات پیش فرض مرورگر را حذف می کند.
کد موجود در مثال بالا، کدی استاندارد است که هم در نوارهای پیمایش افقی و هم عمودی بکار می رود.
نوار پیمایش عمودی
برای ساختن نوار پیمایش عمودی، فقط به استایل کردن عنصرهای <a> نیاز داریم، بعلاوه کد بالا:
a
{
display:block;
width:60px;
}
مثال بالا توضیح می دهد:
- display:block — لینک ها را بصورت عنصرهای block نمایش می دهد و کل ناحیه لینک را قابل کلیک می کند.
- width:60px — عنصرهای block، کل پهنای موجود پیش فرض را اشغال می کند. ما قصد داریم 60px پهنا تعیین کنیم.
نکته مهم: همیشه پهنای عنصرهای <a> را در نوار پیمایش عمودی تعیین کنید.اگر پهنا را حذف کنید، IE می تواند نتایج غیر منتظره ای تولید کند.
نوار پیمایش افقی
دو راه برای ایجاد نوار پیمایش افقی وجود دارد. استفاده از list itemهای inline و floating.
هر دو متد بخوبی کار می کند، اما اگر می خواهید لینک ها دارای یک سایز باشند، باید از متد floating استفاده کنید.
List Itemهای Inline
یک راه ساختن نوار پیمایش افقی، تعیین عنصرهای <li> بصورت inline است، بعلاوه کدهای استاندارد بالا:
مثال بالا توضیح می دهد:
- display:inline — بطور پیش فرض، عنصرهای <li>، عنصرهایی block هستند. در اینجا ما breakهای خط را قبل و بعد از هر list item حذف می کنیم تا آنها را روی یک خط نمایش دهیم.
list itemهای Floating
در مثا بالا، لینک ها پهناهای متفاوتی دارند.
برای همه لینک هایی که قر ار است پهنای مساوی داشته باشند، عنصر <li> را حرکت دهید و پهنایی بر ای عنصر <a> تعیین کنید:
li
{
float:left;
}
a
{
display:block;
width:60px;
}
مثال بالا نوضیح داد که:
float:left — از float بر ای حرکت دادن عنصرهای block در کنار یکدیگر استفاده کنید
display:block — لینک ها را بصورت عنصرهایی نمایش می دهد که کل ناحیه لینک را قابل کلیک می کند، و به ما اجازه تعیینهنا را می دهد
width:60px— از انجاییکه عنصرهای block، کل پهنای موجود را اشغال می کنند، نمی توانند در کنار هم حرکت کنند. ما پهنای لینک ها را 60px تعیین می کنیم.
گالری عکس در CSS
از CSS می توان برای ایجاد گالری عکس استفاده کرد.
گالری عکس
گالری عکس زیر با CSS ایجاد شده است:
<html>
<head>
<style type="text/css">
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="klematis_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
کدر بودن و شفافیت تصویر در CSS
ایجاد تصاویر شفاف با CSS آسان است.
ایجاد تصاویر شفاف:
<html>
<head>
<style type="text/css">
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<img src="klematis.jpg" width="150" height="113" alt="klematis"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
<img src="klematis2.jpg" width="150" height="113" alt="klematis"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
</body>
</html>
ایجاد یک box شفاف با متنی روی تصویر پیش زمینه
<html>
<head>
<style type="text/css">
div.background
{
width: 500px;
height: 250px;
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
filter:alpha(opacity=60);
opacity:0.6;
}
div.transbox p
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body><div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
نکته: مثال های بالا هنوز استاندارد نیستند. اما در همه مرورگرهای جدید کار می کند.
مثال اول - ایجاد یک تصویر شفاف
در ابتدا چگونگی ایجاد یک تصویر شفاف با CSS را به شما نشان دادیم.
تصویر معمولی:
همان تصویر با شفافیت:
به سورس کد زیر نگاه کنید:
<img src="klematis.jpg" width="150" height="113" alt="klematis"
style="opacity:0.4;filter:alpha(opacity=40)" />
Firefox از پراپرتی opacity:x برای شفافیت استفاده می کند، در حالیکه IE از filter:alpha(opacity=x) استفاده می کند.
نکته: سینتکس شفافیت، opacity:x است.
در فایرفاکس، (opacity:x) می تواند مقداری بین 0.0 تا 1.0 باشد. مقدار کمتر، آن عنصر را شفافتر می کند.
در اینترنت اکسپلورر، (filter:alpha(opacity=x)) می تواند مقداری بین 0 تا 100 باشد. مقداری کمتر، آن عنصر را شفاف تر می کند.
مثال دوم – متن در box شفاف
سورس کد این تصویر به شرح زیر است:
<html>
<head>
<style type="text/css">
div.background
{
width:500px;
height:250px;
background:url(klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
ابتدا یک عنصر div class="background")) با پهنا و ارتفاع ثابت، یک تصویر پیش زمینه، و یک border ایجاد کردیم. سپس یک div کوچکتر (class="transbox") درون عنصر div اول ایجاد کردیم. این div نیز دارای پهنای ثابت، تصویر پیش زمینه، و یک border است. به علاوه، این div را شفاف کردیم.
درون div شفاف، مقداری متن درون عنصر p وارد کردیم.
Spriteهای تصویر در CSS
Spriteهای تصویر
sprite تصویر مجموعه ای از تصاویر است که درون یک تصویر واحد گذاشته شده اند.
صفحه وبی با تصاویر زیاد، مدت طولانی طول می کشد تا load شود و requestهای زیادی از سرور می کند.
استفاده از spriteهای تصویر، تعداد requestها از سرور را کاهش می دهد و پهنای باند را ذخیره می کند.
Spriteهای تصویر – مثالی ساده
img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}
<img class="home" src="img_trans.gif" /> – فقط یک تصویر کوچک شفاف تعریف می کند زیرا اتریبیوت src نباید خالی باشد. تصویر نمایش داده شده، پیش زمینه تصویری است که در CSS معین کردیم.
width:46px;height:44px – بخشی از تصویری را که می خواهیم استفاده کنیم، تعریف می کند
background:url(img_navsprites.gif) 0 0 – پشت زمینه تصویر و موقعیتش را تعریف می کند.
این، آسان ترین راه برای استفاده از spriteهای تصویر است، حالا می خواهیم با استفاده از لینک و hover effects آن را گسترش دهیم.
Spriteهای تصویر – ایجاد لیست پیمایش
می خواهیم از sprite تصویر ("img_navsprites.gif") استفاده کنیم تا یک لیست پیمایش ایجاد کنیم.
ما از یک لیست HTML استفاده می کنیم، زیرا می تواند یک لینک باشد و همچنین تصویر پیش زمینه را نیز ساپورت می کند:
بجای استفاده از سه تصویر، از یک تصویر واحد استفاده می کنیم ("img_navsprites.gif")
با CSS می توان فقط قسمت از عکس را که نیاز است، نشان داد.
در مثال زیر، CSS تعیین می کند کدام بخش از تصویر "img_navsprites.gif" نشان داده شود:
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
مثال بالا توضیح داد که:
- #navlist{position:relative;} – موقعیت روی "نسبی (relative)" تنظیم می شود تا اجازه موقعیت یابی مطلق درون آن را بدهد.
- #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} – margin و padding روی 0 تنظیم می شوند، list-style حذف می شود، و همه list itemها موقعیت یابی مطلق می شوند.
- #navlist li, #navlist a{height:44px;display:block;} – ارتفاع همه تصاویر 44px است.
حالا بیایید شروع به موقعیت یابی و استایل هر قسمت معین کنیم:
- #home{left:0px;width:46px;} – تا منتهی الیه چپ موقعیت یابی می شوند، و پهنای تصویر 46px است
- #home{background:url(img_navsprites.gif) 0 0;} – تصویر پشت زمینه و موقعیتش را تعریف می کند (چپ 0px، بالا 0px)
- #prev{left:63px;width:43px;} – 63px به سمت راست موقعیت یابی می شود (46px پهنای home، + مقداری فضای اضافی بین آیتم ها) و پهنایش 43px است
- #prev{background:url('img_navsprites.gif') -47px 0;} – تصویر پیش زمینه را 47px به سمت راست تعریف می کند
- #next{left:129px;width:43px;} – 129px به سمت راست موقعیت یابی می شود (63px شروع #prev + 43px پهنای #prev ، + فضای اضافی)، و پهنا 43px است.
- #next{background:url('img_navsprites.gif') no-repeat -91px 0;} – تصویر پیش زمینه را 91px به سمت راست تعزیف می کند (46px پهنای #home، + 1px تقسیم کننده خط + 43px پهنای #prev + 1px نقسیم کننده خط)
Spriteهای تصویر – افکت hover
حالا می خواهیم افکت hover را به لیست پیمایش مان اضافه کنیم.
عکس جدیدمان ("img_navsprites_hover.gif") شامل سه تصویر پیمایش و سه تصویر جهت استفاده برای افکت های hover می شود.
![clip_image001[6]](http://articles.tahlildadeh.com/image.axd?picture=clip_image001%5B6%5D_1.gif "clip_image001[6]")
از آنجاییکه این تصوبر، تصویری واحد است، نه شش فایل مجزا، هنگامی که کاربری روی تصویر hover می کند، تاخیری در loading وجود نخواهد داشت.
حالا فقط سه خط کد اضافه کنید تا افکت hover اضافه شود:
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
مثال بالا توضیح داد که:
- از آنجاییکه list item حاوی یک لینک است، می توانیم از :hover pseudo-class
- #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} برای هر سه تصویر hoverف ما یک موقعیت پیش زمینه تعیین می کنیم، فقط 45px پایین تر.
Media Types در CSS
Media Types به شما اجازه می دهند تعریف کنید سندهای چگونه در mediaهای مختلف present شوند. می توان اسناد را به طرق مختلف روی صفحه، روی کاغذ، با مرورگری شنیداری، و غیره نمایش داد.
Media Types
برخی از پراپرتی های CSS، فقط برای بعضی از media طراحی شده است. مثلاً پراپرتی "voice-family" برای user agentهای شنیداری (aural) طراحی شده است. بعضی از پراپرتی های دیگر را می توان برای media typeهای مختلف استفاده کرد. مثلاً، پراپرتی "font-size" را می توان هم برای screen وهم برای print media استفاده کرد، اما شاید با مقادیر مختلف. معمولا یک سند نیاز به فونت بزرگتری روی screen نسبت به کاغذ دارد، و خواندن فونت های sans-serif روی screen آسانتر است، در حالیکه خواندن فونت های serif، روی کاغذ آسانتر است.
قانون @media
قانون @media، اجازه اعمال قوانین استایل مختلف به media مختلف در همان style sheet را می دهد.
استایل موجود در مثال زیر، به مرورگر می گوید فونت verdana با 40px را روی screen نمایش دهد. اما اگر صفحه چاپ شود، دارای فونت Times با 40px خواهد بود. توجه داشته باشید که font-weight هم روی screen و هم روی کاغذ، روی bold تنظیم شده است:
<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}
</style>
</head>
<body>
....
</body>
</html>
Media Typeهای مختلف
نکته: نام media type به حذوف کوچک یا بزرگ حساس نیستند.
سلکتورهای اتریبیوت در CSS
عنصرهای استایل HTML با اتریبیوت های معین
استایل کردن عنصرهای HTML که دارای اتریبیوت های معین هستند، امکان پذیر است، نه فقط class و id.
نکته: اینترنت اکسپلورر 7 و بالاتر، در صورتیکه !DOCTYPE تعریف شده باشد، سلکتورهای اتریبیوت را ساپورت می کند. Attribute selection در نسخه های پایین تر IE ساپورت نمی شوند.
سلکتور اتریبیوت
مثال زیر، همه عنصرها را با title attribute ، استایل می کند:
اتریبیوت و سلکتور value
مثال زیر، همه عنصرها با title="W3Schools" را استایل می کند:
[title=W3Schools]
{
border:5px solid green;
}
اتریبیوت و سلکتور value - مقادیر چندگانه
مثلا زیر، همه عنصرها با title attribute که حاوی valueی معینی هستند را استایل می کند. این مثال حتی اگر اتریبیوت دارای valueهایی باشد که توسط space جدا شده اند نیز کار می کند:
[title~=hello] { color:blue; }
مثال زیر، همه عنصرها با lang attribute که حاوی valueی معینی هستند را استایل می کند. این مثال حتی اگر اتریبیوت دارای valueهایی باشد که توسط ( - ) جدا شده اند نیز کار می کند:
[lang|=en] { color:blue; }
استایل دادن به فرم ها
سلکتورهای اتریبویت برای استایل دادن به فرم هایی بدون class یا ID مفید هستند:
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
"نبایدها" در CSS
در زیر به تکنولوژی ای اشاره شده است که باید هنگام استفاده از CSS از آنها پرهیز کرد.
رفتارهای Internet Explorer
رفتارها (behaviors) چیستند؟ رفتارها در IE5معرفی شدند. behaviors، روشی برای اضافه کردن رفتار به عنصرهای HTML با استفاده از استایل های CSS هستند.
چرا باید از آن پرهیز کرد؟ behavior attribute، فقط توسط internet explorer ساپورت می شوند.
در عوض از چه چیزی استفاده کنیم؟ در عوض از JavaScript و HTML DOM استفاده کنید.
مثال اول: Mouseover Highlight
فایل HTML زیر، دارای عنصر <style> است که رفتاری را برای عنصر <h1> تعریف می کند:
<html>
<head>
<style type="text/css">
h1 { behavior:url(behave.htc); }
</style>
</head>
<body>
<h1>Mouse over me!!!</h1>
</body>
</html>
سند اچ تی ام ال "behave.htc" در زیر نشان داده شده است:
<attach for="element" event="onmouseover" handler="hig_lite" />
<attach for="element" event="onmouseout" handler="low_lite" />
<script type="text/javascript">
function hig_lite()
{
element.style.color='red';
}
function low_lite()
{
element.style.color='blue';
}
</script>
مثال دوم - Typewriter Simulation
فایل HTML زیر دارای عنصر <style> است که رفتاری را برای عنصری با آی دی "typing" تعریف می کند:
<html>
<head>
<style type="text/css">
#typing
{
behavior:url(behave_typing.htc);
font-family:"courier new";
}
</style>
</head>
<body>
<span id="typing" speed="100">IE5 introduced DHTML behaviors.
Behaviors are a way to add DHTML functionality to HTML elements
with the ease of CSS.<br /><br />How do behaviors work?<br />
By using XML we can link behaviors to any element in a web page
and manipulate that element.</p>
</span>
</body>
</html>
سند اچ تی ام ال "typing.htc" در زیر نشان داده است:
<attach for="window" event="onload" handler="beginTyping" />
<method name="type" />
<script type="text/javascript">
var i,text1,text2,textLength,t;
function beginTyping()
{
i=0;
text1=element.innerText;
textLength=text1.length;
element.innerText="";
text2="";
t=window.setInterval(element.id+".type()",speed);
}
function type()
{
text2=text2+text1.substring(i,i+1);
element.innerText=text2;
i=i+1;
if (i==textLength)
{
clearInterval(t);
}
}
</script>
خلاصه
در این سلسله از مقالات، چگونگی ایجاد style sheetها برای کنترل استایل و layout چندین صفحه وب بطور همزمان را یاد گرفتید.
هچنین یاد گرفتید چگونه از CSS برای اضافه کردن پیش زمینه، فرمت دادن به متن، اضاه و فرمت کردن borderها، و تعیین margin و padding عناصر استفاده کنید.
همچنین یاد گرفتید چگونه یک عنصر را موقعیت یابی کنید، قابل رویت بودن و اندازه عنصر را کنترل کنید، شکل یک عنصر را تنظیم کنید، عنصری را به پشت عنصر دیگر قرار دهید، و جلوه های ویژه به سلکتورها، مانند لینک ها، اضافه کنید.
اشتراک