css الدرس الاول فى

فى البداية لا بد ان تعرف ان لغة (css) هى ليست لغة منفصلة بل هى تربط باكواد او تاجات ال (html) حيث تعمل لغة (css) على ضبط الالوان والخطوط ومثل هذة الامور التى ترتبط بمظهر وشكل الموقع وذلك عن طريق استخدام اكواد ال (html) وضبطها باستخدام لغة(css) واكواد لغة (css) يتم وضعها بين تاج </style> <style>

وتوضع داخل تاج head والذى درسناة بلغة (html) وهذا هو مايسمى بالتضمين الداخلى والان كيف يتم استخدام لغة(css) فلنفرض اننا مثلا نريد ان نغير خلفية محتوى الموقع للون مثلا الاحمر فالمعروف ان التاج الخاص بمحتوى الصفحة فى لغة (html) هو تاج body وبالتالى يتم تغير اللون بلغة (css) كالتالى:

<!DOCTYPE html>

<html>

<head>

<style>

body

{

background-color : red;

}

</style>

</head>

<body>

</body>

</html>

وهكذا يتم استخدام لغة (css) حيث تكتب اسم التاج الخاص بلغة (html) ثم تستخدم (brackets) او الاقواس كما بالمثال وبعد ذلك تستخدم خاصية تغير لون الخلفية وهى عن طريق (background-color) وبالتالى يكون الشكل العام لاستخدام لغة (css) كالتالى:

حيث (selector) هو كود او تاج ال (html)  كما ان (property) هى الخاصية التى يتم تعديلها عن طريق (value) وتنتهى بفصلة منقوطة (semicolon) .

مثال اخر للتوضيح :

<html>

<head>

<style>

body {background-color:yellow;}

h1 {font-size:36pt;}

h2 {color:blue;}

p {margin-left:50px;}

</style>

</head>

<body>

<h1>This header is 36 pt</h1>

<h2>This header is blue</h2>

<p>This paragraph has a left margin of 50 pixels</p>

</body>

</html>

شرح بعض الخصائص المهمة:

شرح الخاصية

property

يستخدم لتغير اللون

color

يستخدم لضبط لون الخلفية

background-color

يستخدم لضبط حجم الخط

font-size

يستخدم لضبط التباعد من جهة الشمال

margin-left

يستخدم فى تحديد المكان من جهة اليميم او اليسار او الوسط وتاخذ قيم (center,left,right)

text-align

يتم عن طريقها ضبط نوع الخط

font-family

وسوف يتم شرح الخصائص اكثر فى الدروس القادمة.

Advertisements

ضع تعليقك هنا

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: