آموزش 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 این موضوع را دنبال کنید .