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

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

 

 

 

 

ارسال نظر

عنوان نظر :
نام شما :
ایمیل :
آموزش HTML  - کاراکترهای رزرو شده

آموزش HTML - کاراکترهای رزرو شده

آموزش HTML  - کاراکترهای رزرو شده یکسری از کارکتر ها و علائم در html  وجود دارند که به تنهایی نمیتوانند در داخل صفحات  html قرار گیرند و ممکن است حتی در کیبرد کامپیوتر ها وجود نداشته ب ...

آموزش html  -  جاوا اسکریپت

آموزش html - جاوا اسکریپت

آموزش html  -  جاوا اسکریپت تگ script  در html  : این تگ به منظور برنامه نویسی سمت کاربر مانند جاوا اسکریپت  javascript  مورد استفاده قرار میگیرد . عنصر <script > ...

آموزش html  تگ head

آموزش html تگ head

 آموزش html  تگ head عنصر head  یکی از مهمترین تگ های html  می باشد که تگ های اساسی و اصلی سایت را در خود جای میدهد . عناصری که درون تگ head  قرار میگیرند میتوانند شامل اسکری ...

آموزش HTML  - اعلان Doctype

آموزش HTML - اعلان Doctype

آموزش HTML  - اعلان Doctype یکسری از اعلان ها در html  می باشند که کمک میکنند مرورگر بهتر و سریعتر نوع صفحات را تشخیص دهد . اعلان <!doctype> یکی از آنها می باشد که در ابتدای سند های h ...

آموزش html  - مروری بر html مقدماتی

آموزش html - مروری بر html مقدماتی

    آموزش HTML  - خلاصه ای از مراحل مقدماتی با همراهی شما تا این بخش آموزش HTML  را بصورت مقدماتی پشت سر گذاشتیم . از این پس آموزش های حرفه ای و پیشرفته ی HTML  را شروع خوا ...

آموزش html – نام رنگ ها

آموزش html – نام رنگ ها

آموزش html – نام رنگ ها تمامی مرورگر ها از نام رنگ ها بصورت کامل پشتیبانی میکنند . با استفاده از رنگ ها در html میتوان رنگ عناصر و یا پس زمینه عناصر html  را تغییر داد .در بخش زیر نام 147 ...

آموزش html - رنگها

آموزش html - رنگها

آموزش html  - رنگها : رنگها  یکی از مهمترین بخش در طراحی سایت می باشند .در طراحی سایت از رنگ ها به 3 طریق استفاده خواهد شد . 1.  از طریق نام رنگ : این روش از انتخاب رنگ بسیار محدود بو ...

آموزش HTML  - تگ iframe

آموزش HTML - تگ iframe

آموزش HTML  - تگ iframe در این آموزش و با استفاده از تگ iframe روش نمایش یک صفحه وب درون صفحه ی دیگر وب را قرار خواهیم داد . با ما همراه باشید . همانطور که از نام تگ iframe  که به معنای قا ...

آموزش HTML فرم ها

آموزش HTML فرم ها

آموزش HTML  فرم ها یکی از عناصر مهم در HTML  فرم ها می باند . فرم ها مسثول نگهداری اطلاعات از جانب کاربران می  باشد .به کمک فرم ها میتوان دریافت و ارسال اطلاعات را به سمت سرور انجام د ...

آموزش HTML  - صفحه بندی

آموزش HTML - صفحه بندی

آموزش HTML  - صفحه بندی یکی از مهم ترین بخش های طراحی سایت نحوه ی صفحه بندی و چیدمان المان ها و عناصر HTML  می باشد . چیدمان سایت ها تقریبا مشابه چیدمان مجلات و روزنامه ها حاوی ستون ها و س ...

آموزش HTML  - تگ SPAN

آموزش HTML - تگ SPAN

آموزش HTML  - تگ SPAN تگ span  یکی از عناصر inline level  و درون خطی می باشد که در مقالات قبلی در مورد آن شرح دادیم . تفاوت تگ های inline level  و block level   یک عنصر inli ...

آموزش html  - تگ DIV

آموزش html - تگ DIV

آموزش html  - تگ DIV عنصر های HTML  را از طریق تگ های DIV  و یا SPAN  گروهبندی می شوند . تگ  div  یک عنصر بلاک لول است  .( Block level ) به این معنی که درصورتی که ...

expand_less