طراحی ظاهر 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> را آبی می کند:

حتما بخوانید:  رنگ های HTML

مثال:

<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 رنگ متنی را که استفاده می شود تعریف می کند.

حتما بخوانید:  عناصر جدید html5

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>
امتیاز کاربران به این مطلب
۲ نفر - میانگین: ۵
تلگرام

دیدگاه‌تان را ثبت کنید:

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

2 × 2 =

PHN0eWxlPi5oX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWV7cG9zaXRpb246cmVsYXRpdmU7fSAuaF9pZnJhbWUtYXBhcmF0X2VtYmVkX2ZyYW1lIC5yYXRpbyB7ZGlzcGxheTpibG9jazt3aWR0aDoxMDAlO2hlaWdodDphdXRvO30gLmhfaWZyYW1lLWFwYXJhdF9lbWJlZF9mcmFtZSBpZnJhbWUge3Bvc2l0aW9uOmFic29sdXRlO3RvcDowO2xlZnQ6MDt3aWR0aDoxMDAlOyBoZWlnaHQ6MTAwJTt9PC9zdHlsZT48ZGl2IGNsYXNzPSJoX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWUiPiA8c3BhbiBzdHlsZT0iZGlzcGxheTogYmxvY2s7cGFkZGluZy10b3A6IDU3JSI+PC9zcGFuPjxpZnJhbWUgc3JjPSJodHRwczovL3d3dy5hcGFyYXQuY29tL3ZpZGVvL3ZpZGVvL2VtYmVkL3ZpZGVvaGFzaC85dHk0VS92dC9mcmFtZSIgYWxsb3dGdWxsU2NyZWVuPSJ0cnVlIiB3ZWJraXRhbGxvd2Z1bGxzY3JlZW49InRydWUiIG1vemFsbG93ZnVsbHNjcmVlbj0idHJ1ZSIgPjwvaWZyYW1lPjwvZGl2Pg==
با سپاس از ثبت دیدگاه شما دوست عزیز
از تماشای این ویدیو لذت ببرید ...
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود فایل سخنرانی استیو جابز ...
ایبوک هدف‌گذاری موثر
زودتر از آنچه فکرش را می‌کنید به خواسته‌هایتان دست پیدا کنید!
* لینک دانلود بلافاصله ایمیل می‌شود.
چهار عامل شگفت انگیز کسب درآمد چیست؟
فقط چند ثانیه تا دانلود فاصله دارید!
* سه ایده کسب و کار خانگی پولساز
فقط چند ثانیه تا دانلود فاصله دارید!
* ایبوک: ده مکان عالی برای پیدا کردن یک ایده جدید
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود ویدیوی جذاب و با کیفیت مصاحبه جک ما
از همین امروز شروع کنید
بدون تجربه و دانش فنی وارد دنیای درآمدهای اینترنتی شوید!
فایل‌های آموزشی برای شما ایمیل می‌شود.
فقط چند ثانیه تا دریافت این فایل آموزشی فاصله دارید!
فایل‌های آموزشی ویژه اعضای سایت
* اگر عضو نیستید با وارد کردن ایمیل‌تان به این فایل دسترسی پیدا می‌کنید
دسترسی مخصوص اعضای سایت
عضو سایت نیستید؟
فقط کافیه نام و ایمیل‌تان را وارد کنید و ...
* دسترسی سریع به تمام فایل‌های آموزشی
هدیه ما به شما
با سپاس از اینکه دیدگاه تان را در سایت ما ثبت کردید.


یک کوپن تخفیف 30%
  • مشاوره حضوری
  • دوره های آنلاین
  • بسته های آموزشی
  • محصولات دانلودی
  • وبینارهای آموزشی
  این کد فقط یکبار به شما نمایش داده می‌شود.
کد: qwert
ورود کاربران
* دسترسی رایگان به بخش آکادمی