۲۰
مهر

جلسه ۱۳ : CSS در HTML

دسته‌بندی‌ها :

جزئیات
نوع مطلبآموزشی تصویری

فهرست

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم به آموزش چگونگی استفاده از کدهای css در html بپردازیم. css در واقع افزونه ای برای دادن Style و زیبایی به ظاهر عناصر html بکار رفته در صفحات وب مورد استفاده قرار می گیرد. با استفاده از css می توان افکت ها و نماهای زیبا و کاربر پسند به عناصر html اعمال کرد. که در جذب کاربران به وب سایت، نقش بسیار مهمی را ایفا می کند.

در پست های آموزشی قبل مباحث آموزشی html از جمله چگونگی کار با تگ های Table , Div ، تگ img ، تعریف رنگ ها در html ، تعریف فرم ها در html ، چگونگی افزودن ویدئو در html و اضافه کردن یک فایل صوتی در html را مورد بررسی و آموزش قرار دادیم.

در این پست آموزشی چگونگی استفاده از کدهای CSS در html را مورد بررسی قرار خواهیم داد.

CSS- کدهای css در html

css در html

شایع ترین روش اضافه کردن CSS این است که Style ها را در فایل های CSS جداگانه نگه دارید. با این حال، در اینجا ما از یک css درون خطی در تگ ها و css داخلی html استفاده خواهیم کرد، برای شما هم راحت تر است که آن ها را امتحان کنید.

CSS دورن خطی

با استفاده از css دورن خطی شما می توانید به هر کدام از عناصر html در همان تگ ، یک style بدهید.

مثال:

مثال : درون خطی

<h1 style="color:blue;">This is a Blue Heading</h1>

1	<h1 style="color:blue;">This is a Blue Heading</h1>

خودتان امتحان کنید »

css داخلی html

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

مثال:

مثال : استایل داخلی

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body {background-color: powderblue;}

h1 {color: blue;}

p {color: red;}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

خودتان امتحان کنید »

css خارجی html

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

مثال:

مثال : استایل خارجی

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

خودتان امتحان کنید »

در css خارجی ابتدا style ها در داخل فایل متنی تایپ شده و سپس در قالب فایلی با پسوند css مثلا “styles.css” ذخیره می شود. این style ها در داخل فایل css بصورت نمونه ی زیر باید تایپ شود:

مثال :

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

body {

background-color: powderblue;

}

h1 {

color: blue;

}

p {

color: red;

}

فونت های CSS

خصوصیت color در CSS رنگ متن را تعریف می کند.

خصوصیت font-family در CSS نوع فونت را تعریف می کند.

خصوصیت font-size در CSS اندازه ی متن را مشخص می کند.

مثال : استایل متن در CSS

<!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>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

<!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>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

خودتان امتحان کنید »

border در CSS

از خصوصیت border در CSS برای استایل border اطرف عناصر HTML استفاده می شود :

مثال : استایل border

p {
    border: 1px solid powderblue;
}

p {

border: 1px solid powderblue;

}

خودتان امتحان کنید »

خصوصیت padding در CSS

از خصوصیت padding در CSS برای مشخص کردن فضای خالی داخلی عناصر HTML استفاده می شود :

مثال : فضای داخلی عناصر HTML

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

p {

border: 1px solid powderblue;

padding: 30px;

}

خودتان امتحان کنید »

خصوصیت margin

از خصوصیت margin در CSS برای تعیین فاصله یک عنصر HTML از سایر عناصر HTML استفاده می شود:

مثال : ویژگی margin

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

p {

border: 1px solid powderblue;

margin: 50px;

}

خودتان امتحان کنید »

صفت id

برای تعریف style خاص روی یکی از عناصر می توانید از صفت id برای این منظور استفاده کرد.

مثال :

<p id="p01">I am different</p>

1	<p id="p01">I am different</p>

سپس style مورد نظر خود را برای id فوق به صورت زیر تعریف کنید :

مثال : تعریف استایل id

#p01 {
    color: blue;
}

#p01 {

color: blue;

}

خودتان امتحان کنید »

نکته : id یک عنصر باید در یک صفحه html منحصر به فرد باشد، بنابراین انتخاب id برای انتخاب یک عنصر منحصر به فرد استفاده می شود!

صفت class

برای تعریف یک style خاص برای گروهی از عناصر html می توانید از صفت class در عناصر html استفاده کنید :

مثال :

<p class="error">I am different</p>

1	<p class="error">I am different</p>

سپس style مورد نظر خود را برای class فوق به صورت زیر تعریف کنید :

مثال : استایل class

p.error {
    color: red;
}

p.error {

color: red;

}

خودتان امتحان کنید »

مراجع خارجی

شما می توانید style های عناصر html را در یک فایل جداگانه با فرمت css تعریف کرده و سپس با تگ مخصوص (تگ <link>) در صفحه ی html مربوطه به فایل css آدرس دهی کنید:

مثال : استایل خارجی

<link rel="stylesheet" href="https://www.pvlearn.com/html/styles.css">

1	<link rel="stylesheet" href="https://www.pvlearn.com/html/styles.css">

خودتان امتحان کنید »

این مثال به یک صفحه style در دایرکتوری HTML در وب سایت فعلی پیوند دارد:

مثال : مثال دوم

<link rel="stylesheet" href="/html/styles.css">

1	<link rel="stylesheet" href="/html/styles.css">

خودتان امتحان کنید »

این مثال به یک صفحه style در یک پوشه مشابه صفحه فعلی پیوند دارد:

مثال : لینک به style جاری

<link rel="stylesheet" href="styles.css">

1	<link rel="stylesheet" href="styles.css">

خودتان امتحان کنید »

خلاصه ی فصل

از ویژگی style در HTML برای سبک درونی استفاده کنید.
برای تعیین CSS داخلی از عنصر <style> استفاده کنید.
از عنصر <link> برای اشاره به یک فایل CSS خارجی استفاده کنید.
از عنصر <head> برای ذخیره عناصر <style> و <link> استفاده کنید.
از ویژگی رنگی CSS برای رنگ متن استفاده کنید.
از فونت CSS فونت برای فونت متن استفاده کنید.
از ویژگی font-size برای اندازه متن استفاده کنید.
از مرجعیت CSS استفاده کنید.
از ویژگی CSS padding برای فضای داخل مرز استفاده کنید.
از اموال حاشیه CSS برای فضای خارج از مرز استفاده کنید.

کلام آخر

تگ های html برای ایجاد ساختار و اسکلت سایت استفاده می شوند و در حالت معمولی هیچگونه شکل و شمایل خاصی ندارند، اما با استفاده از CSS در HTML می توان رنگ و style مورد نظر را برای عناصر مختلف html نعریف کرد.

به اشتراک بگذارید

CSS در HTML ,آموزش استفاده از CSS در HTML ,استفاده از CSS در HTML ,چگونگی استفاده از CSS در HTML ,روش های استفاده از css در html ,روش های وادر کردن css در html ,روشهای استفاده از css در html ,روشهای وارد کردن css در html ,قرار دادن css در html ,کارایی CSS در HTML ,کاربرد CSS در HTML ,کدهای از css در html ,وارد کردن css در html

دیدگاه کاربران

تعداد دیدگاه : 2

rahele
اردیبهشت ۲, ۱۳۹۸
very good tanx
پاسخ دادن
احسان لطفی
مهر ۲۱, ۱۳۹۸
خیلی سایتی خوبی است
ولی کاش فیلم های آموزشی رایگان هم داشت
پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۳ : CSS در HTML

مقدمه

css در html

CSS دورن خطی

css داخلی html

css خارجی html

فونت های CSS

border در CSS

خصوصیت padding در CSS

خصوصیت margin

صفت id

صفت class

مراجع خارجی

خلاصه ی فصل

کلام آخر

لیست مطالب دوره

آموزش HTML

فرم در HTML

HTML5

گرافیک در HTML

چند رسانه ای در html

APIs در HTML

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ