Front End
- HTML בסיסי
- תגיות בסיסיות ב-HTML
- טפסים ב-HTML
- קצת על HTML5
- מבוא ל-CSS ושילוב בעמוד שלנו
- CSS Selectors
- CSS בסיסי
- Media Queries
- Flex Box
- Grid
- Bootstrap CSS
- שלום JavaScript
- משתנים ב-JavaScript
- תנאים ב-JavaScript
- Switch Statement
- Ternary Operator
- Loops
- while
- do While
- for
- Objects
- for in Loop
- Arrays
- for of
- Scope
- Functions
- Events + DOM
- DOM Access
- XML & JSON
- Storages in JavaScript
- Session Storage
- Local Storage
- Cookies
- inline, anonymous, arrow functions
- Array Callbacks
- Exception Handling
- Sync VS Async
- Promise Object
- async-await
- Strict Mode & IIFE
- AJAX
- Complexity
- שלום TypeScript
- התקנות
- פתיחת פרויקט ראשון
- TypeScript Basics
- Variables
- Functions
- OOP
- OOP Basic
- Inheritance
- Polymorphism
- שלום React
- מבוא
- התקנות
- פרויקט ראשון
- CSS Leaking
- Layout
- Interpolation
- Conditional Rendering
- Lists
- Events Basics
- Props
- State, useState
- React Hooks
- useEffect
- Routing
- Ajax Requests
- Route Parameter
- useForm
- Redux
- Authorization & Authentication
- תהליך הטמעת Auth מלא בפרויקט
- Interceptors
Back End
- Node.js
- מבוא והגדרות
- Modules
- Global Object
- Versioning System
- Node.js + TypeScript
- HTTP Protocol
- Web Service
- REST API
- Layered REST API
- Middleware
- Error Handling
- Auth
- Upload Images
- Server Images
- Database
- שלום MySQL
- XAMPP
- Relations
- phpMyAdmin
- MySQL Basics
- Designer
- Create Relations
- Insert Data
- MySQL Common Commands
- Using MySQL with REST API
- CORS
- Project 1
Dev Ops
- שלום Docker
- Containers
- Images
- Start & Stop
- Docker Layers
- yaml
- Docker Compose
- Volumes
- Error Handling
- Hot Reloading
- Anonymous volume
- Packing Full System
- Introduction to AWS
- Setting up AWS Account and IAM
- AWS EC2 (Elastic Compute Cloud)
- AWS S3 (Simple Storage Service)
- AWS RDS (Relational Database Service)
- AWS Lambda
- AWS API Gateway
- AWS Elastic Beanstalk
- AWS CloudFormation
- AWS DevOps Tools
CSS בסיסי
דיברנו על CSS Selectors, ראינו איך להחיל עליהם כללים מסוימים על כל אלמנט שאנחנו בוחרים.
נכיר מאפיינים בסיסים:
1. המאפיינים background-color ו color
המאפיין הראשון והפשוט ביותר הינו שינוי צבע של אלמנטים.
CSS מאפשר לנו לקבוע צבע וצבע רקע של כל אלמנט בעזרת color, background-color.
ב-CSS יש לא מעט צבעים שיש להם שמות, מכיוון שאנחנו לא יודעים את כל השמות של כל הצבעים, נהוג להשתמש בסימן הקדסהדצימלי של צבעים (#00000)
ניתן לראות דוגמה בכל מיני אתרים למינהם.
דוגמה כאן
דף HTML:
<html>
...
<body>
<div id="header">
<h1> CSS Properties </h1>
<h2> Colors, Fonts and other cool stuff </h2>
</div>
</body>
</html>
דף CSS
#header {
color: green;
background-color: red;
}
2. גופנים
ניתן לשנות ב-CSS את הגופן עצמו. המאפיין font-family קובע את הגופן, המאפיין font-weight קובע את "משקל" הגופן (עובי), והמאפיין font-size יקבע את גודל הגופן.
אפשר לציין גודל של גופנים בפיקסלים (כמו ב-WORD) אבל ישנם כמה אופציות לשליטה על גודל הגופן:
font-size: 20px;
font-size: 2.5em;
font-size: 3rem;
px – הגדרה בפיקסלים
יחידה נוספה – em: נקבעת באופן יחסי לאלמנט שנמצא מעליו
יחידה נוספת – rem: נקבעת באופן יחסי לגודל הטקסט באלמנט ה-HTML.
font-family
את הגופנים עצמם ניתן לשנות באמצעות font-family. באופן רגיל אנחנו לא יודעים איזה גופן יש אצל המשתמש. לכן סט הגופנים שאנחנו יכולים לבחור מהם הוא יחסית מצומצם.
ובאותה מידה ניתן להגדיר בצורה הבאה:
h1, h2, h3, h4, h5, h6 {
font-family: Verdana, Geneva, sans-serif;
{
ההגדרה כוללת שלוש אפשרויות לגופן:
אם מותקן אצל המשתמש הגופן Verdana אזי שישתמש בו, אם לא נטען את הגופן Geneva וגם אם הוא לא מותקן, נגדיר לדפדפן לשלוף פונט דיפולטיבי ממשפחת sans-serif.
אופציה נוספת לשימוש בגופנים היא לקחת פונטים חופשיים מגוגל, שירות שנקרא Google Fonts.
או אופציה נוספת להשתמש בגופנים בתשלום.
קישור לגוגל פונטס כאן
נעתיק את קישור ה-stylesheet לדף ה-HTML
ואת הסטייל עצמו נעתיק לקובץ CSS שלנו.
3. מאפיין border ו-border-radius
אפקט נוסף שנכיר הוא מסגרת ומסגרת עגולה (פינות מעוגלות)
נראה דוגמה:
#news {
border: 2px solid red;
}
Border Radius:
על מנת לעגל את הפינות של המסגרת נעשה את הדבר הבא:
border-radius: 50px;
4. padding – ריפוד (שוליים פנימים)
באופן אוטומטי הדפדפן מוסיף לכל אלמנט ב-HTML "אזור" מסביב לתוכן שנקרא ריפוד או padding. אנחנו יכולים לקבוע את גודל האזור הזה באמצעות padding ב-CSS באופן הבא:
#news {
padding-left: 100px;
}
ניתן לתת ל-Padding ארבעה 4 ערכים שונים.
בכיוון השעון – למעלה, ימינה, למטה, שמאלה.
באותה מידה אפשר לתת 2 ערכים שיגדירו את הpadding למעלה למטה, ומהצדדים.
באותה מידה אפשר לתת ערך יחיד שיגדיר את ה-padding מכל הצדדים.
5. margin – שוליים חיצוניים
מסביב ל-padding ישנם שוליים חיצוניים, שאותם קובעים בעזרת המאפיין margin.
השוליים קובעים כמה מקום להשאיר בין אלמנטים, נראה את הדוגמה הבאה:
#news {
margin-top: 200px;
}
בדוגמה הזו נתנו מרווח של 200 פיקסלים בין האלמנט שמעל news לאלמנט שלנו.
כלומר, מרווח של 200 פיקסלים ביניהם.
ניתן להגדיר גם ל-margin מספר ערכים כמו auto.
6. background-image
במקום להגדיר רקע קבוע אנחנו יכולים להשתמש בתמונת רקע מכל מקום באינטרנט או מתמונה אצלנו בפרויקט באמצעות המאפיין background-image.
למאפיין זה יש המון תכונות, ננסה לגעת בעיקריות:
- על מנת להגדיר תמונה נשתמש בערך url ולתוכו נכניס את הנתיב של התמונה.
- ניתן להעביר מספר ערכים ואז הדפדפן עושה מאמץ להציג את כולן.
- המאפיין background-image לא משפיע על גודל האזור, כלומר אם יש לנו תמונה שהיא גדולה יותר מהאזור שבו הגדרנו, לא נראה את התמונה במלואה. ניתן לשלוט על גודל התמונה בעזרת background-size.
- מאפיין נוסף הינו background-position קובע איפה בדיוק תמונת הרקע תמוקם בתוך האלמנט.
7. Box-shadow
אפקט נחמד נוסף שאפשר להוסיף לאלמנטים הוא box shadow – הצללה:
נראה דוגמה:
#news {
color: ...
background-color: ..
box-shadow: 10px 10px 13px 0px rgba(0,0,0,0.75)
}
קשה לדעת ולראות בעין כמה פיקסלים צריך לתת לכל צד (למעלה למטה וכו') אז יש כלים ויזואלים שעוזרים לנו בכך.