ساختار CSS
۶ پاسخ
بهمن ۶م, ۱۳۸۶
CSS Rule
Selector مشخص می کند که کدام Element باید این Style را بگیرد.
Declaration Block همیشه درون {} می باشد و شامل Property و Value می باشد.
اگر شما می خواهید از Inline Style استفاده کنید باید از روش زیر استفاده کنید، در این روش برای دادن Style های بیشتر از Semicolon استفاده می کنیم. برای مثال :
<p style="color:blue; font-size:12px;">This is paragraph</p>
Style های خارجی
اگر می خواهید از Style خارجی استفاده کنید باید مثل کد زیر عمل کنید که بین تگهای <html> و <html/> قرار می گیرد.
<link rel="stylesheet" href="style.css" type="text/css" media="screen">شما باید به جای مقدار href آدرس فایل مورد نظر خودتان را قرار دهید.
انتخابگر Class
توسط این انتخابگرها شما می توانید به هر Element یک Style بدهید. همیشه توسط نقطه (.) شروع می شوند و دنبال آن یک اسم می آید. برای مثال :
.bold {font-weight:bold;}
سپس در فایل HTML توسط دستور “class=”stylename و دادن آن به Element مورد نظر آنرا اعمال می کنیم.
<p class="bold">This paragraph will be rendered bold.</p>اگر قبل نام Class نام یک Element را وارد کنیم، Style فقط به آن Element اعمال می شود که این Class را داشته باشد. برای مثال :
p.bold {font-weight:bold;}
انتخابگر ID
این انتخابگرها مثل Class می باشند با این تفاوت که فقط به یک Element اعمال می شوند. با # شروع می شوند و دنبال آن یک اسم می آید. برای مثال :
#bold {font-weight:bold;}
و در فایل HTML :
<p id="bold">This paragraph will be rendered bold.</p>انتخابگرهای Descendant
در این روش یک انتخابگر فرزند یک انتخابگر دیگر می شود. برای مثال :
h3 em {color:white;background-color:gray;}
در فایل HTML :
<h3>This is<em>emphasized</em></h3>در این مثال Style در صورتی به em اعمال می شود که درون h3 باشد، در غیر اینصورت اثری نخواهد داشت. شما می توانید هر تعداد فرزندی را معرفی کنید.
انتخابگرهای گروهی
این روش مناسب وقتی است که شما بخواهید یک Style را به چند Element اعمال کنید. برای مثال :
p, h1, h2 {text-align:left;}
این مثال ویژگی text align را به Element های p,h1,h2 اعمال می کند.
مثال دیگر :
p.header, h3#alert {color:red;}
این کد رنگ قرمز را به p که دارای header class و h3 که دارای alert ID باشد اعمال می کند.
عالی بود ممنون
[...] هنگام ویرایش و تغییر دادن استایلها دچار عذاب نشوید. (اطلاعات بیشتر) یک مثال از inline استایل [...]
خوشحالم که کمک کردم.
چشم سعی میکنم آموزش بیشتری بذارم
عالیه . دستت دردنکنه . اون ایراداتی که داشتم رو براحتی حل کرد .
اگر ممکن این آموزشهای css رو ادامه بده
خواهش می کنم
بسیار عالی بود،ممنون