CSS = رنگ ها و سبک ها
دستکاری متن ها
رنگ ها,
کادرها
مثال
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>این یک عنوان است</h1>
<p>این یک پاراگراف است.</p>
</body>
</html>
خودتان آزمایش کنید »
ساخت ظاهر گرافیکی HTML با استفاده از CSS
اصطلاح CSS در واقع مخفف عبارت (Cascading Style Sheets) به معنای شیوه نامه های آبشاری است.
برای خواباندن حروف متن از تگ <i> استفاده می شود. این تگ خصوصیت خوابانده کردن (Italic) را تعریف می کند بدون آن که اهمیت مضاعفی از لحاظ رتبه بندی در متن به آن بدهد.
دستورات مربوط به ساخت ظاهر محتوای صفحه را می توان به سه روش به سند HTML افزود:
- در خط (Inline) - در این روش از ویژگی style در تگ های HTML استفاده می شود.
- داخلی (Internal) - در این روش از تگ <style> برای افزودن دستورات در المان <head> سند HTML استفاده می شود.
- خارجی (External) - در این روش از فراخوانی یک فایل دیگر به داخل سند HTML استفاده می شود.
رایج ترین و درست ترین روش استفاده از دستورات CSS برای حفظ حالت آبشاری دستورات، استفاده از روش سوم یعنی فراخوانی یک فایل CSS خارجی است که دستورات CSS قبلا در آن یک جا نوشته شده باشد. ولی در این دوره آموزشی ما از دو روش اول و دوم یعنی روش داخلی و در خط استفاده می کنیم، چون تشخیص و درک آن برای شروع کار برای شما راحت تر است و خودتان می توانید به صورت آنلاین نتایج را آزمایش کنید.
 |
شما می توانید اطلاعات بیشتری در قسمت آموزش CSS همین وب سایت بیاموزید. در این قسمت تنها برای آشنا کردن شما با مفهوم و کاربرد CSS در HTML آن را به صورت مختصر و ب چند مثال آشنا می کنیم.
|
نحوه ی نوشتن CSS
ساختار و روش نوشتن یک کد CSS که برای تغییر ظاهر کد های HTML استفاد می شود به شکل زیر است:
مقدار : خصوصیت ;مقدار:خصوصیت } المان }
در مثال بالا منظور از المان تگ HTML است. منظور از خصوصیت ویژگی های CSS هستند و مقدار نیز ارزش ها و مقادیر ویژگی است که برای هر خصوصیت نسبت به نیاز طراح صفحه وب باید قرار داد.
در صورتی که بیش از یک خصوصیت را بخواهید برای یک المان تغییر دهید باید از سمیکالن (;) برای جدا سازی خصوصیات (دستورات CSS) استفاده نمایید.
ظاهرسازی در خط (Inline CSS)
تغییر ظاهر به روش ظاهرسازی در خط تنها برای مواردی باید استفاده شود که بخواهید یک المان (تگ) HTML خاص را به صورت مستقل و بدون وابستگی به سایر تگ ها تغییر شکل و ظاهر دهید.
برای تغییر ظاهر به روش ظاهرسازی در خط از ویژگی style درون المان (تگ) استفاده می شود.
در مثال زیر تگ عنوان به تنهایی با استفاده از ویژگی style تغییر رنگ داده می شود:
ظاهرسازی داخلی (Internal CSS)
استفاده از CSS داخلی می تواند باعث ایجاد یک سبک کلی برای تمام المان های داخل صفحه شود و یا به یک الان خاص اشاره کرده و تنها موجب تغییر ظاهر آن تگ شود.
برای نوشتن CSS داخلی از تگ <style> استفاده می کنیم. این تگ را می توان داخل المان <head> سند HTML قرار داد:
مثال
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>این یک عنوان است</h1>
<p>این یک پاراگراف است.</p>
</body>
</html>
خودتان آزمایش کنید »
ظاهرسازی خارجی (External CSS)
ظاهرسازی به روش خارجی بسیار ایده آل است چون از کدهای CSS بارگذاری شده در تمام صفحات HTML استفاده می شود و نیازی نیست برای هر صفحه و یا برای هر المان از هر صفحه جداگانه ظاهرسازی با نوشتن کدهای تکراری هر بار بازنویسی شود.
در این روش که اصل معنای شیوه نامه آبشاری (CSS) را ادا می کند، می توانید برای تغییر ظاهری یک نوع المان (تگ) خاص در تمام صفحات سایت تنها با تغییر یک فایل خارجی CSS، ظاهر تمام تگ های مورد نظر در تمام صفحات سایت را تغییر داد.
برای فراخوانی فایل CSS خارجی درون سند HTML از تگ تنهای <link> استفاده می کنیم. این تگ را می توان داخل المان <head> سند HTML قرار داد:
مثال
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://schools.ecb.ir/Portals/0/CSS-Files/styles.css">
</head>
<body>
<h1>این یک عنوان است</h1>
<p>این یک پاراگراف است.</p>
</body>
</html>
خودتان آزمایش کنید »
فونت ها (قلم ها) در CSS
خاصیت رنگ (Color) در CSS رنگ متنی که در المان های HTML را تعریف می کند.
خاصیت خانواده قلم (Font-Family) در CSS نوع قلم متن نوشته شده با استفاده از المان های HTML را تعریف می کند.
خاصیت اندازه قلم (Font-Size) در CSS اندازه قلم متن نوشته شده با استفاده از المان های HTML را تعریف می کند.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:blue;
font-family:verdana;
font-size:300%;
}
p {
color:red;
font-family:courier;
font-size:160%;
}
</style>
</head>
<body>
<h1>این یک عنوان است</h1>
<p>این یک پاراگراف متن است.</p>
</body>
</html>
خودتان آزمایش کنید »
|
پیس از این می توانستید از تگی به نام <font> برای تعریف نوع قلم استفاده کنید که این تگ در نسخه های قدیمی HTML استفاده می شد. ولی امروزه از این تگ در نسخه HTML5 استفاده نمی شود و منسوخ شده است. |
مدل بسته CSS
خاصیت رنگ (Color) در CSS رنگ متنی که در المان های HTML را تعریف می کند.