الدكتور نت

دورة أساسيات css

29 يناير 2008, بقلم : فاطمة العمادي, تصنيفات: Css

أساسيات التعامل مع css و إنشاء أوراق الأنماط ( مرجع لأكثر الخصائص انتشارا و القيم المحتملة لها )

CSS (cascading style sheet)
يسمح لك بفصل المحتوى و (x)html من النمط و الشكل .بمعنى آخر نحن نستخدم الxhtml لتنظيم المحتوى و لكن شكل المحتوى من اللون … الإطارات .. لون و حجم الخط .. شكل الوصلات و غيرها …
هي مجموعة من الأوامر و التي توضح للمتصفح كيفيه رسم أو إظهار عناصر الصفحة .
تم إضافتها في HTML 4.0
يمكن تضمينها داخليا في ملف html أو خارجية في ملف خارجي يحمل الامتداد css

تضمين ال CSS

تضمين داخلي

يتم تضمينه بين الوسمين و
<head>

<style type="text/css">
نضع الأنماط هنا ....
</style>
</head>
تضمين خارجي

و ذلك بوضع جميع تعريفات css داخل ملف يحمل امتداد css و من ثم في ملف html نضع رابط للملف في منطقة الhead عن طريق الوسم
<link rel="stylesheet" type="text/css" href="file.css" />

أو

@import url(file.css)
و استبدل file.css بمكان و اسم ملف النمط الذي أنشأته.

الأفضلية حسب اعتقادي للطريقة الثانية ..

ففي طريقة التضمين الأولى أنت تضع الاوسمة في ملف الhtml نفسه و بالتالي عتد التعديل عليك فتح كل ملف و تعديله أما تضمين الملف الخارجي فعليك فقط تعديل ملف css و ينتطبق التعديل على الكل فبالتالي أنت توفر الوقت …
أنت تقلل من حجم الملفات
نقلل من استخدام Bandwidth

المتصفحات

ستكتشف عند دخولك عالم سي اس اس أن تعامل المتصفحات مع هذه الملفات ليس دائما كما تتمنى .. و لا تقوم جميع المتصفحات بعرض هذه الملفات بالطريقة التي تريد و بالتالي عليك التأكد من أمكانية عرض ملفك في أكثر من متصفح ..

مصطلحات

Statements الأوامر : هي البيانات أو الأوامر التي يحتوي عليها ملفات css
rules القواعد : هي نوع من الأوامر Statement و التي تستخدم غالبا .. و هي تنقسم إلى
Selector العنصر المختار : يخبر المتصفح أي عنصر في الصفحة h1 او h2 أو table …. الخ … سينطبق عليه هذه القواعد ..
declaration بيان : و التي تحدد الخواص Properties التي تحدد شكل العنصر مثل اللون و الخط و الحجم .. الخ

و بالطبع خلال الدورة ستتعرف أكثر على هذه المصطلحات

صياغة القواعد

هذا الشكل المبدأي لصياغة القواعد


العنصر المختار

}

الخاصية : القيمة ;

{

مثلا الوسم p الخاص بالفقرة


p{
font-size:15px;
}

و بالتالي في مستند الhtml أي نص داخل الوسم p سيكون حجمة 15px

كما يمكنك وضع ملاحظات بهذه الطريقة


/* This is a comment */
/* تعليق أو ملاحظة هنا */

تجميع العناصر المختارة يمكنك تجميع عدد من العناصر و إعطائها خصائص واحدة


h1,h2,h3,h4,h5,h6
{
color: green
}

كما أن صياغة الخواص تتم بأكثر من طريقة الطريقة المختصرة و الطريقة الطويلة ..و سنتحدث عن ذلك لاحقا ..

Classes

هي تعار يف تحددها أنت لإعطائها خصائص مختلفة ..!! مثلا نحن في المثال السابق اعطينا محتويات الوسم p الحجم 15


p{
font-size:15px;
}

و بالتالي فقرة مثل هذه

هذه فقرة عادية

هذه فقرة غير عادية و مميزة

وفقا للقاعدة التي وضعناها فحجم الخط سيكون 15 لكن نحن نريد للفقرة الثانية أن تظهر بشكل محتلف .. مثلا لونها أحمر و حجم الخط 20 و بخط غامق

و بالتالي سنحدد نمط خاص class

اسم الكلاس يبدأ بنقطة متبوع باسم انت تحدده ليعبر عن ما تريد سنسميه featuredtext مع ملاحظة أن لا يبدأ اسم Class برقم لان ذلك لن يعمل مع بعض المتصفحات


.featuredtext{
font-size: 20px;
color: red;
font-weight: bold;
}

و في شفرة الhtml


هذه فقرة عادية
<p class="featuredtext">هذه فقرة غير عادية و مميزة</p>

ليظهر بالشكل التالي

هذه فقرة عادية

هذه فقرة غير عادية و مميزة

ID

هي تعريفات تشبة في طبيعة عملها class مع فرق واحد أن ليس من المفترض استخدامه في نفس المستند اكثر من مرة واحدة و بدل من ان يبدأ بالنقطة فهو يبدأ بعلامة #

مثلا


<p  id="container"> نص عادي. </p>

و شفرة الCss


#container{
width: 555px;
padding: 15px;
border: 10px solid #f45454;
background: #ffffff;
}

كما يمكن استخدام الطريقة التالية


p#mypara
{
text-align: right;
color: green;
font-size:2em;
}

السابق سينطبق على كل p فقرة تحمل id = mypara

هي كتل تظهر في صفحات الhtml هي مناطق أو مربعات تحتوي على أوسمة html العادية مثلا المثال السابق


<p id="container"> يمكنني أن اضع هنا ما أريد .</p>

<h1>عنوان</h1>

و شفرة الCss


#container{
width: 555px;
padding: 15px;
border: 10px solid #f45454;
background: #ffffff;
}

أما span فيتم استخدامه بنفس الفكرة لكن يكون في وسط النص بمعنى لدينا فقرة و نريد ان نعطي مثلا كلمة أو جملة خصائص معينة فمن الافضل استخدام span

مثلا


This is a <span class="red"> red </span>text

في الأقسام التالية سنبدأ بالحديث عن الخواص ..و القيم المتاحة لها ..

الخواص المتوافر هي خواص الخلفيات و التي تمكنك من التحكم في شكل الخلفية للعنصر

1-Background Color

حدد لون الخلفية للعنصر ..


background-color: القيمة ;

القيم المتاحة:

color name :اسم اللون مثلا red , green …الخ
hexadecimal number : مثلا #fffffff , #000000
transparent : شفاف

2-Background Image

اختر وضع صورة للخلفية ..


background-image: url(path_to_image);

path_to_image = مسار و اسم الصورة

القيمة المتاحة :

اسم الصورة
none : بدون صورة

3-Background Position

تحديد مكان الخلفية للعنصر


background-position: القيمة ;

القيم المتاحة :

top = أعلى left =يسار
center= وسط right = يمين
bottom=أسفل

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-% نسبة المئوية بالنسبة للمحور السيني و الصادي
x-pos y-pos الإحداثي السيني و الصادي ..

كما يمكن دمج أي من القيمة مثلا اختيار top 50%

4-Background Repeat


background-repeat: القيمة;

هل يتم تكرار الخلفية أم لا و إذا أردت تكرارها هل تريد تكرارها في كل اتجاه أم في اتجاه واحد فقط

القيم المتاحة :

no-repeat : بدون تكرار
repeat : تكرار
repeat-x : تكرار على المستوى السيني فقط ( أفقيا )
repeat-y تكرار على المستوى الصادي ( عموديا )

5-Background Attachment

تحرك الخلفية مع الصفحة أم بقائها ثابتة حتى لو حركنا الصفحة بواسطة شريط المتصفح..


background-attachment: القيمة ;

القيم المتاحة:

fixed : ثابت
scroll : متحرك

6- Background

اختصار لجميع الخواص السابقة .. يمكنك تحديدها جميعا في سطر واحد مثال


background: #000000 url(images/back.gif) center right no-repeat scroll;

بعد background توضع الخواص التالية بالترتيب ..

background-color : لون الخلفية
background-image : الصورة
background-repeat : تكرار الخلفية
background-attachment : ثبات الصورة
background-position: موقع الخلفية

Color

لون النص ..


color: value;

القيم المتاحة:

اسم اللون مثلا red, green
بالنظم السداس عشر مثلا #0000000
الألوان بنظام RGB مثلا rgb(255, 0, 0)

Letter Spacing

المسافة بين الأحرف .. يمكنك استخدام القيمة صفر كما يمكنك استخدام القيمة السالبة ..


letter-spacing: value;

القيم المتاحة :

normal : عادي اي بالمسافة العادية
المسافة أو فقيمة المسافة .

مثلا المسافة بين الاحرف في هذه الفقرة هي 10

Text Align

محاذاة النص ( يمين – يسار – وسط )


text-align: value;

القيم المتاحة :

left : يسار
right :يمين
center : وسط
justify : ضبط

Text Decoration

ديكور النص ..:)


text-decoration: value;

القيم المتاحة :

none : بدون
underline : خط اسفل النص
overline : خط في وسط النص
line through :

Text Indent

يمكنك تحريك النص في أول سطر من الفقرة مسافة معينة باستخدام التالي :

    text-indent: value;

القيم المحتملة :

طول بالبكسيل أو em .. الخ
نسبة مئوية

مثال:

تم تحريك هذا النص مسافة 20 بكسل .

Text Transform

في النص اللاتيني يمكنك تحديد حالة و حجم الحرف استخدام الحروف الكبيرة Capital أو الصغيرة Small

  text-transform: value;

القيم المتاحة:

none : بدون قيمة
capitalize : تكبير أول حرف .
lowercase : الحروف الصغير
uppercase : كامل الجملة بالحروف الكبيرة .

مثال :

The first letter here is really big

this text was typed as lower case and appears as uppercase

THIS TEXT IS TYPED UPPER AND APPEARS LOWER

White Space

التحكم في المسافة البيضاء قبل النص

  white-space: value;

القيم المحتملة :

normal : تجاهل المسافة البيضاء بواسطة المتصفح
pre : يتم الاحتفاظ بالمسافة البيضاء كما في وسم pre في html
nowrap : الفقرة لا تنقل إلى سطر جديد يتم مهما كان على نفس السطر و يتوقف حتى ظهور الوسم

Word Spacing

التحكم في المسافة بين الكلمات . كما يمكنك استخدام قيم سالبة .

  word-spacing: value;

القيم المحتملة:

normal : عادي
length : المسافة بالبكسل أو النسبة المئوية أو em .. الخ

مثال :

المسافة بين الكلمات في هذه الجملة هي 10px

Font-Family

اسم الخط الذي تريد ظهور العنصر به

القيم المحتملة:

اسم الخط
عائلة الخط

كما يفضل عن وضع اسم الخط أن تتبعه بعائلة أو أصل الخط ففي حال عدم توفرالخط لدى المستخدم يمكن استخدام خط بديل من نفس المجموعة أو العائلة .لو كان اسم الخط يحتوي على مسافةضع اسم الخط بين علامتي تنصيص “


font-family: Tahoma, sans-serif;

Font Style

نمط الخط الذي تريد تحديده للعنصر

  font-style: value;

القيم المحتملة :

normal : عادي
itailc : مائل
oblique :

Font Variant

عرض النص في صورة عادية أو صورة صغيرة .

  font-variant: value;

قيم محتملة :

normal : حروف عادية
small-caps : حروف صغيرة

Font Weight

ثقل أو غلظ النص ( نص غامق أو عادي )

  font-weight: value;

قيم محتملة:

lighter : اقل اغمقاقا
normal : عادي
100
200
300
400
500
600
700
800
900
bold : غامق
bolder : أغمق

font-stretch

تمديد أو تقليص الخط أفقيا فقط .

 font-stretch: ultra-condensed

القيم المحتملة:

normal :عادي
wider : اعرض
narrower : اضيق
ultra-condensed : المسافة الأضيق
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded : المسافة الأوسع .

Font

هو اختصار لعدد من الخواص السابقة في سطر واحد


font: italic bold small/0.99em tahoma, sans-serif;

المثال السابق يعطي النص حجم صغير و ارتفاع نص 0.99em و يجعل النص غامق و مائل و نوع الخط تاهوما كل هذا من خلال سطر واحد بدلا تضيع الوقت في كتابة أكثر من سطر .

القيم المحتملة :

font-style
font-varian
font-weight
font-size/line-height
font-family

امثلة أخرى


p
{
font: 10px Tahoma
}

p
{
font: italic small-caps bold 120% arial
}

border-color

لون الإطار


border-color:green;

border-color:#c0c0c0;

القيم المتاحة:

اسم اللون ( green, blue … الخ )
رقم اللون بالنظام السادس عشر
رقم اللون بصيغة RGB
transparentشفاف

border-style

شكل الإطار


border-style:solid

border-style:dotted;

القيم المتاحة :

خطوط مقطعة dashed
dotted منقط
double خط مزدوج
groove خط اخدودي
hidden مخفي
inset نافر للخارج
none بدون
outset نافر للخارج
ridge نافر
solid صلب

Border-width

سمك الإطار .


boder-width:1px

border-width:value

القيم المتاحة :

يمكن تحديد القيم بالبكسل أو بالقيمة التي تفضل أو
استخدام
- Thin : خط رفيع
- Medium : خط متوسط
- Thick : خط سميك .

Border

هو اختصار لكل الأوامر السابقة و تجميعها في سطر واحد مثلا لو أردنا تحديد إطار بسمك واحد بكسل من النوع المنقط بلون ازرق سنضع الشفرة كالتالي


border:1px dotted blue ;

بحيث تحدد 3 عناصر اللون- السمك – النوع .

كل خط على حدى

يمكنك أن تحدد خواص كل خط من الإطار على حدى مثلا خط الإطار الأعلى أو خط الإطار الأسفل و هكذا .و كل خط له اسم

border-top :الخط العلوي من الإطار
border-bottom : الخط السفلي من الإطار .
border-right : الخط الأيمن من الإطار .
border-left : الخط الأيسر من الإطار.

مثلا :


border-top:1px solid black;

border-bottom:20px double #ccc;

أو يمكنك تحديد خاصية معينة لكل خط في الإطار

الإطار العلوي :

border-top-color: لون الخط العلوي
border-top-style: شكل الخط العلوي
border-top-width:حجم الخط العلوي .

الإطار السفلي :

border-bottom-color: اللون
border-bottom-style: الشكل أو النوع
border-bottom-width : حجم الخط

الإطار الايمن :

border-right-color: اللون
border-right-style: الشكل
border-right-width: الحجم

الإطار الأيسر :

border-left-color: اللون
border-left-style: الشكل
border-left-width: الحجم .

القوائم هي التي تستخدم الأوسمة ul , ol , li

list-style-image

الصورة المستخدمة لعناصر القائمة . بدل من ان تظهر القائمة منقطة أو مرقمة بمكنك نحديد صورة خاصة لك للقائمة .


list-style-image:url(عنوان الصورة ) ;

list-style-image : url(images/list.gif);

list-style-position

لتحديد مكان القائمة في الداخل أو الخارج


list-style-position: value;

القيم المتاحة :

inside : داخل
outside : خارج

list-style-type

شكل الرمز بجانب القائمة ( مربع / دائرة / دائرة مفرغة .. الخ )


list-style-type: disc;

list-style-type: square;

list-style-type:none;

القيم المتاحة :

disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none بدون

list-style

الطريقة المختصرة لتحديد جميع الخصائص السابقة في سطر واحد .

مثلا قائمة مربعة داخلية


list-style : square outside;

مرحبا أنت تستخدم انترنت اكسبلورر ٦ و هو متصفح اصدر في العام 2001 الا يبدو لك ذلك قديما .

دورة أساسيات css

تضمين ال CSS

تضمين داخلي

تضمين خارجي

المتصفحات

مصطلحات

صياغة القواعد

Classes

ID

1-Background Color

2-Background Image

3-Background Position

4-Background Repeat

5-Background Attachment

6- Background

Color

Letter Spacing

Text Align

Text Decoration

Text Indent

مثال:

Text Transform

مثال :

White Space

Word Spacing

مثال :

Font-Family

Font Size

Font Style

Font Variant

Font Weight

font-stretch

Font

امثلة أخرى

border-color

border-style

Border-width

Border

كل خط على حدى

الإطار العلوي :

الإطار السفلي :

الإطار الايمن :

الإطار الأيسر :

list-style-image

list-style-position

list-style-type

list-style

موضوعات متعلقة

بقلم : فاطمة العمادي

تابعنا على

التصنيفات:

المدونة برعاية

صفحات

بحث

موضوعات مشهورة

أين تجدني على الشبكة العنكبوتية؟