تهران ، خیابان آزادی خیابان شهیدان (روبروی مترو حبیب اله ) برج زیتون
66073800
بازگشت به لیست مقالات » | ﺳﻪشنبه 25 آبان 1395 در ساعت 15 : 38 دقیقه | نظرات کاربران ( 0 )
آموزش HTML -  سی اس اس css

آموزش HTML  - سی اس اس ( css  ) :

Css  مخفف کلمات  Cascading Style Sheets  می باشد . با استفاده از سی اس اس میتوانیم تمامی موارد مربوط به استایل دهی صفحات و تگ های HTML  را به راحتی تغییر دهیم .

برای استایل دهی و تغییر در استایل سند های HTML  از سه روش میتوان استفاده نمود :

استایل خارجی (External style sheet)

استایل داخلی  ( (Internal style sheet

استایل درون تگی ( Inline style)

همان سی اس اس  در HTML4  معرفی شد تا روش بهتر و کار آمد تری برای استایل دهی به سند های HTML  باشد .

در آموزش  CSS موجود در سایت میتوانید موضوعات کامل تر و مفصل تری در زمینه css  و روش استایل خارجی را مشاهده نمایید .

اما گزینه ی پیشنهادی و استاندارد جهت استایل دهی اسناد HTML  , استفاده از استایل خارجی یا external style sheet   می باشد .

در ادامه در مورد استایل داخلی و استایل درون تگی صحبت خواهیم کرد .

استایل درون تگ – inline style  :

در این روش (استفاده از این روش توسط استاندارد های سئو دارای امتیاز منفی می باشد ) تمامی خصوصیات تگ ها درون خوده تگ قرار میگیرند . استفاده از این نوع استایل دهی باعث ازدیاد کد نویسی و شلوغ شدن سند اچ تی ام ال  و از بین رفتن زیبایی کد ها خواهد شد .

در این روش داخل تگ شروع بعد از یک فاصله کلمه ی style="" قرار میگیرد . خصوصیات تگ ها درون این خصوصیت قرار خواهد گرفت .

نحوه ی نوشتن این نوع استایل دهی بصورت زیر می باشد  :

 

<p style="color:blue;font-size:20px;">This is a paragraph.</p>

 

در سی اس اس میتوان تمامی خصوصیات و استایل های مربوط به تگ های html  را تغییر داد.

تغییر پس زیمنه عناصر html در سی اس اس :

خصوصیت background-color  رنگ پس زمینه عناصر html  را تغییر خواهد داد .

به عنوان مثال :

 

<!DOCTYPE html>
<html>

<body>
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>

</html>

 

در سند بالا تگ h2  رنگ زمینه قرمز خواهد گرفت

تگ p  رنگ زمینه سبز را به خود میگیرد .

مثال بالا را در مرورگر بصورت زیر مشاهده خواهید کرد  :

 

 

This is a heading

This is a paragraph.

 

 

 

در نسخه های قدیمی html  از خصوصیتی به نام bgcolor  استفاده میشد که منسوخ شده و جایگزین آن background-color  می باشد .

 

تنظیم رنگ در عناصر html   :

در عناصر html  با استفاده از خصوصیت color  مشخص خواهند شد .

 مثال :

<p style="color:red; ">A paragraph.</p>

 

تنظیم نوع فونت و اندازه فونت عناصر html   :

به منظور تغییر فونت عناصر html از خصوصیت  font-family  استفاده می شود

 به منظور تغییر اندازه متن های عناصر html  از خصوصیت  font-sizeاستفاده می شود .

نحوه ی نوشتار این خوصوصیت بصورت زیر می باشد  :

<p style="font-family:arial;font-size:20px;">web design.</p>

 

مثال  :

 

 

<!DOCTYPE html>

<html>

<body>

<h3 style="font-family:verdana;">learn html css</h3>

<p style="font-family:arial;color:red;font-size:20px;">learning htm and css.</p>

</body>

</html>

 

مرورگر مثال بالا را بصورت زیر نمایش خواهد داد :

 

 

 

learn html css

learning htm and css.

 

ترازبندی متن در css   :

در سی اس اس به منظور ترازبندی متون از خصوصیت  text-align   استفاده میشود . این خصوصیت در محوریت x   یا افقی متون را تراز خواهد کرد .

 

 

<!DOCTYPE html>
<html>
<body>
<h4 style="text-align:center;">web design int</h4>
<p>learning html css</p>
</body>
</html>

 

 

نکته : خصوصیت  text-align  نسخه ی جدید تگ center  می باشد .

مثال بالا در مرورگر بصورت زیر نمایش داده خواهد شد :

 

 

web design int

learning html css

 

استایل داخلی : Internal style sheet

در این نوع روش سی اس اس به منظور استایل دهی مورد استفاده قرار میگیرد و در تگ head  سایت قرار خواهد گرفت .

نحوه ی نوشتار این خصوصیت بصورت زیر می باشد :

 

 

<!DOCTYPE html>
<html>

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<body>
</body>
</html>

 

 

در مثال بالا رنگ زمینه ی کلی سایت بصورت زرد به نمایش در خواهد آمد

سپس تمامی تگ های p  با رنگ آبی نمایش داده خواهند شد .

نکته :در این روش از سی اس اس حتما تگ style  باید در داخل تگ  head  قرار بگیرد .

استایل خارجی : external style sheet

زمانیکه از یک استایل برای جندین صفحه بصورت یکنواخت استفاده میشود از این نوع استایل استفاده میشود . استانداردترین روش استایل دهی این روش می باشد که در آموزش css  بصورت کامل و مفصل توضیح داده شده است .

مزیت این روش نسبت سایر روش ها :

باعث خوانایی بیشتر استاد html  می شود

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

یک استایل ممکن است در تمامی صفحات html  فقط یک بار نوشته شود و از تکارا کد های سی اس اس جلوگیری میشود.

باعث بالا رفتن سرعت لود سایت می شو د .

این روش کاملا استاندارد می باشد . و در صورت استفاده از سایر روش ها سایت ما امتیاز منفی دریافت خواهد کرد .

منظم بودن و مشخص بودن جایگاه کد هاو...

در آموزش css  این موضوع را دنبال کنید .

 

 

 

 

ارسال نظر

عنوان نظر :
نام شما :
ایمیل :