طراحی ظاهر html با css
آنچه در این مطلب میخوانید:
طراحی ظاهر html با css چگونه است؟
آموزش html درس سیزدهم
CSS از ابتدای کلمه های Cascading Style Sheets گرفته شده است.
CSS توصیف می کند که چگونه عناصر HTML روی صفحه نمایش، یا سایر رسانه ها نمایش داده می شود.
CSS کارهای زیادی را ذخیره می کند. این می تواند طرح صفحات وب چندگانه را در یک زمان کنترل کند.
طراحی ظاهر html با css را می توان با سه روش انجام داد :
Inline – با استفاده از ویژگی style در عناصر HTML
داخلی – با استفاده از عنصر <style> در بخش <head>
خارجی – با استفاده از یک فایل خارجی CSS
شایع ترین روش اضافه کردن CSS این است که style ها را در فایل های CSS جداگانه نگه دارید. با این حال، در اینجا ما از یک ظاهر طراحی داخلی استفاده خواهیم کرد، زیرا این امر ساده تر است و جهت امتحان برای شما راحت تر است.
CSS درون خطی یا inline
CSS درون خطی برای اعمال یک style منحصر به فرد به یک عنصر HTML استفاده می شود.
یک CSS درون خطی از ویژگی style یک عنصر HTML استفاده می کند.
این مثال رنگ متن عنصر <h1> را آبی می کند:
مثال:
<h1 style=”color:blue;”>This is a Blue Heading</h1>
CSS داخلی یا internal
یک CSS داخلی برای تعریف یک style صفحه HTML استفاده می شود.
CSS داخلی در قسمت <head> یک صفحه HTML در عنصر <style> تعریف شده است:
[php]
</div><div><div class="w3-code notranslate htmlHigh" style="text-align: left;" data-mce-style="text-align: left;"><DOCTYPE html!>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
<style/>
<head/>
<body></div></div>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<body/>
<html/>
[/php]
CSS خارجی یا external
یک css خارجی برای تعریف style بسیاری از صفحات HTML استفاده می شود.
با css خارجی، می توانید با تغییر یک فایل، کل وب سایت را تغییر دهید!
برای استفاده از یک css خارجی، یک لینک به آن را در قسمت <head> صفحه HTML اضافه کنید:
مثال :
[php]
<div class="w3-code notranslate htmlHigh" style="text-align: left;"><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/></div>
<div class="w3-code notranslate htmlHigh" style="text-align: left;"><html/></div>
<div>[/php]
یک css خارجی را می توان در هر ویرایشگر متن نوشت. این فایل نباید هیچ کد HTML داشته باشد و باید با یک پسوند css ذخیره شود.
در اینجا چگونگی نوشتن “styles.css” نشان داده شده است:
[php]
</div>
<div style="text-align: left;"> } body</div>
<div style="text-align: left;"> ;background-color: powderblue</div>
<div style="text-align: left;">{</div>
<div></div>
<div style="text-align: left;">} h1
;color: blue
{
} p</div>
<div style="text-align: left;">;color: red</div>
<div style="text-align: left;">{</div>
<div>[/php]
فونت های CSS
خصوصیت رنگ CSS رنگ متنی را که استفاده می شود تعریف می کند.
font-family property فونت مورد استفاده را تعریف می کند.
مقدار font-size اندازه متن مورد استفاده را تعریف می کند.
<div>
<div class="w3-code notranslate htmlHigh" style="text-align: left;"><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/></div>
<div>[/php]
حاشیه CSS
خصوصیات حاشیه CSS یک حاشیه یا border را در اطراف یک عنصر HTML تعریف می کند:
[php]
</div>
<div style="text-align: left;">p {
;border: 1px solid powderblue
}</div>
<div>[/php]
دیدگاهتان را بنویسید