قالب دستورات CSS
هر دستور cssاز سه بخش تشکیل شده است
Selector{property:value}
Selectorدر واقع همان خصوصیاتی هستند که شما قصد تغییر خواصشان را دارید. مانند:<p> ,<table>,<body>
Propertyها همه خصوصیات موجود دز htmlهستند (font, border) با اندکی تفاوت
Value ها همان مقادیر هستند که property ها میتوانند بپذیرند.
P{
Text-aligne : center;
Color: black;
Font-family: Tahoma ;
}
با صفت font شروع میکنم
برای این که در یک صفحه htmlمشخص کنیم که یک پاراگراف ،یک لینک و ..... چه فونتی داشته باشند از صفت font استفاده میکنیم .
Fontشامل صفات font-style ,font-size,font-familyو... است و به صورت زیر استفاده می شود.
P{font:”Tahoma 12px bold”}
برای جدا سازی این صفات از فاصله استفاده میکنیم.
لازم به ذکر است که هر کدام از این صفات را خود به تنهایی استفاده کرد.
P{font-size:”12px”}
در CSSمی توان برای بیش از یک عنصر خصوصیت تعیین نمود:
H1,h2,h3,h4,h5,h6{color:green;}
چگونگی استفاده از css
1-سراسری
2-محلی
سراسری مانند روش بالا
اما در روش محلی به دو صورت استفاده می شود:
1-class
2-id
با استفاده از clSS
.left{color:red;}
.right{color:green;}
--------------------------------------
<p class=”left”>Left Side</p>
<p class=”right”>right side</p>
همانطورکه میبینید ما در قسمت تعریفcssنام هیچ عنطری را قرار نداده ایمو به جای آن از یک نقطه و یک نام استفاده کرده ایم.
و در قسمت htmlمی بینید که آن اسم را (مثلاleft) را در عنصر classآن قرار داده ایم.از این به بعد این عنصر از صفات کلاس left تاثیر می پذیرد.
برای این که این classفقط برای عناصر <p>عمل کند کد cssرا به شکل زیر تغیییر میدهیم.
p.left{color:red;}
id هم دقیقا مانند classکار میکند با تفاوتی کوچکتر:
#left{color:red;}
<p id=”left”>Left Side</p>
Idمانند classنیست ونمی توانند برای عناصر خاصی مورد استفاده قرار گیرد.
استفاده از CSSدر کدهای HTML
از سه طریق میتوان از کدهای cssدر htmlاستفاده کرد:
1-دستوری
2-صفحه ای
3-خارجی
اگر بخواهیم برای عناصر خواصی از cssاستفاده کنیو مستقیما آن را در صفت style آن قرار میدهیم.
<p style=”font-size=15px”>In The Name OF God</p>
برای استفاده به صورت صفحه ای باید آن را درون تگهای <style>-----</style> قرار داد
<style>
#left{color:red;}
.left{color:red;}
p.left{color:red;}
</style>
در صورت استفاده به صورت خارجی باید هان کد بالارا به صورت فایل متنی و با پسوند cssذخیره کنیم و سپس آن را به سند Htmlخود اضافه کنیم.
برای اضافه کردن فایcssبه سند htmlاز تگ <link/>استفاده میکنیم این تگ در تگ <head>درhtmlبه کار میرود و دارای دو صفت مهم است
Rel و href
<link rel=”stylesheet” href=”style.css”/>
اولویت اجرای هر کدام از روشهای نوشتن css
1- دستوری
2- صفحه ای
3- خارجی
به این ترتیب روش دستوری با لاترین اولویت را دارد.
پایان بخش اول
آموزش CCNA به فارسی (بخش بیستم)