cascading style sheets reference

תוכן מיוצר ב-CSS2

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

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

יש שני היבטים לייצר תוכן בעזרת CSS2 :

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

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

H1:before.

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

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

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

תוכן

מה הוא עושה?

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

ערכים אפשריים

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

BODY:after {
content: "The End";
display: block;
margin-top: 2em;
text-align: center;
}

ממקם את מחרוזת הטקסט "The End" בתחתית הדף כגוש במקום כאלמנט בשורה.

ערכיי מילות המפתח כוללים: לפתוח-ציטוט, לסגור-ציטוט, לא-לפתוח-ציטוט, לא-לסגור-ציטוט.

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

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

לא-לפתוח-ציטוט (no-open-quote) לא מכניס שום תוכן, אבל מגדיל את רמת המיקום (nesting) של הציטוטים.

לא-לסגור-ציטוט (no-close-quote) לא מכניס שום תוכן אך מוריד את רמת המיקום של הציטוטים.

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

סופר (counter)

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

יש שתי צורות של פונקציית הסופר:

להכניס סמנים לתוך מסמך כלשהוא. יש שתי צורות של פונקציית הסופר: צורת הסופר וצורת הסופרים. לפונקציית הסופר יש את צורת הסופר (identifier, list-style). המזהה ((identifier הוא שם הסופר שאת ערכו אנו רוצים להכניס כאשר רשימת הסגנון (לא חובה) מגדירה איזה סגנון סופר אתם רוצים (למשל, roman באותיות קטנות). סגנונות אלה הם זהים לאלה עבור אלמנטים של type list-style.כאשר הדפדפן נתקל בפונקציית הסופר, זה מגדיר את הערך של סופר זה בנקודה זו של המסמך, ואז מכניס אותו אל תוך המסמך בסגנון הנבחר. כיצד הוא מחליט על ערך זה? בידקו את החלק המדבר על סופרים (counters) בהמשך לגבי פרטים נוספים.

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

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

A:after {
content: attr(title)
}

ניתן להשתמש בזה בשילוב עם חוקי מדיה :

@media all
{A:after{
content: attr(HREF)
}
}

ערכים של ברירת מחדל

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

האם זה עובר בירושה?

? האלמנט אינו יורש את מאפיין התוכן של האלמנט שמכיל אותו.

ציטוטים

מה הם עושים?

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

ערכים אפשריים

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

/* Specify pairs of quotes for two levels in two languages */
Q:lang(en) { quotes: '"' '"' "'" "'" }
Q:lang(fr) { quotes: "«" "»" "<" ">" }

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

ערכים של ברירת מחדל

אם לא מגדירים ציטוטים, ערך ברירת המחדל מוגדר ע"י הדפדפן.

האם זה עובר בירושה?

אלמנט מסויים יורש את מאפיין הציטוט של האלמנט שמכיל אותו.

סופרים ומאפייני סופרים

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

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

h1:before {content: counter(chapter)}

זה אומר לדפדפן להוסיף את הערך של הסופר שנקרא "chapter" לפני כל כותרת של רמה 1. . אך איזה ערך הוא זה? ובכן, אם אנו לא קובעים את הערך בעזרת המאפיינים שנדון בהם בהמשך, הערך של הסופר יהיה 0. כך שכל כותרת של רמה 1 לפניה יבוא 0. אנו לא כל-כך רוצים זאת. אנו רוצים משהו בכיוון של הכותרת הראשונה שלפניה יבוא 1, לפני הכותרת השנייה יבוא 2 וכו'. כדי לעשות זאת אנו נשתמש במאפיין counter-increment. זה מגדיל את ערך הסופר בערך נתון (ניתן לקפוץ למעלה בשניים ולמטה באחד בשימוש הערך 1- כמו גם פשוט להגדיל באחד)

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

h1 {counter-increment: chapter 1}

ניתן כמובן לשלב את שני הכללים לכלל פשוט זה

h1:before {content: counter(chapter);
counter-increment: chapter 1
}

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

מה זה נותן לנו להשיג? ובכן, עכשיו, במקום לסמן את כל הכותרות של כל הפרק (chapter) במסמך המבוסס על ה-HTML שלנו, באופן הבא :

<h1>1.אבסטרקטי</h1>
...
<h1>2.מבוא</h2>

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

זה מה שעושים :

h1:before {content: counter(chapter);
counter-increment: chapter 1
/* this is the same as the example above */
counter-reset: subsection 0
}

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

h2:before {content: counter(chapter) "." counter(subsection);
counter-increment: subsection 1
}

זה מגדיל את הסופר שנקרא תת חלק, ואז זה מכניס מיספור בצורה "2.5" לפני הטקסט של הכותרת.

סופרים ממוקמים (nested)

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

כאן יש את הכלל של דף הסגנון שמייצר את הסופר :

OL { counter-reset: item } LI { display: block } LI:before { content: counter(item) ". "; counter-increment: item }

והנה HTML:

<OL>               <!-- (set item[0] to 0          -->
    <LI>item         <!--  increment item[0] (= 1)   -->
    <LI>item         <!--  increment item[0] (= 2)   -->
      <OL>           <!--  (set item[1] to 0         -->
        <LI>item     <!--   increment item[1] (= 1)  -->
        <LI>item     <!--   increment item[1] (= 2)  -->
        <LI>item     <!--   increment item[1] (= 3)  -->
          <OL>       <!--   (set item[2] to 0        -->
            <LI>item <!--    increment item[2] (= 1) -->
          </OL>      <!--   )                        -->
          <OL>       <!--   (set item[3] to 0        -->
            <LI>     <!--    increment item[3] (= 1) -->
          </OL>      <!--   )                        -->
        <LI>item     <!--   increment item[1] (= 4)  -->
      </OL>          <!--  )                         -->
    <LI>item         <!--  increment item[0] (= 3)   -->
    <LI>item         <!--  increment item[0] (= 4)   -->
  </OL>              <!-- )                          -->
  <OL>               <!-- (reset item[4] to 0        -->
    <LI>item         <!--  increment item[4] (= 1)   -->
    <LI>item         <!--  increment item[4] (= 2)   -->

  </OL>              <!-- )                          -->

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

בקיצור, הדבר פשוט כמו הסופרים (item, ".")

Counter-reset (קביעה מחדש של הסופר)

מה הוא עושה?

מאפיין ה-counter-reset קובע את הערך של סופר בעל שם.

ערכים אפשריים

Counter-reset מקבל את השם של הסופר שאותו הוא צריך לקבוע מחדש. שמות הסופרים הם מזהים, ומכילים אותיות, מספרים ומקפים. הם לא יכולים להתחיל עם מספרים או עם מקפים.

ה- counter-reset מקבל גם מספר שלם כבחירה שלפיו הוא קובע את הערך של הסופר המזוהה. Counter-reset יכול גם לקבל רשימה של מזהים ומספרים שלמים אפשריים, כדי לקבוע את הערך של מספר סופרים באופן סימולטני. זה לא רק מותרות. בגלל ה- cascading, הדוגמא הבאה תקבע רק את הסופר שנקרא counter2.

H1 { counter-reset: counter1 -1 }
H1 { counter-reset: counter2 99 }

כדי לקבוע מחדש את שניהם, חייבים להשתמש בדבר הבא :

H1 { counter-reset: counter1 -1 counter2 99 }

counter-reset יכול להיקבע גם כ-0.

ערכים של ברירת מחדל

אם counter-reset אינו מוגדר, ערך ברירת המחדל שלו הוא 0.

האם זה עובר בירושה?

? אלמנט מסויים אינו יורש את מאפיין ה-counter-reset של האלמנט שמכיל אותו.

Counter-increment (הגדלת הסופר)

מה זה עושה?

מאפיין ה-counter-increment מגדיל את הערך של סופר בעל שם במספר מסויים.

ערכים אפשריים

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

Counter-increment יכול לקבל גם רשימה של מזהים ומספרים שלמים אפשריים כדי לקבוע את הערכים של מספר סופרים באופן סימולטני. אין אלה מותרות. בגלל ה-cascading הדוגמא הבאה תקבע רק את הסופר שנקרא counter2.

H1 { counter-increment: counter1 -1 }
H1 { counter-increment: counter2 99 }

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

H1 { counter-increment: counter1 -1 counter2 99 }

Counter-increments יכולים גם להיקבע ל-0.

ערכים של ברירת מחדל

אם counter-increment אינו מוגדר, ערך ברירת המחדל שלו הוא 0.

האם זה עובר בירושה?

? אלמנט מסויים אינו יורש את מאפיין ה-counter-increment של האלמנט שמכיל אותו.

שלב הבא

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