سامسونگ پرسرعت ترین کارت حافظه Micro SD را با نام Pro Plus معرفی کرد
December 17, 2015
خدمات ابری Adobe شش میلیون کاربره شد
December 17, 2015
با مدیاسافت در جلسه ی هفتم از سری آموزش های HTML همراه باشید.
طراحی صفحات HTML با CSS
CSS چیست ؟
CSS مخفف Cascading Style Sheets روشی برای نمایش چیدمان و جلوه های تصویری مانند رنگ ، اندازه و فونت در صفحات وب است.
CSS را به سه روش می توان برروی عناصر HTML اعمال کرد:
- درون خطی : با استفاده از صفت style در داخل عناصر HTML
- داخلی : با استفاده از تگ <style> که در میان تگ <head> قرار می گیرد.
- خارجی : با استفاده از یک یا چند فایل خارجی CSS
رایج ترین روش برای اضافه کردن CSS روش خارجی است اما در این آموزش ، ما از روش داخلی استفاده می کنیم، چراکه راه بهتری برای نشان دادن مثال ها به شما است.
CSS درون خطی
CSS درون خطی همان صفت style است که در جلسات قبل توضیح داده شد. در روش درون خطی از صفت style استفاده می کنیم.
در مثال زیر مشاهده کنید که چگونه با استفاده از صفت style محتوای تگ <h1> به رنگ آبی در می آید:
<!DOCTYPE html>
<html>
<body>
<h1 style=”color:blue;”>This is a Blue Heading</h1>
</body>
</html>
خروجی
همانطور که در کد می بینید صفت style در داخل تگ <h1> به کار رفته که highlight شده است.
CSS داخلی
با استفاده از CSS داخلی می توان برای یک صفحه ی HTML سبک یا style تعریف کرد.
CSS داخلی را در میان تگ های <head> و <head/> و در میان تگ باز و بسته <style> می نویسیم.
قالب نوشتن CSS داخلی را در زیر مشاهده می کنید.
<head>
<style>
TagName {property:value; property:value; …}
TagName …
.
</style>
</head>
به مثال زیر توجه کنید
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
خروجی
در کد بالا رنگ تمامی تگ های <h1> آبی می شود و همچنین تمام پاراگراف ها به رنگ قرمز در می آیند. یعنی اگر 100 تا تگ <p> داشته باشیم تمامشان به رنگ قرمز در می آید.
CSS خارجی
با استفاده از CSS خارجی می توان برای تعدادی زیادی از صفحات سبک یا style تعریف کرد.
با یک CSS خارجی شما می توانید با تغییر دادن یک فایل ظاهر یک وبسایت را تغییر دهید.
چگونه یک فایل CSS بنویسیم و به سند HTML ارجاع دهیم ؟
- ابتدا یک ویرایشگر متن مانند Notepad را باز می کنیم
- کد CSS را در Notepad تایپ می کنیم.(نحوه ی نوشتن کد CSS در فایل CSS خارجی توضیح داده خواهد شد.)
- سپس فایل را در کنار سند HTML با پسوند css ذخیره می کنیم. مثل css
- در سند HTML و در تگ <head> (بین <head> و <head/>) با استفاده از تگ <link> و صفات آن بین فایل CSS و سند HTML ارتباط برقرار می کنیم.
مثال زیر را با دقت نگاه کنید
این کدها را در سند HTML بنویسید.
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
کدهای زیر را در فایل CSS بنویسید.
نکته : برای باز کردن فایل CSS روی آن کلیک راست کرده ، سپس نشانه گر ماوس را برروی open with برده و در منویی که باز می شود نرم افزار Notepad را انتخاب می کنیم.
body {
background-color: lightgrey;
}
h1 {
color: blue;
}
p {
color:green;
}
نکته : استاندارد کدنویسی CSS به صورت بالا است ولی شما می توانید آن را به صورت زیر بنویسید.
body {background-color: lightgrey;}
h1 {color: blue;}
p {color:green}
خروجی
همانطور که مشاهده می کنید فایل style.css در کنار فایل Mediasoft.htm قرار دارد.
در سند HTML کدی به عنوان CSS داخلی یا درون خطی وجود ندارد بلکه با استفاده از تگ link فایل Mediasoft.htm را به style.css وصل کنیم.
در تگ link صفت rel ، ارتباط بین سند جاری و سند پیوندی را تعیین می کند که برای ارتباط با فایل CSS باید stylesheet باشد. صفت href نیز آدرس فایل CSS است که در این مثال style.css قرار دارد زیرا این فایل در کنار سند HTML قرار دارد.
تغییرات فونت با CSS
رنگ : با استفاده از property یا خاصیت color می توان رنگ نوشته را تغییر داد.
فونت : برای تغییر فونت از خاصیت font-family استفاده می کنیم. برای مقدار (نوع فونت) می توان از courier و arial و impact و … استفاده کرد.
سایز : برای تغییر سایز نیز می توان از خاصیت font-size استفاده کرد. مقدار را نیز به صورت درصد مشخص می کنیم.
مثال
<!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>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
خروجی
باکس یا حاشیه در CSS
تمامی عناصر HTML به دور خود یک باکس دارند، حتی اگر شما نتوانید آن را ببینید.
با استفاده از خاصیت border در CSS می توان این باکس را مشاهده کرد. مقدار border با پیکسل (px) تعیین می شود.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid grey;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
خروجی
خاصیت padding در CSS
خاصیت padding فاصله متن از حاشیه یا border را تعیین می کنید. مقدار padding با پیکسل (px) تعیین می شود.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid grey;
padding: 20px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
خروجی
خاصیت margin در CSS
با استفاده از خاصیت margin می توان فاصله ی border یا حاشیه را تا کنار صفحه تعیین کرد. مقدار یا value نیز با پیکسل (px) تعیین می گردد.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid grey;
padding: 10px;
margin: 30px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
خروجی
صفت id
تمام مثال هایی که در بالا مشاهده کردید از CSS برای تگ های HTML به صورت عمومی استفاده شده است. یعنی مثلا برای تگ <p> یک style تعریف می کردیم ، style برروی تمام تگ های <p> اعمال می شد.
برای تعریف یک سبک یا Style خاص برای یک تگ خاص چه باید کرد ؟
این کار ابتدا یک صفت id را به تگ مورد نظر اضافه می کنیم . به جای مقدار یک نام یا یک مشخصه انتخاب می کنیم.
مثال
<p id=”p01″>I am different</p>
برای تگ <p> یک id با مشخصه p01 انتخاب کردیم.
سپس یک CSS متفاوت با سایر CSS ها برای تگ <p> با id ، p01 به شکل زیر می نویسیم.
p#p01 {
color: blue;
}
مثال
<!DOCTYPE html>
<html>
<head>
<style>
p {
color:red;
}
p#p01 {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p id=”p01″>I am different.</p>
</body>
</html>
خروجی
همانطور که در تصویر خروجی مشاهده می کنید CSSی که برای تگ <p> به شکل عمومی تعریف کرده ایم پاراگراف ها را به رنگ قرمز درآورده است ولی در CSSی که به طور خاص برای تگ با id=”p01” تعریف کردیم فقط همان تگ را به رنگ آبی در آورده است.
پایان جلسه ی هفتم
