ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور

ارسال کد تایید

CSS در HTML

یادگیری HTML

تعداد بازدید : 7339

تاریخ و ساعت انتشار : یک شنبه 22 مرداد 1396 13:50

CSS =استایل ها و رنگ ها

دستکاری متن

رنگ ها, باکس ها

استایل دهی HTML با استفاده از CSS

با CSS مشخص میكنیم كه یك صفحه وب در مرورگر ،‌ روی كاغذ یا سایر رسانه ها چگونه نمایش داده شود.
CSS مخفف Cascading style sheets و به معنای شیوه نامه های آبشاری است. CSS می تواند پیكربندی (قالب) صفحات چندگانه وب را یكباره كنترل كند.
CSS را به 3 روش میتوان به عناصر HTML اضافه كرد :
اینلاین - با استفاده از مشخصه ( صفت ) style در عناصر HTML
اینترنال - استفاده از عنصر <style> در بخش <head>
اكسترنال - با استفاده از فایل یك شیوه نامه ( استایل شیت ) خارجی
معمول ترین روش افزودن CSS ،‌اضافه كردن آنها از طریق یك فایل جداگانه CSS می باشد. هرچند ما در این آموزش ها ،‌ از اینلاین و style برای نشان دادن CSS استفاده كرده ایم. چون راه آسانتری برای آموزش است.
نكته ! شما درباره CSS بیشتر در آموزش های CSS به آن یاد خواهید گرفت.

CCS اینلاین

روش اینلاین برای افزودن یك CSS منحصر به فرد برای یك عنصر HTML مشخص است. این روش از صفت style یك عنصر HTML استفاده می كند. مثال زیر ،‌رنگ متن عنصر <h1> را بر روی آبی تنظیم می كند.

مثال :

سی اس اس اینلاین

<h1 dir="rtl" style="color:blue;">این یک تیتر آبی است</h1>

مشاهده مثال

CSS اینترنال

این روش برای افزودن استایل به یك صفحه HTML مشخص ،‌استفاده می شود. CSS اینترنال در بخش <head> یك صفحه HTML مشخص و داخل عنصر <style> قرار داده می شود.

مثال :

سی اس اس داخلی

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue; direction: rtl;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>این یک تیتر است.</h1>
<p>این یک پاراگراف است و رنگ زمینه را بر روی آبی آسمانی تنظیم کرده ایم.</p>

</body>
</html>

مشاهده مثال

CSS اکسترنال

یک استایل شیت خارجی برای استایل دادن به صفحات HTML بسیاری ، استفاده می شود.

با یک استایل شیت خارجی می توان ظاهر کل یک وب سایت را فقط با تغییر یک فایل ، تغییر داد.

برای استفاده از یک استایل شیت خارجی ، لینک آن را در قسمت <head> یک صفحه وارد می کنیم.

مثال :

سی اس اس خارجی

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>این یک تیتر است</h1>
<p>این یک پاراگراف است.</p>

</body>
</html>

مشاهده مثال

یك استایل شیت اسكترنال ( شیوه نامه خارجی ) را می توان در هر ویرایشگر متنی نوشت. فایل تهیه شده نباید شامل هیچ كدی از HTML باشد و باید با فرمت css. ذخیره شود.
در زیر نمونه ای از style.css را مشاهده می كنید :

body {
    background-color: powderblue;
}
h1 {
    color: blue;
}
p {
    color: red;
}

فونت های CSS

صفت color در CSS ،‌ رنگ كلی متن را تعیین می كند.
صفت font-family ، فونت مورد استفاده را تعیین می كند.
صفت 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>این یک تیتر است</h1>
<p>این یک پاراگراف است.</p>

</body>
</html>

مشاهده مثال

دورخط یا خط حاشیه در CSS

صفت border در CSS خط حاشیه دور یك عنصر HTML را تعیین می كند.
مثال :

خط حاشیه

p {
    border: 1px solid powderblue;
}

مشاهده مثال

CSS padding

صفت padding فضای بین متن و خط حاشیه را مشخص می كند.
مثال :

فضای حاشیه

p {
    border: 1px solid powderblue;
    padding: 30px;
}

مشاهده مثال

CSS margin

صفت margin در CSS حاشیه یا همان فضای خالی بیرون از خط حاشیه را تعیین می كند.
مثال :

margin

p {
    border: 1px solid powderblue;
    margin: 50px;
}

مشاهده مثال

صفت id

برای مشخص كردن یك استایل مخصوص یك عنصر مشخص ،‌ باید یك صفت id به عنصر مورد نظر اضافه كرد :

<p/>یک متن متفاوت<"p id="p01>

سپس یك استایل مشخص برای آن id در استایل شیت مشخص می كنیم :

مثال :

شناسه عنصر

#p01 {
    color: red;
}

مشاهده مثال

نكته ! id یك عنصر فقط باید برای یك عنصر یكتا در كل صفحه باشد (مثلا فقط برای پاراگراف اول ،‌ دوم یا دوازدهم) ،‌ پس نباید برای بیش از یك عنصر تعیین شود.

صفت class

به منظور مشخص كردن استایل برای نوع بخصوصی از عناصر (مثلا : برای همه پاراگراف های موجود در صفحه) ،‌ یك صفت class به عنصر اضافه می كنیم :
<p/>این یک پاراگراف متفاوت است<p class="error'>
سپس در استایل شیت ،‌ یك استایل برای تمامی عناصر دارای class مورد نظر ،‌ تعیین می كنیم.
مثال :

صفت class

p.error {
    color: red;
}

مشاهده مثال

خلاصه درس :

از صفت style برای استایل دهی اینلاین استفاده می كنیم.
از عنصر <style> برای استایل دهی اینترنال استفاده می كنیم.
از عنصر <link> برای ارجاع به فایل یك استایل شیت اسكترنال استفاده می كنیم.
از عنصر <head> برای ذخیره عناصر <style> و <link> استفاده می كنیم.
از صفت color برای تعیین رنگ متن استفاده می كنیم.
از صفت font-family برای تعیین فونت متن استفاده می كنیم.
از صفت font-size برای تعیین اندازه متن استفاده می كنیم.
از صفت border برای تعیین خط حاشیه یك عنصر استفاده می كنیم.
از صفت padding برای تعیین فضای بین محتوای عنصر و خط حاشیه استفاده می كنیم.
از صفت margin برای تعیین فضای خالی بیرون از خط حاشیه استفاده می كنیم.

دانلود فایل PDF مقاله درس بعدی درس قبلی

نظر شما