آموزش و کتاب الکترونیکی

آموزش HTML به زبان ساده – قسمت نهم(مهم) – مقدماتی

آموزش HTML به زبان ساده - قسمت نهم(مهم) - مقدماتی آموزش و کتاب الکترونیکی
نوشته توسط مهدی بلوریان

به نام خدا

آموزش HTML به زبان ساده - قسمت نهم(مهم) - مقدماتی آموزش و کتاب الکترونیکی

آموزش طراحی وب HTML

 

با عرض سلام و وقت بیخر خدمت بازدید کنندگان گرامی وبسایت وان پی سی

در این قسمت از آموزش ، به سراغ قالب بندی یا سّبک (استایل) در 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;
}
این قسمت از آموزش بسیار مهم بوده و در آموزش ان بسیار تلاش کنید
ممنون

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

مهدی بلوریان

دیدگاه بگذارید

avatar
  Subscribe  
Notify of