حتما اگر شما هم یکی از علاقه مندان به حرفه ی برنامه نویسی وب هستید یا آن را دنبال می کنید، با زبان Html  آشنایی دارید. امروزه با گسترش تکنولوژی و زیاد شدن صفحات وب، میل به رو آوردن به این حرفه (برنامه نویسی وب) افزایش یافته است. در این مطلب کارشناسان گروه آموزشی صعود قصد دارند تا نحوه استفاده از کد های CSS در زبان HTML را برای شما توضیح دهند. پس اگر شما هم علاقه مند به یادگیری این بحث هستید این مطلب را دنبال کنید.

نحوه استفاده از CSS در HTML

Html  چیست؟

در مقالات قبلی به طور کلی در مورد اینه که HTML  چیست و چه کاری انجام می دهد صحبت کردیم پس اگر می خواهید در مورد زبان HTML  بیشتر اطلاعات کسب کنید مقاله ی HTML چیست؟ را مطالعه کنید. همچنین در این قسمت به طور مختصر در مورد زبان HTML توضیح میدهیم:

HTML  مخفف عبارتHyper Text Markup Languag  است.

HTML  یک زبان نشانه گذاری استاندارد، برای ساختن صفحات وب است.

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

HTML تشکیل شده از تعدادی عناصر کاربردی است.

HTML از طریق عناصر به مرورگر فرمان میدهد که محتوا را چطور نمایش دهد.

یک مثال ابتدایی از قطعه کد HTML

<!DOCTYPE html>

<html>

<head>

<title>وب سایت صعود</title>

</head>

<body>

<h1>خوش آمدید</h1>

<p>وب سایت آموزش برنامه نویسی صعود</p>

</body>

</html>

خروجی قطعه کد بالا:

 نحوه استفاده از CSS در HTML

CSS چیست؟

در مطالب قبلی در مورد زبان CSS به طور کلی صحبت کردیم، اگر شما میخواهید با زبان CSS به طور کلی آشنا شوید حتما مقاله ی CSS چیست؟ را مطالعه کنید. همچنین در این قسمت مختصری در مورد این بحث مه CSS چیست توضیح خواهیم داد: CSS  یک زبان برای ساختن ظاهر صفحات وب می باشد شما با استفاده ار CSS میتوانید ظاهر صفحات وب خود را تغیر دهید و همچنین می توانید زیبا سازی صفحات وب خود را با Css پیش ببرید.

CSS مخفف کلمه ی Cascading Style Sheets می باشد.

CSS به عناصر HTML ظاهر می بخشد و آن ها را در مرورگر ها نشان میدهد.

 

یک مثال ساده از قطعه کد CSS در HTML :

<!DOCTYPE html>

<html>

<head>

<title>وب سایت صعود</title>

<style>

body {

  background-color: lightblue;

}

h1 {

  color: white;

  text-align: center;

}

p {

  font-family: verdana;

  font-size: 20px;

}

</style>

</head>

<body>

<h1>خوش آمدید</h1>

<p>وب سایت آموزش برنامه نویسی صعود</p>

</body>

</html>

خروجی قطعه کد بالا :

 نحوه استفاده از CSS در HTML

همینطور که در قطعه کد بالا مشاهده میکنید نحوه استفاده CSS در HTML را برای شما نشان دادیم.

 

چگونه CSS اضافه کنیم

زمانی که مرورگر یک استایل (style) می خواند، فایل HTML با توجه به داده های موجود استایل (style) هارا دسته بندی می کند.

در این قسمت می خواهیم سه روش برای استفاده CSS در Html را معرفی کنیم:

  1. CSS خارجی (External Css)           
  2. CSS داخلی (Internal Css)
  3. CSS درون خطی(inline Css)

در قسمت بعدی به توضیح مختصری در رابطه با این سه نوع می پردازیم :

 

CSS خارجی (External Css) :

با یک استایل خارجی، می توانید ظاهر کل یک وب سایت را با تغییر تنها یک فایل تغییر دهید! هر صفحه HTML باید شامل یک مرجع به فایل استایل خارجی در داخل عنصر <link> در داخل بخش head باشد.

در قطعه کد زیر قسمت Html خارجی CSS را مشاهده می کنید که ما به آن لینک قسمت CSS  را داده ایم.

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="./style.css">          

  </head>

<body>

 <h1>وب سایت آموزشی صعود</h1>    

<p>به وب سایت آموزشی صعود خوش آمدید.</p>

</body> 

            </body>

</html>

            قطعه کد بعدی قسمت CSS است که به کد بالا لینک داده شده.

body {

            background: #f8f8f8;

            direction: rtl;text-align: right;

       }    

        h1 {

            color: burlywood;

        }     

        p {

            color: purple;

        }

خروجی مثال بالا:

نحوه استفاده از CSS در HTML

CSS داخلی (Internal Css) :

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

قطعه کد زیر یک مثال از یک CSS داخلی می باشد:

<!DOCTYPE html>

<html>

<head>

<style>

body {

  background-color: linen;

}

h1 {

  color: maroon;

  margin-left: 40px;

}

</style>

</head>

<body>

<h1>وب سایت آموزش برنامه نویسی صعود</h1>

<p>گروه آموزشی صعود</p>

</body>

</html>

خروجی قطعه کد بالا:

 نحوه استفاده از CSS در HTML

CSS درون خطی

یک استایل درون خطی ممکن است برای اعمال یک استایل منحصر به فرد برای یک عنصر استفاده شود. برای استفاده از style های In line، قابلیت style را به المنت یا عنصر مورد نظر اضافه کنید. ویژگی style می تواند حاوی هر نوع CSS باشد.

در قطعه کد زیر شما یک نمونه از Css درون خطی را مشاهده می کنید:

<!DOCTYPE html>

<html>

<body>

<h1 style="color:blue;text-align:center;">گروه آموزشی صعود</h1>

<p style="color:red;">وب سایت صعود</p>

</body>

</html>

خروجی کد بالا:

نحوه استفاده از CSS در HTML

خب همانطور که قرار بود در این مطلب نحوه استفاده از CSS در Html را به طور واضح برای شما بیان کردیم. شما می توانید برای آشنایی بیشتر با این زبان ها مقالات Css چیست؟ و  Html چیست ؟ را مطالعه کنید. همچنین می توانید سوالات خود را در رابطه با نحوه استفاده Css در Html از قسمت نظرات با کارشناسان ما در میان بگذارید.