CSS הוא גיליון סגנונות מדורג, המהווה שפה לתיאור המראה של דפי אינטרנט. אחד היתרונות העיקריים של CSS הוא היכולת להחליף את פריסת הטבלה בפריסת בלוקים.
זה הכרחי
עורך קוד HTML
הוראות
שלב 1
צור את החסימה הראשונה. בצורה של HTML זה ייראה כמו תג div עם מזהה 'block01'. כאן, המזהה block01 מציין כי בתיאור CSS, כל המאפיינים של בלוק זה מוגדרים עבור בורר # block01.
שלב 2
תאר את החסימה ב- CSS. בסגנונות CSS, ציין את שם המזהה (# block01) ובסוגריים מתולתלים תאר את הפרמטרים שלו - רוחב, מיקום, קיזוז, צבע רקע וכו '. לדוגמה, זה עשוי להיראות כך: # block01 {width: 150px; גובה: 150 פיקסלים; עמדה: מוחלט; למעלה: 0px; משמאל: 0px; צבע רקע: ורוד}. תיאור זה מניח כי התיבה תהיה באורך 150 פיקסלים וברוחב של 150 פיקסלים, היא תמוקם בקשיחות בפינה השמאלית העליונה של המסמך, והרקע שלה יהיה בצבע ורוד.
שלב 3
תן לחסום מיקום יחסי. אם אינך משתמש במיקום מוחלט, אלא יחסית, בתיאור ה- CSS, תוכל למקם בלוקים לא עם הצמדה נוקשה לרשת קואורדינטות, אלא יחסית לבלוקים קיימים אחרים. לשם כך, שנה את מיקום הקוד: מוחלט; למעלה: 0px; משמאל: 0px לפי מיקום: קרוב משפחה; למעלה: 200 פיקסלים; משמאל: 100 פיקסלים.
שלב 4
תן לבלוק עיגול. ב- CSS, הצהרת רדיוס האחריות אחראית לכך. הוסף את הקוד הבא לגיליון הסגנונות שלך: גבול רדיוס: 8 פיקסלים. לחסום יהיו עכשיו פינות מעוגלות. אם ברצונך לעגל כמה פינות, תאר את הרדיוס בנפרד עבור כל אחת מהן: רדיוס הגבול: 8 פיקסלים 8 פיקסלים 0 פיקסלים 0 פיקסלים.
שלב 5
תן לחסום שבץ מוחי. כדי להדגיש את קווי המתאר של גוש עם קו דק, הוסף את הקוד הבא לתיאור ה- CSS שלו: גבול עליון: 1 פיקסלים מקווקו שחור. הוראה זו פירושה שגבול הבלוק יהיה שחור ועובי פיקסל אחד. במקרה זה, קו המתאר עצמו יוצג כקו מקווקו (מקווקו - קו מנוקד, מנוקד - נקודות, מלא - קו אחיד).
שלב 6
הגדר את מאפייני החסימה הנותרים. ציין בתיאור CSS באיזה גופן יש להשתמש לטקסט שבתוך הבלוק, מה צריך להיות גודל הגופן, היישור והכניסה מקצוות הבלוק. מאפיינים אלה מתוארים בהגדרות משפחת הגופן, גודל הגופן, יישור טקסט וריפוד.
שלב 7
אתה יכול להשתמש במאפיין float כדי להתאים אישית את הזרימה של בלוק אחד על פני אחר. אם תגדיר את זה ל"שמאל ", אז שאר האלמנטים יזרמו סביב הבלוק משמאל, ו"ימין" - מצד ימין. אם תגדיר את ערך הצף כ"אין ", יישור החסימה לא ייקבע. המאפיין הברור ב- CSS מונע את זרימת החסימה ימינה, שמאלה או שני הצדדים, ועוקף את הצהרת הציפה.
