تعلم تصميم المواقع - تعلم CSS

ما هي لغة CSS: هي لغة تستخدم في تصميم صفحات ويب إلى جانب اللغات التوصيفية الأخرى مثل HTML و XHTML، وهي لغة قياسية تتيح التحكم الكامل في تصميم الصفحات (حجم وشكل الخط، حجم الصور…الخ) وجعلها متوافقة مع الهواتف والطبعات وجميع الشاشات.

ماذا نحتاج قبل تعلم CSS: خبرة في HTML لانها تعتمد على تنسيق عناصر HTML

لماذا لغة CSS: سابقاً كان تنسيق العناصر بواسطة أكواد HTML فقط صعب جدا وCSS سهلت هذا الأمر عن طريق وضع التنسيقات في ملف خارجي وفصل المحتوى عن التنسيق.

كيفية كتابة الأكواد – Syntax and How to write CSS Code:

بنية الكود Syntax CSS:

Selector

{

Property: Value

}

selector: اسم العنصر

property: خاصية العنصر

value: قيمة

تعريف العنصر Declaration:

property:value;

نستخدم الرمز: ; للفصل بين خاصية وأخرى (semicolone)

اللون:

color:value

حجم الخط:

font-size:value

شكل الكود:

يمكن وضع كود css في ملف خارجي “.css” واستدعاؤه في ملف HTML أو تضمين الكود مباشرة داخل ملف html بطريقتين:

تصميم داخل الصفحة (internal stylesheet)

(inline style) تصميم داخل العنصر نفسه

تنسيق العناصر – Element Styling:

وزن النص:

font-weight:value

نص غليظ:

bold:value

* عنصرclass له الأولوية في تنسيق العناصر دائماً.

* العنصر في الاسفل له الأولوية في التنسيق دائماً.

* التصميم داخل الصفحة internal style اقوى من ملف style

* التصميم داخل العنصر نفسهinline style اقوى من التصميم داخل الصفحة internal style و ملف style

الكلاس في CSS يُكتب هكذا:

.class

والمعرف هكذا:

#id

اتجاه الكتابة والعناصر في الصفحة “Direction”:

direction:rtl

افتراضياً: ltr

rtl: right to left (عربي من اليمين الى اليسار)

ltr: left to right (انجليزي من اليسار الى اليمين)

كيفية تنسيق الألوان:

ألوان محددةDefined Color: يوجد 140 لون محددين يمكن كتابة أسمائهم مباشرة

كود الألوان Color code:

* كود اللونHex Code:

#color

بعض محررات الأكواد مثل komodo تتوفر على خاصية كود الالوان ويمكن أيضاً الحصول على كود اللون من مواقع الأنترنت، مثال: https://html-color-codes.info

:RGB (red green blue) خاصية *

rgb(number)

إذا احتوى كود اللون على أرقام متطابقة فيمكن كتابة رقم واحد لاختصار الكود.

hover: عمل تنسيقات عند النقر بالفأرة “Mouse” على العناصر

مثال:

تنسيق css:

كود html:

الشكل على المتصفح:

شاهد أيضاً: تركيب مواقع ووردبريس

شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript

الخلفية – Element Background:

وضع خلفية:

background:value

لون الخلفية:

background-color:value

اللون الافتراضي للخلفية: شفافة

وضع خلفية للصورة:

background-image:url(”)

جلب الصورة من خارج المجلد:

background-image:url(‘../’)

جلب الصورة من مجلد آخر:

background-image:url(‘../folder/’)

تكرار الصورة:

background-repeat:default

no-repeat: عدم تكرار الصورة

repeat-x: تكرار بالعرض (أفقي)

repeat-y: تكرار بالطول (عمودي)

repeat: تكرار بالطول وبالعرض

تحريك او تثبيت الصورة في الصفحة:

background-attachment:default

fixed: صورة ثابتة في الصفحة

scroll: تتحرك مع الصفحة

مكان الصورة في الخلفية:

background-position:default

top right: اعلى اليمين

top left: اعلى اليسار

center right: وسط اليمين

center left: وسط اليسار

bottom right: اسفل اليمين

bottom left: اسفل اليسار

x% y%:

نسبة مئوية بالعرض والطول

الكود مختصر في سطر واحد:

background:#0000FF none repeat scroll 0% 0%

(اللون) (بدون صورة) (تكرار) (تتحرك مع الصفحة) (نسبة بالعرض والطول)

مثال:

تنسيق css:

كود html:

الشكل على المتصفح:

شاهد أيضاً: تركيب مواقع ووردبريس

شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript

النصوص – Text:

المسافات بين الحروف “Letter-spacing”:

letter-spacing:px

المسافة بين عنصر وعنصر:

margin:px

زيادة مساحة العنصر:

padding:px

تباعد الأسطر في النص:

line-height:px

* يتم تحديد القيمة بالبكسل (px) او النسبة المئوية (%) او (em)

محاذاة النص (يمين right او يسار left او وسط center):

text-align:center

تنسيق شكل النص:

text-decoration:none

Underline: خط تحت النص

none: بدون خط (القيمة الافتراضية)

overline: خط فوق النص

line-through: خط وسط النص

مسافة من اول السطر ( px او %):

text-indent:default

تغيير شكل النص:

text-transform:default

capitalize: تكبير اول حرف من كل كلمة في النص

uppercase: تكبير جميع الحروف في النص

lowercase: تصغير جميع الحروف في النص

المسافات White-space:

* جعل النص في سطر واحد فقط:

nowrap:px

* المسافة بين الكلمات في النص:

word-spacing:px

* المسافة بين الحروف في الكلمات:

letter-spacing:px

مثال:

تنسيق css:

كود html:

الشكل على المتصفح:

شاهد أيضاً: تركيب مواقع ووردبريس

شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript

خصائص الخط – Font Properties:

بعض أنواع الخطوط:

Tahoma, Arial, Times New Roman, Serif, Sans-Serif, Comic Sans MS, Trebuchet MS, Cursive, Helvetica, Droid Arabic Kufi

عائلة الخط:

font-family:value

* القيمة الافتراضية حسب المتصفح

* يفضل وضع مجموعة من الخطوط البديلة والفصل بينهم بفاصلة: ,

* يمكن استخدام خطوط جاهزة من الويب web safe font

شكل الخط:

font-style:default

italic: خط مائل

normal: عادي

حجم الخط:

font-size:px

القيمة الافتراضية: medium ويمكن كتابة القيمة بالنسبة المئوية على سبيل المثال:

16px = 100% = 1em

خواص غير شائعة الإستخدام:

large: كبير

xx-large: كبير

x-large: اكبر من السابق

small: صغير

x-small: صغير جدا

xx-small: اصغر من السابق

smaller & larger: تصغير او تكبير جزء او كلمة فقط من النص

وزن الخط:

font-weight:value

bold: خط سميك (700)

القيمة الافتراضية: normal (400)

bolder: اسمك من bold

lighter: خفيف

* يمكن كتابة قيمة الخط (من 100 إلى 900)

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

font: font-style font-weight font-size font-family line height

مثال:

تنسيق css:

كود html:

الشكل على المتصفح:

شاهد أيضاً: تركيب مواقع ووردبريس

شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript

الروابط – Links:

تنسيق الروابط الخارجية والداخلية.

الخواص:

اضافة تأثيرات على العنصر:

a:hover{}

إضافة تاثيرات عند الضغط على الرابط (نشط):

a:active{}

* تم إلغاء الخواص: link و visited.

مثال:

تنسيق css:

كود html:

الشكل على المتصفح:

شاهد أيضاً: تركيب مواقع ووردبريس

شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript

القوائم – Lists:

تنسيق القوائم (المرتبة وغير المرتبة).

الخواص:

شكل القائمة:

list-style-type:default

القيمة الافتراضية: disc

disc : دوائر

decimal: أرقام

square: مربع

none: بدون شكل

موضع الشكل:

list-style-position:default

القيمة الافتراضية: outside

outside: خارج المحتوى

inside: داخل المحتوى في القائمة

وضع صورة على شكل القائمة:

list-style-image:url(”)

كتابة الخواص في سطر واحد:

list-style: list-style-type list-style-position list-style-image

مثال:

تنسيق css:

كود html:

الشكل على المتصفح:

شاهد أيضاً: تركيب مواقع ووردبريس

شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript

إطار الصفحة – Box Models:

تصميم كل العناصر في الصفحة داخل إطار “Container / Box”

مثال:

تنسيق css:

كود html:

الشكل على المتصفح:

شاهد أيضاً: تركيب مواقع ووردبريس

شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript

الحواف – Border:

إضافة حواف للعناصر وتنسيقها

الحواف:

border:value

العرض:

border-width:px

الشكل:

border-style:default

حافة للأعلى:

border-top:px

حافة لليمين:

border-right:px

حافة لليسار:

border-left:px

حافة للأسفل:

border-bottom:px

أشكال الحافة “Border”:

القيمة الافتراضية: none من دون شكل

dashed: خط منقط

solid: خط واحد

double: خطين

groove: خط واحد ملون

inset: حافة من الداخل

onset: حافة من الخارج

hidden: مخفي

اللون:

border-color:value

كتابة كل خواص الحافة border في سطر واحد:

border: border-width border-style border-color

بطرق اخرى:

border-left-width border-left-style border-left-color

border-right-width

border-right-style

border-right-color

border-top-width

border-top-style

border-top-color

border-bottom-width border-bottom-style

border-bottom-color

ترتيب العناصر:

بشكل عام تُكتب القيم بهذا الترتيب:

: 1px 2px 1px 2px

: top right bottom left

: 1px 2px 4px

(top) (right-left) (bottom)

: 1px 2px

(top-bottom) (right-left)

: 1px

(top-right-bottom-left)

مثال:

تنسيق css:

كود html:

الشكل على المتصفح:

شاهد أيضاً: تركيب مواقع ووردبريس

شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript

هامش خارجي – Margin:

هامش خارج العنصر:

margin:px

هامش لليسار:

margin-left:px

هامش لليمين:

margin-right:px

هامش للأعلى:

margin-top:px

هامش للأسفل:

margin-bottom:px

توسيط العنصر أو وضع الهامش تلقائيا:

margin:auto

* 0 هي نفسها auto

* يمكن كتابة هوامش بالسالب (-)

مثال:

تنسيق css:

كود html:

الشكل على المتصفح:

شاهد أيضاً: تركيب مواقع ووردبريس

شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript

هامش داخلي – Padding:

هامش داخل العنصر:

padding:px

هامش لليمين:

padding-right:px

هامش لليسار:

padding-left:px

هامش للأعلى:

padding-top:px

هامش للأسفل:

padding-bottom:px

خاصيةpadding لا تقبل القيم السالبة (-)

مثال:

تنسيق css:

كود html:

الشكل على المتصفح:

شاهد أيضاً: تركيب مواقع ووردبريس

شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript

الأبعاد ( الطول والعرض ) – Dimensions | Width & Height:

تحديد مساحة العرض:

width:px

القيمة الافتراضية: auto

اقل عرض للعنصر:

min-width:px

القيمة الافتراضية: 0 (يبدأ من 0)

اقصى عرض للعنصر:

max-width:px

تحديد مساحة الطول:

height:px

اقل طول للعنصر:

min-height:px

اقصى طول للعنصر:

max-height:px

* تفيد هذه الخاصية في تحديد عرض وطول العناصر تلقائيا في الصفحة.

مثلاً: تحديد اقل واقصى حد لعرض الصور في الصفحة.

* يمكن كتابة القيم بpx او بالنسبة المئوية.

اخفاء النص خارج العنصر:

overflow:hidden

مثال:

تنسيق css:

كود html:

الشكل على المتصفح:

شاهد أيضاً: تركيب مواقع ووردبريس

شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript

كيفية عرض العناصر – Display: Inline – Block – None – Inline-Block

عرض العناصر على خط واحد:

display:inline

* عناصر inline مرتبة افتراضيا:

عرض عنصر تحت الاخر:

display:block

* عناصر block مرتبة افتراضيا:

يتم تنسيق عناصر block بخواص عناصر inline:

display:inline-block

إخفاء العنصر في الصفحة:

display:none

مثال:

تنسيق css:

كود html:

الشكل على المتصفح:

شاهد أيضاً: تركيب مواقع ووردبريس

شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript

مكان العناصر – Position: Static – Fixed – Relative – Absolute

مكان العناصر في الصفحة:

position:default

القيمة الافتراضية static

عنصر ثابت في مكانه، لا يتحرك في الصفحة:

position:fixed

عنصر ثابت لكن يمكن تحريكه في الصفحة:

position:relative

عنصر ثابت مع العنصر relative ولا يتحرك في الصفحة:

position:absolute

مساحة للأعلى:

top:px

مساحة لليمين:

right:px

مساحة للأسفل:

bottom:px

مساحة لليسار:

left:px

* المقاس بpx او النسبة المئوية

مثال:

تنسيق css:

كود html:

الشكل على المتصفح:

شاهد أيضاً: تركيب مواقع ووردبريس

شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript

وضع العناصر جنب بعضها – Float: Left – Right – None – Clear

وضع العناصر جنب بعضها على خط واحد بالطريقة التي نريد (تعويم العناصر):

float:default

القيمة الافتراضية: none

right: اليمين

left: اليسار

مسح float السابق وبدئ float جديد:

clear:default

both: مسح الاتجاهين

right: مسح اليمين

left: مسح اليسار

مثال:

تنسيق css:

كود html:

الشكل على المتصفح:

شاهد أيضاً: تركيب مواقع ووردبريس

شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript

تنسيق مجموعة من العناصر – Grouping Similar Selector:

تنسيق مجموعة من العناصر ذات خواص مشتركة في كود واحد.

element1, element2 {}

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

مثال:

تنسيق css:

كود html:

الشكل على المتصفح:

شاهد أيضاً: تركيب مواقع ووردبريس

شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript

تنسيق عنصر داخل عنصر واحد – Nesting:

اضافة تنسيقات وتعديلات داخل عنصر واحد فقط (العنصر الاب) من دون التأثير على العناصر الأخرى.

element1 nesting1, element2 nesting2

مثال:

تنسيق css:

كود html:

الشكل على المتصفح:

شاهد أيضاً: تركيب مواقع ووردبريس

شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript

تنسيق المحتوى خارج العنصر – Overflow:

Overflow خاصية من خواص CSS2 تُستخدم لتنسيق المحتوى الذي يكون خارج العنصر مثل النص الزائد في الفقرات الطويلة، ويمكن استخدامها مع خاصية float.

القيمة الافتراضية: visible

hidden: مخفي

scroll: علامة الصعود والهبوط

auto: إظهار العلامة بالطول فقط

مثال:

تنسيق css:

كود html:

الشكل على المتصفح:

شاهد أيضاً: تركيب مواقع ووردبريس

شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript

إظهار وإخفاء العناصر – Visibility:

بنية الكود:

visibility:default

visible: القيمة الافتراضية

إخفاء العنصر مع الاحتفاظ بمكانه (مساحته):

visibility:hidden

إخفاء العنصر ومكانه:

display:none

* الفرق بينvisibility و display: يمكن إخفاء أو إظهار مساحة العنصر بvisibility عكس display يتم إخفاؤها.

مثال:

تنسيق css:

كود html:

الشكل على المتصفح:

شاهد أيضاً: تركيب مواقع ووردبريس

شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript

الطبقات – Z index:

خاصية الطبقات تُستخدم فقط مع خاصية « Position » مكان العناصر.

وتُستخدم في تنظيم العناصر مثل وضع عنصر فوق عنصر اخر أو تحته وتحديد العنصر الذي له الاولوية:

z-index:value

auto: ترتيب تلقائي

1-2-3…: الترتيب بالأرقام

أعلى رقم هو الأول (اعلى طبقة) ثم يليه الرقم الذي أقل منه.

مثال:

تنسيق css:

كود html:

الشكل على المتصفح:

شاهد أيضاً: تركيب مواقع ووردبريس

شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript

المحتوى – Content:

اضافة محتوى ب CSS من دون كتابته فيHTML:

element:after

content:“”

after: نص بعد العنصر

before: نص قبل العنصر

القيمة الافتراضية هي none وتستخدم لالغاء المحتوى “reset”.

مثال:

تنسيق css:

كود html:

الشكل على المتصفح:

شاهد أيضاً: تركيب مواقع ووردبريس

شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript

علامة الفأرة – Mouse Cursor:

تنسيق علامة الفأرة عند الضغط في الصفحة:

cursor:default

pointer: علامة الرابط

cell: علامة زائد

help: علامة استفهام بجانب الفأرة

move: علامة تحريك

* المزيد من خواص cursor على موقع: https://codepen.io

مثال:

تنسيق css:

كود html:

الشكل على المتصفح:

شاهد أيضاً: تركيب مواقع ووردبريس

شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript

الحواف 2 – Outline:

خاصية الحواف “Outline” مشابهة لـ ”Border”

outline :

* كل شيئ يوجد فيborder ينطبق على outline، الفرق بينهما أن border يتم تنسيق مساحة العنصر وتؤثر عليه عكس outline لا يتم تنسيق مساحة العنصر ولا تؤثر عليه.