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

   
|!|

סגור את ההודעה
 
כלים לאשכול תצורת הצגה
ישן 05-10-05, 15:45   # 1
somebody
A Al Alm Almo Almog!
תודה על תרומתך!
 
somebody's Avatar
 
מיני פרופיל
תאריך הצטרפות: Oct 2005
מיקום: hadera CiTy
גיל: 33
הודעות: 4,005
שלח הודעה באמצעות MSN אל somebody

somebody לא מחובר  

עיצוב טקסט ב Css

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

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

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

עכשיו אני אדבר על עיצוב טקסט ע"י CSS.
התווים העיקריים בעיצוב טקסט הינם:
font-size-גודל הטקסט ב פיקסלים(px)
color-צבע הטקסט
font-family-פונט הטקסט, לדוגמא אריאל, דויד וכו..
מה שטוב בזה, זה שאפשר לשלב מספר פונטים ביחד, מה שאומר שאם נגיד נעשה:
arial,david
אז נקבל מעין פונט ביניים כזה מעורב בדויד ואריאל.
font-weight-רוחב הטקסט כאשר bold(מודגש) הוא הרחב ביותר, ואפשר לעשות אץ רוחה ה טקסט כ 100 שזה הכי צר ולעשות כ 200, 300 וככה אלה כאשר כל פעם זה נעשה רחב ורחב יותר.
text-align-קובע את מיקום הטקסט, שלושה אפשריות : center,left,right.
חשוב לזכור! text-align קובע אך ורק את מיקום הטקסט בעמוד! לא מקום של אוביקטים אחרים לדוגמא טבלה.
רק קספלוור שכמו שאמרתי לא ממש מציג בתורה תקינה יישר איתו למרכז גם טבלה.
למרכוז טבלה יש "אוביקט" אחר.
text-decoration-עיצוב הטקסט, זאת אורמת קו תחתון, קו חוצה וכו..
ישנם מספר אפשרויות:
underline-קו תחתון
line-through-קו למעל לטקס ומתחתיו
none-ללא קו, משמש מתי שרותים לעשות קישור ללא קו מעליו.
אלו השימושיים ביותר כמובן שיש יותר אפשרויות.
text-shadow-צל לטקסט, מקבל את צבע הצל אחריו.
direction- "אוביקט" זה לא משמש רק לטקסט אלה לא כל מה שקשור לעמוד.
מה שהוא עושה זה להגיד לדפדפן אם העמוד כתוב מימין לשמאל או משלמאל לימין וככה הדפדפן יסדר את העמוד לפי מה שהוגדר לו.
מה שהוא מקבל זה : rtl משמאל לימין (לדוגמא טקסט עברי מוגדר כrtl) או ltr מימין לשמאל (טקסט אנגלי וכו.. מוגדר כ ltr).


כיצד לכתוב זאת בעמוד?.
אז ככה "אוביקטים" אלו מוצבים בתוך "אוביקט" אחר בשם style אשר אותו ניתן להציב כמעת בכל תג אבל הכי שימושי והכי ממומץ זה להציב אותו בתוך div או span.

dבתוך div ניתן להציג כמעת כל אוביקט אפשרי ךדוגמא text-align שאותו לא ניתן להציב ב style שנימצא ב span.
)
חשוב לזכור!
כאשר עושים div בטקסט, הטקסט ירד שורה!(ישנה דרך לבטל את זה אבל לא נדבר עליה במאמר זה.).
וspan לא מוריד שורה.

עכשיו כיצד כותבים זאת בעמוד?
ככה כותבים:
PHP קוד:

<divspan(&#1500;בחור או span או div, לפי המצב הקיים) style="האוביקט הרצוי:ערך ל"אוביקט";">textdssdsaas</div/span> 
פירוט קצר.
div או span בוחרים לפי המצג הקיים באותו רגע לפי מה שהסברתי למעלה.
את האוביקטים מציבים בתוך style="
ולאחר סיום כתיבת כל האוביקטים סוגרים את ה -"(מרכאות).

ערך של אוביקט בסויים כותבתים ככה.
נקודודתים-הערך-נקודה פסיק.
לדוגמא:
PHP קוד:
style="font-family:arial;font-size:16px;color:#000000;" 
ולא לשכוח להציב את ה style בתוך תג div או span.
כמובן שלא חובה לשים בפעם אחת את כל האוביקטים אלה לשים נגיד רק הדגשה או רק לשנות צבע וכו..

זהו לבנתיים(:
__________________
דוא"ל: almog.zimel ב ג'מייל נקודה קום
מסנג'ר: almog שטרודל freetopsite נקודה co נקודה il


Last edited by somebody; 05-10-05 at 15:56..
 
ישן 05-10-05, 15:46   # 2
somebody
A Al Alm Almo Almog!
תודה על תרומתך!
 
somebody's Avatar
 
מיני פרופיל
תאריך הצטרפות: Oct 2005
מיקום: hadera CiTy
גיל: 33
הודעות: 4,005
שלח הודעה באמצעות MSN אל somebody

somebody לא מחובר  

זה יצא טיפה מחורבש הדוגמאות בכלל שהשתמשתי גם בעיברית וגם באנגלית אני מקווה שתבינו
__________________
דוא"ל: almog.zimel ב ג'מייל נקודה קום
מסנג'ר: almog שטרודל freetopsite נקודה co נקודה il

 
ישן 05-10-05, 15:55   # 3
ido_gold
חבר בקהילה
 
מיני פרופיל
תאריך הצטרפות: Oct 2005
הודעות: 92

ido_gold לא מחובר  

לא קראתי הכל אבל מצאתי טעות קטנה, אם אתה עושה arial,david זה לא עושה פונט ביינים משולב, אלא משתמש בdavid אם אין לך את arial. (נראה לי לפחות.. : \)
__________________
עידו.
 
ישן 05-10-05, 16:09   # 4
somebody
A Al Alm Almo Almog!
תודה על תרומתך!
 
somebody's Avatar
 
מיני פרופיל
תאריך הצטרפות: Oct 2005
מיקום: hadera CiTy
גיל: 33
הודעות: 4,005
שלח הודעה באמצעות MSN אל somebody

somebody לא מחובר  

חח יכול להיות..
לא יודע אבל שאני עושה arial,david יוצא לי טקסט שהוא לא david ולא אריאל...
אני שם אותם (את שלושתם) אחת ליד השני וזה לא דומה אחד לשני, על סמך זה עשיתי יכול להיות שטעיתי, אני לא רגיל לכתוב מדריכים
בגלל זה כתבתי פה או איפה שהוא לא זזוכר תקנו אותי אם טעיתי
__________________
דוא"ל: almog.zimel ב ג'מייל נקודה קום
מסנג'ר: almog שטרודל freetopsite נקודה co נקודה il

 
ישן 05-10-05, 16:31   # 5
Inuyasha
חבר בקהילה
 
מיני פרופיל
תאריך הצטרפות: Oct 2005
הודעות: 98

Inuyasha לא מחובר  

נחמד, תודה רבה.
 
ישן 05-10-05, 16:43   # 6
ido_gold
חבר בקהילה
 
מיני פרופיל
תאריך הצטרפות: Oct 2005
הודעות: 92

ido_gold לא מחובר  

הרגע ניסיתי, הוא קודם כל בוחר את האפשרות הראשונה, ואם אין לך את הפונט הזה במחשב אז הוא עובר לאפשרות הבאה.
__________________
עידו.
 
ישן 05-10-05, 17:00   # 7
somebody
A Al Alm Almo Almog!
תודה על תרומתך!
 
somebody's Avatar
 
מיני פרופיל
תאריך הצטרפות: Oct 2005
מיקום: hadera CiTy
גיל: 33
הודעות: 4,005
שלח הודעה באמצעות MSN אל somebody

somebody לא מחובר  

לא יודע כי בפיירפוקס שלי זה מראה לי אחרת.
זה משלב בנייהם...
__________________
דוא"ל: almog.zimel ב ג'מייל נקודה קום
מסנג'ר: almog שטרודל freetopsite נקודה co נקודה il

 
ישן 09-10-05, 19:13   # 8
liorwohl
חבר פורום
 
liorwohl's Avatar
 
מיני פרופיל
תאריך הצטרפות: Oct 2005
מיקום: החור שנקרא פ"ת
גיל: 33
הודעות: 94
שלח הודעה באמצעות ICO אל liorwohl שלח הודעה באמצעות MSN אל liorwohl

liorwohl לא מחובר  

טוב עכשיו אני יתקן אותך

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

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

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

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

עכשיו אני אדבר על עיצוב טקסט ע"י CSS.
התווים העיקריים בעיצוב טקסט הינם:
font-size-גודל הטקסט ב פיקסלים זה לא רק פיקסלים, המתכנת קובע את יחידת המידה, יש PX (פיקסלים) CM (סנטימטרים) IN (אינצ'ים) ויש עוד כמה שאני לא יודע מה הפירוש שלהם EX, EM, ואולי עוד
וכמובן יש %
color-צבע הטקסט
font-family-פונט הטקסט, לדוגמא אריאל, דויד וכו..
מה שטוב בזה, זה שאפשר לשלב מספר פונטים ביחד, מה שאומר שאם נגיד נעשה:
arial,david

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

font-weight-רוחב הטקסט כאשר bold(מודגש) הוא הרחב ביותר, ואפשר לעשות אץ רוחה ה טקסט כ 100 שזה הכי צר ולעשות כ 200, 300 וככה אלה כאשר כל פעם זה נעשה רחב ורחב יותר.
text-align-קובע את מיקום הטקסט, שלושה אפשריות : center,left,right.
חשוב לזכור! text-align קובע אך ורק את מיקום הטקסט בעמוד! לא מקום של אוביקטים אחרים לדוגמא טבלה.
רק אקספלורר שכמו שאמרתי לא ממש מציג בתורה תקינה יישר איתו למרכז גם טבלה.
למרכוז טבלה יש "אוביקט" אחר.

כדי למרכז טבלה בדפדפנים שעובדים לפי תקן, margin:auto לטבלה
באקספלורר text-align:center לתגית שמכילה את הטבלה.
וזה לא רק לטבלאות זה גם לטפסים ודברים כאלה.. כל מה שהוא block ולא inline

text-decoration-עיצוב הטקסט, זאת אורמת קו תחתון, קו חוצה וכו..
ישנם מספר אפשרויות:
underline-קו תחתון
line-through-קו למעל לטקס ומתחתיו
none-ללא קו, משמש מתי שרותים לעשות קישור ללא קו מתחתיו.
אלו השימושיים ביותר כמובן שיש יותר אפשרויות.
text-shadow-צל לטקסט, מקבל את צבע הצל אחריו. אני לא יודע אם יש דפדפן שתומך בזה, אבל מה שבטוח, לא IE.
direction- "אוביקט" זה לא משמש רק לטקסט אלה לא כל מה שקשור לעמוד.
מה שהוא עושה זה להגיד לדפדפן אם העמוד כתוב מימין לשמאל או משלמאל לימין וככה הדפדפן יסדר את העמוד לפי מה שהוגדר לו.
מה שהוא מקבל זה : rtl משמאל לימין (לדוגמא טקסט עברי מוגדר כrtl) או ltr מימין לשמאל (טקסט אנגלי וכו.. מוגדר כ ltr).


כיצד לכתוב זאת בעמוד?.
אז ככה "אוביקטים" אלו מוצבים בתוך "אוביקט" אחר בשם style אשר אותו ניתן להציב כמעת בכל תג אבל הכי שימושי והכי ממומץ זה להציב אותו בתוך div או span.

dבתוך div ניתן להציג כמעת כל אוביקט אפשרי ךדוגמא text-align שאותו לא ניתן להציב ב style שנימצא ב span.
)
חשוב לזכור!
כאשר עושים div בטקסט, הטקסט ירד שורה!(ישנה דרך לבטל את זה אבל לא נדבר עליה במאמר זה.).
וspan לא מוריד שורה.

עכשיו כיצד כותבים זאת בעמוד?
ככה כותבים:
PHP קוד:

<divspan(לבחור או span או divלפי המצב הקייםstyle="האוביקט הרצוי:ערך ל"אוביקט";">textdssdsaas</div/span
פירוט קצר.
div או span בוחרים לפי המצג הקיים באותו רגע לפי מה שהסברתי למעלה.
את האוביקטים מציבים בתוך style="
ולאחר סיום כתיבת כל האוביקטים סוגרים את ה -"(מרכאות).

ערך של אוביקט בסויים כותבתים ככה.
נקודודתים-הערך-נקודה פסיק.
לדוגמא:
PHP קוד:
style="font-family:arial;font-size:16px;color:#000000;" 
ולא לשכוח להציב את ה style בתוך תג div או span.
כמובן שלא חובה לשים בפעם אחת את כל האוביקטים אלה לשים נגיד רק הדגשה או רק לשנות צבע וכו..

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

עושים בקובץ חיצוני
או בHEAD.

ומי שרוצה ללמוד עוד ואיך עושים קובץ חיצוני וכל מה שאמרתי:
http://webmaster.org.il/guide.asp?subject=css

זהו לבנתיים(:
__________________


www.Dogri.net - הפורטל שלי

אני webuild מהוסטס הישן

 
ישן 09-10-05, 21:24   # 9
somebody
A Al Alm Almo Almog!
תודה על תרומתך!
 
somebody's Avatar
 
מיני פרופיל
תאריך הצטרפות: Oct 2005
מיקום: hadera CiTy
גיל: 33
הודעות: 4,005
שלח הודעה באמצעות MSN אל somebody

somebody לא מחובר  

ציטוט:
נכתב במקור על ידי liorwohl
טוב עכשיו אני יתקן אותך
חחח אתה כי מבין בזה
ואמרתי טקסט..
שחכתי להתחיל מהבסיס.

אז זה בלי ה class.
__________________
דוא"ל: almog.zimel ב ג'מייל נקודה קום
מסנג'ר: almog שטרודל freetopsite נקודה co נקודה il

 
סגור את ההודעה

חברים פעילים הצופים באשכול זה: 1 (0 חברים ו- 1 אורחים)
 

כלים לאשכול
תצורת הצגה

חוקי פירסום
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is מופעל
סמיילים הם מופעל
[IMG] קוד מופעל
קוד HTML מכובה

קפיצה לפורום


כל הזמנים הם GMT +2. הזמן כעת הוא 22:12.

מופעל באמצעות VBulletin גרסה 3.8.6
כל הזכויות שמורות ©
כל הזכויות שמורות לסולל יבוא ורשתות (1997) בע"מ