‫‪CSS – LECT 1‬‬

‫برمجة الواجهات االمامية ‪FRONT-END‬‬

‫محمود دكه ‪-‬مركز الهمص للتدريب‬
 CSS

• Cascading Style Sheets

• describes how HTML elements are to be displayed on screen, paper, or in

other media

• CSS saves a lot of work

 HOW TO ADD CSS
• Three Ways to Insert CSS
• External CSS :
• Internal CSS
• Inline CSS
 ‫‪INLINE CSS‬‬
‫• يمكن استخدام نمط مضمن ‪ inline style‬لتطبيق نمط فريد لعنصر واحد‪.‬‬

‫• الستخدام األنماط املضمنة ‪ ، inline styles‬إضافة سمة نمط العناصر ذات الصلة‪.‬‬

‫• مالحظة‪ :‬عدم االكثار من استخدام ‪inline style‬‬

HOW USE CSS? CSS SYNTAX
‫‪INTERNAL CSS‬‬
‫• يمكن استخدام ‪ css‬داخلي إذا كان لصفحة ‪ HTML‬لها نمط‬
‫‪ style‬فريد من نوعه‪.‬‬

‫• يتم اعالن ‪ internal style‬داخل عنصر >‪ <style‬داخل قسم‬

‫الرأس في ملف ‪.html‬‬
 ‫‪EXTERNAL CSS‬‬
‫• باستخدام ‪ css‬يمكنك تغيير مظهر موقع ويب بالكامل عن طريق ملف واحد فقط‬
‫• ‪style.css‬‬
‫• يحتوي ملف فقط على اكود ‪css‬‬

‫• يجب أن تحتوي كل صفحة ‪HTML‬على مرجع مللف ‪ css‬الخارجية داخل ملف‬

‫‪ html‬من خالل عنصر ‪ ،link‬داخل قسم الرأس‪.‬‬
 ‫‪MULTIPLE STYLE SHEETS‬‬
‫• إذا تم تحديد بعض الخصائص لنفس املحدد (العنصر) في أوراق أنماط مختلفة ‪ ،‬فسيتم استخدام القيمة من آخر ورقة‬
‫أنماط للقراءة‪.‬‬

‫• يتم استدعاء اوال الخارجي ومن ثم الداخلي‬

‫• حيث سوف يطبق جميع سمات الخارجي ماعدا السمات التي موجودة في الداخلي حيث يتم تطبيق الداخلي ويترك الخارجي في حالة تكرر نفي السمة‬
‫لنفس العنصر‬
 ‫‪MULTIPLE STYLE SHEETS‬‬

‫• يتم استدعاء اوال الداخلي ومن ثم الخارجي‬

‫• حيث سوف يطبق جميع سمات الداخلي ماعدا السمات التي موجودة في الخارجي حيث يتم تطبيق الخارجي ويترك الدخلي في حالة تكرر نفي‬
‫السمة لنفس العنصر‬
‫‪CASCADING ORDER‬‬
‫• يتم تنفيذ السمات من االقرب للعنصر‬
‫• اما ‪ id‬اقوى من ‪class‬‬
‫• يعتبر ‪ inline style‬اقوى السمات‬
 CSS COMMENTS

• Html
• <!-- sdfsdfsdf -->

• Css
• /* This is a single-line comment */
 CSS COLOR

• The color: ‫خاصية لون النص‬

• color name // "red"
• Color value
• HEX - HEX value // "#ff0000"
• RGB - RGB value, // "rgb(255,0,0)“
• RGBA - RGBA value // "rgba(255,0,0,0.5)"
• HSL - HSL value, // "hsl(0, 100%, 50%)“
• HSLA - HSLA value // "hsla(0, 100%, 50%,0.5)"
• Transparent //1- 0 ‫شفاف‬
COLOR TYPE 1- CSS COLOR NAMES

color:red;
 COLOR TYPE 2- COLOR VALUE
• RGB Value
• rgb((red, green, blue) // 0- 255
• rgb(255,0,0) // red
• rgb(0,255,0) // green
• rgb(0,0,255) // blue
• rgb(0,0,0) // black
• rgb(255,255,255) // white

• RGBA Value
• rgba(red, green, blue, alpha) // 0- 255 & ‫ شفافية‬0-
1.0
 COLOR TYPE 2- COLOR VALUE
• HEX Value
• #rrggbb // 0 – 9 & A-F
• #000 or #000000 // black
• #fff or #ffffff // white
• #f00 or #ff0000 // red
• #0f0 or #00ff00 //green
• #00f or #0000ff //blue
• #333 or #333333 // ‫سكني غامق‬
• #eee or #eeeeee //‫سكني فاتح‬
 COLOR TYPE 2- COLOR VALUE
• HSL Value
• hsl(hue, saturation, lightness)
• HUE = 0-360 deg
• SATURATION & LIGHTNESS = 0 -100%

• HSLA Value
• hsl(hue, saturation, lightness , alpha) ‫شفافية‬

• Color: transparent
 CSS BACKGROUNDS
• background-color:red; // ‫لون الخلفية‬

• background-image: url(); // ‫صورة كخلفية‬

• background-repeat: repeat; // ‫تكرار الصورة بشكل افقي او عمودي او كالهما او ال‬

• repeat-x/repeat-y /no-repeat
• background-attachment: scroll; / fixed ‫شكل ارفاق صورة الخلفية‬

• background-position: right top; // ‫موضع الخلفية داخل الصندوق بشكل افقي او بشكل راس ي‬
 CSS BACKGROUND-COLOR
‫• لون خلفية العنصر‬

• color is most often specified by:

• color name - red
• HEX "#ff0000"
• RGB OR RGBA
• HSL OR HSLA
‫‪CSS BACKGROUND IMAGE‬‬
‫• تحديد صورة كخلفية لعنصر معين‬
 ‫‪CSS BACKGROUND-REPEAT‬‬
‫• تكرار صورة الخلفية (افقيا او عموديا او بدون)‪ ،‬القيمة االفتراضية هو تكرار الصورة ‪repeat‬‬
‫‪• Background-repeat value:‬‬
‫•‬ ‫تكرار افقي وعمودي معا ‪Repeat //‬‬
‫•‬ ‫تكرار افقي ‪//‬‬
‫•‬ ‫تكرار عمودي ‪Reperepeat-xat-y //‬‬
‫•‬ ‫عدم التكرار ‪No-repeat //‬‬
 CSS BACKGROUND-POSITION
• is used to specify the position of the background image.
• background-position: center;
• background-position: right top;
• background-position: left bottom;
background-position: x% y%;
• background-position: xpx ypx;
• background-position: bottom 50% right 10px; //10 ‫ وابعد عن اليمين‬50 ‫ابعد من اسفل‬
 CSS BACKGROUND-ATTACHMENT
• specifies whether the background image should scroll or be fixed (will not
scroll with the rest of the page):
• background-attachment: scroll; // ‫تختفي الصورة مع االنتقال بعجلة املاوس‬
• background-attachment: fixed; // ‫ال تختفي الصورة مع االنتقال بعجلة املاوس‬
 CSS BACKGROUND SHORTHAND

‫اختصار الكود‬
 ‫‪CSS BACKGROUNDS‬‬

‫حجم صورة الخلفية ‪• background-size:‬‬

‫•‬ ‫الحجم األصلي للصورة ‪auto‬‬
‫•‬ ‫‪ -zoom‬تعبئة املساحة العنصر بالصورة بشكل كامل ‪cover‬‬
‫•‬ ‫احتواء أي تعبئة أطول ضلع من الصورة مع ضلع العنصر ‪contain‬‬
‫•‬ ‫تغير حجم الصورة بالنسبة متجاوب ‪100% 50%‬‬
‫•‬ ‫تغيير حجم الصورة بوحدة قياس ثابتة ‪100px 50px‬‬
 ‫‪CSS BORDERS‬‬
‫خاصية الحد (‪ )border‬تسمح بتحديد شكل (‪ )style‬وحجم (‪ )width‬ولون (‪ ) color‬حد العنصر‬
 CSS BORDER STYLE
• ‫الخاصية االساسية لحد العنصر‬
• border-style
• border-style: solid;

• Mixed border
• Border-style:
• dotted dashed solid double
• top right bottom left
 CSS BORDER WIDTH

• Exmpale:
• border-width: medium;
• border-width: thick;

• border-width: 5px; // top + right + bottom + left=5px

• border-width: 25px 10px 4px 35px; //top(25) right(10) bottom(4) left(35)
• border-width: 5px 20px; // top + bottom=5 & right + left=20
• border-width: 5px 9px; 3px// top=5 & right + left=9 & bottom=3
 CSS BORDER COLOR

• border-color: green;
• border-color: #00FF00;
• border-color: rgb(0,255,0); // ‫كل الحواف اخضر‬
• border-color: hsl(0, 100%, 50%); /* red */
• border-color: red green blue yellow;
• // red top, green right, blue bottom and yellow left
 CSS BORDER SIDES

• border-top-style: dotted; // ‫الحد العلوي‬

border-right-style: solid; // ‫الحد اليمين‬
border-bottom-style: dotted; //‫الحد السفلي‬
border-left-style: solid; // ‫الحد اليسار‬

• border-style: dotted // ‫حد منقط من جميع النواحي‬

• border-style: dotted solid; // ‫حد منقط من اعلى واسفل و حد صلب من اليمين واليسار‬
• border-style: dotted solid double; // ‫حد منقط من االعلى وصلب من اليمين واليسار وحد دبل من االسفل‬
 CSS SHORTHAND BORDER PROPERTY

• border: 5px solid red; // ‫بكسل ولونه احمر‬5 ‫حد شكله صلب وحجم‬

• border-top: 6px solid red; // ‫حد من اعلى‬

• border-right: 6px solid red; // ‫حد من اليمين‬
• border-bottom: 6px solid red; // ‫حد من االسفل‬
• border-left: 6px solid red; // ‫حد من اليسار‬
‫أسئلة واستفسارات؟‬
‫النهاية‬