כניסה

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 Selectors – סלקטורים

המטרה של CSS זה לעצב דפי אינטרנט. הדרך שבה אנחנו מעצבים דפי אינטרנט / מערכות כלשהן זה בעזרת הגדרת כללי עיצוב שונים לכל אלמנט ואלמנט בדף.נראה איך להחליט על איזה אלמנטים לעצב באמצעות תחביר שנקרא Selectors.

ראינו דוגמה שנראית בסגנון הזה:

				
					body {
        background: orange;
}

עוד דוגמה שראינו:

				
					h1, h2 {
            color: green;
            text-align: center;
}
p {..}

כל קטע כזה נקרא CSS RULE (כלל עיצוב מסוים) החלק הראשון של הכלל מציין על איזה אלמנט אנחנו בוחרים להחיל כלל עיצוב כלשהו.

החלק השני של הכלל (זה שבתוך הסוגריים) קובע מה תהיה השפעת הכלל.

הסלקטור בדוגמה הראשונה נקרא Element Selector.  – הוא גורם לכלל להשפיע על כל אלמנטי ה- HTML שיש לנו בדף. 

ראינו שאפשר לחבר מספר סלקטורים ולהגדיר עליהם כללי עיצוב זהים באמצעות סימן פסיק ביניהם (זה נקרא איחוד)

 

נראה עוד סוגים של סלקטורים:

בחירת אלמנט לפי ID

ID – ראינו שניתן להגדיר לכל אלמנט HTML מאפיין ID. מאפיין ID הינו ייחודי ולא יכול לחזור יותר מפעם אחת בדף.

 

לאחר שהגדרנו ID מסוים אפשר להגיע ולהתייחס אליו דרך CSS באופן הבא:

דף ה-HTML

				
					<div id="social-links">
            	{ .... }

דף ה-CSS

				
					#social-links {
            background: green;
            align-items: center;
....
}

נשים לב על מנת לגשת לאלמנט לפי ה- ID שלו, נשתמש בסימן "#" ולאחריו שם ה-ID שהגדרנו לאלמנט.

מבחינת CSS ברגע שכתבנו # הוא יחפש במסמך ה-HTML ID שמתאים לנו לפי ההגדרה.

בחירת אלמנט לפי CLASS

הבעיה המרכזית בשימוש ב-ID לקביעת כללי עיצוב שונים היא ש- ID חייב להיות ייחודי בכל המסמך (נזכיר ונאמר שהדפדפן לא "צועק" עלינו, אז חשוב להקפיד לשים לב).

נניח ואנחנו רוצים לצבוע מספר אלמנטים בצבע מסוים, אז לפי השיטה של ה-ID נצטרך לתת ID ספציפי לכל אחד ועליו להחיל את כללי העיצוב.

הדרך המקובלת יותר לבחור אלמנטים היא לפי כלל עיצוב שנקרא Class, מאפשרת לנו יותר גמישות.

מספר אלמנטים מסוימים יכולים להיות "מסומנים" בעזרת כללי העיצוב שהגדרנו על פי ה-CLASS הקיים.

כלל עיצוב מופעל לפי קלאס משפיע על כל האלמנטים בקלאס הנ"ל.

נניח שנרצה להוסיף צבע לקישורים שיש לנו בדף, נגדיר מספר קישורים:

				
					<a href="https://www.facebook.com" class="our-social-links"> Our Facebook Page </a>
<a href="https://www.twitter.com" class="our-social-links"> Our Twitter Page </a>
<a href="https://www.tiktok.com" class="our-social-links"> Our Tiktok Page </a>

בצד ה-CSS נכתוב כך:

				
					.our-social-links {
         color: purple;
}

נשים לב כי על מנת לגשת ל-CLASS מסוים נשתמש בסימן "." ולאחריו שם הקלאס שהגדרנו.

שימוש בנקודה "." אומר ל-CSS לחפש במסמך ה-HTML קלאס עם השם שהגדרנו.

 

 

בחירת אלמנט לפי מצב עכבר

הרבה פעמים אנחנו רואים דפי אינטרנט שונים שמתנהגים אחרת במעברי עכבר על אלמנטים. כלומר שהעכבר עובר על אלמנט מסוים קורה משהו בדף.

ב-CSS יש המון סלקטורים שעוסקים "במצב העניינים" ובאינטרקציה עם המשתמש. אחד הפופולריים הוא הכלל הבא:

				
					a:hover {
    color:yellow;
}
 
.our-social-links:hover {
    color:yellow;
}

בחירת אלמנט לפי מיקום בעץ

דרך נוספת להשפיע על אלמנטים היא להסתכל על מיקומם בעץ. מה הכוונה בעץ? נניח ויש לנו אזור מסוים (div) והוא מכיל לנו את הפירוט על הרשתות החברתיות בעסק שלנו.

בתוך האזור הזה יהיה לנו כותרות, כפתורים, לינקים, טקסטים וכו'. ואנחנו רוצים לצורך הדוגמה שהלינקים באזור הספציפי הזה יתנהגו בצורה מסוימת נראה דוגמה:

				
					<div id="news">
            	<a href="ynet.co.il"> Ynet </a>
            	<a href="walla.co.il"> Walla </a>
</div>

בצד ה-CSS נוכל לרשום:

				
					#news a {
            	color: purple;
}
#news a:hover {
            	color: green;
}

הגדרנו כאן שכל הלינקים תחת האזור news יתנהגו בצורה מסוימת כך ש:

בתחילה הלינקים יהיו בצבע סגול (או פלום)

ובמעבר עכבר הם יהיו בצבע ירוק.

 

בשביל לפנות לאלמנטים לפי מיקומים בעץ אנחנו משתמשים ברווח בתוך הגדרת הסלקטור.

אצלנו בדוגמה פנינו לפי ה-ID ולאחר מכן לכל האלמנטים שרצינו להחיל עליהם כללי עיצוב שונים.

אצלנו בדוגמה, אך ורק הלינקים תחת האזור הנ"ל יתנהגו לפי איך שהגדרנו.



בחירת אלמנט לפי ילדים בעץ

נבנה טבלת זברה.

תחילה נרצה לסדר את שורת הכותרת כך שתופיע בצבע אחר. כדי לזהות מהי שורת הכותרת אני יכול להוסיף קלאס ספציפי לאלמנט ה-tr  הראשון, אבל תוספת כזו תסבך את קוד ה-HTML של העמוד. במקום זה יותר קל לי להשתמש בסלקטור בשם first-child סלקטור זה יתפוס רק את האלמנט שהוא הילד הראשון בתוך קבוצת אלמנטים.

הקוד הבא מזהה את ה-tr הראשון בתוך הטבלה וצובע אותו בצבע אחר:

				
					 tr:first-child {
	background:green;
	color:white;
}

עכשיו נרצה לסדר את גודל התאים שיהיו גדולים יותר. אפשר להשתמש גם כאן בקלאס סלקטור כדי לזהות תאים מסוימים ולהגדיל אותם, אבל זה אומר שאצטרך להוסיף מאפיין קלאס להרבה מאוד אלמנטים ב-HTML מה שיסבך מאוד את כתיבת העמוד.

גם הסלקטור first-child לא יתאים לנו פה. הוא יכול לעזור לבחור גודל לעמודה הראשונה בלבד.. אבל אנחנו רוצים לעצב את העמודה השנייה והשלישית.

סלקטור בשם nth-child מאפשר לנו מתוך CSS להוסיף כללי עיצוב לאלמנט לפי מיקומו הספציפי בעץ, לדוגמה אם הוא הילד הראשון, השני או האחרון.

בטבלה שלנו אנחנו רוצים שהעמודה השנייה תהיה ברוחב 300 פיקסלים והשלישית ברוחב 200

				
					 th:nth-child(2), td:nth-child(2) {
	width:300px
}

th:nth-child(3), td:nth-child(3) {
	width:200px
}

כעת נרצה לצבוע שורות זוגיות בצבע אחד ואי זוגיות בצבע שני.

בשביל להפוך את הטבלה לזברה נשתמש גם כאן בסלקטור nth-child.

הסלקטור בנוסף לקבלת מספר יודע גם לקבל נוסחה שכוללת את האות n ובאופן אוטומטי הוא "יריץ" את n בין 0 לאינסוף ויבחר את כל התאים שהצליח לייצר מהנוסחה. במילים אחרות כדי לצבוע את כל השורות הזוגיות נוכל להשתמש ב:

				
					tr:nth-child(2) {
	background:#ffffff
}

הישארו מעודכנים

הירשמו לקבלת תוכן איכותי

מעוניין/ת לשמוע עוד באופן פרטי? נשמח לעזור !

השאירו פרטים בתיבה ונחזור אליכם בהקדם!