در این قسمت از آموزش ، به سراغ قالب بندی یا سّبک (استایل) در HTML خواهیم رفت
همراهی شما باعث افتخار ماست
قالب و رنگ ها در HTML :
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
This is a heading
<p>This is a paragraph.</p>
</body>
</html>
طراحی ، قالب بندی و رنگبندی در HTML :
واژه CSS مخفف جمله ی Cascading Style Sheets
ما میتوانیم به 3 روش از فایل های CSS در سند خود استفاده کنیم ، این 3 روش به شرحذیل می باشد :
-inline – به روش درون خطی است که خصوصیت و ویزگی را در HTML وارد میکنیم
-internal – به روش داخلی که مانند مثال بالا در بین تگ <head> ودر بین دو تگ <Style> و <Style/> ایجاد می شود
-external – به روش لینکی (از فایل دیگر استفاده شود) که ما میتوانیم 1 یا بیشتر از 1 استایل به سند خود به این روش اضافه کنیم
بهترین و رایجترین روش ، روش External است !
نحوه ی نوشتن CSS :
element { property:value; property:value }
.yektag{color:red;font-family:tahoma}
یک مثال درون خطی (Inline) :
در این روش ما بصورت مستقیم به HTML قالب یا استایل را اضافه میکنیم
به این شکل :
<h1 style=”color:blue”>This is a Blue Heading
یک مثال داخلی (Internal) :
در این نوع از این روش در بین تگ <head> ودر بین دو تگ <Style> و <Style/> ایجاد می شود
به این شکل :
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
This is a heading
<p>This is a paragraph.</p>
</body>
</html>
یک مثال خرجی (External) :
این روش بهترین روشو رایج ترین روش است
در این روش کد مورد نظر را بین تگ <head> و <head/> قرا می دهیم
به این شکل :
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
This is a heading
<p>This is a paragraph.</p>
</body>
</html>
ویژگی های فونت در CSS :
فونت دارای 3 ویژگی مهم در CSS است ، که آن 3 ویژگی عبارت اند از :
color : رنگ فونت را تعیین میکند
font-family : نام فونت را تعیین میکند
font-size : سایز فونت را تعیین میکند
<!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>
This is a heading
<p>This is a paragraph.</p>
</body>
</html>
CSS داخل جعبه ! :
شما میتوانید از خاصیت border برای خط کشی دور تگ مورد نظر استفاده کنید
به این شکل :
p {
border:1px solid black;
}
این خط به ما میگوید که تمامی تگ های <p> دارای دور خط 1px به رنگ سیاه است !
فضای خالی داخلی :
ما میتوانیم در CSS لایه فضای داخلی خالی برای شکیل تر کردن محتوا در سند ایجاد کنیم و برای این منظور از تگ padding باید استفاده شود
به این شکل :
p {
border:1px solid black;
padding:10px;
}
فضای خای بیرونی :
ما میتوانیم در CSS لایه فضای بیرونی خالی برای شکیل تر کردن محتوا در سند ایجاد کنیم و برای این منظور از تگ margin باید استفاده شود
p {
border:1px solid black;
padding:10px;
margin:30px;
}
!!!? وقت کافی برای توضیح این ویزگی بسیار است
شناسه خاص (ID) :
تمامی عناصری که تا الان آموزش دیدیم برای شناسه عمومی بود ، اما حالا برای شناسه خاص بیاد از id استفاده شود
برای تعریف یک سبک خاص برای یک عنصر خاص، برای اولین بار یک ویژگی id به عنصر اضافه کنید:
به این شکل :
<p id=”p01″>I am different</p>
شناسه عمومی (CLASS) :
برای تعریف یک سبک برای یک نوع خاص (کلاس) از عناصر، اضافه کردن یک ویژگی کلاس به عنصر:
به این شکل :
<p class=”error”>I am different</p>
p.error {
color:red;
}
این قسمت از آموزش بسیار مهم بوده و در آموزش ان بسیار تلاش کنید
ممنون
