‫‪CSS – LECT 4‬‬

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

‫محمود دكه ‪-‬مركز الهمص للتدريب‬
 ‫‪CSS FONTS‬‬
‫عائلة الخطوط العامة ‪• Generic Font Families //‬‬
‫‪• Serif‬‬
‫‪• Sans-serif‬‬

‫حروف لها نفس العرض ‪• Monospace //‬‬

‫خطوط مخططة مثل الكتابة اليدوية ‪• Cursive //‬‬

‫الخطوط زخرفية ‪• Fantasy //‬‬

 CSS FONTS – FONT FAMILY

• font-family: "Times New Roman“ , Times , serif;

‘ ‘ ‫• اذا الخط بتكون من اكثر من كلمة يجب وضعه بين ’’ “ او‬
 CSS FONTS – FONT WAY EMBED

• 1- Web Safe Font: url (https://web.mit.edu/jmorzins/www/fonts.html)

• font-family:Arial, Helvetica, sans-serif;
• font-family: "Times New Roman", Times, serif;

• 2- External fonts (Google )

• Html + css
• link in the head html file
• (font-family) in css file
• css
• Important in the css file
• (font-family) in css file
 CSS FONTS – FONT WAY EMBED

• 3- My Fonts (download)
• @font-face { // ‫تعريف الخط الجديد‬
font-family: myFirstFont;
src: url(sansation_light.woff);
}
• font-family: myFirstFont; // ‫االستخدام‬
• Font type
• ttf/otf
•
woff
 CSS FONTS
• Font Size // ‫حجم الخط‬
• font-size: 40px;
• font-size: 100%;

• font-size: 2.5em; ……..

 CSS FONTS
• Font Weight // ‫سمك الخط‬
• font-weight: normal;
• font-weight: bold;
• font-weight: 900;
• 100: Thin, Hairline, Ultra-light, Extra-light
• 200: Light
• 300: Book
• 400: Regular, Normal, Plain, Roman, Standard
• 500: Medium
• 600: Semi-bold, Demi-bold
• 700: Bold
• 800: Heavy, Black, Extra-bold
• 900: Ultra-black, Extra-black, Ultra-bold, Heavy-black, Fat, Poster
 CSS FONTS
• Font Style // ‫شكل الخط مائل وعادي‬
• font-style: normal;
• font-style: italic;
 CSS FONTS

• Font Shorthand
• font-style
• font-weight
• font-size/line-height
• font-family
• Ex:
• Font: font-style font-weight font-size/line-height font-family
• font: 20px Arial, sans-serif;
• font: italic bold 12px/30px Georgia, serif;

‫يجب املحافظة على الترتيب‬

 ‫‪CSS RESIZE ELEMENTS‬‬
‫;‪• resize:none‬‬
‫• الخاصية التحجيم تكون بال ألغلب العناصر ماعدا ‪textarea‬‬

‫عدم التحجيم بشكل راس ي وافقي ‪• resize : none; //‬‬

‫تحجيم بشكل راس ي وافقي ‪resize : both; //‬‬
‫تحجيم بشكل افقي ‪resize : horizontal ; //‬‬
‫تحجيم بشكل راس ي ‪resize : vertical ; //‬‬
 ‫‪CSS3 - STYLE IMAGES‬‬

‫• الدارج صورة من خالل تاج ‪img‬‬

‫>”“=‪• <img src=“” alt‬‬
‫• يمكن اضافة تأثيرات و تنسيقات وفالترخاصة بالصورة مثال‬
‫دوران الحواف ‪border-radius‬‬ ‫•‬
‫حدود الصور‪border‬‬ ‫•‬
‫تجاوب عرض الصورة من خالل استخدام ‪max-width: 100%‬‬ ‫•‬
‫اضافة اشهرفالترمثل برامج التصميم‬ ‫•‬
 CSS3 – OBJECT FOR IMG
• used to specify how an <img> should be resized to fit its
container.
• object-fit:
• fill // default.
• contain
• cover
‫• موضع عرض الصورة‬

• object-position: 80% 100%;

 ‫‪CSS LAYOUT - THE POSITION PROPERTY‬‬
‫• تستخدم لتحديد موضع العناصر بشكل معين‬
‫‪• There are five different position values:‬‬
‫•‬ ‫ثابت ‪Static : by default.‬‬
‫•‬ ‫تغيير املوضع بالنسبة للموضع االصلي ‪Relative:‬‬
‫•‬ ‫تغيير املوضع بالنسبة للموضع االب االصلي ‪Absolute:‬‬
‫•‬ ‫يكون املوضع ثابت طيلة التحرك داخل الصفحة ‪Fixed:‬‬
‫•‬ ‫يكون املوضع ثابت عند الوصول الى مكان طيلة التحرك داخل الصفحة ‪Sticky:‬‬

‫• يستخدم خصائص اضافية مع خاصية ‪position‬‬

‫• ‪top - bottom - left, - right.‬‬
 POSITION STATIC
<div class=”parent”> .parent {
<div class=”box” id=”one”>One</div> border: 2px black dotted;
<div class=”box” id=”two”>Two</div> display: inline-block;
<div class=”box” id=”three”>Three</div> }
<div class=”box” id=”four”>Four</div>
</div> .box {
display: inline-block;
background: red;
width: 100px;
height: 100px;
}
#two {
background: green;
}
 POSITION RELATIVE
• <div class=”parent”>
<div class=”box” id=”one”>One</div> .parent {
border: 2px black dotted;
<div class=”box” id=”two”>Two</div> display: inline-block;
<div class=”box” id=”three”>Three</div> }
<div class=”box” id=”four”>Four</div> .box {
</div> display: inline-block;
background: red;
width: 100px;
height: 100px;
}
#two {
top: 20px;
left: 20px;
background: green;
position: relative;
}
 POSITION ABSOLUTE
• <div class=”parent”>
<div class=”box” id=”one”>One</div> .parent {
border: 2px black dotted;
<div class=”box” id=”two”>Two</div> display: inline-block;
<div class=”box” id=”three”>Three</div> }
<div class=”box” id=”four”>Four</div> .box {
</div> display: inline-block;
background: red;
width: 100px;
height: 100px;
}
#two {
top: 20px;
left: 20px;
background: green;
position: absolute;
}
‫تطبيق عملي‬
‫تطبيق عملي‬
‫تطبيق عملي‬
 ‫‪CSS LAYOUT –Z-INDEX‬‬
‫خاصية الترتيب العناصر (اعلى ‪ /‬اسفل)‬ ‫•‬
‫العناصر تسمى ‪z-index‬‬ ‫•‬
‫قيم الخاصية عبارة عن ارقام موجبة او سالبة‬ ‫•‬
‫مثال ترتيب املشاهدة‬ ‫•‬
‫•‬ ‫الرابع ‪Div.a {Z-index:-1;} //‬‬
‫•‬ ‫الخامس ‪Div.b {Z-index:-9;} //‬‬
‫•‬ ‫الثالث ‪Div.c {Z-index:0;} //‬‬
‫•‬ ‫االول ‪Div.d {Z-index:9;} //‬‬
‫•‬ ‫الثاني ‪Div.f {Z-index:1;} //‬‬
 ‫‪CSS LAYOUT –Z-INDEX‬‬
‫• قم بإنشاء ثالث مربعات بمقاس ‪ٌ 200‬‬
‫بكسل‬
‫‪1‬‬
‫• حاول ترتيب العناصر بالشكل التالي باستخدام خاصية‬
‫‪( POSTION‬شكل ‪)1‬‬

‫• قم بإعادة ترتيب االشكال بخاصية ‪ z-index‬ليصبح (شكل ‪)2‬‬

‫‪2‬‬
 ‫‪CSS ICONS‬‬
‫• قديما إلضافة ايقونات في املوقع من خالل تاج ‪( img‬تحتاج الى مصم )‬
‫• صعبة التعديل‬
‫• االن من خالل مكتبات جاهزة يمكن اضافة او شراء ايقونات ذات معنى وتعتبر خط يمكن التعديل‬
‫عليها بسهولة‬
‫• من اشهر املكتبات ‪Font Awesome‬‬

‫• ‪https://www.flaticon.com‬‬
 CSS ICONS

• Font Awesome Icons

‫• من اشهر املكتبات االيقوانات حسث تشمل على عدة إصدارات‬
• <i class="fas fa-file"></i> // in tag i or span in body

•
 ‫‪CSS TITLE PAGE ICON - FAVICON‬‬
‫• الضافة ايقون لشريط املوقع ‪ tab‬من خالل وضع رابط التالي في راس الصفحة‬
‫>"‪• <link rel="icon" href="/img" type="image/x-icon‬‬

‫• لتحويل الصور العادية الى ايقونة موقع من خالل الرابط التالي‬

‫‪• https://favicon.io‬‬
 ‫‪CSS3 – IMAGES FILTERS‬‬
‫ضبابية ;)‪• filter: blur(px‬‬
‫نص قطر الصورة – ‪• 0‬‬
‫سطوع الصورة‪• filter: brightness(%);.‬‬
‫القيمة االفتراضية ‪• %100‬‬
‫اسود ‪• 0%‬‬
‫سطوع ‪• >100%‬‬
‫التباين ;)‪• filter: contrast(%‬‬
‫القيمة االفتراضية ‪• %100‬‬
‫نزع االلوان ‪• 0%‬‬
‫زيادة تباين االلوان ‪• >100%‬‬
 ‫‪CSS3 – IMAGES FILTERS‬‬

‫تدرجات رمادي ;)‪• filter: grayscale(%‬‬

‫•‬ ‫القيمة االفتراضية ‪%0‬‬
‫•‬ ‫اقص ى قيمة لتدرجات الدمادي ‪100%‬‬
‫قيمة اللون ;)‪• hue-rotate(deg‬‬
‫•‬ ‫‪0deg – 360deg‬‬
‫عكس اللون ;)‪• filter: invert(%‬‬
‫•‬ ‫افتراضية ‪%0‬‬
‫•‬ ‫اقص ى قيمة ‪100%‬‬
 CSS3 – IMAGES FILTERS
• filter: opacity(%); ‫الشفافية‬
• %0 ‫اقص ى قيمة‬
• %100 ‫قيمة افتراضية‬
• filter: saturate(%); ‫التشبع‬
• %0 ‫اقص ى قيمة‬
• %100 ‫قيمة افتراضية‬
• filter: sepia(%);‫تحويل الى بني داكن‬
• %0 ‫قيمة افتراضية‬
• %100 ‫اقص ى قيمة‬
• filter: drop-shadow(8px 8px 10px green); ‫الضل الخارجي‬
https://www.w3schools.com/css/css3_images.asp
 CSS CURSOR
‫• خاصية تستخدم لتغيير شكل املاوس‬
• cursor: auto;

‫• رابط اسماء واشكال املاوس‬

• https://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&
preval=alias
 CSS3 – VENDORE PERFIX
‫ ال تعمل على بشكل صحيح على بعض اصدارات املتصفحات لذا نقوم باضافة‬css3 ‫• معظم خصائص‬
.‫ لحل املشكلة‬perfix ‫خاصية‬
• -webkit-box-shadow:0; // Google Chrome, Safari, IOS,Andriod
• -moz-box-shadow; // FireFox
• -o-box-shadow; // Opera
• -ms-box-shadow // Internet Explorer
•
box-shadow: ;
‫• ملعرفة الخصائص واصدارات املتصفحات الغيرداعمة للخصائص من خالل رابط املوقع‬
• http://caniuse.com
 CSS3 - IMPORTANT

‫• تجعل الخاصية املكتوب اهم من نفس الخاصية في مكان ثاني أي تنفذها باختالف‬
‫االولوية‬
• <style>p{color:red;}</style>
hi
• <p style=“”color:blue;>hi</p>

• <style>p{color:red !Important;}</style> hi
• <p style=“”color:blue;>hi</p>
 CSS3 – VARIABLES
‫• ألنشاء متغير‬

• --var-name: var-vlaue;
• Exp:
• --blue: #1e90ff;
• --white: #ffffff;
‫• استخدام املتغير‬
• background-color: var(--blue);
 CSS LINKS

• a tag status:
• a:link - a normal, unvisited link // ‫عدم الزيارة طبيعي‬

• a:visited - a link the user has visited // ‫رابط تم زيارته سابقا‬

• a:hover - a link when the user mouses over it // ‫تاشير على الرابط باملاوس‬

• a:active - a link the moment it is clicked // ‫الضغط املستمر للماوس‬

‫أسئلة واستفسارات؟‬
‫النهاية‬