כיצד לעצב דף באמצעות CSS?
לדוגמא לדף זה אין CSS. אין לי CSS. אין לי גם CSS. עם זאת בעזרת CSS תוכלו ליצור זאת.
CSS (Cascading Style Sheets) היא שפת אינטרנט המשמשת בשותפות עם HTML או XHTML. הוא משמש להוספת אפקט וסגנון מצגות לדפי אינטרנט המקודדים ב- (X) HTML (הכוונה הן ל- HTML והן ל- XHTML). CSS היא שפה פשוטה למדי ללמוד ולהשתמש.
CSS יכול ליצור סגנונות ואפקטים מדהימים בדפי אינטרנט. אמנם סגנון זה פשוט אם ניתן ליצור דפי אינטרנט יפהפיים בשילוב עם רבים אחרים.
סגנון CSS מורכב משלושה חלקים מרכזיים.
חיוני שיהיה לך ידע קודם ב- HTML לפני שתלמד CSS. מאמר מדריך טוב ללמוד HTML בסיסי הוא לכתוב דף פשוט ב- html. אתרי אינטרנט טובים W3Schools, codecademy, ו HTML הדרכות.
- 1להבין את האנטומיה של סגנון CSS. CSS היא שפה פשוטה ופשוטה. סגנון CSS מורכב משלושה חלקים עיקריים. קח את קוד ה- CSS הזה: p {color: red; גודל הגופן: 2em;}. סגנון זה הופך את כל הפסקאות (הנתונים הכלולות בתגי <p>) לאדומים ומגדילים את גודל הגופן. השלושה החלקים נקראים בוררים, בלוק ההכרזה, ואת ההצהרות.
- בורר בדוגמה שלנו הוא p לפני בסד הפתיחה. בורר מגדיר איזה חלק מה- HTML יקבל את הסגנון (במקרה זה פסקאות HTML).
- בלוק ההצהרה בדוגמא שלנו הוא מכיל ממאחזו הפתיחה לקורת הסגירה. חסימת ההצהרה מורכבת מהצהרות לסגנון זה. סגנון יכלול חסימת הצהרה אחת בלבד.
- לדוגמא שלנו יש למעשה שתי הצהרות. הם צבעוניים: אדומים; וגודל הגופן: 2em;. הצהרות מספרות מה ברצונך לעשות עם האלמנט המוגדר בבורר הסגנון. אתה יכול לקבל כמה הצהרות שאתה רוצה בסגנון.
- 2צור דף סגנון עם סגנונות עבור כל רכיב בדף שתרצה לעצב.
- 3השתמש בהצהרות. בסגנון CSS, הצהרות הן מה שמגדיר איזה חלק מהאלמנט ברצונך לעצב ואיך הוא אמור להופיע. לדוגמא כדי להפוך את הטקסט לאדום ההצהרה היא צבע: אדום; (דוגמה זו למעשה משתמשת בתג גופן HTML מכיוון שעורך המדריך אינו תומך בחלק מ- CSS הדרוש). הקפד לסיים את ההצהרות עם נקודה-פסיק.
חלק 1 מתוך 6: הצהרות
הצהרות נכנסות לחסימת ההצהרה בסגנון נתון.
- 1כמה הצהרות נפוצות הן:
- צבע: משנה את צבע הגופן כך. ערכים אפשריים: כחול, אדום או קוד hex.
- משקל גופן: משנה גופן מודגש, נטוי וכו '. ערכים אפשריים: מודגש, נטוי.
- יישור טקסט: יישור טקסט. ערכים אפשריים: ימין, שמאל, מרכז.
- גבול: משנה או יוצר גבול סביב האלמנט שנבחר. ערך אפשרי יכול להיות גבול: 1px אדום מלא. זה יוצר גבול של 1 פיקסל בגודל מלא ואדום.
- שוליים: זה יוצר שוליים סביב האלמנט שנבחר. ערך אפשרי הוא שוליים-שמאל: 5 פיקסלים. זה יוצר מוסיף חמישה פיקסלים של שטח ריק לראש האלמנט.
- צבע רקע: משנה את הרקע. ערכים אפשריים: קוד אדום, שחור והקס.
- 2שימו לב שמדובר בהצהרות פשוטות מאוד. אתרים רבים משתמשים בהצהרות מורכבות יותר לצורך מיצוב בין היתר.
חלק 2 מתוך 6: גליונות סגנון
- 1צור גיליונות סגנון. גיליונות סגנון מורכבים מסגנונות רבים ביחד. ישנם שלושה סוגים של גליונות סגנון:
- גיליונות סגנון חיצוניים הם קבצי טקסט השמורים באמצעות סיומת.css. הם מקושרים למסמך HTML באמצעות התג <link>.
- גליונות סגנון פנימיים הם סגנונות המוגדרים בתג <script>. הם נוצרים במסמך HTML.
- סגנונות מוטבעים הם סגנונות המוצהרים בתג שהם חלים עליהם. לדוגמא <p style = "color: red"> הוא סגנון מוטבע המוצהר בתג שהוא מתייחס אליו.
- 2שים לב שאנשים רבים ממליצים להשתמש בגיליונות סגנון חיצוניים. אמנם זה נוהג טוב אך קל יותר להשתמש בגיליונות סגנון פנימיים כאשר אתה לומד CSS. לא מומלץ להשתמש בסגנונות מוטבעים.
חלק 3 מתוך 6: שימוש בגיליונות סגנונות חיצוניים ופנימיים
- 1לקישור לגיליון סגנון חיצוני, הוסף <link rel = "stylesheet" href = "LmNzcw ==" />. תג זה משמש בראש המסמך. לאחר קישור לגיליון סגנון הוא נמצא בשימוש לאורך כל הדף. תכונת href מגדירה את מיקום הקובץ ואת שם גיליון הסגנון שלך. יש לשמור את כל גיליונות הסגנון החיצוניים באמצעות סיומת the.css וליצור אותם בעורך טקסט כגון פנקס רשימות.
- 2ליצירת גיליון סגנונות פנימי, כלול כאן <style type = "text / css"> סגנונות </ script>. כל הסגנונות נכנסים בין שני תגי הסקריפט. לדוגמא הנה דף פשוט המשתמש בסגנונות פנימיים כדי להפוך את כל הפסקאות לירוקות.
חלק 4 מתוך 6: css ותג div
- 1CSS הוא כלי רב עוצמה למיקום אלמנטים על המסך. הוא יכול להשתמש בסגנונות ובתג div ליצירת סרגלות צדדיות ופריסות מרובות עמודות. לדוגמא לדף זה אין CSS.
אין לי CSS
אין לי גם CSS
עם זאת בעזרת CSS תוכלו ליצור זאת:
עכשיו יש לי CSS
צור דף סגנון עם סגנונות עבור כל רכיב בדף שתרצה לעצב.
יש לי גם CSS עכשיו
- 1שים לב שלמרות שמדובר בשינוי בסיסי מאוד, ניתן לשלב אותו עם יותר CSS ו- HTML כדי ליצור פריסת שתי עמודות יפה.
חלק 5 מתוך 6: הערות
בסגנון CSS, הצהרות הן מה שמגדיר איזה חלק מהאלמנט ברצונך לעצב ואיך הוא אמור להופיע.
הערות CSS נראות כך: / * תגובה * /. מומלץ לכלול הערות בקוד שלך כדי לשפר את הקריאה.
חלק 6 מתוך 6: הרכבת הכל
- 1גיליון סגנונות CSS פנימי שהושלם יחד עם מסמך HTML ייראה כך:
- 2גיליון סגנון זה יוצר שוליים של 15 פיקסלים משמאל לכל הפסקאות. ואז הוא מוסיף גבול של 5 פיקסלים משמאל לפסקאות. לבסוף זה הופך אותם לכחול כהה. בסך הכל דף זה ייראה כך:
אני פסקה. עם CSS אתה מקבל גבול שמאלה כמו גם שינוי צבע.
- השתמש בהערות במידת האפשר כדי להגביר את הקריאות.
- צא ולמד עוד CSS! מאמר זה לא יעמיד פנים שלימד אותך כל מה שיש לדעת.
- התחל עם הסלקטורים של הרמה העליונה
- החל את הפרמטרים בסגנון אוניברסלי
- כתוב את כל הכללים עבור כל בורר באותו מקום
- קיבץ את הסלקטורים עם אותם פרמטרים ומשמעויות
- כלול תמיד נקודה-פסיק בסוף ההצהרה.
- עורך טקסט כמו פנקס רשימות.
- דפדפן אינטרנט.
- מחשב.
שאלות ותשובות
- אם אכתוב גם CSS וגם HTML בעורך אחד האם זה יעבוד?כן, כל עוד כל ה- CSS נמצא באלמנט.
- אם אשתמש ב- CSS פנימי וחיצוני, האם זה יעבוד?אתה יכול להשתמש בשניהם. משתנה לפי סדר הזמנתם, אחד יכול להחליף את השני. מכיוון שבדרך כלל נמצא CSS פנימי בתוך שיחת ה- CSS החיצונית שלך, אתה צריך להיות מודע למיקום. אם ה- CSS הפנימי שלך נמצא אחרי הקישור החיצוני שלך, ה- CSS הפנימי שלך יקבל עדיפות.
