תיבת CSS: מאולתר ותוצאה

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

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

תיאור תחביר

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

תיאור נעשה ישירות בקוד הדף להכניס סגנון או בקובץ נפרד, מכוון אליו פניית LINK. תחביר:

#name {נכס: ערך; נכס: ערך; נכס: ערך; ...}

או

.name {נכס: ערך; נכס: ערך; נכס: ערך; ...}

השם יכול להיות גם עמ ', גוף, html, שולחן, TD ..., כי הוא שמו של תג HTML-סימון. יכול להיות מחובר ישירות עם התיאור של אלמנט הסגנון.

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

הפרמטרים העיקריים

למעשה רכיב CSS מסגרת סגנון מיוצג (בסגנון גבול), צבע (border-color), רוחב (רוחב גבול). זה יכול להיות כל סיכם בנכס אחד - הגבול. אתה יכול לתאר כל גבול המסגרת (border-top, border-bottom, border-left, border-right) באופן עצמאי.

מסגרת CSS המתוארים על ידי הכללים המקובלים של גיליונות סגנון מדורגים:

גבול: 3px;
border-color: red;
בסגנון גבול: כפול מקווקו מקווקו מוצק.

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

border-width: 1px 2px 4px -8 פיקסל;
border-color: blue;
border-style: מנוקד.

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

border-color: שחור ירוק אדום כחול;

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

גבול: מוצק ירוק 1px;
border-radius: 0px 4px -8 פיקסל 12px;
-moz-border-radius: 0px 4px -8 פיקסל 12px;
-webkit-border-radius: 0px 4px -8 פיקסל 12px;

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

העובי של המסגרת ותכליתו

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

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

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

בחוץ תחת

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

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

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