طراحی وب

طراحی ظاهر html با css

طراحی ظاهر html با css چگونه است؟

آموزش html  درس سیزدهم

CSS از ابتدای کلمه های  Cascading Style Sheets گرفته شده است.

CSS توصیف می کند که چگونه عناصر HTML روی صفحه نمایش، یا سایر رسانه ها نمایش داده می شود.

CSS کارهای زیادی را ذخیره می کند. این می تواند طرح صفحات وب چندگانه را در یک زمان کنترل کند.

طراحی ظاهر html با 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> تعریف شده است:

</div><div><div class="w3-code notranslate htmlHigh" style="text-align: left;" data-mce-style="text-align: left;">&lt;DOCTYPE html!&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;style&gt;
 body {background-color: powderblue;}
 h1&nbsp;&nbsp; {color: blue;}
 p&nbsp;&nbsp;&nbsp; {color: red;}
 &lt;style/&gt;
 &lt;head/&gt;
 &lt;body&gt;</div></div>
&lt;h1&gt;This is a heading&lt;/h1&gt;
 &lt;p&gt;This is a paragraph.&lt;/p&gt;

&lt;body/&gt;
 &lt;html/&gt;

CSS خارجی یا  external

یک css خارجی برای تعریف style  بسیاری از صفحات HTML استفاده می شود.

با css خارجی، می توانید با تغییر یک فایل،  کل وب سایت را تغییر دهید!

برای استفاده از یک css خارجی، یک  لینک به آن را در قسمت <head> صفحه HTML اضافه کنید:

 

مثال :

<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>

 یک css خارجی را می توان در هر ویرایشگر متن نوشت. این فایل نباید هیچ کد HTML داشته باشد و باید با یک پسوند css ذخیره شود.

در اینجا چگونگی نوشتن   “styles.css” نشان داده شده است:


</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>

 فونت های CSS

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

font-family property فونت مورد استفاده را تعریف می کند.

مقدار  font-size اندازه متن مورد استفاده را تعریف می کند.

مثال :
</div>
<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>

حاشیه  CSS

خصوصیات حاشیه  CSS یک حاشیه یا  border را در اطراف یک عنصر HTML تعریف می کند:


</div>
<div style="text-align: left;">p {
;border: 1px solid powderblue
}</div>
<div>

بیشتر بخوانید:

استارت‌آپ پولساز
برچسب ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دوره رایگان کسب و کار اینترنتی

10 جلسه به همراه فایل صوتی و ویدیویی
همین حالا شروع کنید
تا امروز بیش از 4000 نفر در این دوره شرکت کرده‌اند
بستن پیام
بستن