Css & css3 SEF Academy
Uploaded by
brinsikhouloud804Css & css3 SEF Academy
Uploaded by
brinsikhouloud804SOFTWARE
ENGINEERING FUTURE
Cascading S tyle Sheets
Supervisor :
bs
eng / Islam Mohamed
002 0109 848 1288
002 0109 762 9509
: [email protected] 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
TU القيم:
• اسم اللون :ويوجد 140لون يمكن استخدامهم في الكود مثال .blue , green , red :
RE FU • قيم . rgb(255, 79, 41) : RGB
W A NG • قيم . #d3d3d3 : HEX
FT ER I • قيم . hsl(9, 100%, 64%) : HCL
SO INE • قيم . 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
SOFTWARE
ENGINEERING FUTURE
s النصوص CSS TEXT
cs
RE
. : word-spacing: 50px; (15القيمة االفتراضية ، normalيزيد أو ينقص المسافة بين الكلمات
TU
E U
. : line-height: 40px; (16القيمة االفتراضية , normalيزيد أو ينقص ارتفاع الخط
R F
W A NG
: text-decoration: 40px; (17إلضافة تأثيرات للكتابة ،خط تحت النص أو خط في منتصف النص وقيمها:
FT ER I ).(none , underline , overline , line-through
SO INE
. : 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
SOFTWARE
ENGINEERING FUTURE
s األبعاد CSS Dimension
cs
E
: width: 500px; (31يحدد عرض العنصر ويمكن وضع قيم بالبكسل وقيم بالنسبة المئوية.
R
TU
RE FU : max-width: 500px; (32يحدد أكبر عرض للعنصر.
W A NG
FT ER I : min-width: 500px; (33يحدد أصغر قيمة لعرض العنصر.
SO INE
: hight: 500px; (34يحدد ارتفاع العنصر ويمكن وضع قيم بالبكسل وقيم بالنسبة المئوية.
N G
E : max-hight: 500px; (35يحدد أكبر ارتفاع للعنصر.
: min-hight: 500px; (36يحدد ارتفاع قيمة لعرض العنصر.
8
SOFTWARE
ENGINEERING FUTURE
s Box Model
cs
E
)37هو مربع يلتف حول عناصر الـ HTMLويسمع إلعطاء حدود ومسافات بين أقسامه.و يتألف من:
R
U
• : marginsهي المنطقة بين حدود العنصر وحدود العنصر األب.
T
RE FU • : bordersحدود تحيط بكل عنصر .
A G
• : paddingالمنطقة بين محتوى العنصر وحدوده ،وتأخذ تأثيرات خلفية العنصر .
W N
FT ER I • : contentالمحتوى داخل العنصر.
SO INE
N G
E
9
SOFTWARE
ENGINEERING FUTURE
s CSS Margins
cs
RE
: margin-top: 5px; (38تحدد المساحة العلوية ويمكن تحديد االتجاهات األربعة بشكل منفصل بالخصائص
TU
E U
التالية. (margin-top, margin-bottom, margin-right, margin-left) :
R F
W A NG
FT ER I
: margin: left bottom right top; (39اختصار يمكن تحديد االتجاهات األربعة بسطر واحد.
SO INE
: margin: 10px 15px 15px; (40في حال 3قيم تكون المسافة األوىل لألعىل والثانية لليمين واليسار والثالثة لألسفل.
N G
E
: margin: 10px 15px; (41في حال وضعنا قيمتين ،األوىل تكون لألعىل واألسفل والثانية لليمين واليسار.
: margin: auto; (42هذه التعليمة توسط العنصر أفقيًا ،تعطي مسافة متساوية من اليمين واليسار.
10
SOFTWARE
ENGINEERING FUTURE
s CSS Padding
cs
RE
: padding-top: 5px; (43تحدد الفراغ العلوي ويمكن تحديد االتجاهات األربعة بشكل منفصل بالخصائص
TU
E U
التالية. (padding-top, padding-bottom, padding-right, padding-left) :
R F
A G
: padding: left bottom right top; (44اختصار يمكن تحديد االتجاهات األربعة بسطر واحد.
W N
FT ER I
SO INE
: padding: 10px 15px 15px; (45في حال 3قيم يكون الفراغ األول لألعىل ،والثاني لليمين واليسار ،والثالث لألسفل
N G
: padding: 10px 15px; (46في حال وضعنا قيمتين ،األوىل تكون لألعىل واألسفل والثانية لليمين واليسار.
{ div.ex2E
;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
SOFTWARE
ENGINEERING FUTURE
s CSS Opacity
cs
: opacity: 0.5 ; (57يطبق شفافية عىل العنصر ،وقيمه بين الصفر والواحد ،والقيمة االفتراضية تساوي (.)1
RE
CSS Overflow
TU
R E FU
: overflow: hidden ; (58تحدد كيفية عرض محتوى العنصر في حال زاد المحتوى عن حجم صندوقه وقيمه:
W A NG • : Visibleيخرج المحتوى خارج الصندوق.
F T ER I
• : Hiddenيتم حذف المحتوى الخارج عن الصندوق.
SO IN 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
SOFTWARE
ENGINEERING FUTURE
s Z-index
cs
: z-index: 3 ; (60تحدد موضع األقسام فوق بعضها ،القسم الذي يحمل z-indexأعىل يكون فوق العناصر
RE
الثانية ،ويقبل قيم موجبة وسالبة ،والقيمة االفتراضية لها .auto
TU
R E FU
W A NG
FT ER I
SO IN E
N GCSS float
E
: float: left ; (61تحدد جهة موضع القسم في المنتصف أم عىل يمين العنصر األب أم عىل يساره ،وباقي
العناصر تلف حول هذا العنصر .وقيمه) right , none , left ( :
: clear: both ; (62بعد استخدام خاصية الـ floatللعنصر ستلف العناصر حوله لمنع حدوث هذا نستخدم هذه
الخاصية
15
SOFTWARE
ENGINEERING FUTURE
s CSS Tables
cs
: caption-side: bottom; (63يحدد جهة عنوان الجدول وله قيمتان ( ) bottom , topواألعىل هي االفتراضية.
RE
TU
E U
: border-collapse: collapse; (64تحدد شكل الخطوط المشكلة للجدول وله قيمتان ( .) separate , collapse
R F
W A NG
FT ER I
: border-spacing: 5px 5px; (65يحدد الفواصل بين حدود الخاليا ،القيمة األوىل المسافة العرضية والثانية طولية.
SO INE
N G
: table-layout: fixed; (66يجعل حجم خاليا الجدول ثابتة أي ال تكبر مع زيادة المحتوى والقيمة االفتراضية .auto
E
: empty-cells: hide; (67إلخفاء الخاليا الفارغة ،والقيمة االفتراضية لها .show
16
SOFTWARE
ENGINEERING FUTURE
s CSS Display & Visibility
cs
: visibility: hidden; (68تخفي العنصر و تبقى مكان العنصر محجوزَا للعنصر نفسه والقيمة االفتراضية .visibility
RE
TU
: display: none; (69تخفي العنصر ،وتحذف الحيز الذي يشغله ومن قيمها:
RE FU
W A
• : Inlineأي أن العنصر سيشغل مساحة بقدر المحتوى الموجود فيه ويسمح بوجود عناصر بجانبه.
NG
T ER I
• : Blockأي أن العنصر سيشغل مساحة السطر بأكمله حتى ولو كان المحتوى ال يشغله كامالَ.
F
SO NE
وقد تم ذكر عناصر الـ Inlineو Blockفي ملف الـ .HTML
I
N G
• : block-Inlineيسمح بتعيين العرض واالرتفاع للعنصر ،وال يضاف فاصل سطر بعد العنصر ،لذلك
E يمكن أن يكون العنصر بجوار العناصر األخرى.
• : cell-tableتجعل القوائم عىل شكل جدول وتستخدم في القوائم المنسدلة .
17
SOFTWARE
ENGINEERING FUTURE
s CSS Positioning
cs
: position: static ; (70تحدد طريقة موضع العنصر في الصفحة و staticهي القيمة االفتراضية وقيمه:
RE
TU • : Staticيكون العنصر ثابت وال يتأثر بعناصر ثانية.
E U
• : Relativeتعطى هذه الخاصية للعنصر األب ليحتوي العناصر فوقه وال يؤثر عىل العناصر التي بجواره.
R F
A G
• : Fixedيجعل العنصر ثابتَا في مكانه من الصفحة ويبقى في نفس المكان حتى لو تم تمرير الصفحة
W N
FT ER I
• : Absoluteتعطي أللبناء التي أعطي لألب الخاص بها خاصية Relativeليتم احتواء األبناء ضمن األب.
SO INE )71يتأثر تموضع العنصر بأربع خواص إضافية وهي :
N G
• ; : top: 50%تحدد بعد العنصر عن الحافة العلوية يمكن تحديده بالبكسل أو النسبة المئوية.
E
• ; : Bottom :30pxتحدد بعد العنصر عن الحافة السفلية يمكن تحديده بالبكسل أو النسبة المئوية.
• ; : Right: 20%تحدد بعد العنصر عن الحافة اليمنى يمكن تحديده بالبكسل أو النسبة المئوية.
• ; : Left :50pxتحدد بعد العنصر عن الحافة اليسرى يمكن تحديده بالبكسل أو النسبة المئوية.
18
SOFTWARE
ENGINEERING FUTURE
s وحدات القياس في CSS
cs
: em )72متعلق بحجم الخط الحالي للعنصر ويحسب حجم الخط بالبكسل بضربه ب .) 14px*2 = 2em ( 14
RE
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
SOFTWARE
ENGINEERING FUTURE
s Specificity
cs
)78إذا طبقنا خواص مختلفة او متضاربة من الـ CSSعىل نفس العنصر لكن بطرق مختلفة ،سيتم تطبيق
RE
المحدد ذو األعىل قيمة من الـ Specificityويكون ترتيب الخصوصية وفق التسلسل الهرمي التالي:
TU
RE
• : Inline stylesالخواص المكتوبة مع التاغ في نفس السطر في صفحة HTMLوتأخذ 1000نقطة.
FU
W A NG
• : Idsاالستدعاء عن طريق الـ idويأخذ 100نقطة.
FT ER I
• : Classes, pseudo-classes, attribute selectorsنقاط 10تأخذ.
أمثلة عن االستدعاءات:
SO INE .text ▪ Classes
N G :hover ▪ pseudo-classes
E ][href ▪ attribute selectors
• : pseudo-elements and Elementsوتأخذ 1نقطة واحدة ،أمثلة عن االستدعاءات:
h1 ▪ Elements
:before ▪ pseudo-elements
20
SOFTWARE
ENGINEERING FUTURE
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
: [email protected] 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
SOFTWARE
ENGINEERING FUTURE
s3 الحدود الدائرية Rounded Border
cs
border-radius (4خاصية تدوير الزوايا من كل الجهات أو من جهات محددة حسب القيم المسندة لها ويمكن أن تكون
RE القيمة بواحدة البكسل pxأو النسبة المئوية .%
TU
E U
; :border-radius: 40pxعند اسناد قيمة واحدة للخاصية فتطبق عىل كل الزوايا.
R F
A G
; :border-radius: 40px 20pxعند اسناد قيمتين فتطبق القيمة األوىل عىل الجهة اليسار من األعىل
W N
T ER I
مع الجهة اليمين من األسفل والقيمة الثانية عىل الجهة اليمين من األعىل مع الجهة اليسار من األسفل.
F
SO INE
; :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
SOFTWARE
ENGINEERING FUTURE
s3 الخلفية Background
cs
background-size (7تستخدم هذه الخاصية لتحديد حجم الخلفية وتأخذ 7أشكال للقيم:
RE ▪
TU
:autoهذه القيمة االفتراضية ،وتجعل الخلفية معروضة بحجمها األصلي.
▪; background-size:100px 200pxالقيمة األوىل عرض الخلفية والثانية االرتفاع ،وإن وضعنا
RE FU
W A
قيمة واحدة ستكون عرض الخلفية واالرتفاع يحدد اوتوماتيكيًا ً ًحسب نسبته اىل العرض في الصورة األصلية.
NG
T ER I
; background-size: 30% 50%القيمة األألوىل عرض الخلفية بالنسبة للعنصر األب والثانية ارتفاعه
F
▪
O INE
بالنسبة لألب ،إن وضعنا قيمة واحدة فستكون نسبة عرض الخلفية بالنسبة للعنصر األب واالرتفاع اوتوماتيكي.
S
; background-size: coverستكون الخلفية ممتدة عىل كامل العنصر الموضوعة كخلفية له. ▪
N G ▪
; background-size: containتكون كامل الخلفية ظاهرة طوال ً ًوعرضًا ً ًفي العنصر الموضوعة.
E ▪ :initialهذه القيمة تعطي للخاصية قيمتها االفتراضية.
▪ :inheritهذه القيمة تجعل الخاصية ترث قيمة العنصر األب ،آخر قيمتين موجودين في أغلب الخصائص
ولن نعيد ذكرهم.
3
SOFTWARE
ENGINEERING FUTURE
s3 الخلفية Background
cs
background-origin (8تستخدم لضبط تموضع الخلفية ،أهم 3قيم للخاصية:
RE
U
• border-boxالخلفية ستبدأ من الزاوية العلوية اليسرى للحدود.
T
RE
• padding-boxالخلفية تبدأ من الزاوية العلوية للمسافة ،paddingوهي القيمة االفتراضية.
FU
• content-boxالخلفية تبدأ من الزاوية العلوية اليسرى للعنصر أي تحت الحدود والمسافة.
W A NG
FT ER I
background-clip (9تستخدم هذه الخاصية لتحديد منطقة الخلفية ،أهم 3قيم للخاصية:
SO INE • 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
SOFTWARE
ENGINEERING FUTURE
s3 تدرج األلوان Gradient
cs
)11خاصية التدرج تعطي للخلفية الوان متدرجة مكونة من لونين أو أكثر وبأشكال مختلفة لدينا 3أنواع للتدرج:
RE
U
Linearتدرج خطي Radial ،تدرج شعاعي Conic ،تدرج مخروطي.
T
RE FU
)12يجب وضع البادئات ( ) Vendor prefixلتقرأ المتصفحات تعليمات التدرج اللوني.
W A NG
T ER I
(13التدرج الخطي(background:linear-gradient(direction, color-1, color-2, ....);:
F
SO INE
▪ 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
SOFTWARE
ENGINEERING FUTURE
s3 الظل Shadows
cs
:box-shadow (15هذه الخاصية تعطي ظل للعناصر باتجاهات والوان مختلفة.ويأخذ 6قيم :
RE
U
) box-shadow : ( h v blur spread color inset
E UT
( الظل الرأسي الظل األفقي الضبابية االنتشار اللون داخلي ام خارجي )
AR 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 IN : text-shadow (16خاصية إعطاء الظل للنصوص وتأخذ 4قيم :
N G ) text-shadow : ( h v blur color
E ;text-shadow: 2px 2px 4px #000000
7
SOFTWARE
ENGINEERING FUTURE
s3 بعض تأثيرات النصوص
cs
: white-space )17تضبط المسافة البيضاء داخل العناصر ومن القيم التي تأخذها:
RE
• Normalالقيمة االفتراضية ،ستقرأ كل المسافات كمسافة واحدة ،ويتم التفاف النص عند الضرورة.
TU
RE FU • Preيتم التفاف النص عند فواصل األسطر
W A • Nowrapال يلتف النص بل يكمل السطر اىل خارج العنصر األب.
NG
T ER I
: text-overflow )18خاصية لضبط النص الفائض الغير المعروض وتأتي مع الخاصية
F
SO INE ; overflow: hiddenالتي تخفي النصوص خارج العنصر.
G
▪ Ellipsiتضع 3نقاط في نهاية النص في حال لم يتسع في العنصر األب داللة عىل أن النص لم ينته.
N
E ▪ Clipهي القيمة االفتراضية ،يقطع النص دون أي إشارة أو داللة.
:word-break )19هذه الخاصية تتعامل مع اخر كلمة في النص
▪ Keep-allيحافظ عىل الكلمة عند التفاف النص وينقلها كاملة للسطر التالي وهي القيمة االفتراضية.
▪ Break-allتقسم الكلمة اىل قسمين عند التفاف النص في نهاية السطر.
8
SOFTWARE
ENGINEERING FUTURE
s3 2D Transform
cs
)20تسمح بتحريك وتدوير وتكبير وانحراف العنصر المطبقة عليه ( ) skew , scale , rotate , translate
RE
U
)transform: translate(600px, 200px; (21تحرك العنصر عىل محور xأو عىل محور yأو عىل
T
األصلية
RE
المحورين معًا ( .القيمة األوىل انزياح عىل المحور xوالقيمة الثانية عىل المحور ) yوله حالتين:
FU
المنقولة
W A NG :) translateX( 100pxاإلزاحة عىل محور xفقط.
FT ER I
:)translateY(100pxاإلزاحة عىل محور yفقط.ويمكن وضع قيم مئوية.
SO INE
transform: rotate(20deg); )22يدور العنصر حسب دوران عقارب الساعة.
N G
; ) transform: rotate( -20degيدور العنصر بعكس دوران عقارب الساعة.
E
;)transform: rotate(-20deg ;)transform: rotate(20deg
9
SOFTWARE
ENGINEERING FUTURE
s3 2D Transform
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
NG
FT ER I
SO
20deg)transform : skew(; )24هذه الخاصية تحرف العنصر طوال وعرضا (عىل محوري Xو .)Y
INE
;( 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
SOFTWARE
ENGINEERING FUTURE
s3 3D Transform
cs
transform-style:preserve-3d; )30خاصية عرض العنصر بشكل ثالثي األبعاد ،ال تظهر التحوالت الثالثية
RE
األبعاد عىل األبناء األبعاد دون وضع هذه الخاصية ،والقيمة االفتراضية لها ( flatتظهر الشكل بشكل ثنائي
TU األبعاد مسطح).
RE FU
W A NG
FT ER I
SO INE
G
perspective:length; )31تستخدم خاصية المنظور إلعطاء شكل ثالثي األبعاد للعنصر ،ونضع هذه الخاصية في
N
E
العنصر األب وليس العنصر نفسه ،القيمة االفتراضية لها ،noneونضع القيمة بالبكسل ,واألكثر استخداما
قيمة 600pxوعادة ما توضع في الـ .body
backface-visibility:hidden; (32تستخدم هذه الخاصية إلخفاء الوجه الخلفي للعنصر ،تفيدنا عند استخدم
الدوران للعنصر لنحدد هل نريد إظهار الوجه الخلفي أم ال .القيمة االفتراضية لها .visible
13
SOFTWARE
ENGINEERING FUTURE
s3 Transition
cs
transition: CSS property duration; (33هذه الخاصية تؤمن انتقاالت سلسة بزمن محدد ،نضع الخاصية
RE
التي نريد تطبيق الزمن عليها ثم نضع الزمن بالثانية ،ويمكن وضع اكثر من خاصية في نفس السطر وبعد كل
TU
خاصية الزمنtransition: width 2s, height 4s , transform 2s; .
RE FU
A G
transition-delay: 1s; (34خاصية تأخير الزمن ،ستنفذ االنتقال بعد الزمن المحدد بالثانية.
W N
FT ER I
SO
transition-duration:2s; (35مدة االنتقال ،تحدد زمن االنتقال بالثانية ،ويفضل عند استخدامه في hoverأن
INE
يوضع في خواص العنصر وليس في خواص 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
SOFTWARE
ENGINEERING FUTURE
s3 Animations
cs
E
)37تستخدم خاصية animationsلتحريك عناصر HTMLوتغيير خصائصهم دون استخدام الجافا سكربت.
R
TU @keyframes )38عند تحديد أنماط css
{@keyframes example
RE FU داخل هذه القاعدة ستتغير وضعية العنصر
A G
};0% {background-color:red; left:0px; top:0px
W N
من النمط الحالي إىل النمط الجديد في
I
25% {background-color:yellow; left:200px; top:0px;} 50%
أوقات معينة نحددها داخل هذه القاعدة،
FT ER
{background-color:blue; left:200px; top:200px;} 75%
ويتم ربط هذه القاعدة بالعنصر عن طريق
O E
{background-color:green; left:0px; top:200px;} 100%
S IN
}};{background-color:red; left:0px; top:0px
تسميتها ،ووضع نفس االسم في خصائص
N G animation-name. العنصر
E ضمن الخاصية
animation-duration: 4s ; (39تحدد مدة استمرار عملية االنتقال من نمط إىل آخر ،وتقدر بالثواني.
animation-delay: 2s ; (40تحدد فترة التأخير للبدء بالتحريك ،وتقدر بالثواني.
15
SOFTWARE
ENGINEERING FUTURE
s3 Animations
cs
E
animation-iteration-count: 3 ; (41تحدد عدد مرات تنفيذ الحركة ،وهنا 3مرات.
R
TU
E U
animation-play-state: paused ; (42تحدد حالة التحريك ان كان يعمل او متوقف واالفتراضي له .runnin
R F
W A NG
T ER I
animation-direction: normal ; (43تحدد انتقال الرسوم لألمام أم للخلف ام لألمام ثم للخلف أم العكس
F
SO INE ▪ normalهي القيمة االفتراضية ويتم التحريك لألمام.
N G ▪ reverseيتم التحريك في االتجاه المعاكس للخلف.
E ▪ alternateالحركة ستكون لألمام أوال ثم للخلف.
▪ alternate-reverseعكس السابقة للخلف ثم لألمام.
16
SOFTWARE
ENGINEERING FUTURE
s3 Animations
cs
E
animation-timing-function: ease ; (44خاصية تحديد سرعة تحريك العنصر ،وهذه القيمة االفتراضية لها،
R
U
تبدأ الحركة بطيئة ثم تسرع ثم تنتهي بطيئة .وقيم هذه الخاصية هي التالي:
T
RE FU ▪ linearالسرعة ثابتة من البداية للنهاية
W A NG ▪ ease-inيبدأ ببطيء
FT ER I ▪ ease-outينتهي ببطيء
SO INE ▪ ease-in-outيبدأ ببطء وينتهي ببطيء
N G
animation-fill-mode: forwards ; (45يحدد سلوك animationبعد تطبيق التحريك هل سيعود ام سيبقى في
E
النمط الجديد ،والقيمة االفتراضية له noneأي لن يطبق أي نمط قبل أو بعد التنفيذ .اما forwards
سيبقى العنصر بعد التنفيذ في نمطه الجديد ،وتأخذ قيمة backwardsأي يعود العنصر لنمطه األول بعد
تنفيذ الحركة ،وآخر قيمة هي bothسيتبع قواعد التحريك كما هي إن كانت لألمام أم للخلف.
17
SOFTWARE
ENGINEERING FUTURE
s3 overflow
cs
RE
:Overflow (46تحدد هذه خاصية ما إذا كان سيتم قص المحتوى أو إضافة شريط تمرير أو إظهاره خارج العنصر
U
األب عندما يكون المحتوى كبير وال يتناسب مع المنطقة المحددة ،وله 4قيم محتملة:
T
E U
▪ Visibleهذه القيمة االفتراضية ،لن يعدل عىل المحتوى سيجعله فائضًا ً خارج الصندوق.
R F
A G
▪ Hiddenسيقص المحتوى بما يتناسب مع حجم الصندوق ،والجزء المخفي لن يكون قابال للقراءة.
W N
FT ER I
▪ Scrollسيضع شريط تمرير لمشاهدة المحتوى كامًال ،دون حذف شيء منه.
▪ Autoسيضع شريط تمرير عند الحاجة إىل ذلك ،أي عندما يصبح المحتوى فائضًا ً ًعن الصندوق.
SO INE
N G
:overflow-y , overflow-x (47يمكن استخدام الخاصيتين لتحديد مكان ظهور شريط التمرير أو إخفاءه.
E
;overflow-x: hidden ;overflow: scroll
;overflow-y: scroll
18
SOFTWARE
ENGINEERING FUTURE
s3 الرموز التعبيرية Font Awesome
cs
E
(48إلضافة الرموز التعبيرية في تصميم صفحات الويب نستعين بالموقع https://fontawesome.com/
R
U
(49بداية يجب تحميل ملف الرموز https://fontawesome.com/downloadوإضافته إىل ملفات المشروع.
T
RE FU
W A
><link rel="stylesheet" href="css/all.css"/
NG )50نضع التعليمات التالية في الكود ضمن الـ head
T ER I
><link rel="stylesheet" href="css/all.min.css"/
F
SO NE
)51يمكننا البحث عن الرمز التعبيري الذي نحتاجه في نفس الموقع السابق في التبويب icons
I
N G
E (52ننسخ كود الرمز بالضغط عىل الكود ،ونلصقه في كود HTMLلدينا.
(53يمكن إضافة خصائص جديدة للرمز عن طريق إسناد اسم كالس له وإضافة خصائص له في .CSS
19
SOFTWARE
ENGINEERING FUTURE
s3 Multiple Columns
cs
column-count: 3 ; (54خاصية عدد األعمدة التي أريد تقسيم النص إليها ،هنا سينقسم إىل 3أعمدة.
RE
TU
RE
column-gap: 40px ; (55يحدد المسافة الفارغة بين األعمدة ،يقاس بالبكسل.
FU
W A NG
;column-count: 3
;column-gap: 40px
FT ER I column-rule: 1px solid lightblue; (56
يعطي خصائص للخط الفاصل بين األعمدة.
SO
;column-rule: 1px solid lightblue
; column-span: all
INE
N G
column-span: all ; (57يحدد كم عمود سيشمل العنوان ،هنا سيظهر العنوان لكل األعمدة ،االفتراضي .none
E
column-width: 200px ; (58عرض كل عمود من األعمدة ،نستخدمها في حال لم نحدد عدد األعمدة.
column-fill: auto ; )59يحدد كيفية مأل األعمدة هل autoحسب المحتوى أم بطريقة متوازنة .balance
20
SOFTWARE
ENGINEERING FUTURE
s3 Flexbox
cs
E
: display: flex ; (60خاصية عرض العناصر بشكل متناسق أمام بعضها أو تحت بعضها ،هذه الخاصية توضع
R
U
في العنصر األب الذي سيحتوي العناصر المرتبة فيه.
T
RE FU
: flex-direction: column ; (61نحدد طريقة عرض العناصر ،وتوضع في العنصر األب واتجاهها ويأخذ 4قيم:
W A NG ▪ :Columnيعرض العناصر بشكل عمودي تحت بعضها.
FT ER I
▪ :column-reverseيعرض العناصر بشكل عمودي ،لكن من األسفل لألعىل.
SO INE ▪ :Rowالقيمة االفتراضية ،يعرضها بشكل أفقي بجانب بعضها.
N G
▪ :row-reverseيعرض العناصر بشكل أفقي معكوس من اليمين اىل اليسار.
E
;flex-direction: row 1 2 3
21
SOFTWARE
ENGINEERING FUTURE
s3 Flexbox
cs
: flex-wrap: wrap ; (62تستخدم لتحسين عرض العناصر مع الشاشات الصغيرة يتم تقليل العناصر في السطر
RE
الواحد ،وهذه الخاصية أيضا في العنصر األب وقيمها ثالثة:
TU
RE
▪ :Nowrapالقيمة االفتراضية ،ال تغير تموضع العناصر مع اختالف حجم الشاشة.
FU
W A N
▪ :Wrapتقلل عدد العناصر في السطر الواحد كلما صغرت الشاشة.
G
F T ER I ▪ :wrap-reverseيقلل عدد العناصر مع عكس ترتيبها.
SO NE
: flex-flow: flex-direction flex-wrap ; (63خاصية اختصار للتعليمتين السابقتين.
I
N G
E 1
;flex-direction: column 2
3
22
SOFTWARE
ENGINEERING FUTURE
s3 Flexbox
cs
:justify-content (64خاصية ترتيب العناصر أفقيًا ،توضع في العنصر األب ،ولها 6قيم:
RE
TU • :Centerتضع العناصر في منتصف الصفحة.
E U
• :flex-startالقيمة االفتراضية ،تبدأ بترتيب العناصر من بداية الصفحة.
R F
W A NG• :flex-endيرتب العناصر بشكل عكسي بدءًا من نهاية الصفحة.
FT ER I
• :space-aroundتكون المسافات متساوية قبل وبعد العنصر ،أي المسافة بين العناصر ضعف المسافة قبل
SO INE
العنصر األول.
• :space-betweenتكون المسافات بين العناصر متساوية ،وال يوجد مسافات قبل العنصر األول وبعد
N G العنصر األخير.
E
• :space-evenlyكل المسافات متساوية قبل العنصر األول وبين العناصر وبعد العنصر األخير.
space-around space-between space-evenly
23
SOFTWARE
ENGINEERING FUTURE
s3 Flexbox
:align-items (65خاصية ترتيب العناصر عموديًا ،توضع في العنصر األب ،ولها 5قيم:
cs
RE
• :Centerتضع العناصر في منتصف العنصر األب عموديًا .
TU • :flex-startتبدأ بترتيب العناصر في أعىل العنصر األب.
RE FU
• :flex-endيرتب العناصر بشكل عكسي في أسفل العنصر األب.
W A NG
FT ER I
• :stretchالقيمة االفتراضية ،ينشر العناصر عىل كامل ارتفاع العنصر األب.
• :Baselineيرتب العناصر عىل محاذاة واحد اعتمادا عىل المحتوى
SO INE
( تكون بداية الكتابة في نفس المحاذاة لجميع العناصر)
N G
E
Baseline stretch
24
SOFTWARE
ENGINEERING FUTURE
s3 Flexboxخصائص العناصر
cs
: Order: 2 ; (66يوضع في العناصر األبناء التي نريد ترتيبها بخاصية ، flexوقيمها أرقام تصف ترتيب العنصر.
RE
TU
: flex-grow: 3 ; (67خاصية تحدد نسبة عرض العناصر إىل بعضها.
RE FU
A G
: flex-shrink: 0 ; (68خاصية االنكماش ،أي من العناصر سيصغر حجمه أوال ًعند تصغير حجم الشاشة.
W N
FT ER I
SO NE
: flex-basis: 200px ; )69هي القيمة األولية لطول العنصر أو عرضه حسب طريقة عرضه (في طريقة العرض
I
G
األفقية rowتكون هذه الخاصية القيمة األولية للعرض ،والعكس في طريقة العرض العمودية).
N
E
: flex: flex-grow flex-shrink flex-basis ; (70اختصار للخواص الثالثة السابقة في تعليمة واحدة.
: align-self: center ; (71يحرك العنصر عىل محور yلوحده دون بقية العناصر.
25
SOFTWARE
ENGINEERING FUTURE
s3 Flexboxمالحظات هامة
cs
)72الفرق بين الخاصيتين
RE :min-width & flex-basis
U
➢ :min-widthهو أقل عرض يصل له العنصر عند تصغير الشاشة ينشأ شريط تمرير scrollفي أسفل
T
RE FU الشاشة وال يضغط عرض العناصر أو يغير حجمها.
A G
➢ :flex-basisهو أقل للعنصر في حال لم يتغير حجم الشاشة لكن عندما يصغر حجم الشاشة يضغط
W N
FT ER I العناصر ويقلل عرضها.
SO INE
N G
)73عندما تكون الخاصية flex-directionتأخذ قيمة rowفإن الخاصية justify-contentترتب العناصر
E عىل محور ، xوالخاصية align-itemsترتب العناصر عىل محور .y
والعكس عندما تكون ; .flex-direction: column
26
SOFTWARE
ENGINEERING FUTURE
s3 Grid
cs
E
)74يوفر Grid Layoutنظام تخطيطي قائم عىل الشبكة لتخطيط صفحة الويب بشكل صفوف وأعمدة.
R
TU
RE FU
display: grid ; (75نستخدم الخاصية في العنصر األب ،لينظم أبناءه عىل شكل شبكة مؤلفة من صفوف وأعمدة.
W A NG
FT ER I
column-gap: 50px ; (76هذه الخاصية تعطي فراغ بين أعمدة العناصر .
SO INE
N G row-gap: 50px ;(77هذه الخاصية تعطي فراغ بين صفوف العناصر .
E
gap: row-gap column-gap ; (78اختصار للتعليمتين السابقتين وإن احتوى قيمة واحدة تحسب لألعمدة
والصفوف.
27
SOFTWARE
ENGINEERING FUTURE
s3 Grid
cs
E
grid-template-columns (79خاصية تقسيم األعمدة ،تكتب في العنصر األب ويمكننا اعتماد عدة أشكال للقيم:
R
U
• :)repeat(2,40%عمودين كل عمود عرضه %40من عرض العنصر األب.
T
RE FU
• ; : 3fr 1fr 1frأربع أعمدة العمود األول يمثل 3أجزاء من العمود الثاني والعمودين الثاني والثالث متساويين.
W A NG
FT ER I • : )repeat(4,1frثالث أعمدة متساوية.
• : %25 %25 %25 %25اربع أعمدة متساوية.
SO INE
N G
grid-template-rows (80لتقسيم الصفوف ،تكتب في العنصر األب وتأخذ نفس أشكال قيم الخاصية السابقة.
E
)81في خواص تقسيم الصفوف واألعمدة ،عندما نكتب أعمدة أو صفوف أقل من الموجودة ينفذ عىل األعمدة األوىل
والباقي يأخذ قيمة أول عمود أو صف ويطبقها عىل الباقي.
28
SOFTWARE
ENGINEERING FUTURE
s3 Grid
cs
grid-template-rows: minmax(200px , auto) ; (82هذه الخاصية تعني أن أقل ارتفاع للعنصر 200بكسل
RE
وإذا زاد المحتوى عن هذا االرتفاع يزيد االرتفاع اوتوماتيكيًا .
TU
RE FU
A G
justify-items (83تنظم الصفوف و تكتب في العنصر األب ولها 3أشكال للقيم.( center ، end ، start ) :
W N
FT ER I
SO E
align-items (84تنظم األعمدة و تكتب في العنصر األب ولها 3أشكال القيم .( center ، end ، start ):
IN
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
SOFTWARE
ENGINEERING FUTURE
s3 Media Queries
cs
)89تستخدم هذه الخاصية لتغيير الخصائص في تصميم وتخطيط صفحة والويب بتغير الشروط ،وتفيدنا في عرض
RE
الموقع بطرق مختلفة حسب عرض الشاشة (شاشة كمبيوتر أو تابلت أو موبايل)
TU
E U
@media (max-width:600px){CSS properties } (90عندما يكون عرض الشاشة 600بكسل وهي شاشة
R F
W A G
أجهزة الموبايل طبق الخصائص الموجودة بين القوسين { }.
N
FT ER I
SO INE
@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
SOFTWARE
ENGINEERING FUTURE
s3 Selectors Attribute selectors
cs
E
[attribute="value"] )94يستدعي العناصر التي تساوي القيمة valueمثال[lang="en"]{ CSS properties} :
R
TU
]attribute^="value"[ )95يستدعي كل العناصر التي تبدأ بالقيمة المحددة.
RE FU
A G
]attribute|="value"[ )96يستدعي العناصر التي تحوي هذه القيمة وال يوجد نصوص ال قبلها وال بعدها (فقط
W N
FT ER I يقبل اإلشارات كالفاصلة وغيرها) مثال [title|=flower]{…} :
SO INE
]attribute*="value"[ )97يستدعي العناصر التي تحوي هذه القيمة ويقبل وجود أحرف أو زيادات قبلها وبعدها.
N G
E
]attribute~="value"[ )98يستدعي العناصر التي تحوي هذه القيمة شرط أن تكون لوحدها بشكل منفصل.
]attribute$="value“ i"[ )99يستدعي العناصر التي تنتهي بالقيمة i .حتى ال تكون حساسة لألحرف.
33
SOFTWARE
ENGINEERING FUTURE
s3 Selectors combinator selectors
cs
RE )100يشرح العالقة بين الـ selectorsوله 4أشكال :
U
• )descendant selector (spaceيستدعي كل العناصر الموجودة داخل عنصر ({ )div p } ..هذه التعليمة
T
RE FU تستدعي كل عناصر pالموجودة في .div
W A NG
• (<) child selectorيستدعي كل األبناء المباشرة الموجودة داخل عنصر ({ )div>p } ..هذه التعليمة تستدعي
FT ER I كل األبناء ) pتتجاهل األحفاد) الموجودة في .div
SO INE
G
• ( adjacent sibling selector )+يستدعي األخ المباشر الموجود بعد العنصر ({ )div+p} ..هذه التعليمة
N
E تستدعي أول عنصر pموجود بعد divمباشرة.
• (~) general sibling selectorيستدعي األخوة الموجودة بعد العنصر ({ )div~p} ..هذه التعليمة تستدعي
كل العناصر pالموجود بعد .div
34
SOFTWARE
ENGINEERING FUTURE
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
SO INE • : a:hoverتطبق الخصائص عند المرور بالماوس فوق الرابط.
• : a:activeتطبق الخصائص عىل الروابط التي تم فتحها.
N G
E
• : a:focusتطبق الخصائص عىل الروابط التي تم الضغط عليها إىل حين الضغط خارجها.
• : input:in-rangeتستخدم في حال كان االدخال عبارة عن عدد وله نطاق محدد ،تطبق الخواص ان كان
االدخال ضمن النطاق.
• : input:out-of-rangeتطبق الخواص ان كان االدخال خارج النطاق.
35
SOFTWARE
ENGINEERING FUTURE
s3 Selectors pseudo classes selectors
cs
• : input:validتطبق الخصائص عىل اإلدخال إن كان اإليميل المدخل صالح .
RE
U
• : input:invalidتطبق الخصائص عىل اإلدخال إن كان اإليميل المدخل غير صالح .
T
RE FU
• : )p:not(.class-nameتطبق الخصائص عىل جميع الكالسات ماعدا الكالس المذكور.
W A NG • : :rootتطبق عىل جميع صفحة الويب (نفس الـ .(HTML
FT ER I
• { : -webkit-any(article , section , div) h2}..خاصية اختصار وتجميع العناصر إلعطائهم
SO INE خصائص مشتركة.
N G • : div p:first-childينفذ الخصائص عىل االبن األول في الـ .div
E • : div p:last-childينفذ الخصائص عىل االبن األخير في الـ .div
• : p:first-childيجلب أول ابن لكل pموجودة في صفحة الويب شرط أن تكون داخل divويكون أول ابن في
الـ divهو .p
36
SOFTWARE
ENGINEERING FUTURE
s3 Selectors pseudo classes selectors
cs
• : p:only-childتطبق عىل كل ابن وحيد في الـ divبشرط أن تكون خالية من األبناء من النوع نفسه أو غيره.
RE
U
• : p:only-of-typeتطبق عىل كل ابن وحيد في الـ divبشرط أن تكون خالية من األبناء من نفس النوع.
T
RE FU • : )p:nth-child(4تطبق الخصائص عىل االبن الرابع.
W A NG
FT ER I• : )p:nth-child(oddتطبق الخصائص عىل األبناء التي رقمها فردي.
SO INE • : )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
SOFTWARE
ENGINEERING FUTURE
s3 Selectors pseudo elements selectors
cs
)102يستخدم إلعطاء خصائص لجزء محدد من العناصر ،مثًال يمكن استخدامه لتغيير خصائص حرف أو سطر.
RE
ويكتب بالصيغة التالية selector::pseudo-element{ property:value;} :
TU
RE FU • : p::first-lineتطبق الخصائص عىل السطر األول من النص.
W A NG • : p::first-letterتطبق الخصائص عىل الحرف األول فقط.
FT ER I • : h1::beforeإدراج خاصية أو صورة قبل العنصر المذكور ).(h1
SO INE • : h3::afterإدراج خاصية أو صورة بعد العنصر المذكور ).(h3
bs
G
• : ::markerيختار العناصر النقطية أو العددية الموجودة في القوائم ويطبق عليها الخصائص.
N
E • : p::selectionتطبق عىل المقطع النصي المحدد بالماوس.
)103مالحظة :عندما أريد منع نسخ النصوص من صفحة الويب نستخدم:
;-webkit-user-select: none
BAHAA SABER
FRONT-END
;user-select:all
38
You might also like
- أوراق عمل تقنية رقمية 2 1 مسارات موقع منهجيNo ratings yetأوراق عمل تقنية رقمية 2 1 مسارات موقع منهجي8 pages
- موضوعات خاصة في هندسة الحاسوب والبرمجيات HTML CssNo ratings yetموضوعات خاصة في هندسة الحاسوب والبرمجيات HTML Css24 pages
- What Is CSS ?: Dr. Muhammad Ahmed Muhammad Abd Al-Rahman AufNo ratings yetWhat Is CSS ?: Dr. Muhammad Ahmed Muhammad Abd Al-Rahman Auf201 pages
