FL@WER B@Y

17/11/2017

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


מדריך לשפת העיצוב CSS: תוכן העניינים

הקדמה קצרה למדריך.

הקדמה: הסבר על השפה ומה אפשר ללמוד באמצעותו. 

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

ב CSS אפשר להגדיר תכונות רבות, ביניהן:

  • שליטה על תבנית העיצוב של מסמכים רבים מגיליון עיצוב אחד.
  • שליטה מדויקת יותר על תבנית העיצוב.
  • מימוש תבניות עיצוב שונות לסוגי מדיה שונים (תצוגת מסך, הדפסה וכו').
  • מספר רב של טכניקות עיצוב מתקדמות ומתוחכמות.
  • צבע רקע (background color). 
  • תמונת רקע (background image).
  • צבע הטקסט.
  • יישור הטקסט (text alignment)
  • דקורציה של הטקסט (כלומר קו מעל הטקסט, קו על גבי הטקסט, קו מתחת לטקסט או טקסט מהבהב).
  • טרנספורמציה של הטקסט (לשחק עם אותיות גדולות/קטנות – שימושי באנגלית).
  • הסחה (indentation) של הטקסט.
  • סוג וגודל הגופן (font) של הטקסט.
  • היפר קישור, למשל לצבוע היפר קישור שביקרנו בו כבר.
  • רשימות: אפשר לתת סוג של סמן מסויים לרשימה ואפילו רשימה ממוספרת לפי א"ב עברי.
  • טבלאות: אפשר לתת עיצוב אחיד לכל הטבלאות בדף או בקבוצת

שיעור 1 - מה זה CSS

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

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

אז מה ההבדל בין HTML ל-CSS?

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


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

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

שיעור 2 - כיצד CSS פועלת?

נלמד את התחביר הבסיסי של CSS וניצור את העיצוב הראשון שלנו.

בשיעור זה נלמד איך ליצור את העיצוב הראשון שלנו. אנחנו נלמד את הבסיס לשפת ה-CSS ואיזה קוד נחוץ כדי להשתמש ב-CSS במסמך HTML.
ניח שאנחנו רוצים לבחור בצבע כחול כרקע לדף אינטרנט: בשפת HTML אנחנו יכולים לעשות זאת כך:
<body bgcolor="#2196F3">

 עם CSS נקבל תוצאה זהה בצורה כזו:

body{background-color: #2196F3;}

הקוד כמעט זהה ל-HTML ול-CSS. הדוגמה שלמעלה גם מציגה לך עקרונות בסיסיים של מודל ה-CSS.
תחביר CSS בסיסי נראה כך:

 

ספויילר
GQa6I2dSS4aiNPKaA1KGnw.png

 

אבל היכן אנחנו מכניסים את קוד ה-CSS?, זה בדיוק מה שנראה עכשיו.
ישנן שני דרכים ליישם CSS במסמך HTML. שני שיטות אלו מודגמות למטה. אני ממליץ שתתמקדו בשיטה השניה.

שיטה: 1 
In-Line (בתוך השורה המפיין Style)
דרך אחת ליישם CSS במסמך HTML היא על ידי שימוש במאפיין ה-style HTML. בהתבסס על הדוגמה שלמעלה עם הרקע בצבע הכחול, ניתן להחיל זאת כך:

	<html>
	  <head>
		<title>Example</title>
	  </head>
	  <body style="background-color: #2196F3;">
		<p>This is a blue page</p>
	  </body>
	</html>

שיטה 2: External (חיצוני - קישור למסמך סטייל)

השיטה המומלצת היא קישור גיליון עיצוב חיצוני. גיליון עיצוב חיצוני הוא פשוט קובץ טקסט עם סיומת css.<שם הקובץ>. בדומה לכל קובץ אחר, אתה יכול למקם את גיליון העיצוב שלך בשרת האינטרנט שלך או בכונן קשיח אחר.

נניח שגיליון העיצוב שלנו נקרא Global.css והוא ממוקם בספריה (תקייה) בשם styles. מצב זה יראה כך:

 

תמונה: מסומן באדום וכחול
CWNzuZSXSyyTleCakfqeZw.png

הרעיון הוא ליצור קישור ממסמך ה- HTML לגיליון העיצוב (Global.css). קישור כזה נוצר עם שורת קוד HTML אחת:

<link rel="stylesheet" type="text/css" href="styles/Global.css" />

שימו לב כיצד הנתיב לגיליון העיצוב שלנו מוגדר על ידי המאפיין  href.
שורת הקוד חייבת להיכלל בקטע ה-header של קוד ה-HTML, כלומר בין התגים <head> ו-<head/>. כך:

<html>
 <head>
	<title>My document</title>
	<link rel="stylesheet" type="text/css" href="styleS/Global.css" />
 </head>
<body>

קישור זה אומר לדפדפן שבהצגת קובץ ה-HTML עליו להשתמש בתבנית העיצוב שמוגדרת בקובץ ה-CSS.

שיעור 3 - צבעים ורקעים

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

שיעור זה נלמד ליישם צבעים ורקע לאתר שלנו. אנחנו גם נראה את השיטות המתקדמות למיקום ושליטה על תמונות רקע

צבע (Color)
התכונה Color 
מתארת את הצבע של אלמנט.
למשל אנחנו רוצים שכל הכותרות יהיו בצבע אדום כל הכותרות מסומנות בתג ה-<h1> HTML. הקוד למטה מגדיר את צבע האלמנט <h1> לאדום.
h1 {color: #ff0000;}

אפשר להשתמש בקוד הקסדצימלי  או לרשום את השמות שלהם כמו Red, Blue, Yellow.

 

צבע רקע  (Background-Color)
התכונה Background-Color מתארת את צבע הרקע של אלמנט.

האלמנט <body> מכיל את כל התוכן של מסמך HTML. לכן, כדי לשנות את צבע הרקע של הדף כולו, התכונה background-color צריכה להיות מוחלת על האלמנט <body>.

אפשר ליישם צבעים על אלמנטים נוספים כולל כותרות וטקסט

body {
		background-color: #66ff6d; /*ירוק*/
	}
 
	h1 {
		color: #f8ea06;/*צהוב*/
		background-color: #04fcf3; /*תכלת*/
	}

 

תמונת רקע (Background-image)
התכונה Background-image משמשת להוספת רקע לאתר
להכנסת תמונה כתמונת רקע לדף אינטרנט, פשוט החל את המאפיין background-image ל- <body> ופרט את הנתיב לתמונה.

body {
		background-color: #66ff6d;
		background-image: url("image.gif");
	}
 
	h1 {
		color: #f8ea06;
		background-color: #04fcf3;
	}


מיקום תמונת רקע (Background-Position)
ברירת המחדל של תמונת רקע תהיה בפינה השמאלית העליונה של חלון הדפדפן. המאפיין Background-Position מאפשר לך לשנות ברירת מחדל זו ולמקם את תמונת הרקע בכל מקום שתבחר בחלון. אז בוא נגיד שאני רוצה את תמונת הרקע בחלק הימני התחתון של חלון הדפדפן.

body {
		background-color: #66ff6d;
		background-image: url("image.gif");
        background-repeat: no-repeat;
		background-attachment: fixed; /*קבוע*/
		background-position: right bottom;/*ימין*/

	}
 

או שאולי אני רוצה שזה יהיה במרכז ולא בצד ימין אז אני אעשה משהו כזה

body {
		background-color: #66ff6d;
		background-image: url("image.gif");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: 50% 25%;

	}


סיכום: בשיעור זה למדנו טכניקות חדשות שאינן אפשריות בשפת HTML
 

שיעור 4 - גופנים

בשיעור זה נלמד על גופנים וכיצד להשתמש בהם באמצעות CSS.

משפחת גופן - (Font-family)
סוג הגופן: רשימה של סוגי גופנים מופרדים בפסיקים. רושמים מספר גופנים מפני שלא בכל מחשב מותקנים כל הגופנים. הדפדפן משתמש בגופן הראשון מתוך הרשימה שמותקן גם במחשב הלקוח. אם אף אחד מהגופנים המבוקשים לא קיים, ישתמש הדפדפן בגופן ברירת המחדל של הדפדפן. 
דוגמה:
h1 {font-family:"times new roman", times, serif;} 
p {font-family:arial, helvetica, "sans serif"} 
body {font-family:"courier new", courier, monospace} 

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

	h1 {font-size: 52px;}
	h2 {font-size: 8pt;}
	h3 {font-size: 100%;}
	p {font-size: 1em;}
	

אז מה למדנו?
למדנו עכשיו על כמה מהאפשרויות המתייחסות לגופן. זכרו שאחד היתרונות הבולטים של CSS להגדרת גופן היא שבכל זמן נתון, אנחנו יכולים לשנות את הגופן לכל האתר שלנו במספר רגעים.

המשך המדריך בקרוב....

UVERworld

17/11/2017

המדריך ה1481041047 על CSS..... בכ"מ ח"ח על העבודה

cN3rd

17/11/2017

צוטט: 『 amanojaku』

המדריך ה1481041047 על CSS..... בכ"מ ח"ח על העבודה

עדיף שיהיו גזיליון מדריכים מגזיליון פוסטים זהים בסגנון "איך עושים X ב-CSS?".

בכל מקרה ח"ח על המדריך. אני מוסיף אותו ללינקייה הקטנה שלי (שכבר לא נעוצה יותר... תודה, הנהלה יקרה).

SleaderS

17/11/2017

יש הרבה מדריכים זה לא נחוץ...

TsUNaMy WaVe

17/11/2017

וואו, זה ממש מדריך מהבסיס שמלמד אשכרה CSS ולא איך להתעסק עם זה בעקיפין, ח"ח!

AltairChan

17/11/2017

צוטט: SleaderS

יש הרבה מדריכים זה לא נחוץ...

אכפת לך להפסיק להיות אנטי? זה מדריך נהדר ותהיה בטוח שהוא שימושי יותר מערכות מוכנות שאומרות לך איך לעשות X Y וZ.

Eliran

17/11/2017

יישר כוח על המדריך!

SleaderS

17/11/2017

צוטט: AltairChan

אכפת לך להפסיק להיות אנטי? זה מדריך נהדר ותהיה בטוח שהוא שימושי יותר מערכות מוכנות שאומרות לך איך לעשות X Y וZ.

אני מצטער אם פרשתם לא נכון... זה היה בצחוק.

המדריך מעולה

HK]XDarkXNetX]

17/11/2017

מדריך נפלא, כל הכבוד על העבודה!!

UVERworld

17/11/2017

צוטט: cN3rd

עדיף שיהיו גזיליון מדריכים מגזיליון פוסטים זהים בסגנון "איך עושים X ב-CSS?".

בכל מקרה ח"ח על המדריך. אני מוסיף אותו ללינקייה הקטנה שלי (שכבר לא נעוצה יותר... תודה, הנהלה יקרה).

זה לא משנה שיהיה גזיליון מדריכים, כי מי שפותח פוסטים איך עושים X ב-CSS אובייסלי לא יודע לחפש מדריכים/מתאמץ לכם עדיין יפתחו עוד 1928427410247 פוסטים לצידי המדריכים...

אז ה"עדיף" שלך חלום שלא יתגשם

FL@WER B@Y

17/11/2017

צוטט: 『 amanojaku』

המדריך ה1481041047 על CSS..... בכ"מ ח"ח על העבודה

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

צוטט: cN3rd

עדיף שיהיו גזיליון מדריכים מגזיליון פוסטים זהים בסגנון "איך עושים X ב-CSS?".

בכל מקרה ח"ח על המדריך. אני מוסיף אותו ללינקייה הקטנה שלי (שכבר לא נעוצה יותר... תודה, הנהלה יקרה).

תודה^^

צוטט: SleaderS

יש הרבה מדריכים זה לא נחוץ...

לא אין מדריכי CSS רק איך לעצב פרופיל ב CSS וגם אותו אף אחד לא מבין רק עושים עתק הדבק

צוטט: TsUNaMy WaVe

וואו, זה ממש מדריך מהבסיס שמלמד אשכרה CSS ולא איך להתעסק עם זה בעקיפין, ח"ח!

תודה לך><

 ותודה לכולם!!!!

SleaderS

17/11/2017

צוטט: L.Lawliet

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

תודה^^

לא אין מדריכי CSS רק איך לעצב פרופיל ב CSS וגם אותו אף אחד לא מבין רק עושים עתק הדבק

תודה לך><

 ותודה לכולם!!!!

זה היה בצחוק אל תקח את זה ברצינות

UVERworld

17/11/2017

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

"המדריך ה1481041047 על CSS", בוא נתחיל מזה שזה כן נכון, המדריך על CSS, אז לומר "לא נכון." זו טעות.
בנוסף, אני בטוח שקיימים מדריכים על CSS עצמו ועל עיצוב הפרופיל, אבל לרוב האתר יעניין תביצה השמאלית כל הרקע של הCSS וHTML כי הם בסה"כ רוצים את התמונת אנימה ברקע, ולכן יהיה העדפה להעתק הדבק של "תבניות" מבלי להבין מאשר אשכרה ללמוד משהו חדש, *קהל היעד שלך ישראלים*

オル

12/12/2017

לא מצליח לי

Andro

16/04/2018

איך אני עושה שכל הרשימות יהיה בצבע כחול?

Kai Shang

16/04/2018

צוטט: オル

לא מצליח לי

גם לי 

Hawk V2

17/04/2018

לא עובד 

Neymar

17/04/2018

צוטט: huskon

לא עובד 

תוכן

צוטט: オル

לא מצליח לי

מוכן לעשות לכם עיצוב לפרופיל בכיף שלחו לי תמונות שאתם אוהבים ואני יעשה לכם 

anime boy

15/08/2019

יא תותח. רק ממבט חטוף זה כבר נראה טוב. הסבר מפורט כמו שצריך והסבר מה זה הדבר הזה בכלל שדוקא הרבה לא מבינים בו בכלל - חוץ ממני יש עוד מסתבר;) 

אגב שמתי לב לכמה וכמה תגובות של "לא עובד" וכדו' אבל עדיין עצם זה שאתה מסביר על התוכנה כבר מועיל המון. 

תודה רבה לך ובהצלחה בהמשך! שיצא פצצה:)

עדכון: חח!!! יא תותח! קראתי את המדריך שלך רק פעם אחת וכבר הספקתי ללמוד איך להוסיף שורת פקודה חדשה! (זה היה הצבע של input. focused ששיך ל MainSearch~

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

 

תמונה של מה שעשיתי בתבנית בפרופיל וקישור למדריכים שהזכרתי, סתם למי שרוצה לדעת וחושב שאולי יועיל לו~
4ltrhr8.jpgהחץ הראשון מלמעלה זה ה MainSearch, והוא היה כבר מפני כן. מה שאני הוספתי זה את 2 החיצים השניים, ה input.focused ואת ה color 
קישור למדריכים:
[פרסום] ערכת עיצוב לפרופיל - משם לקחתי את התבנית של הפרופיל.