כניסה

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?

Cascading Style Sheets (CSS)

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

 

איך משלבים CSS בקוד שלנו?

יש שלוש דרכים לשלב קוד עיצוב CSS בעמוד ה-HTML שלנו. נראה את שלושתן ונחשוב מתי להשתמש בכל דרך.

1.  עיצוב בתוך השורה – inline (עיצוב בתוך התגית עצמה)

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

 

נראה דוגמה:

				
					<body style="background: red">

הגדרנו מאפיין style

למאפיין זה יש תכונה שנקראת background

ולתכונה הנ"ל נכניס את הערך red

בכך צבענו את הדף באדום.

 

דוגמה נוספת:

				
					<h1 style="color:blue"> Some heading </h1>

בתגית זו הגדרנו כותרת ברמת h1

הגדרנו מאפיין style בתוך התגית עצמה

למאפיין זה יש תכונה שנקראת color

ולתכונה הנ"ל נכניס את הערך blue

בכך צבענו את הכותרת בכחול.

 

 

 

2.  עיצוב פנימי – Internal

 

דרך נוספת להגדיר עיצוב לעמוד היא ליצור תגית בשם style בראש הדף (בתוך תגית ה-head) ובתוכה לרשום את כל הגדרות ה-CSS שנרצה להציג בדף.

דוגמה:

				
					<!DOCTYPE html>
<html>
            <head>
                    <title> Website Title </title>
                    <style>
                                 h1 {color:yellow}
                    </style>
            </head>
             <body>
                    <h1> My Website Heading </h1>
            </body>
</html>

3.  טעינת קובץ CSS חיצוני – External

 

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

 

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

 

דוגמה לטעינת קוד מהקובץ בשם "style.css" שנמצא באותה תיקייה כמו קובץ ה-HTML.

				
					<!DOCTYPE html>
<html>
            	<head>
                            	<link rel="stylesheet" href="style.css"/>
            	</head>
            	<body>
 
            	</body>
</html>

ניצור קובץ בשם style.css ונכתוב בו את הקוד הבא:

				
					body {
        background: orange;
}

ניתן להוסיף גם עיצוב על מספר אלמנטים ביחד בצורה הבאה:

				
					h1, h2 {
            color: blue;
            font-size: 50px;
}

 

שימו לב: הדפדפן לא מציג שגיאה אם ניסינו לטעון קובץ CSS שאינו קיים או גם אם יש לנו שגיאת כתיב ב-CSS. כלומר, אם נכתוב את המילה background בשגיאת כתיב או אם נטעה בשם קובץ או אם נטעה באיות התגית או המאפיין שלה העמוד לא יצבע בכתום (בדוגמה למעלה)

טעינת קובץ CSS קיים ברשת:

אמרנו כי ניתן להשתמש בקובץ CSS שקיים באינטרנט שיש בו הגדרות עיצוב מוגדרים מראש.

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

				
					<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css">

הקישור הנ"ל הינו דוגמה לקובץ CSS שמאוחסן ברשת. זהו קובץ שמישהו הגדיר מראש והכניס בו הגדרות עיצוביות. הקובץ נקרא Sakura.css. הקוד הנ"ל הוא ב "קוד פתוח" – כלומר כולם יכולים להשתמש בו ואפילו לערוך אותו. סאקורה הוא קובץ CSS בסיסי מאוד וישנם קבצים מורכבים יותר באינטרנט.

 

מתי נשתמש בכל דרך?

כמו שאמרנו, אנחנו יכולים להחליט על איזה אלמנט שאנחנו רוצים בדף כל כלל עיצוב שנחליט. אז מתי נשתמש בכל אחת מהדרכים שלמדנו?

כמו רוב הרבה דברים בתכנות אין כאן תשובה מוחלטת אבל יש קווים מנחים:

  1. רוב קוד ה-CSS שלנו ייכתב בקובץ CSS חיצוני. הקובץ יטען בעזרת תגית link. זו הדרך הכי נוחה לתחזק את הקוד, זה לא מעמיס על דף ה-HTML  שלנו, וזה מאפשר לדפדפן "לשמור" אצלו את קובץ ה-CSS שהוא כבר הוריד בעבר (זיכרון מטמון) כדי שפעם הבאה שגולש יגיע לעמוד הוא לא יצטרך להוריד את הקובץ מהתחלה.

 

  1. בעמודי נחיתה או בדפים שצריכים להיטען מהר, נוכל לרשום קטע CSS קצר בתוך תגית style שנמצאת בתגית ה-head (דרך מספר 2). כך כל הדף יישמר כאחד וישלח לדפדפן כקובץ יחיד ללא קבצים נוספים.

 

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

.

תזכורת איזה 3 שיטות ראינו ב-CSS

–          Inline בתוך התגית להכניס STYLE מסוים

–          Internal פנימי – להכניס בתוך ה- head תגית style ובתוכה כל הסטייל שנרצה

–          External חיצוני – קבצים חיצוניים של CSS מתוך הפרויקט שלנו / מהאינטרנט עצמו

 

 

 

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

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

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

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