Css & css3 SEF Academy

SOFTWARE
ENGINEERING FUTURE
Cascading S tyle Sheets
Supervisor :
bs
eng / Islam Mohamed
002 0109 848 1288
002 0109 762 9509
: islam.mohamed4921@gmail.com BAHAA SABER

FRONT-END
SOFTWARE
ENGINEERING FUTURE
s ‫ تساعد في تخطيط‬.‫ وتصف كيفية عرض العناصر‬HTML ‫) هي لغة تستخدم لتصميم مستند‬1
cs
.‫صفحات الويب‬
RE : HTML ‫ مع ملفات‬CSS ‫) طرق ربط ملفات الـ‬2

TU
RE
، HTML ‫> في كود‬head< ‫ داخل قسم‬، >link< ‫ صفحة خارجية يتم إضافتها داخل تاغ‬: CSS External •
FU
W A NG .HTML ‫ويمكن ربطها بأكثر من صفحة‬
T ER I
.‫> وهي لصفحة واحدة فقط‬head< ‫ داخل قسم‬، >style< ‫ داخل تاغ‬CSS ‫ نكتب كود الـ‬: CSS Internal •
F
SO INE
.‫ وهي لعنصر واحد فقط‬،‫ للعنصر ذي الصلة‬style “attribute“ ‫ يتم تحديدها في‬: CSS Inline •
<html>
N G
Internal CSS <html> External CSS
<head>
<style> E <head>
<link rel="stylesheet" href="css/style.css"/>
body {
<html> Inline CSS
background-color: lightblue; <body>
} <h1 style="background-color:
</style> lightblue;">Text</h1>
SOFTWARE
ENGINEERING FUTURE
s :‫ ويتألف من‬Syntax ‫ يسمى‬CSS ‫) كل سطر في كود الـ‬3

cs
.‫ إلعطائه صفات خاصة به‬tag , id , class ‫ نستدعيه عن طريق‬HTML ‫ العنصر الموجود في‬: Selector •
E
.‫ وكل خاصية لها عدة قيم‬،‫ الخاصية التي ستتطبق عىل العنصر‬: Property •
R
U
.‫ القيم التي ستسند إىل الخواص‬: Value •
T
R E F U
:‫األساسية‬ selectors ‫) أنواع‬4
. HTMLA ‫ الموجود في‬tagG ‫الـ‬ ‫ وهو اسم‬: Selector Tag •
.).( ‫عنصر ويتم استدعاءه بـ‬T W
‫من‬ ‫ألكثر‬
R
‫االسم‬ IN
‫هذا‬ ‫ يمكن إعطاء‬: Selectors Class •
O F
.)#( ‫استدعاءه بـ‬ E
‫ يتم‬، ‫فقط‬ E ‫ يستخدم لتحديد عنصر واحد‬: Selectors Id •
S IN
N G
div{
Tag Selector E.class-name{
Class Selector
#id-name {
Id Selector
background-color: #ffffff ; background-color: #ffffff ; background-color: #ffffff ;

} } }
2
SOFTWARE
ENGINEERING FUTURE
s CSS Background ‫الخلفية‬

cs
E
.‫ تحدد لون خلفية العنصر‬: background-color )5
R
T U
.‫ تحدد صورة الستخدامها كخلفية ثابتة للعنصر‬:background-image )6
.(no-repeat , repeat , repeat-y , repeat-x) : ‫تكرار‬R E ، ‫القيم تأخذ‬F:Ubackground-repeat (7
‫الخلفية‬
W A N G
F T ER
fixed ,( ‫ قيمها‬.‫ثابتة أو متحركة عىل شريط تمرير‬ ‫الصورة‬ ‫لوضع‬
I
‫تستخدم‬ :background-attachment )8
S O I N E )scroll
N G
‫ يمكن وضع القيم بالبكسل أو مئوية‬،‫الخلفية‬ ‫ تستخدم لتحديد موضع صورة‬:background-position )9
E .‫أو اتجاهات‬
.(right, left, center, left center , bottom , top, 0% 0%, 10px 2px) ‫القيم‬
background : color image no-repeat attachment position; ‫) اختصار بتعليمة واحدة‬10
3
‫‪SOFTWARE‬‬
‫‪ENGINEERING FUTURE‬‬
‫‪s‬‬ ‫النصوص ‪CSS TEXT‬‬

‫‪cs‬‬
‫‪E‬‬
‫‪ : Color )11‬تستخدم لتلوين النص ‪ ،‬وفي السابق ذكرنا ‪ background-color‬لتلوين الخلفية‪ ،‬يمكن استخدام‬
‫‪R‬‬
‫‪T‬‬‫‪U‬‬ ‫القيم‪:‬‬
‫• اسم اللون ‪ :‬ويوجد ‪ 140‬لون يمكن استخدامهم في الكود مثال ‪.blue , green , red :‬‬
‫‪R‬‬‫‪E‬‬ ‫‪F‬‬‫‪U‬‬ ‫• قيم ‪. rgb(255, 79, 41) : RGB‬‬
‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬ ‫• قيم ‪. #d3d3d3 : HEX‬‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬ ‫• قيم ‪. hsl(9, 100%, 64%) : HCL‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬ ‫• قيم ‪. rgba(255, 79, 41, 0.5) : RGBA‬‬

‫• قيم ‪. hsla(9, 100%, 64%, 0.5) : HCLA‬‬
‫‪N‬‬ ‫‪G‬‬
‫‪ : text-align: center; (12‬قيمها للنص األفقي االنزياح لتحديد)‪.(center , right , left , justify‬‬
‫‪E‬‬
‫‪ : text-Direction: ltr ; (13‬تحدد اتجاه الكتابة حسب اللغة وقيمها ( ‪) rtl , ltr‬والقيمة االفتراضية من اليسار لليمين‪.‬‬
‫‪ : letter-spacing :2px ; )14‬المسافة بين الحروف‪ .‬القيمة االفتراضية ‪ ، normal‬ويمكن وضع مسافة بالبكسل‪.‬‬
‫‪4‬‬
‫‪s‬‬ ‫النصوص ‪CSS TEXT‬‬

‫‪cs‬‬
‫‪R‬‬‫‪E‬‬
‫‪. : word-spacing: 50px; (15‬القيمة االفتراضية ‪، normal‬يزيد أو ينقص المسافة بين الكلمات‬
‫‪T‬‬‫‪U‬‬
‫‪E‬‬ ‫‪U‬‬
‫‪. : line-height: 40px; (16‬القيمة االفتراضية ‪ , normal‬يزيد أو ينقص ارتفاع الخط‬
‫‪R‬‬ ‫‪F‬‬
‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬
‫‪: text-decoration: 40px; (17‬إلضافة تأثيرات للكتابة ‪ ،‬خط تحت النص أو خط في منتصف النص وقيمها‪:‬‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬ ‫)‪.(none , underline , overline , line-through‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬
‫‪. : text-transform: uppercase; (18‬لتغيير حالة األحرف من صغيرة إىل كبيرة أو ألحرف كبيرة في بداية كل كلمة‪.‬‬
‫‪N‬‬ ‫‪G‬‬
‫‪E‬‬ ‫)‪.(capitalize , lowercase , uppercase , none‬‬
‫‪ : text-indent: 10px; (19‬تحديد المسافة البادئة للسطر األول من النص‪.‬‬
‫‪ : vertical-align: top; (20‬تحديد األنزياح العمودي للخط ‪.(top | middle | bottom) ،‬‬
‫‪5‬‬
SOFTWARE
ENGINEERING FUTURE
s CSS TEXT ‫النصوص‬

cs
E
google fonts ‫ لتحديد نوع الخط يمكن استخدام خطوط‬: font-family: Arial, Helvetica, sans-serif; (21
R
TU
‫ ويمكن وضع نسبة مئوية‬16px ‫ القيمة االفتراضية له‬،‫ تحديد حجم الخط‬: font-size: 30px; (22
RE FU
W A NG
FT ER I
.)bold , bolder , lighter , normal ( : ‫ لزياده او تخفيف وزن الخط وقيمها‬: font-weight: bold; (23
SO INE
.)normal , italic , oblique ( : ‫ طبيعي أم مائل أم منحرف‬، ‫ لتحديد شكل الخط‬: font-style: italic; (24
N G
E
. ‫ اختصار التعليمات السابقة بتعليمة واحدة‬: font: family style weight size ; (25
/*.............................*/ ‫ نضع التعليق ضمن‬CSS ‫) إلضافة تعليق أو مالحظات ضمن كودات‬26
6
SOFTWARE
ENGINEERING FUTURE
s CSS LISTS ‫القوائم‬

cs
E
.‫ من ملف خارجي لوضعها جانب عناصر القائمة‬icon ‫ تحديد صورة أو‬:list-style-image: url('img.gif’); (27
R
TU
none , disc , circle , square ,decimal ) : ‫ تحديد الشكل النطقي للقائمة قيمها‬:list-style-type: circle; (28
RE FU
A
.(decimal-leading-zero , lower-alpha , lower-roman , upper-alpha , upper-roman
W ING
T ER
.( outside , inside ) ‫ لتحديد موقع النقط داخل أم خارج المكان المحدد للقوائم‬:list-style-position: inside; (29
F
SO INE
.‫اختصار التعليمات السابقة بسطر واحد‬: list-style:list-style-type list-style-position list-style-image; (30
N G
E
ul{
list-style: squareinside
url("sqpurple.gif"); }
7
‫‪s‬‬ ‫األبعاد ‪CSS Dimension‬‬

‫‪cs‬‬
‫‪E‬‬
‫‪ : width: 500px; (31‬يحدد عرض العنصر ويمكن وضع قيم بالبكسل وقيم بالنسبة المئوية‪.‬‬
‫‪R‬‬
‫‪T‬‬‫‪U‬‬
‫‪R‬‬‫‪E‬‬ ‫‪F‬‬‫‪U‬‬ ‫‪ : max-width: 500px; (32‬يحدد أكبر عرض للعنصر‪.‬‬
‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬

‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬ ‫‪ : min-width: 500px; (33‬يحدد أصغر قيمة لعرض العنصر‪.‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬
‫‪ : hight: 500px; (34‬يحدد ارتفاع العنصر ويمكن وضع قيم بالبكسل وقيم بالنسبة المئوية‪.‬‬
‫‪N‬‬ ‫‪G‬‬
‫‪E‬‬ ‫‪ : max-hight: 500px; (35‬يحدد أكبر ارتفاع للعنصر‪.‬‬
‫‪ : min-hight: 500px; (36‬يحدد ارتفاع قيمة لعرض العنصر‪.‬‬
‫‪8‬‬
‫‪s‬‬ ‫‪Box Model‬‬

‫‪cs‬‬
‫‪E‬‬
‫‪ )37‬هو مربع يلتف حول عناصر الـ ‪ HTML‬ويسمع إلعطاء حدود ومسافات بين أقسامه‪.‬و يتألف من‪:‬‬
‫‪R‬‬
‫‪U‬‬
‫• ‪ : margins‬هي المنطقة بين حدود العنصر وحدود العنصر األب‪.‬‬
‫‪T‬‬
‫‪R‬‬‫‪E‬‬ ‫‪F‬‬‫‪U‬‬ ‫• ‪ : borders‬حدود تحيط بكل عنصر ‪.‬‬
‫‪A‬‬ ‫‪G‬‬
‫• ‪ : padding‬المنطقة بين محتوى العنصر وحدوده ‪ ،‬وتأخذ تأثيرات خلفية العنصر ‪.‬‬
‫‪W‬‬ ‫‪N‬‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬ ‫• ‪ : content‬المحتوى داخل العنصر‪.‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬
‫‪N‬‬ ‫‪G‬‬
‫‪E‬‬
‫‪9‬‬
‫‪s‬‬ ‫‪CSS Margins‬‬

‫‪cs‬‬
‫‪R‬‬‫‪E‬‬
‫‪ : margin-top: 5px; (38‬تحدد المساحة العلوية ويمكن تحديد االتجاهات األربعة بشكل منفصل بالخصائص‬
‫‪T‬‬‫‪U‬‬
‫‪E‬‬ ‫‪U‬‬
‫التالية‪. (margin-top, margin-bottom, margin-right, margin-left) :‬‬
‫‪R‬‬ ‫‪F‬‬
‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬
‫‪ : margin: left bottom right top; (39‬اختصار يمكن تحديد االتجاهات األربعة بسطر واحد‪.‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬
‫‪ : margin: 10px 15px 15px; (40‬في حال ‪ 3‬قيم تكون المسافة األوىل لألعىل والثانية لليمين واليسار والثالثة لألسفل‪.‬‬
‫‪N‬‬ ‫‪G‬‬
‫‪E‬‬
‫‪ : margin: 10px 15px; (41‬في حال وضعنا قيمتين‪ ،‬األوىل تكون لألعىل واألسفل والثانية لليمين واليسار‪.‬‬
‫‪ : margin: auto; (42‬هذه التعليمة توسط العنصر أفقيًا ‪ ،‬تعطي مسافة متساوية من اليمين واليسار‪.‬‬
‫‪10‬‬
‫‪s‬‬ ‫‪CSS Padding‬‬

‫‪cs‬‬
‫‪R‬‬‫‪E‬‬
‫‪ : padding-top: 5px; (43‬تحدد الفراغ العلوي ويمكن تحديد االتجاهات األربعة بشكل منفصل بالخصائص‬
‫‪T‬‬‫‪U‬‬
‫‪E‬‬ ‫‪U‬‬
‫التالية‪. (padding-top, padding-bottom, padding-right, padding-left) :‬‬
‫‪R‬‬ ‫‪F‬‬
‫‪A‬‬ ‫‪G‬‬
‫‪ : padding: left bottom right top; (44‬اختصار يمكن تحديد االتجاهات األربعة بسطر واحد‪.‬‬
‫‪W‬‬ ‫‪N‬‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬
‫‪ : padding: 10px 15px 15px; (45‬في حال ‪ 3‬قيم يكون الفراغ األول لألعىل‪ ،‬والثاني لليمين واليسار‪ ،‬والثالث لألسفل‬
‫‪N‬‬ ‫‪G‬‬
‫‪ : padding: 10px 15px; (46‬في حال وضعنا قيمتين‪ ،‬األوىل تكون لألعىل واألسفل والثانية لليمين واليسار‪.‬‬
‫{ ‪div.ex2‬‬‫‪E‬‬
‫;‪width: 300px‬‬ ‫هذا العنصر له حدود‬
‫;‪padding: 50px‬‬
‫زرقاء‬
‫;‪Border: 1px solid blue‬‬
‫‪ , 25px‬بوزن ‪padding 1px‬‬
‫;‪background-color: lightblue‬‬
‫}‬ ‫من جميع الجهات‪.‬‬
‫‪11‬‬
SOFTWARE
ENGINEERING FUTURE
s CSS Borders
cs
.‫ منقطة أم مزدوجة أم غيرها‬،‫ تحدد نوع الحدود المرسومة حول العنصر‬: border-style: solid; (47
RE
U
. (none, dotted , dashed , solid , double , hidden) :‫وقيمها‬
E UT
AR G F .‫ تحدد لون الحدود‬: border-color: #f5f6f7 ; (48
W
T ER IN .‫ تحدد وزن الحدود‬: border-width: 3px ; (49
O F E
S IN
:‫ ويمكن تحديد جهة الحدود كالخصائص‬،‫ اختصار التعليمات السابقة بسطر واحد‬: border: width style color; (50
N G
E
( border-top , border-bottom , border-right , border-left )
‫ تجعل الحدود‬%50‫ تستخدم لتدوير الزوايا ونضع قيم بالبكسل او بالنسبة المئوية و‬: border-radius: 50% ; (51
‫ويمكن تحديد جهة الزوايا كالمثال التالي‬.‫دائرية‬
border-bottom-left-radius: 50px ;
12
SOFTWARE
ENGINEERING FUTURE
s CSS Outline
cs
.‫ يحدد وزن الخط الخارجي للعنصر‬: outline-width: 10px ; (52
RE
U
.‫ تحدد شكل خط الحدود الخارجية للعنصر‬: outline-style: solid ; (53
T
RE FU
W A .‫ لتحديد لون الخط الخارجي للعنصر‬: outline-color: blue; (54
NG
T ER I
.‫ اختصار لثالث تعليمات في سطر واحد‬: outline: width style color ; (55
F
SO INE
.border ‫ يحدد انزياح الخط الخارجي عن الـ‬: outline-offset: 5px ; (56
N G
E
13
‫‪s‬‬ ‫‪CSS Opacity‬‬

‫‪cs‬‬
‫‪ : opacity: 0.5 ; (57‬يطبق شفافية عىل العنصر‪ ،‬وقيمه بين الصفر والواحد‪ ،‬والقيمة االفتراضية تساوي (‪.)1‬‬
‫‪R‬‬‫‪E‬‬
‫‪CSS Overflow‬‬
‫‪T‬‬‫‪U‬‬
‫‪R‬‬ ‫‪E‬‬ ‫‪F‬‬‫‪U‬‬
‫‪ : overflow: hidden ; (58‬تحدد كيفية عرض محتوى العنصر في حال زاد المحتوى عن حجم صندوقه وقيمه‪:‬‬
‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬ ‫• ‪ : Visible‬يخرج المحتوى خارج الصندوق‪.‬‬
‫‪F‬‬ ‫‪T ER‬‬ ‫‪I‬‬

‫• ‪ : Hidden‬يتم حذف المحتوى الخارج عن الصندوق‪.‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬ ‫‪E‬‬ ‫• ‪ : scroll‬ينشأ شريط تمرير في الصندوق‪.‬‬

‫• ‪ : Auto‬في حال المحتوى مناسب ال يفعل شيء وفي حال زاد عن حجم الصندوق ينشأ شريط تمرير‪.‬‬
‫‪N‬‬ ‫‪G‬‬
‫‪E‬‬ ‫‪CSS cursor‬‬
‫‪ : cursor: pointer ; (59‬يحدد شكل مؤشر الماوس عند الوقوف عىل العنصر‪ ،‬وهذه القيمة تظهر مؤشر اليد‪.‬‬
‫‪( Crosshair , default , pointer , move , e-resize , ne-resize , nw-resize , n-resize , se-resize ,‬‬
‫) ‪sw-resize , s-resize , w-resize , text , waithelp , auto‬‬
‫‪14‬‬
‫‪s‬‬ ‫‪Z-index‬‬
‫‪cs‬‬
‫‪ : z-index: 3 ; (60‬تحدد موضع األقسام فوق بعضها‪ ،‬القسم الذي يحمل ‪ z-index‬أعىل يكون فوق العناصر‬
‫‪R‬‬‫‪E‬‬
‫الثانية‪ ،‬ويقبل قيم موجبة وسالبة‪ ،‬والقيمة االفتراضية لها ‪.auto‬‬
‫‪T‬‬‫‪U‬‬
‫‪R‬‬ ‫‪E‬‬ ‫‪F‬‬‫‪U‬‬
‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬ ‫‪E‬‬
‫‪N‬‬ ‫‪G‬‬‫‪CSS‬‬ ‫‪float‬‬
‫‪E‬‬
‫‪ : float: left ; (61‬تحدد جهة موضع القسم في المنتصف أم عىل يمين العنصر األب أم عىل يساره ‪ ،‬وباقي‬
‫العناصر تلف حول هذا العنصر ‪ .‬وقيمه‪) right , none , left ( :‬‬
‫‪ : clear: both ; (62‬بعد استخدام خاصية الـ ‪ float‬للعنصر ستلف العناصر حوله لمنع حدوث هذا نستخدم هذه‬
‫الخاصية‬
‫‪15‬‬
‫‪s‬‬ ‫‪CSS Tables‬‬

‫‪cs‬‬
‫‪ : caption-side: bottom; (63‬يحدد جهة عنوان الجدول وله قيمتان ( ‪) bottom , top‬واألعىل هي االفتراضية‪.‬‬
‫‪R‬‬‫‪E‬‬
‫‪T‬‬‫‪U‬‬
‫‪E‬‬ ‫‪U‬‬
‫‪ : border-collapse: collapse; (64‬تحدد شكل الخطوط المشكلة للجدول وله قيمتان ( ‪.) separate , collapse‬‬
‫‪R‬‬ ‫‪F‬‬
‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬
‫‪ : border-spacing: 5px 5px; (65‬يحدد الفواصل بين حدود الخاليا ‪ ،‬القيمة األوىل المسافة العرضية والثانية طولية‪.‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬
‫‪N‬‬ ‫‪G‬‬
‫‪ : table-layout: fixed; (66‬يجعل حجم خاليا الجدول ثابتة أي ال تكبر مع زيادة المحتوى والقيمة االفتراضية ‪.auto‬‬
‫‪E‬‬
‫‪ : empty-cells: hide; (67‬إلخفاء الخاليا الفارغة ‪ ،‬والقيمة االفتراضية لها ‪.show‬‬
‫‪16‬‬
‫‪s‬‬ ‫‪CSS Display & Visibility‬‬

‫‪cs‬‬
‫‪ : visibility: hidden; (68‬تخفي العنصر و تبقى مكان العنصر محجوزَا للعنصر نفسه والقيمة االفتراضية ‪.visibility‬‬
‫‪R‬‬‫‪E‬‬
‫‪T‬‬‫‪U‬‬
‫‪ : display: none; (69‬تخفي العنصر ‪ ،‬وتحذف الحيز الذي يشغله ومن قيمها‪:‬‬
‫‪R‬‬‫‪E‬‬ ‫‪F‬‬‫‪U‬‬
‫‪W‬‬ ‫‪A‬‬
‫• ‪ : Inline‬أي أن العنصر سيشغل مساحة بقدر المحتوى الموجود فيه ويسمح بوجود عناصر بجانبه‪.‬‬
‫‪N‬‬‫‪G‬‬
‫‪T ER‬‬ ‫‪I‬‬
‫• ‪ : Block‬أي أن العنصر سيشغل مساحة السطر بأكمله حتى ولو كان المحتوى ال يشغله كامالَ‪.‬‬
‫‪F‬‬
‫‪S‬‬‫‪O‬‬ ‫‪N‬‬‫‪E‬‬
‫وقد تم ذكر عناصر الـ ‪ Inline‬و ‪ Block‬في ملف الـ ‪.HTML‬‬
‫‪I‬‬
‫‪N‬‬ ‫‪G‬‬
‫• ‪ : block-Inline‬يسمح بتعيين العرض واالرتفاع للعنصر‪ ،‬وال يضاف فاصل سطر بعد العنصر ‪ ،‬لذلك‬
‫‪E‬‬ ‫يمكن أن يكون العنصر بجوار العناصر األخرى‪.‬‬
‫• ‪ : cell-table‬تجعل القوائم عىل شكل جدول وتستخدم في القوائم المنسدلة ‪.‬‬
‫‪17‬‬
‫‪s‬‬ ‫‪CSS Positioning‬‬

‫‪cs‬‬
‫‪ : position: static ; (70‬تحدد طريقة موضع العنصر في الصفحة و ‪ static‬هي القيمة االفتراضية وقيمه‪:‬‬
‫‪R‬‬‫‪E‬‬
‫‪T‬‬‫‪U‬‬ ‫• ‪ : Static‬يكون العنصر ثابت وال يتأثر بعناصر ثانية‪.‬‬
‫‪E‬‬ ‫‪U‬‬
‫• ‪ : Relative‬تعطى هذه الخاصية للعنصر األب ليحتوي العناصر فوقه وال يؤثر عىل العناصر التي بجواره‪.‬‬
‫‪R‬‬ ‫‪F‬‬
‫‪A‬‬ ‫‪G‬‬
‫• ‪ : Fixed‬يجعل العنصر ثابتَا في مكانه من الصفحة ويبقى في نفس المكان حتى لو تم تمرير الصفحة‬
‫‪W‬‬ ‫‪N‬‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬
‫• ‪ : Absolute‬تعطي أللبناء التي أعطي لألب الخاص بها خاصية ‪ Relative‬ليتم احتواء األبناء ضمن األب‪.‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬ ‫‪ )71‬يتأثر تموضع العنصر بأربع خواص إضافية وهي ‪:‬‬
‫‪N‬‬ ‫‪G‬‬
‫• ; ‪ : top: 50%‬تحدد بعد العنصر عن الحافة العلوية يمكن تحديده بالبكسل أو النسبة المئوية‪.‬‬
‫‪E‬‬
‫• ; ‪ : Bottom :30px‬تحدد بعد العنصر عن الحافة السفلية يمكن تحديده بالبكسل أو النسبة المئوية‪.‬‬
‫• ; ‪ : Right: 20%‬تحدد بعد العنصر عن الحافة اليمنى يمكن تحديده بالبكسل أو النسبة المئوية‪.‬‬
‫• ; ‪ : Left :50px‬تحدد بعد العنصر عن الحافة اليسرى يمكن تحديده بالبكسل أو النسبة المئوية‪.‬‬
‫‪18‬‬
‫‪s‬‬ ‫وحدات القياس في ‪CSS‬‬

‫‪cs‬‬
‫‪ : em )72‬متعلق بحجم الخط الحالي للعنصر ويحسب حجم الخط بالبكسل بضربه ب ‪.) 14px*2 = 2em ( 14‬‬
‫‪R‬‬‫‪E‬‬
‫‪U‬‬
‫‪ : Rem )73‬متعلق بحجم الخط في عنصر الـ ‪ root‬والذي يمثل ‪ HTML‬ويحسب ( ‪) 16px*3 = rem3‬‬
‫‪T‬‬
‫‪R‬‬ ‫‪E‬‬ ‫‪F‬‬ ‫‪U‬‬
‫‪W‬‬ ‫‪A‬‬
‫‪ : Vh )74‬متعلق بارتفاع الصفحة المعروضة ويمكن وضع نسب مئوية أو أرقام ( ‪) 20vh = 20% of viewe height‬‬
‫‪N‬‬ ‫‪G‬‬
‫‪F‬‬ ‫‪T ER‬‬ ‫‪I‬‬
‫‪ : Vw )75‬متعلق بعرض الصفحة المعروضة ويمكن وضع نسب مئوية أو أرقام‪.‬‬
‫‪S‬‬ ‫‪O‬‬
‫‪Grouping‬‬ ‫‪&N‬‬
‫‪I‬‬ ‫‪E‬‬
‫‪Nesting‬‬ ‫‪Selectors‬‬
‫‪N‬‬ ‫‪G‬‬
‫‪E‬‬
‫‪ : #};x1 p { color:white )76‬هو استدعاء عنصر من داخل عنصر ثاني ‪ ،‬أي أننا استدعينا الـ ‪ p‬الموجودة داخل‬
‫العنصر ذو الـ ‪ . id : x1‬وهذه الحالة تسمى ‪ nesting‬ويسمى ‪. nested element : p‬‬
‫‪ : };h1,h2,p {color:green )77‬إعطاء خاصية واحده ألكثر من عنصر تدعى ‪.grouping‬‬
‫‪19‬‬
‫‪s‬‬ ‫‪Specificity‬‬
‫‪cs‬‬
‫‪ )78‬إذا طبقنا خواص مختلفة او متضاربة من الـ ‪ CSS‬عىل نفس العنصر لكن بطرق مختلفة ‪ ،‬سيتم تطبيق‬
‫‪R‬‬‫‪E‬‬
‫المحدد ذو األعىل قيمة من الـ ‪ Specificity‬ويكون ترتيب الخصوصية وفق التسلسل الهرمي التالي‪:‬‬
‫‪T‬‬‫‪U‬‬
‫‪R‬‬‫‪E‬‬
‫• ‪ : Inline styles‬الخواص المكتوبة مع التاغ في نفس السطر في صفحة ‪ HTML‬وتأخذ ‪ 1000‬نقطة‪.‬‬
‫‪F‬‬‫‪U‬‬
‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬
‫• ‪ : Ids‬االستدعاء عن طريق الـ ‪ id‬ويأخذ ‪ 100‬نقطة‪.‬‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬

‫• ‪ : Classes, pseudo-classes, attribute selectors‬نقاط ‪ 10‬تأخذ‪.‬‬
‫أمثلة عن االستدعاءات‪:‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬ ‫‪.text‬‬ ‫▪ ‪Classes‬‬
‫‪N‬‬ ‫‪G‬‬ ‫‪:hover‬‬ ‫▪ ‪pseudo-classes‬‬

‫‪E‬‬ ‫]‪[href‬‬ ‫▪ ‪attribute selectors‬‬
‫• ‪ : pseudo-elements and Elements‬وتأخذ ‪ 1‬نقطة واحدة‪ ،‬أمثلة عن االستدعاءات‪:‬‬
‫‪h1‬‬ ‫▪ ‪Elements‬‬
‫‪:before‬‬ ‫▪ ‪pseudo-elements‬‬
‫‪20‬‬
‫‪s‬‬ ‫‪Specificity‬‬
‫‪cs‬‬
‫‪ )79‬لنفترض لدينا التعليمات التالية‪ ،‬ما اللون الذي سيتم تطبيقه عىل العنصر ‪ h1‬؟‬
‫‪R‬‬ ‫‪E‬‬
‫‪T‬‬ ‫‪U‬‬
‫};‪A: h1{color:red‬‬
‫‪R‬‬ ‫‪E‬‬ ‫‪F‬‬ ‫‪U‬‬

‫‪A‬‬
‫};‪B: #content {color:#fff‬‬
‫>‪C:<h1 id="content" style="color: pink;">Heading</h1‬‬
‫‪W‬‬ ‫‪I‬‬ ‫‪N‬‬ ‫‪G‬‬

‫‪F‬‬ ‫‪T ER‬‬
‫‪S‬‬ ‫‪O‬‬ ‫‪I‬‬ ‫‪N‬‬ ‫‪E‬‬ ‫اإلجابة ‪:‬‬
‫‪ : A‬يحصل عىل ‪ 1‬نقطة ألننا استدعينا العنصر‪.‬‬
‫‪ G‬الـ ‪ ، id‬أي ‪ 101‬نقطة‪.‬‬
‫‪N‬‬ ‫‪ : B‬يحصل عىل ‪ 100 + 1‬ألننا استدعينا العنصر الذي يحمل‬
‫‪bs‬‬
‫‪ : C‬يحصل عىل ‪ 1000‬نقطة ‪ ،‬ألننا حددنا الخواص في سطر التاغ‪E‬‬
‫نفسه‪.‬‬
‫وبالتالي سيتم تطبيق اللون الزهري ‪ color : pink‬من الخيار ‪.C‬‬

‫‪BAHAA SABER‬‬
‫‪FRONT-END‬‬
‫‪21‬‬
SOFTWARE
ENGINEERING FUTURE
Cascading S tyle Sheets ver 3
Supervisor :
bs
eng / Islam Mohamed
002 0109 848 1288
002 0109 762 9509
: islam.mohamed4921@gmail.com BAHAA SABER

FRONT-END
SOFTWARE
ENGINEERING FUTURE
s3 Vendor prefix in CSS3

cs
.‫ في المتصفحات‬css3 ‫) هي بادئات دعم خواص‬1
RE
U
.‫ نكتب البادئة وبعدها الخاصية‬،‫) نستخدمها في الخواص الجديدة التي ال تدعمها المتصفحات‬2
T
RE FU :‫) لكل متصفح نستخدم بادئة مختلفة كالتالي‬3
W A NG
FT ER I Chrome , Safari ‫ تستخدم في المتصفحات‬-webkit
SO INE Firefox ‫ يستخدم في متصفح‬-moz
G
-webki-border-radius: 40px; -
Internet Explorer ‫ يستخدم في المتصفح‬-ms
moz-border-radius: 40px;
E
-ms-border-radius: 40px;
-o-border-radius: 40px;
N Opera ‫ يستخدم في تصفح‬-o
1
‫‪s3‬‬ ‫الحدود الدائرية ‪Rounded Border‬‬

‫‪cs‬‬
‫‪ border-radius (4‬خاصية تدوير الزوايا من كل الجهات أو من جهات محددة حسب القيم المسندة لها ويمكن أن تكون‬
‫‪R‬‬‫‪E‬‬ ‫القيمة بواحدة البكسل‪ px‬أو النسبة المئوية ‪.%‬‬
‫‪T‬‬‫‪U‬‬
‫‪E‬‬ ‫‪U‬‬
‫;‪ :border-radius: 40px‬عند اسناد قيمة واحدة للخاصية فتطبق عىل كل الزوايا‪.‬‬
‫‪R‬‬ ‫‪F‬‬
‫‪A‬‬ ‫‪G‬‬
‫;‪ :border-radius: 40px 20px‬عند اسناد قيمتين فتطبق القيمة األوىل عىل الجهة اليسار من األعىل‬
‫‪W‬‬ ‫‪N‬‬
‫‪T ER‬‬ ‫‪I‬‬
‫مع الجهة اليمين من األسفل والقيمة الثانية عىل الجهة اليمين من األعىل مع الجهة اليسار من األسفل‪.‬‬
‫‪F‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬
‫;‪ :border-radius: 40px 30px 20px‬عند اسناد قيم تكون القيمة األوىل للجهة اليسار من األعىل‬
‫والقيمة الثانية للجهة اليمين من األعىل مع الجهة اليسار من األسفل والقيمة الثالثة للجهة اليمين من األسفل ‪.‬‬
‫‪N‬‬ ‫‪G‬‬
‫‪E‬‬ ‫‪ border-radius: 50%; (5‬تستخدم لجعل الحدود بشكل دائرة‪.‬‬
‫‪ border-top-left-radius:25px; (6‬نستطيع تحديد جهة واحد إلسناد قيمة تدوير الحدود لها‪.‬‬
‫) ‪( top-left , top-right , bottom-left , bottom-right‬‬
‫‪2‬‬
‫‪s3‬‬ ‫الخلفية ‪Background‬‬

‫‪cs‬‬
‫‪ background-size (7‬تستخدم هذه الخاصية لتحديد حجم الخلفية وتأخذ ‪7‬أشكال للقيم‪:‬‬
‫‪R‬‬‫‪E‬‬ ‫▪‬
‫‪T‬‬‫‪U‬‬
‫‪ :auto‬هذه القيمة االفتراضية‪ ،‬وتجعل الخلفية معروضة بحجمها األصلي‪.‬‬
‫▪; ‪ background-size:100px 200px‬القيمة األوىل عرض الخلفية والثانية االرتفاع‪ ،‬وإن وضعنا‬
‫‪R‬‬‫‪E‬‬ ‫‪F‬‬‫‪U‬‬
‫‪W‬‬ ‫‪A‬‬
‫قيمة واحدة ستكون عرض الخلفية واالرتفاع يحدد اوتوماتيكيًا ً ًحسب نسبته اىل العرض في الصورة األصلية‪.‬‬
‫‪N‬‬‫‪G‬‬
‫‪T ER‬‬ ‫‪I‬‬
‫; ‪ background-size: 30% 50%‬القيمة األألوىل عرض الخلفية بالنسبة للعنصر األب والثانية ارتفاعه‬
‫‪F‬‬
‫▪‬
‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬
‫بالنسبة لألب‪ ،‬إن وضعنا قيمة واحدة فستكون نسبة عرض الخلفية بالنسبة للعنصر األب واالرتفاع اوتوماتيكي‪.‬‬
‫‪S‬‬
‫; ‪ background-size: cover‬ستكون الخلفية ممتدة عىل كامل العنصر الموضوعة كخلفية له‪.‬‬ ‫▪‬
‫‪N‬‬ ‫‪G‬‬ ‫▪‬
‫; ‪ background-size: contain‬تكون كامل الخلفية ظاهرة طوال ً ًوعرضًا ً ًفي العنصر الموضوعة‪.‬‬
‫‪E‬‬ ‫▪ ‪ :initial‬هذه القيمة تعطي للخاصية قيمتها االفتراضية‪.‬‬
‫▪ ‪ :inherit‬هذه القيمة تجعل الخاصية ترث قيمة العنصر األب ‪ ،‬آخر قيمتين موجودين في أغلب الخصائص‬
‫ولن نعيد ذكرهم‪.‬‬
‫‪3‬‬
‫‪s3‬‬ ‫الخلفية ‪Background‬‬

‫‪cs‬‬
‫‪ background-origin (8‬تستخدم لضبط تموضع الخلفية‪ ،‬أهم ‪ 3‬قيم للخاصية‪:‬‬
‫‪R‬‬‫‪E‬‬
‫‪U‬‬
‫• ‪ border-box‬الخلفية ستبدأ من الزاوية العلوية اليسرى للحدود‪.‬‬
‫‪T‬‬
‫‪R‬‬‫‪E‬‬
‫• ‪ padding-box‬الخلفية تبدأ من الزاوية العلوية للمسافة ‪ ،padding‬وهي القيمة االفتراضية‪.‬‬
‫‪F‬‬‫‪U‬‬
‫• ‪ content-box‬الخلفية تبدأ من الزاوية العلوية اليسرى للعنصر أي تحت الحدود والمسافة‪.‬‬
‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬

‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬
‫‪ background-clip (9‬تستخدم هذه الخاصية لتحديد منطقة الخلفية ‪ ،‬أهم ‪3‬قيم للخاصية‪:‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬ ‫• ‪ border-box‬الخلفية ستبدأ من الزاوية العلوية اليسرى للحدود‪.‬‬

‫• ‪ padding-box‬الخلفية تبدأ من الزاوية العلوية للمسافة ‪ ،padding‬وهي القيمة االفتراضية‪.‬‬
‫‪N‬‬ ‫‪G‬‬
‫‪E‬‬
‫• ‪ content-box‬الخلفية تبدأ من الزاوية العلوية اليسرى للعنصر أي تحت الحدود والمسافة‪.‬‬
‫‪background:url(img_tree.gif) left‬‬ ‫‪ )10‬يمكن إضافة أكثر من خلفية لنفس العنصر كالتالي‪:‬‬

‫‪top no-repeat, url(img_flwr.gif) right‬‬
‫‪bottom no-repeat, url(paper.gif) left top‬‬
‫;‪repeat‬‬
‫‪4‬‬
‫‪s3‬‬ ‫تدرج األلوان ‪Gradient‬‬

‫‪cs‬‬
‫‪ )11‬خاصية التدرج تعطي للخلفية الوان متدرجة مكونة من لونين أو أكثر وبأشكال مختلفة لدينا ‪3‬أنواع للتدرج‪:‬‬
‫‪R‬‬‫‪E‬‬
‫‪U‬‬
‫‪ Linear‬تدرج خطي ‪ Radial ،‬تدرج شعاعي ‪ Conic ،‬تدرج مخروطي‪.‬‬
‫‪T‬‬
‫‪R‬‬‫‪E‬‬ ‫‪F‬‬‫‪U‬‬
‫‪ )12‬يجب وضع البادئات ( ‪ ) Vendor prefix‬لتقرأ المتصفحات تعليمات التدرج اللوني‪.‬‬
‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬

‫‪T ER‬‬ ‫‪I‬‬
‫‪ (13‬التدرج الخطي‪(background:linear-gradient(direction, color-1, color-2, ....);:‬‬
‫‪F‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬
‫▪ ‪ direction‬تحدد اتجاه التدرج والقيمة االفتراضية لها من األعىل إىل األسفل (‪)Bottom to Top‬‬
‫▪ ‪ Color‬نحدد ألوان التدرج يمكن تحديد لونين أو أكثر‪ ،‬يمكن تحديدها باالسم (‪) red‬أو بقيم ‪rgba‬‬
‫‪N‬‬ ‫‪G‬‬
‫‪E‬‬‫) )‪ ( rgba(255,0,0,0‬أو قيم ‪(#f1f1f1) hex‬‬
‫▪ يمكن تحديد نسبة كل لون وتفعيل التكرار في التدرج ‪:‬‬
‫;)‪background: repeating-linear-gradient(red, yellow 10%, green 20%‬‬
‫▪ يمكن إضافة نسب مئوية إىل الخاصية ليبدأ التدرج انطالقًا منها طواًل وارتفاعاً‪:‬‬
‫;)‪background: linear-gradient(30% 30% , green , red‬‬
‫‪5‬‬
SOFTWARE
ENGINEERING FUTURE
s3 Gradient ‫تدرج األلوان‬

cs
E
.‫ يكون التدرج عىل شكل شعاع حسب الشكل والحجم الذي نضعه في القيم‬:‫( التدرج الشعاعي‬14
R
U
background: radial-gradient(shape sizeatposition , start-color , ... , last-color );
T
RE U
:‫ يحدد شكل التدرج الشعاعي هل هو عىل شكل شعاع شمس ام دائري ام من الزوايا وقيمه هي‬shape ▪
F
W A NG closest-side •
FT ER I farthest-side •
SO INE closest-corner •
N G )‫ (االفتراضي‬farthest-corner •
E
:‫ ويصف بداية التدرج الشعاعي ويكتب في التعليمة كالتالي‬،‫يتم تحديده بالنسب المئوية‬ Position▪
background: radial-gradient ( closest-side at 60% 55% , red ,
yellow , black );
6
‫‪s3‬‬ ‫الظل ‪Shadows‬‬

‫‪cs‬‬
‫‪ :box-shadow (15‬هذه الخاصية تعطي ظل للعناصر باتجاهات والوان مختلفة‪.‬ويأخذ ‪6‬قيم ‪:‬‬
‫‪R‬‬‫‪E‬‬
‫‪U‬‬
‫) ‪box-shadow : ( h v blur spread color inset‬‬
‫‪E‬‬ ‫‪U‬‬‫‪T‬‬
‫( الظل الرأسي الظل األفقي الضبابية االنتشار اللون داخلي ام خارجي )‬
‫‪A‬‬‫‪R‬‬ ‫‪G‬‬ ‫‪F‬‬ ‫مثال‪box-shadow: 10px 15px 50px 40px red inset; :‬‬
‫‪W‬‬ ‫‪N‬‬
‫الظل الرأسي ‪ 10‬والظل األفقي ‪ 15‬والضبابية ‪ 50‬واالنتشار ‪ 40‬و اللون أحمر و الظل داخلي‬
‫‪T ER‬‬ ‫‪I‬‬
‫‪O‬‬ ‫‪F‬‬ ‫‪E‬‬
‫;‪box-shadow: 10px 10px 15px 10px pink‬‬
‫الظل الخارجي (‪ )outset‬هو القيمة االفتراضية‪.‬‬
‫‪S‬‬ ‫‪I‬‬‫‪N‬‬ ‫‪ : text-shadow (16‬خاصية إعطاء الظل للنصوص وتأخذ ‪ 4‬قيم ‪:‬‬
‫‪N‬‬ ‫‪G‬‬ ‫) ‪text-shadow : ( h v blur color‬‬

‫‪E‬‬ ‫;‪text-shadow: 2px 2px 4px #000000‬‬
‫‪7‬‬
‫‪s3‬‬ ‫بعض تأثيرات النصوص‬

‫‪cs‬‬
‫‪ : white-space )17‬تضبط المسافة البيضاء داخل العناصر ومن القيم التي تأخذها‪:‬‬
‫‪R‬‬‫‪E‬‬
‫• ‪ Normal‬القيمة االفتراضية‪ ،‬ستقرأ كل المسافات كمسافة واحدة‪ ،‬ويتم التفاف النص عند الضرورة‪.‬‬
‫‪T‬‬‫‪U‬‬
‫‪R‬‬‫‪E‬‬ ‫‪F‬‬‫‪U‬‬ ‫• ‪ Pre‬يتم التفاف النص عند فواصل األسطر‬
‫‪W‬‬ ‫‪A‬‬ ‫• ‪ Nowrap‬ال يلتف النص بل يكمل السطر اىل خارج العنصر األب‪.‬‬
‫‪N‬‬‫‪G‬‬
‫‪T ER‬‬ ‫‪I‬‬
‫‪ : text-overflow )18‬خاصية لضبط النص الفائض الغير المعروض وتأتي مع الخاصية‬
‫‪F‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬ ‫;‪ overflow: hidden‬التي تخفي النصوص خارج العنصر‪.‬‬
‫‪G‬‬
‫▪ ‪ Ellipsi‬تضع ‪ 3‬نقاط في نهاية النص في حال لم يتسع في العنصر األب داللة عىل أن النص لم ينته‪.‬‬
‫‪N‬‬
‫‪E‬‬ ‫▪ ‪ Clip‬هي القيمة االفتراضية‪ ،‬يقطع النص دون أي إشارة أو داللة‪.‬‬
‫‪ :word-break )19‬هذه الخاصية تتعامل مع اخر كلمة في النص‬

‫▪ ‪ Keep-all‬يحافظ عىل الكلمة عند التفاف النص وينقلها كاملة للسطر التالي وهي القيمة االفتراضية‪.‬‬
‫▪ ‪ Break-all‬تقسم الكلمة اىل قسمين عند التفاف النص في نهاية السطر‪.‬‬
‫‪8‬‬
‫‪s3‬‬ ‫‪2D Transform‬‬

‫‪cs‬‬
‫‪ )20‬تسمح بتحريك وتدوير وتكبير وانحراف العنصر المطبقة عليه ( ‪) skew , scale , rotate , translate‬‬
‫‪R‬‬‫‪E‬‬
‫‪U‬‬
‫‪ )transform: translate(600px, 200px; (21‬تحرك العنصر عىل محور ‪ x‬أو عىل محور ‪ y‬أو عىل‬
‫‪T‬‬
‫األصلية‬
‫‪R‬‬‫‪E‬‬
‫المحورين معًا ‪ ( .‬القيمة األوىل انزياح عىل المحور ‪ x‬والقيمة الثانية عىل المحور ‪ ) y‬وله حالتين‪:‬‬
‫‪F‬‬‫‪U‬‬
‫المنقولة‬
‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬ ‫‪ :) translateX( 100px‬اإلزاحة عىل محور ‪ x‬فقط‪.‬‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬

‫‪ :)translateY(100px‬اإلزاحة عىل محور ‪ y‬فقط‪.‬ويمكن وضع قيم مئوية‪.‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬
‫‪ transform: rotate(20deg); )22‬يدور العنصر حسب دوران عقارب الساعة‪.‬‬
‫‪N‬‬ ‫‪G‬‬
‫;‪ ) transform: rotate( -20deg‬يدور العنصر بعكس دوران عقارب الساعة‪.‬‬
‫‪E‬‬
‫;)‪transform: rotate(-20deg‬‬ ‫;)‪transform: rotate(20deg‬‬
‫‪9‬‬

‫‪cs‬‬
‫‪E‬‬
‫‪ transform : scale)1.5(; )23‬هذه الخاصية تكبر العنصر طوال وعرضا (عىل محوري ‪ X‬و ‪.)Y‬‬
‫‪R‬‬
‫‪U‬‬
‫;(‪ transform : scale)2 , 1‬عند وضع قيمتين األوىل تكبر العنصر عىل محور ‪ x‬والثانية عىل محور ‪. y‬‬
‫‪T‬‬
‫‪E‬‬ ‫‪U‬‬
‫;(‪ transform : scaleX)1.5‬يتم تكبير العنصر عرضا فقط (محور ‪.)X‬‬
‫‪R‬‬ ‫‪F‬‬
‫األصلية‬
‫‪W‬‬ ‫‪A‬‬ ‫;(‪ transform : scaleY)1.5‬يتم تكبير العنصر طوال فقط (محور ‪.)Y‬‬
‫‪N‬‬‫‪G‬‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬
‫‪S‬‬‫‪O‬‬
‫‪ 20deg)transform : skew(; )24‬هذه الخاصية تحرف العنصر طوال وعرضا (عىل محوري ‪ X‬و ‪.)Y‬‬
‫‪I‬‬‫‪N‬‬‫‪E‬‬
‫;(‪ 20deg , 10deg)transform : skew‬تحرف العنصر ‪ 20‬درجة عىل محور ‪ X‬و‪ 10‬درجات عىل ‪..Y‬‬
‫‪N‬‬ ‫‪G‬‬ ‫;(‪ 20deg)transform : skewX‬تحرف العنصر فقط عىل محور ‪..X‬‬
‫‪E‬‬ ‫;(‪ 20deg)transform : skewY‬تحرف العنصر فقط عىل محور ‪.Y‬‬
‫;)‪transform: skewY(20deg‬‬ ‫;)‪transform: skewX(20deg‬‬
‫‪10‬‬
SOFTWARE
ENGINEERING FUTURE
s3 2D Transform
cs
‫ تحدد نقطة في العنصر لتكون محور انتقال أو دوران العنصر‬transform-origin (25
RE
U
transform-origin: x-position | y-position ;
T
transform-origin: 30px 30px;
RE FU
transform-origin: buttom left; transform-origin: top left;
transform: rotate(20deg);
W A NG
transform:rotate(20deg); transform:rotate(20deg);
FT ER I
SO INE
N G
E
transform: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()) (26
.‫اختصار لالنتقاالت ثنائية األبعاد نستطيع تطبيق كل االنتقاالت في تعليمة واحدة‬
11
SOFTWARE
ENGINEERING FUTURE
s3 3D Transform
‫ هذه الخاصية تنقل العنصر من مكان آلخر عىل ثالث محاور‬transform : translate3d (x,y,z) (27
cs
RE
‫ ويمكن تأمين انتقال العنصر عىل محور واحد من الثالث محاول بالخصائص‬،‫حسب القيم المعطاة‬
TU
(translateX(x), translateY(y), translateZ(z)) :‫التالية‬
RE FU
W A
‫ ويمكن تكبيره عىل أحد المحاور‬، ‫ خاصية تكبير العنصر الثالثي األبعاد‬transform : scale3d (x,y,z) (28
NG
FT ER I (scaleX(x), scaleY(y), scaleZ(z)) :‫الثالثة‬
SO INE
‫ ويمكن تكبيره عىل أحد المحاور‬، ‫ خاصية تكبير العنصر الثالثي األبعاد‬transform : rotate3d (x,y,z,angle) (29
N G (rotateX(x), rotateY(y), rotateZ(z)) :‫الثالثة‬
E
transform: rotateZ(50deg);
transform: rotateY(50deg); transform: rotateX(50deg);
12

‫‪cs‬‬
‫‪ transform-style:preserve-3d; )30‬خاصية عرض العنصر بشكل ثالثي األبعاد‪ ،‬ال تظهر التحوالت الثالثية‬
‫‪R‬‬‫‪E‬‬
‫األبعاد عىل األبناء األبعاد دون وضع هذه الخاصية ‪ ،‬والقيمة االفتراضية لها ‪ ( flat‬تظهر الشكل بشكل ثنائي‬
‫‪T‬‬‫‪U‬‬ ‫األبعاد مسطح)‪.‬‬
‫‪R‬‬‫‪E‬‬ ‫‪F‬‬‫‪U‬‬
‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬
‫‪G‬‬
‫‪ perspective:length; )31‬تستخدم خاصية المنظور إلعطاء شكل ثالثي األبعاد للعنصر‪ ،‬ونضع هذه الخاصية في‬
‫‪N‬‬
‫‪E‬‬
‫العنصر األب وليس العنصر نفسه ‪ ،‬القيمة االفتراضية لها ‪ ،none‬ونضع القيمة بالبكسل ‪ ,‬واألكثر استخداما‬
‫قيمة‪ 600px‬وعادة ما توضع في الـ ‪.body‬‬
‫‪ backface-visibility:hidden; (32‬تستخدم هذه الخاصية إلخفاء الوجه الخلفي للعنصر‪ ،‬تفيدنا عند استخدم‬
‫الدوران للعنصر لنحدد هل نريد إظهار الوجه الخلفي أم ال‪ .‬القيمة االفتراضية لها ‪.visible‬‬
‫‪13‬‬
‫‪s3‬‬ ‫‪Transition‬‬
‫‪cs‬‬
‫‪ transition: CSS property duration; (33‬هذه الخاصية تؤمن انتقاالت سلسة بزمن محدد‪ ،‬نضع الخاصية‬
‫‪R‬‬‫‪E‬‬
‫التي نريد تطبيق الزمن عليها ثم نضع الزمن بالثانية‪ ،‬ويمكن وضع اكثر من خاصية في نفس السطر وبعد كل‬
‫‪T‬‬‫‪U‬‬
‫خاصية الزمن‪transition: width 2s, height 4s , transform 2s; .‬‬
‫‪R‬‬‫‪E‬‬ ‫‪F‬‬‫‪U‬‬
‫‪A‬‬ ‫‪G‬‬
‫‪ transition-delay: 1s; (34‬خاصية تأخير الزمن‪ ،‬ستنفذ االنتقال بعد الزمن المحدد بالثانية‪.‬‬
‫‪W‬‬ ‫‪N‬‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬
‫‪S‬‬‫‪O‬‬
‫‪ transition-duration:2s; (35‬مدة االنتقال‪ ،‬تحدد زمن االنتقال بالثانية‪ ،‬ويفضل عند استخدامه في ‪ hover‬أن‬
‫‪I‬‬‫‪N‬‬‫‪E‬‬
‫يوضع في خواص العنصر وليس في خواص ‪ hover‬حتى يعود العنصر لوضعه بنفس الزمن الذي تحرك به‪.‬‬
‫‪N‬‬ ‫‪G‬‬
‫‪E‬‬
‫‪ transition-timing-function:linear; (36‬خاصية تحديد سرعة تحريك العنصر بشكل سريع وبطيء متعاقب‬
‫وله عدة قيم ) ‪linear , ease , ease-in , ease-out , ease-in-out , step-start , step-end ,‬‬
‫)‪( steps(int , start|end) , cubic-bezier(n,n,n,n‬‬
‫‪ ease‬هي القيمة االفتراضية لهذه الخاصية وتكون فيها الحركة بطيئة بداية ثم سريعة ثم تنتهي بطيئة‪.‬‬
‫‪14‬‬
‫‪s3‬‬ ‫‪Animations‬‬
‫‪cs‬‬
‫‪E‬‬
‫‪ )37‬تستخدم خاصية ‪ animations‬لتحريك عناصر ‪ HTML‬وتغيير خصائصهم دون استخدام الجافا سكربت‪.‬‬
‫‪R‬‬
‫‪T‬‬‫‪U‬‬ ‫‪ @keyframes )38‬عند تحديد أنماط ‪css‬‬
‫{‪@keyframes example‬‬
‫‪R‬‬‫‪E‬‬ ‫‪F‬‬‫‪U‬‬ ‫داخل هذه القاعدة ستتغير وضعية العنصر‬
‫‪A‬‬ ‫‪G‬‬
‫};‪0% {background-color:red; left:0px; top:0px‬‬
‫‪W‬‬ ‫‪N‬‬
‫من النمط الحالي إىل النمط الجديد في‬
‫‪I‬‬
‫‪25% {background-color:yellow; left:200px; top:0px;} 50%‬‬
‫أوقات معينة نحددها داخل هذه القاعدة‪،‬‬
‫‪F‬‬‫‪T ER‬‬
‫‪{background-color:blue; left:200px; top:200px;} 75%‬‬
‫ويتم ربط هذه القاعدة بالعنصر عن طريق‬
‫‪O‬‬ ‫‪E‬‬
‫‪{background-color:green; left:0px; top:200px;} 100%‬‬
‫‪S‬‬ ‫‪I‬‬‫‪N‬‬
‫}};‪{background-color:red; left:0px; top:0px‬‬
‫تسميتها ‪ ،‬ووضع نفس االسم في خصائص‬
‫‪N‬‬ ‫‪G‬‬ ‫‪animation-name.‬‬ ‫العنصر‬
‫‪E‬‬ ‫ضمن الخاصية‬
‫‪ animation-duration: 4s ; (39‬تحدد مدة استمرار عملية االنتقال من نمط إىل آخر‪ ،‬وتقدر بالثواني‪.‬‬
‫‪ animation-delay: 2s ; (40‬تحدد فترة التأخير للبدء بالتحريك‪ ،‬وتقدر بالثواني‪.‬‬
‫‪15‬‬
‫‪cs‬‬
‫‪E‬‬
‫‪ animation-iteration-count: 3 ; (41‬تحدد عدد مرات تنفيذ الحركة‪ ،‬وهنا ‪3‬مرات‪.‬‬
‫‪R‬‬
‫‪T‬‬‫‪U‬‬
‫‪E‬‬ ‫‪U‬‬
‫‪ animation-play-state: paused ; (42‬تحدد حالة التحريك ان كان يعمل او متوقف واالفتراضي له ‪.runnin‬‬
‫‪R‬‬ ‫‪F‬‬
‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬
‫‪T ER‬‬ ‫‪I‬‬
‫‪ animation-direction: normal ; (43‬تحدد انتقال الرسوم لألمام أم للخلف ام لألمام ثم للخلف أم العكس‬
‫‪F‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬ ‫▪ ‪ normal‬هي القيمة االفتراضية ويتم التحريك لألمام‪.‬‬
‫‪N‬‬ ‫‪G‬‬ ‫▪ ‪ reverse‬يتم التحريك في االتجاه المعاكس للخلف‪.‬‬

‫‪E‬‬ ‫▪ ‪ alternate‬الحركة ستكون لألمام أوال ثم للخلف‪.‬‬
‫▪ ‪ alternate-reverse‬عكس السابقة للخلف ثم لألمام‪.‬‬
‫‪16‬‬
‫‪cs‬‬
‫‪E‬‬
‫‪ animation-timing-function: ease ; (44‬خاصية تحديد سرعة تحريك العنصر‪ ،‬وهذه القيمة االفتراضية لها‪،‬‬
‫‪R‬‬
‫‪U‬‬
‫تبدأ الحركة بطيئة ثم تسرع ثم تنتهي بطيئة‪ .‬وقيم هذه الخاصية هي التالي‪:‬‬
‫‪T‬‬
‫‪R‬‬‫‪E‬‬ ‫‪F‬‬‫‪U‬‬ ‫▪ ‪ linear‬السرعة ثابتة من البداية للنهاية‬
‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬ ‫▪ ‪ ease-in‬يبدأ ببطيء‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬ ‫▪ ‪ ease-out‬ينتهي ببطيء‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬ ‫▪ ‪ ease-in-out‬يبدأ ببطء وينتهي ببطيء‬
‫‪N‬‬ ‫‪G‬‬
‫‪ animation-fill-mode: forwards ; (45‬يحدد سلوك ‪ animation‬بعد تطبيق التحريك هل سيعود ام سيبقى في‬
‫‪E‬‬
‫النمط الجديد‪ ،‬والقيمة االفتراضية له ‪ none‬أي لن يطبق أي نمط قبل أو بعد التنفيذ‪ .‬اما ‪forwards‬‬
‫سيبقى العنصر بعد التنفيذ في نمطه الجديد‪ ،‬وتأخذ قيمة ‪ backwards‬أي يعود العنصر لنمطه األول بعد‬
‫تنفيذ الحركة‪ ،‬وآخر قيمة هي ‪ both‬سيتبع قواعد التحريك كما هي إن كانت لألمام أم للخلف‪.‬‬
‫‪17‬‬
‫‪s3‬‬ ‫‪overflow‬‬
‫‪cs‬‬
‫‪R‬‬‫‪E‬‬
‫‪ :Overflow (46‬تحدد هذه خاصية ما إذا كان سيتم قص المحتوى أو إضافة شريط تمرير أو إظهاره خارج العنصر‬
‫‪U‬‬
‫األب عندما يكون المحتوى كبير وال يتناسب مع المنطقة المحددة‪ ،‬وله ‪ 4‬قيم محتملة‪:‬‬
‫‪T‬‬
‫‪E‬‬ ‫‪U‬‬
‫▪ ‪ Visible‬هذه القيمة االفتراضية‪ ،‬لن يعدل عىل المحتوى سيجعله فائضًا ً خارج الصندوق‪.‬‬
‫‪R‬‬ ‫‪F‬‬
‫‪A‬‬ ‫‪G‬‬
‫▪ ‪ Hidden‬سيقص المحتوى بما يتناسب مع حجم الصندوق‪ ،‬والجزء المخفي لن يكون قابال للقراءة‪.‬‬
‫‪W‬‬ ‫‪N‬‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬
‫▪ ‪ Scroll‬سيضع شريط تمرير لمشاهدة المحتوى كامًال‪ ،‬دون حذف شيء منه‪.‬‬
‫▪ ‪ Auto‬سيضع شريط تمرير عند الحاجة إىل ذلك ‪ ،‬أي عندما يصبح المحتوى فائضًا ً ًعن الصندوق‪.‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬
‫‪N‬‬ ‫‪G‬‬
‫‪ :overflow-y , overflow-x (47‬يمكن استخدام الخاصيتين لتحديد مكان ظهور شريط التمرير أو إخفاءه‪.‬‬
‫‪E‬‬
‫;‪overflow-x: hidden‬‬ ‫;‪overflow: scroll‬‬
‫;‪overflow-y: scroll‬‬
‫‪18‬‬
‫‪s3‬‬ ‫الرموز التعبيرية ‪Font Awesome‬‬

‫‪cs‬‬
‫‪E‬‬
‫‪ (48‬إلضافة الرموز التعبيرية في تصميم صفحات الويب نستعين بالموقع ‪https://fontawesome.com/‬‬
‫‪R‬‬
‫‪U‬‬
‫‪ (49‬بداية يجب تحميل ملف الرموز ‪ https://fontawesome.com/download‬وإضافته إىل ملفات المشروع‪.‬‬
‫‪T‬‬
‫‪R‬‬‫‪E‬‬ ‫‪F‬‬‫‪U‬‬
‫‪W‬‬ ‫‪A‬‬
‫>‪<link rel="stylesheet" href="css/all.css"/‬‬
‫‪N‬‬‫‪G‬‬ ‫‪ )50‬نضع التعليمات التالية في الكود ضمن الـ ‪head‬‬

‫‪T ER‬‬ ‫‪I‬‬
‫>‪<link rel="stylesheet" href="css/all.min.css"/‬‬
‫‪F‬‬
‫‪S‬‬‫‪O‬‬ ‫‪N‬‬‫‪E‬‬
‫‪)51‬يمكننا البحث عن الرمز التعبيري الذي نحتاجه في نفس الموقع السابق في التبويب ‪icons‬‬
‫‪I‬‬
‫‪N‬‬ ‫‪G‬‬
‫‪E‬‬ ‫‪ (52‬ننسخ كود الرمز بالضغط عىل الكود‪ ،‬ونلصقه في كود ‪ HTML‬لدينا‪.‬‬
‫‪ (53‬يمكن إضافة خصائص جديدة للرمز عن طريق إسناد اسم كالس له وإضافة خصائص له في ‪.CSS‬‬
‫‪19‬‬
‫‪s3‬‬ ‫‪Multiple Columns‬‬

‫‪cs‬‬
‫‪ column-count: 3 ; (54‬خاصية عدد األعمدة التي أريد تقسيم النص إليها‪ ،‬هنا سينقسم إىل ‪ 3‬أعمدة‪.‬‬
‫‪R‬‬‫‪E‬‬
‫‪T‬‬‫‪U‬‬
‫‪R‬‬‫‪E‬‬
‫‪ column-gap: 40px ; (55‬يحدد المسافة الفارغة بين األعمدة‪ ،‬يقاس بالبكسل‪.‬‬
‫‪F‬‬‫‪U‬‬
‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬
‫;‪column-count: 3‬‬
‫;‪column-gap: 40px‬‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬ ‫‪column-rule: 1px solid lightblue; (56‬‬
‫يعطي خصائص للخط الفاصل بين األعمدة‪.‬‬
‫‪S‬‬‫‪O‬‬
‫;‪column-rule: 1px solid lightblue‬‬
‫; ‪column-span: all‬‬
‫‪I‬‬‫‪N‬‬‫‪E‬‬
‫‪N‬‬ ‫‪G‬‬
‫‪ column-span: all ; (57‬يحدد كم عمود سيشمل العنوان‪ ،‬هنا سيظهر العنوان لكل األعمدة‪ ،‬االفتراضي ‪.none‬‬
‫‪E‬‬
‫‪ column-width: 200px ; (58‬عرض كل عمود من األعمدة ‪ ،‬نستخدمها في حال لم نحدد عدد األعمدة‪.‬‬
‫‪ column-fill: auto ; )59‬يحدد كيفية مأل األعمدة هل ‪ auto‬حسب المحتوى أم بطريقة متوازنة ‪.balance‬‬
‫‪20‬‬
‫‪s3‬‬ ‫‪Flexbox‬‬
‫‪cs‬‬
‫‪E‬‬
‫‪: display: flex ; (60‬خاصية عرض العناصر بشكل متناسق أمام بعضها أو تحت بعضها ‪ ،‬هذه الخاصية توضع‬
‫‪R‬‬
‫‪U‬‬
‫في العنصر األب الذي سيحتوي العناصر المرتبة فيه‪.‬‬
‫‪T‬‬
‫‪R‬‬‫‪E‬‬ ‫‪F‬‬‫‪U‬‬
‫‪ : flex-direction: column ; (61‬نحدد طريقة عرض العناصر‪ ،‬وتوضع في العنصر األب واتجاهها ويأخذ ‪ 4‬قيم‪:‬‬
‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬ ‫▪‪ :Column‬يعرض العناصر بشكل عمودي تحت بعضها‪.‬‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬

‫▪‪ :column-reverse‬يعرض العناصر بشكل عمودي‪ ،‬لكن من األسفل لألعىل‪.‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬ ‫▪‪ :Row‬القيمة االفتراضية‪ ،‬يعرضها بشكل أفقي بجانب بعضها‪.‬‬
‫‪N‬‬ ‫‪G‬‬
‫▪‪ :row-reverse‬يعرض العناصر بشكل أفقي معكوس من اليمين اىل اليسار‪.‬‬
‫‪E‬‬
‫;‪flex-direction: row‬‬ ‫‪1‬‬ ‫‪2‬‬ ‫‪3‬‬
‫‪21‬‬
‫‪cs‬‬
‫‪ : flex-wrap: wrap ; (62‬تستخدم لتحسين عرض العناصر مع الشاشات الصغيرة يتم تقليل العناصر في السطر‬
‫‪R‬‬‫‪E‬‬
‫الواحد‪ ،‬وهذه الخاصية أيضا في العنصر األب وقيمها ثالثة‪:‬‬
‫‪T‬‬‫‪U‬‬
‫‪R‬‬‫‪E‬‬
‫▪‪ :Nowrap‬القيمة االفتراضية‪ ،‬ال تغير تموضع العناصر مع اختالف حجم الشاشة‪.‬‬
‫‪F‬‬‫‪U‬‬
‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬
‫▪‪ :Wrap‬تقلل عدد العناصر في السطر الواحد كلما صغرت الشاشة‪.‬‬
‫‪G‬‬
‫‪F‬‬ ‫‪T ER‬‬ ‫‪I‬‬ ‫▪‪ :wrap-reverse‬يقلل عدد العناصر مع عكس ترتيبها‪.‬‬
‫‪S‬‬‫‪O‬‬ ‫‪N‬‬‫‪E‬‬
‫‪ : flex-flow: flex-direction flex-wrap ; (63‬خاصية اختصار للتعليمتين السابقتين‪.‬‬
‫‪I‬‬
‫‪N‬‬ ‫‪G‬‬
‫‪E‬‬ ‫‪1‬‬
‫;‪flex-direction: column‬‬ ‫‪2‬‬
‫‪3‬‬
‫‪22‬‬
‫‪cs‬‬
‫‪ :justify-content (64‬خاصية ترتيب العناصر أفقيًا‪ ،‬توضع في العنصر األب‪ ،‬ولها ‪ 6‬قيم‪:‬‬
‫‪R‬‬‫‪E‬‬
‫‪T‬‬‫‪U‬‬ ‫•‪ :Center‬تضع العناصر في منتصف الصفحة‪.‬‬
‫‪E‬‬ ‫‪U‬‬
‫•‪ :flex-start‬القيمة االفتراضية‪ ،‬تبدأ بترتيب العناصر من بداية الصفحة‪.‬‬
‫‪R‬‬ ‫‪F‬‬
‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬‫•‪ :flex-end‬يرتب العناصر بشكل عكسي بدءًا من نهاية الصفحة‪.‬‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬

‫•‪ :space-around‬تكون المسافات متساوية قبل وبعد العنصر‪ ،‬أي المسافة بين العناصر ضعف المسافة قبل‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬
‫العنصر األول‪.‬‬
‫•‪ :space-between‬تكون المسافات بين العناصر متساوية‪ ،‬وال يوجد مسافات قبل العنصر األول وبعد‬
‫‪N‬‬ ‫‪G‬‬ ‫العنصر األخير‪.‬‬

‫‪E‬‬
‫•‪ :space-evenly‬كل المسافات متساوية قبل العنصر األول وبين العناصر وبعد العنصر األخير‪.‬‬
‫‪space-around‬‬ ‫‪space-between‬‬ ‫‪space-evenly‬‬
‫‪23‬‬
‫‪ :align-items (65‬خاصية ترتيب العناصر عموديًا‪ ،‬توضع في العنصر األب‪ ،‬ولها ‪ 5‬قيم‪:‬‬
‫‪cs‬‬
‫‪R‬‬‫‪E‬‬
‫• ‪ :Center‬تضع العناصر في منتصف العنصر األب عموديًا ‪.‬‬
‫‪T‬‬‫‪U‬‬ ‫• ‪ :flex-start‬تبدأ بترتيب العناصر في أعىل العنصر األب‪.‬‬
‫‪R‬‬‫‪E‬‬ ‫‪F‬‬‫‪U‬‬
‫• ‪ :flex-end‬يرتب العناصر بشكل عكسي في أسفل العنصر األب‪.‬‬
‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬

‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬
‫• ‪ :stretch‬القيمة االفتراضية ‪ ،‬ينشر العناصر عىل كامل ارتفاع العنصر األب‪.‬‬
‫• ‪ :Baseline‬يرتب العناصر عىل محاذاة واحد اعتمادا عىل المحتوى‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬
‫( تكون بداية الكتابة في نفس المحاذاة لجميع العناصر)‬
‫‪N‬‬ ‫‪G‬‬
‫‪E‬‬
‫‪Baseline‬‬ ‫‪stretch‬‬
‫‪24‬‬
‫‪s3‬‬ ‫‪ Flexbox‬خصائص العناصر‬

‫‪cs‬‬
‫‪ : Order: 2 ; (66‬يوضع في العناصر األبناء التي نريد ترتيبها بخاصية ‪ ، flex‬وقيمها أرقام تصف ترتيب العنصر‪.‬‬
‫‪R‬‬‫‪E‬‬
‫‪T‬‬‫‪U‬‬
‫‪ : flex-grow: 3 ; (67‬خاصية تحدد نسبة عرض العناصر إىل بعضها‪.‬‬
‫‪R‬‬‫‪E‬‬ ‫‪F‬‬‫‪U‬‬
‫‪A‬‬ ‫‪G‬‬
‫‪: flex-shrink: 0 ; (68‬خاصية االنكماش‪ ،‬أي من العناصر سيصغر حجمه أوال ًعند تصغير حجم الشاشة‪.‬‬
‫‪W‬‬ ‫‪N‬‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬
‫‪S‬‬‫‪O‬‬ ‫‪N‬‬‫‪E‬‬
‫‪ : flex-basis: 200px ; )69‬هي القيمة األولية لطول العنصر أو عرضه حسب طريقة عرضه (في طريقة العرض‬
‫‪I‬‬
‫‪G‬‬
‫األفقية ‪ row‬تكون هذه الخاصية القيمة األولية للعرض‪ ،‬والعكس في طريقة العرض العمودية)‪.‬‬
‫‪N‬‬
‫‪E‬‬
‫‪ : flex: flex-grow flex-shrink flex-basis ; (70‬اختصار للخواص الثالثة السابقة في تعليمة واحدة‪.‬‬
‫‪ : align-self: center ; (71‬يحرك العنصر عىل محور ‪ y‬لوحده دون بقية العناصر‪.‬‬
‫‪25‬‬
‫‪s3‬‬ ‫‪ Flexbox‬مالحظات هامة‬

‫‪cs‬‬
‫‪ )72‬الفرق بين الخاصيتين‬
‫‪R‬‬‫‪E‬‬ ‫‪:min-width & flex-basis‬‬
‫‪U‬‬
‫➢ ‪ :min-width‬هو أقل عرض يصل له العنصر عند تصغير الشاشة ينشأ شريط تمرير ‪ scroll‬في أسفل‬
‫‪T‬‬
‫‪R‬‬‫‪E‬‬ ‫‪F‬‬‫‪U‬‬ ‫الشاشة وال يضغط عرض العناصر أو يغير حجمها‪.‬‬
‫‪A‬‬ ‫‪G‬‬
‫➢‪ :flex-basis‬هو أقل للعنصر في حال لم يتغير حجم الشاشة لكن عندما يصغر حجم الشاشة يضغط‬
‫‪W‬‬ ‫‪N‬‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬ ‫العناصر ويقلل عرضها‪.‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬
‫‪N‬‬ ‫‪G‬‬
‫‪ )73‬عندما تكون الخاصية ‪ flex-direction‬تأخذ قيمة ‪ row‬فإن الخاصية ‪ justify-content‬ترتب العناصر‬
‫‪E‬‬ ‫عىل محور ‪ ، x‬والخاصية ‪ align-items‬ترتب العناصر عىل محور ‪.y‬‬
‫والعكس عندما تكون ; ‪.flex-direction: column‬‬
‫‪26‬‬
‫‪s3‬‬ ‫‪Grid‬‬
‫‪cs‬‬
‫‪E‬‬
‫‪ )74‬يوفر ‪ Grid Layout‬نظام تخطيطي قائم عىل الشبكة لتخطيط صفحة الويب بشكل صفوف وأعمدة‪.‬‬
‫‪R‬‬
‫‪T‬‬‫‪U‬‬
‫‪R‬‬‫‪E‬‬ ‫‪F‬‬‫‪U‬‬
‫‪ display: grid ; (75‬نستخدم الخاصية في العنصر األب‪ ،‬لينظم أبناءه عىل شكل شبكة مؤلفة من صفوف وأعمدة‪.‬‬
‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬

‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬
‫‪ column-gap: 50px ; (76‬هذه الخاصية تعطي فراغ بين أعمدة العناصر ‪.‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬
‫‪N‬‬ ‫‪G‬‬ ‫‪ row-gap: 50px ;(77‬هذه الخاصية تعطي فراغ بين صفوف العناصر ‪.‬‬
‫‪E‬‬
‫‪ gap: row-gap column-gap ; (78‬اختصار للتعليمتين السابقتين وإن احتوى قيمة واحدة تحسب لألعمدة‬
‫والصفوف‪.‬‬
‫‪27‬‬
‫‪s3‬‬ ‫‪Grid‬‬
‫‪cs‬‬
‫‪E‬‬
‫‪ grid-template-columns (79‬خاصية تقسيم األعمدة ‪ ،‬تكتب في العنصر األب ويمكننا اعتماد عدة أشكال للقيم‪:‬‬
‫‪R‬‬
‫‪U‬‬
‫• ‪ :)repeat(2,40%‬عمودين كل عمود عرضه ‪ %40‬من عرض العنصر األب‪.‬‬
‫‪T‬‬
‫‪R‬‬‫‪E‬‬ ‫‪F‬‬‫‪U‬‬
‫• ; ‪ : 3fr 1fr 1fr‬أربع أعمدة العمود األول يمثل ‪3‬أجزاء من العمود الثاني والعمودين الثاني والثالث متساويين‪.‬‬
‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬

‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬ ‫• ‪ : )repeat(4,1fr‬ثالث أعمدة متساوية‪.‬‬
‫• ‪ : %25 %25 %25 %25‬اربع أعمدة متساوية‪.‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬
‫‪N‬‬ ‫‪G‬‬
‫‪ grid-template-rows (80‬لتقسيم الصفوف‪ ،‬تكتب في العنصر األب وتأخذ نفس أشكال قيم الخاصية السابقة‪.‬‬
‫‪E‬‬
‫‪ )81‬في خواص تقسيم الصفوف واألعمدة ‪ ،‬عندما نكتب أعمدة أو صفوف أقل من الموجودة ينفذ عىل األعمدة األوىل‬
‫والباقي يأخذ قيمة أول عمود أو صف ويطبقها عىل الباقي‪.‬‬
‫‪28‬‬
‫‪s3‬‬ ‫‪Grid‬‬
‫‪cs‬‬
‫‪ grid-template-rows: minmax(200px , auto) ; (82‬هذه الخاصية تعني أن أقل ارتفاع للعنصر ‪200‬بكسل‬
‫‪R‬‬‫‪E‬‬
‫وإذا زاد المحتوى عن هذا االرتفاع يزيد االرتفاع اوتوماتيكيًا ‪.‬‬
‫‪T‬‬‫‪U‬‬
‫‪R‬‬‫‪E‬‬ ‫‪F‬‬‫‪U‬‬
‫‪A‬‬ ‫‪G‬‬
‫‪ justify-items (83‬تنظم الصفوف و تكتب في العنصر األب ولها ‪3‬أشكال للقيم‪.( center ، end ، start ) :‬‬
‫‪W‬‬ ‫‪N‬‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬
‫‪S‬‬‫‪O‬‬ ‫‪E‬‬
‫‪ align-items (84‬تنظم األعمدة و تكتب في العنصر األب ولها ‪3‬أشكال القيم ‪.( center ، end ، start ):‬‬
‫‪I‬‬‫‪N‬‬
‫‪N‬‬ ‫‪G‬‬
‫‪E‬‬
‫‪ grid-column: 1 / 5 ; (85‬تكتب ضمن خصائص العناصر وتعطي العنصر حجم أكثر من العناصر الباقية ‪ ،‬في هذا‬
‫المثال يكون حجم العنصر يبدأ من ‪ 1‬وينتهي قبل ‪ 5‬أي بحجم ‪ 4‬عناصر‪.‬‬
‫ويمكن كتابة ‪ grid-column: 1 / span 4‬تعطي نفس الخاصية‪.‬‬
‫‪29‬‬
SOFTWARE
ENGINEERING FUTURE
s3 Align area with grid

cs
‫ وترتيب األسماء حسب‬، ‫ وذلك بإعطاء العناصر اسم‬،‫) تفيدنا هذه الخاصية ببناء مخطط شبكي لصفحة الويب‬86
RE .‫التخطيط الذي نحتاجه وسيتم توضيح ذلك بمثال‬
TU
.‫ توضع هذه الخاصية في العناصر المراد ترتيبها وتفيد بإعطاء اسم للعنصر‬grid-area: header; (87
RE FU
W A NG grid-template-areas: "nv.sec ft hd"; (88
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
FT ER I ‫ونكتب العناصر‬، ‫توضع هذه الخاصية في العنصر األب‬
‫حسب الترتيب الذي نريد ظهورهم فيهفي صفحة الويب‬
.item3 { grid-area: main; }
S
.item4 { grid-area: right; }O INE .‫وعندما نريد ترك فراغ بين العناصر نضع نقطة‬
.item5 { grid-area: footer; }
N G
E
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';}
30
‫‪s3‬‬ ‫‪Media Queries‬‬

‫‪cs‬‬
‫‪ )89‬تستخدم هذه الخاصية لتغيير الخصائص في تصميم وتخطيط صفحة والويب بتغير الشروط ‪ ،‬وتفيدنا في عرض‬
‫‪R‬‬‫‪E‬‬
‫الموقع بطرق مختلفة حسب عرض الشاشة (شاشة كمبيوتر أو تابلت أو موبايل)‬
‫‪T‬‬‫‪U‬‬
‫‪E‬‬ ‫‪U‬‬
‫‪ @media (max-width:600px){CSS properties } (90‬عندما يكون عرض الشاشة ‪600‬بكسل وهي شاشة‬
‫‪R‬‬ ‫‪F‬‬
‫‪W‬‬ ‫‪A‬‬ ‫‪G‬‬
‫أجهزة الموبايل طبق الخصائص الموجودة بين القوسين { }‪.‬‬
‫‪N‬‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬
‫‪ @media (max-width:768px){CSS properties } (91‬عرض شاشة التابلت ‪.‬‬
‫‪N‬‬ ‫‪G‬‬
‫‪E‬‬
‫‪31‬‬
SOFTWARE
ENGINEERING FUTURE
s3 Selectors
cs
RE :‫) تقسم المحددات إىل أربع أقسام رئيسية‬92
TU basic selectors •
RE FU combinator selectors •
W A NG pseudo classes selectors •
FT ER I pseudo element selectors •
SO INE : ‫ تقسم إىل أربع أقسام‬:basic selectors (93
N G (#id {CSS properties }) id ‫ أي االستدعاء عن طريق الـ‬:Id ▪

E(.class-name{CSS properties }) class ‫ االستدعاء عن طريق الـ‬:Class ▪
(img{CSS properties }) h1{CSS properties }) ‫ االستدعاء عن طريق نوع العنصر‬:Type ▪
‫ االستدعاء لعناصر تملك صفة مشتركة أو لها سمة محددة كاللغة أو اللون أو غيرها من‬:Attribute selector ▪
.‫ بشكل مفصل في الصفحة القادمة‬Attribute selector ‫ })وسيتم شرح‬a[target] {CSS properties( ‫الخصائص‬
32
‫‪s3‬‬ ‫‪Selectors Attribute selectors‬‬

‫‪cs‬‬
‫‪E‬‬
‫‪[attribute="value"] )94‬يستدعي العناصر التي تساوي القيمة ‪ value‬مثال‪[lang="en"]{ CSS properties} :‬‬
‫‪R‬‬
‫‪T‬‬‫‪U‬‬
‫‪]attribute^="value"[ )95‬يستدعي كل العناصر التي تبدأ بالقيمة المحددة‪.‬‬
‫‪R‬‬‫‪E‬‬ ‫‪F‬‬‫‪U‬‬
‫‪A‬‬ ‫‪G‬‬
‫‪]attribute|="value"[ )96‬يستدعي العناصر التي تحوي هذه القيمة وال يوجد نصوص ال قبلها وال بعدها (فقط‬
‫‪W‬‬ ‫‪N‬‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬ ‫يقبل اإلشارات كالفاصلة وغيرها) مثال ‪[title|=flower]{…} :‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬
‫‪]attribute*="value"[ )97‬يستدعي العناصر التي تحوي هذه القيمة ويقبل وجود أحرف أو زيادات قبلها وبعدها‪.‬‬
‫‪N‬‬ ‫‪G‬‬
‫‪E‬‬
‫‪]attribute~="value"[ )98‬يستدعي العناصر التي تحوي هذه القيمة شرط أن تكون لوحدها بشكل منفصل‪.‬‬
‫‪]attribute$="value“ i"[ )99‬يستدعي العناصر التي تنتهي بالقيمة‪ i .‬حتى ال تكون حساسة لألحرف‪.‬‬
‫‪33‬‬
‫‪s3‬‬ ‫‪Selectors combinator selectors‬‬

‫‪cs‬‬
‫‪R‬‬‫‪E‬‬ ‫‪ )100‬يشرح العالقة بين الـ ‪ selectors‬وله ‪ 4‬أشكال ‪:‬‬
‫‪U‬‬
‫• ‪ )descendant selector (space‬يستدعي كل العناصر الموجودة داخل عنصر ({ ‪ )div p } ..‬هذه التعليمة‬
‫‪T‬‬
‫‪R‬‬‫‪E‬‬ ‫‪F‬‬‫‪U‬‬ ‫تستدعي كل عناصر ‪ p‬الموجودة في ‪.div‬‬
‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬

‫• (<) ‪ child selector‬يستدعي كل األبناء المباشرة الموجودة داخل عنصر ({ ‪ )div>p } ..‬هذه التعليمة تستدعي‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬ ‫كل األبناء ‪) p‬تتجاهل األحفاد) الموجودة في ‪.div‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬
‫‪G‬‬
‫• (‪ adjacent sibling selector )+‬يستدعي األخ المباشر الموجود بعد العنصر ({ ‪ )div+p} ..‬هذه التعليمة‬
‫‪N‬‬
‫‪E‬‬ ‫تستدعي أول عنصر ‪ p‬موجود بعد ‪ div‬مباشرة‪.‬‬
‫• (~) ‪ general sibling selector‬يستدعي األخوة الموجودة بعد العنصر ({ ‪ )div~p} ..‬هذه التعليمة تستدعي‬
‫كل العناصر ‪ p‬الموجود بعد ‪.div‬‬
‫‪34‬‬
‫‪s3‬‬ ‫‪Selectors pseudo classes selectors‬‬

‫‪cs‬‬
‫‪E‬‬
‫‪ )101‬تستخدم لتعديل خصائص العنصر في حاالت خاصة مثل مرور الماوس أو النقر أو غيرها من الحاالت الكثيرة‪.‬‬
‫‪R‬‬
‫‪U‬‬
‫وتكتب بالشكل التالي {…}‪ selector:pseudo-class‬وسنستعرض الكثير من األمثلة في هذا القسم‪.‬‬
‫‪T‬‬
‫‪E‬‬ ‫‪U‬‬
‫• ‪ input:disabled.‬المسموح الكتابة فيه وعكسها ‪ input‬تستدعي كل الـ ‪input: enabled :‬‬
‫‪R‬‬ ‫‪F‬‬
‫‪A‬‬ ‫‪G‬‬
‫• ‪ : input:checked‬تطبق الخواص عىل عناصر مربعات االختيار التي تم اختيارها‪.‬‬
‫‪W‬‬ ‫‪N‬‬
‫‪T ER‬‬ ‫‪I‬‬
‫• ‪ : p:empty‬تستخدم لكشف جميع المقاطع الفارغة‪ ،‬تستخدم كاختبار لعدم وجود أقسام فارغة غير مستخدمة‪.‬‬
‫‪F‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬ ‫• ‪ : a:hover‬تطبق الخصائص عند المرور بالماوس فوق الرابط‪.‬‬
‫• ‪ : a:active‬تطبق الخصائص عىل الروابط التي تم فتحها‪.‬‬
‫‪N‬‬ ‫‪G‬‬
‫‪E‬‬
‫• ‪ : a:focus‬تطبق الخصائص عىل الروابط التي تم الضغط عليها إىل حين الضغط خارجها‪.‬‬
‫• ‪ : input:in-range‬تستخدم في حال كان االدخال عبارة عن عدد وله نطاق محدد‪ ،‬تطبق الخواص ان كان‬
‫االدخال ضمن النطاق‪.‬‬
‫• ‪ : input:out-of-range‬تطبق الخواص ان كان االدخال خارج النطاق‪.‬‬
‫‪35‬‬

‫‪cs‬‬
‫• ‪ : input:valid‬تطبق الخصائص عىل اإلدخال إن كان اإليميل المدخل صالح ‪.‬‬
‫‪R‬‬‫‪E‬‬
‫‪U‬‬
‫• ‪ : input:invalid‬تطبق الخصائص عىل اإلدخال إن كان اإليميل المدخل غير صالح ‪.‬‬
‫‪T‬‬
‫‪R‬‬‫‪E‬‬ ‫‪F‬‬‫‪U‬‬
‫• ‪ : )p:not(.class-name‬تطبق الخصائص عىل جميع الكالسات ماعدا الكالس المذكور‪.‬‬
‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬ ‫• ‪ : :root‬تطبق عىل جميع صفحة الويب (نفس الـ ‪.(HTML‬‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬

‫• {‪ : -webkit-any(article , section , div) h2}..‬خاصية اختصار وتجميع العناصر إلعطائهم‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬ ‫خصائص مشتركة‪.‬‬
‫‪N‬‬ ‫‪G‬‬ ‫• ‪ : div p:first-child‬ينفذ الخصائص عىل االبن األول في الـ ‪.div‬‬
‫‪E‬‬ ‫• ‪ : div p:last-child‬ينفذ الخصائص عىل االبن األخير في الـ ‪.div‬‬
‫• ‪ : p:first-child‬يجلب أول ابن لكل ‪ p‬موجودة في صفحة الويب شرط أن تكون داخل ‪ div‬ويكون أول ابن في‬
‫الـ ‪ div‬هو ‪.p‬‬
‫‪36‬‬

‫‪cs‬‬
‫• ‪ : p:only-child‬تطبق عىل كل ابن وحيد في الـ ‪ div‬بشرط أن تكون خالية من األبناء من النوع نفسه أو غيره‪.‬‬
‫‪R‬‬‫‪E‬‬
‫‪U‬‬
‫• ‪ : p:only-of-type‬تطبق عىل كل ابن وحيد في الـ ‪ div‬بشرط أن تكون خالية من األبناء من نفس النوع‪.‬‬
‫‪T‬‬
‫‪R‬‬‫‪E‬‬ ‫‪F‬‬‫‪U‬‬ ‫• ‪ : )p:nth-child(4‬تطبق الخصائص عىل االبن الرابع‪.‬‬
‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬

‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬‫• ‪ : )p:nth-child(odd‬تطبق الخصائص عىل األبناء التي رقمها فردي‪.‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬ ‫• ‪ : )p:nth-child(even‬تطبق الخصائص عىل األبناء التي رقمها زوجي‪.‬‬
‫‪N‬‬ ‫‪G‬‬ ‫• ‪ : )p:nth-child(2n‬تطبق الخصائص عىل األبناء التي رقمها زوجي‪.‬‬
‫‪E‬‬ ‫• ‪ : )p:nth-child(2n+1‬تطبق الخصائص عىل األبناء التي رقمها فردي‪.‬‬
‫• ‪ : )p:nth-of-type(even‬تطبق الخصائص عىل األبناء التي رقمها زوجي لكن يتجاهل األبناء من غير نوع‪.‬‬
‫• ‪ : )p:nth-last-child(even‬تطبق الخصائص عىل األبناء التي رقمها زوجي لكن يعد من األسفل لألعىل‪.‬‬
‫‪37‬‬
‫‪s3‬‬ ‫‪Selectors pseudo elements selectors‬‬

‫‪cs‬‬
‫‪ )102‬يستخدم إلعطاء خصائص لجزء محدد من العناصر‪ ،‬مثًال يمكن استخدامه لتغيير خصائص حرف أو سطر‪.‬‬
‫‪R‬‬‫‪E‬‬
‫ويكتب بالصيغة التالية ‪selector::pseudo-element{ property:value;} :‬‬
‫‪T‬‬‫‪U‬‬
‫‪R‬‬‫‪E‬‬ ‫‪F‬‬‫‪U‬‬ ‫• ‪ : p::first-line‬تطبق الخصائص عىل السطر األول من النص‪.‬‬
‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬ ‫• ‪ : p::first-letter‬تطبق الخصائص عىل الحرف األول فقط‪.‬‬
‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬ ‫• ‪ : h1::before‬إدراج خاصية أو صورة قبل العنصر المذكور )‪.(h1‬‬
‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬ ‫• ‪ : h3::after‬إدراج خاصية أو صورة بعد العنصر المذكور )‪.(h3‬‬
‫‪bs‬‬
‫‪G‬‬
‫• ‪ : ::marker‬يختار العناصر النقطية أو العددية الموجودة في القوائم ويطبق عليها الخصائص‪.‬‬
‫‪N‬‬
‫‪E‬‬ ‫• ‪ : p::selection‬تطبق عىل المقطع النصي المحدد بالماوس‪.‬‬
‫‪ )103‬مالحظة ‪ :‬عندما أريد منع نسخ النصوص من صفحة الويب نستخدم‪:‬‬

‫;‪-webkit-user-select: none‬‬
‫‪BAHAA SABER‬‬
‫‪FRONT-END‬‬
‫;‪user-select:all‬‬
‫‪38‬‬

Css & css3 SEF Academy

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css & css3 SEF Academy

Uploaded by

Copyright:

Available Formats

SOFTWARE

Cascading S tyle Sheets

: islam.mohamed4921@gmail.com BAHAA SABER

RE : HTML ‫ مع ملفات‬CSS ‫) طرق ربط ملفات الـ‬2

s :‫ ويتألف من‬Syntax ‫ يسمى‬CSS ‫) كل سطر في كود الـ‬3

background-color: #ffffff ; background-color: #ffffff ; background-color: #ffffff ;

s CSS Background ‫الخلفية‬

background : color image no-repeat attachment position; ‫) اختصار بتعليمة واحدة‬10

‫‪s‬‬ ‫النصوص ‪CSS TEXT‬‬

‫‪R‬‬‫‪E‬‬ ‫‪F‬‬‫‪U‬‬ ‫• قيم ‪. rgb(255, 79, 41) : RGB‬‬

‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬ ‫• قيم ‪. #d3d3d3 : HEX‬‬

‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬ ‫• قيم ‪. hsl(9, 100%, 64%) : HCL‬‬

‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬ ‫• قيم ‪. rgba(255, 79, 41, 0.5) : RGBA‬‬

‫‪s‬‬ ‫النصوص ‪CSS TEXT‬‬

‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬ ‫)‪.(none , underline , overline , line-through‬‬

‫‪ : text-indent: 10px; (19‬تحديد المسافة البادئة للسطر األول من النص‪.‬‬

s CSS TEXT ‫النصوص‬

/*.............................*/ ‫ نضع التعليق ضمن‬CSS ‫) إلضافة تعليق أو مالحظات ضمن كودات‬26

s CSS LISTS ‫القوائم‬

‫‪s‬‬ ‫األبعاد ‪CSS Dimension‬‬

‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬

‫‪ : min-hig﻿ht: 500px; (36‬يحدد ارتفاع قيمة لعرض العنصر‪.‬‬

‫‪s‬‬ ‫‪Box Model‬‬

‫‪s‬‬ ‫‪CSS Margins‬‬

‫‪s‬‬ ‫‪CSS Padding‬‬

‫‪s‬‬ ‫‪CSS Opacity‬‬

‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬ ‫• ‪ : Visible‬يخرج المحتوى خارج الصندوق‪.‬‬

‫‪F‬‬ ‫‪T ER‬‬ ‫‪I‬‬

‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬ ‫‪E‬‬ ‫• ‪ : scroll‬ينشأ شريط تمرير في الصندوق‪.‬‬

‫‪s‬‬ ‫‪CSS Tables‬‬

‫‪s‬‬ ‫‪CSS Display & Visibility‬‬

‫• ‪ : cell-table‬تجعل القوائم عىل شكل جدول وتستخدم في القوائم المنسدلة ‪.‬‬

‫‪s‬‬ ‫‪CSS Positioning‬‬

‫‪s‬‬ ‫وحدات القياس في ‪CSS‬‬

‫‪ : };h1,h2,p {color:gr﻿een )77‬إعطاء خاصية واحده ألكثر من عنصر تدعى ‪.grouping‬‬

‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬

‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬ ‫‪.text‬‬ ‫▪ ‪Classes‬‬

‫‪N‬‬ ‫‪G‬‬ ‫‪:hover‬‬ ‫▪ ‪pseudo-classes‬‬

‫‪R‬‬ ‫‪E‬‬ ‫‪F‬‬ ‫‪U‬‬

‫‪W‬‬ ‫‪I‬‬ ‫‪N‬‬ ‫‪G‬‬

‫وبالتالي سيتم تطبيق اللون الزهري ‪ color : pink‬من الخيار ‪.C‬‬

Cascading S tyle Sheets ver 3

: islam.mohamed4921@gmail.com BAHAA SABER

s3 Vendor prefix in CSS3

SO INE Firefox ‫ يستخدم في متصفح‬-moz

‫‪s3‬‬ ‫الحدود الدائرية ‪Rounded Border‬‬

‫‪R‬‬‫‪E‬‬ ‫القيمة بواحدة البكسل‪ px‬أو النسبة المئوية ‪.%‬‬

‫‪s3‬‬ ‫الخلفية ‪Background‬‬

‫‪s3‬‬ ‫الخلفية ‪Background‬‬

‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬

‫‪S‬‬‫‪O‬‬ ‫‪I‬‬‫‪N‬‬‫‪E‬‬ ‫• ‪ border-box‬الخلفية ستبدأ من الزاوية العلوية اليسرى للحدود‪.‬‬

‫‪background:url(img_tree.gif) left‬‬ ‫‪ )10‬يمكن إضافة أكثر من خلفية لنفس العنصر كالتالي‪:‬‬

‫‪s3‬‬ ‫تدرج األلوان ‪Gradient‬‬

‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬

s3 Gradient ‫تدرج األلوان‬

‫‪s3‬‬ ‫الظل ‪Shadows‬‬

‫‪N‬‬ ‫‪G‬‬ ‫) ‪text-shadow : ( h v blur color‬‬

‫‪s3‬‬ ‫بعض تأثيرات النصوص‬

‫‪ :word-break )19‬هذه الخاصية تتعامل مع اخر كلمة في النص‬

‫‪s3‬‬ ‫‪2D Transform‬‬

‫‪W‬‬ ‫‪A‬‬ ‫‪N‬‬‫‪G‬‬ ‫‪ :) translateX( 100px‬اإلزاحة عىل محور ‪ x‬فقط‪.‬‬

‫‪F‬‬‫‪T ER‬‬ ‫‪I‬‬

‫‪s3‬‬ ‫‪2D Transform‬‬

/............................./ ‫ نضع التعليق ضمن‬CSS ‫) إلضافة تعليق أو مالحظات ضمن كودات‬26

‫‪ : min-hight: 500px; (36‬يحدد ارتفاع قيمة لعرض العنصر‪.‬‬

‫‪ : };h1,h2,p {color:green )77‬إعطاء خاصية واحده ألكثر من عنصر تدعى ‪.grouping‬‬