בוא ניתן דוגמה לגיליון סגנונות - צור קובץ style.cssותכתוב את הסגנונות:

body ( font-family: Arial, Verdana, Sans-serif; /* משפחת גופנים */ font-size: 12pt; /* גודל גופן ראשי בנקודות */ רקע-צבע: #f0f0f0; /* צבע רקע של דף אינטרנט * / color: #000000; /* צבע גוף טקסט */ ) h1 ( צבע: #a52a2a; /* צבע כותרת */ גודל גופן: 24pt; /* גודל גופן בנקודות */ font-family: Georgia, Times, serif ; /* משפחת גופנים */ משקל גופן: רגיל /* סגנון טקסט רגיל */ )

כאן קבענו סגנונות לגוף העמוד ולגבי הכותרת

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

עכשיו בואו נחבר את גיליון הסגנונות שלנו לאתר:

שלום עולם!

זה העמוד הראשון שלי עם סגנונות CSS

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

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

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

אתה יכול להקצות סגנון שנקרא chapka_saita, ואז מחלקה מוקצית למיכל בעמוד

תוֹכֶן

. גיליון הסגנונות מפרט את הסגנונות עבור chapka_saita. השם בטבלת stile.css מתחיל בנקודה.

Chapka_saita (אנו מציינים סגנונות בסוגריים מסולסלים)

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

תוֹכֶן

מתחיל בשם המיכל

כותרת עליונה (אנו מציינים סגנונות בסוגריים מסולסלים)

אתה יכול גם לציין סגנונות עבור מיכלים באמצעות מזהה, ואז זה נראה כך

תוֹכֶן

, בגיליון הסגנונות המזהה מתחיל בסמל hash

#blok1 (אנו מציינים סגנונות בסוגרים מסולסלים)

אם אתה צריך לציין את סגנונות הכותרות במכולות, קישורים, תמונות, אז זה נראה כך.

Chapka_saita (בסוגרים מתולתלים הסגנון העיקרי של המיכל)
.chapka_saita h1, h2 (סגנון עבור כותרות בתגים

ו

עבור מיכל זה)
.chapka_saita a (סגנון לקישורים זה במיכל זה)
.chapka_saita a:hover (סגנונות לקישורים בעכבר מעל )
‎.chapka_saita img (סגנונות עבור תמונות במיכל זה)
הסגנונות עצמם כתובים בסוגרים מתולתלים אלה ומופרדים בפסיקים;

משפחת גופנים: Arial; מציין את גופן המכולה, המשמש בדרך כלל בתג , שבו כל תוכן העמוד

גובה קו: 1.2; מגדיר את גובה השורה עבור הגופן

הזחות

ריפוד: 10px; מגדיר את ההזחה הפנימית של התוכן מהגבול של המיכל, במקרה זה ההזחה היא 10 פיקסלים, ניתן לציין את הערך כאחוז, או ב-em
שוליים: 5 פיקסלים; מגדיר את השוליים החיצוניים של המיכל,
שוליים: 10px 5px 0px 15px; ניתן לציין כניסות בנפרד לכל צד
margin-bottom: 10px; אתה יכול לציין הזחה רק בצד אחד, במקרה זה הכניסה מלמטה היא 10 פיקסלים. את אותו הדבר ניתן ליישם על ריפוד פנימי.

להלן דוגמה לסגנונות עבור התג

גוף (שוליים-שמאליים: אוטומטי; שוליים-ימין: אוטומטיים; רוחב: 930px; גודל גופן: 12px; font-family: Arial; קו-גובה: 1.2; רקע-תמונה: url(images/fon.jpg); )

סגנונות טקסט

גודל גופן: 12px; מציין את גודל הגופן, ניתן לציין בפיקסלים, באחוזים או ב-ems
צבע: #0000ff; מציין את צבע הגופן, במקרה זה #0000ff כחול, אתה יכול לציין מילה, למשל צבע: ירוק; כלומר, הצבע הוא ירוק.
קישוט טקסט: אין; מסיר קו תחתון, משמש לקישורים להסרת קו תחתון
טקסט-טרנספורמציה: אותיות גדולות; הופך את כל האותיות של הטקסט לאותיות רישיות במקום באותיות רישיות, אתה יכול לכתוב משמעויות אחרות, ולהיפך, לעשות קו תחתון עליון או תחתון.
מודגש; עושה את הגופן מודגש; ניתן להשתמש בערכים אחרים במקום מודגש
text-align:left; מגדיר את יישור הטקסט, במקרה זה שמאלה, לצד השמאלי של המיכל, אתה יכול להגדיר את הערך conter, hight.
text-shadow: 1px 2px 1px 0px #000000; צבע: #f9f5ed; צל לטקסט

סגנונות מיכל

צבע רקע: #DCDCDC; מקצה צבע רקע למיכל, במקרה זה #DCDCDC אפור
רקע-תמונה: url(images/fon.jpg); מגדיר את תמונת הרקע

גבול: 1px מוצק #E8E8E8; יקצה גבול, הביטוי מוצק פירושו גבול מוצק, #E8E8E8 הוא צבע הגבול. אתה יכול לציין גבול נפרד לכל צד, למשל border-top: 2px solid #E8E8E8;
border-radius: 10px; עיגול הפינות של המכולה, אתה יכול להגדיר עיגול שונה בכל פינה גבול-רדיוס: 2px 6px 10px 0px;
box-shadow: #2C2C29 10px 10px 10px; צל למיכלים

רוחב:926px; מציין את רוחב המיכל
גובה: 240 פיקסלים; גובה מיכל

לצוף:שמאל; לוחץ על המיכל לצד שמאל, כברירת מחדל הקונטיינרים מסודרים, ואם אתה רוצה לסדר כמה בלוקים, אז הם צריכים להגדיר את המאפיין float:left; וגובה רוחב: px; כך שיתאימו לרוחב מיכל האב.
float:right; אותו דבר, אבל המיכלים נלחצים לצד ימין.
אם אתה רוצה ליצור מיכל באמצע, ציין את הרוחב והשוליים הם avto , לדוגמה: margin-left: auto; שוליים-ימין: אוטומטי; רוחב: 150 פיקסלים;

במדריך זה, נשתמש בעורך Notepad++ ליצירת קובצי HTML ו-CSS, הוא מיועד למשתמשים Microsoft Windowsוכל הדוגמאות יבוצעו בו.

אם יש לך Mac, אז אתה יכול להפעיל את הדוגמאות בעורך Brackets, בדיוק כמו פנקס רשימות++בחינם לחלוטין. לגבי העורך סוֹגְרַיִם, אז זה מתאים גם למשתמשים Microsoft Windows, לאחר מכן תוכל לבחור מה יותר קרוב אליך.

יצירת גיליון סגנונות פנימי

בואו נסתכל על דוגמה שבה תיצור את גיליון הסגנונות הפנימי הראשון שלך.

שלב 1: פתח עורך טקסט

לחץ על כפתורי WIN + R בו-זמנית (בדומה ל-Start - Run) ותיפתח דו-שיח "לָרוּץ" enter והקש Enter (התוכנית תיפתח ), או הפעל את התוכנית דרך קיצור הדרך שלה.

חלון התוכנית הראשי ייפתח לפניך:

שלב 2: צור מבנה מסמך

העתק או הדבק את קוד ה-HTML הבא לתוך העורך:

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

שלב 3: הוסף סגנונות מוטבעים

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

טוב שאני עוסקת בפיתוח עצמי.

אני יכול ללמוד CSS תוך חודש או פחות.

שלב 4: הצג את דף ה-HTML בדפדפן

פתח את הדוגמה בדפדפן וודא שהתוצאה של הדוגמה שלנו תואמת לתמונה:

חיבור גיליון סגנונות חיצוני

כעת ניצור קובץ נפרד שיכיל גיליון סגנונות ונחבר אותו לשלנו מסמך HTML u.

1. IN תוכנית פנקס רשימות++ צור אחד חדש קובץ ריקושמור אותו תחת השם page.css (בעת שמירת הקובץ עליך לבחור Cascade Style Sheets *.css) באותה תיקיה שבה יצרת את מסמך ה-HTML.
2. העבר את קוד ה-CSS מהדוגמה הקודמת (תוכן התג. סגנונות פנימיים מקבלים עדיפות על פני סגנונות חיצוניים, אך הם נחותים מסגנונות מוטבעים (מצוין באמצעות תכונת הסגנון).

   ...
   
   

   1.3. סגנונות מובנים

   כשאנחנו כותבים סגנונות מוטבעים, אנו כותבים את קוד ה-CSS לתוך קובץ ה-HTML, ישירות בתוך תג האלמנט באמצעות תכונת style:

   שימו לב לטקסט הזה.

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

   1.4. כלל ייבוא ​​@

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

   הכלל @import משמש גם לכלול גופני אינטרנט:

   @import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

   2. סוגי סלקטורים

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

   2.1. בורר אוניברסלי

   מתאים לכל רכיב HTML. לדוגמה, * (שוליים: 0;) יאפס את השוליים עבור כל רכיבי האתר. ניתן להשתמש בבורר גם בשילוב עם פסאודו-מחלקה או פסאודו-אלמנט: *:after (סגנונות CSS), *: מסומנים (סגנונות CSS) .

   2.2. בורר אלמנטים

   בוררי אלמנטים מאפשרים לך לעצב את כל האלמנטים מהסוג הזהבכל דפי האתר. לדוגמה, h1 (font-family: Lobster, cursive;) יגדיר את סגנון העיצוב הכולל עבור כל כותרות h1.

   2.3. בורר כיתות

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

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

   .headline (שינוי טקסט: אותיות רישיות; צבע: כחול בהיר; )

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

   הוראות שימוש במחשב אישי

   2.4. בורר תעודות זהות

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

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

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

   #sidebar ( רוחב: 300px; float: left; )

   2.5. בורר צאצאים

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

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

   p.first a (צבע: ירוק;) - סגנון זה יוחל על כל הקישורים הצאצאים של הפסקה עם המחלקה הראשונה;

   p .first a (צבע: ירוק;) - אם תוסיף רווח, קישורים הממוקמים בתוך כל תג .first class שהוא צאצא של האלמנט יסגננו

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

   2.6. בורר ילדים

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

   2.7. בורר אחות

   אחווה מתרחשת בין אלמנטים החולקים הורה משותף. בוררי אחים מאפשרים לך לבחור אלמנטים מקבוצה של אלמנטים באותה רמה.

   h1 + p - יבחרו את כל הפסקאות הראשונות מיד לאחר כל תג

   מבלי להשפיע על שאר הפסקאות;

   h1 ~ p - יבחר את כל הפסקאות שהן אחות לכל כותרת h1 ומיד אחריה.

   2.8. בורר תכונות

   בוררי תכונות בוחרים אלמנטים על סמך שם התכונה או ערך התכונה:

   [תכונה] - כל האלמנטים המכילים את התכונה שצוינה - כל האלמנטים שעבורם צוינה תכונת alt;

   selector[attribute] - אלמנטים מסוג זה המכילים את התכונה שצוינה, img - רק תמונות שעבורן צוינה תכונת alt;

   selector[attribute="value"] - אלמנטים מסוג זה המכילים את התכונה שצוינה עם ערך ספציפי, img - כל התמונות שכותרתן מכילה את המילה פרח;

   selector[attribute~="value"] - אלמנטים המכילים חלקית ערך נתון, לדוגמה, אם צוינו מספר מחלקות עבור אלמנט מופרדים ברווח, p - פסקאות ששם המחלקה שלהן מכיל תכונה ;

   selector[attribute|="value"] - אלמנטים שרשימת ערכי התכונה שלהם מתחילה במילה שצוינה, p - פסקאות ששם המחלקה שלהן הוא תכונה או מתחילה בתכונה ;

   selector[attribute^="value"] - אלמנטים שערך התכונה שלהם מתחיל בערך שצוין, a - כל הקישורים המתחילים ב-http:// ;

   selector[attribute$="value"] - אלמנטים שערך התכונה שלהם מסתיים בערך שצוין, img - כל התמונות בפורמט png;

   selector[attribute*="value"] - אלמנטים שערך התכונה שלהם מכיל את המילה שצוינה בכל מקום, א - כל הקישורים ששמם מכיל ספר .

   2.9. בורר פסאודו מחלקה

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

   :hover - כל אלמנט שמעליו מרחף סמן העכבר;

   :focus - אלמנט אינטראקטיבי שניווט אליו באמצעות המקלדת או הופעל באמצעות העכבר;

   :active - אלמנט שהופעל על ידי המשתמש;

   :valid - שדות טופס שתוכנם נבדק בדפדפן להתאמה לסוג הנתונים שצוין;

   :invalid — שדות טופס שהתוכן שלהם אינו תואם לסוג הנתונים שצוין;

   :enabled - כל שדות הטופס הפעילים;

   :disabled - שדות טופס חסומים, כלומר במצב לא פעיל;

   :in-range - שדות טופס שהערכים שלהם נמצאים בטווח שצוין;

   :out-of-range - שדות טופס שהערכים שלהם אינם בטווח שצוין;

   :lang() - אלמנטים עם טקסט בשפה שצוינה;

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

   :target הוא רכיב עם הסמל # שאליו יש הפניה במסמך;

   :checked - רכיבי טופס נבחרים (נבחרים על ידי המשתמש).

   2.10. בורר פסאודו-מעמד מבני

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

   :nth-child(odd) - אלמנטים ילד אי זוגיים;

   :nth-child(even) - אלמנטים ילד אפילו;

   :nth-child(3n) - כל אלמנט שלישי בקרב ילדים;

   :nth-child(3n+2) - בוחר כל אלמנט שלישי, החל מהילד השני (+2) ;

   :nth-child(n+2) - בוחר את כל האלמנטים החל מהשני;

   :nth-child(3) - בוחר את אלמנט הילד השלישי;

   :nth-last-child() - ברשימת רכיבי הילד, בוחר את האלמנט עם המיקום שצוין, בדומה ל-:nth-child() , אך החל מהאחרון, בכיוון ההפוך;

   :first-child - מאפשר לך לסגנן רק את רכיב הבן הראשון של התג;

   :last-child - מאפשר לעצב את רכיב הבן האחרון של התג;

   :only-child - בוחר אלמנט שהוא האלמנט הבן היחיד;

   :empty - בוחר אלמנטים שאין להם ילדים;

   :root - בוחר את האלמנט שהוא השורש של המסמך - אלמנט ה-html.

   2.11. בורר פסאודו-מחלקה מסוג מבני

   מציין סוג מסוים של תג בן:

   :nth-of-type() - בוחר אלמנטים הדומים ל-:nth-child() , אך לוקח בחשבון רק את סוג האלמנט;

   :first-of-type - בוחר את הילד הראשון מסוג נתון;

   :last-of-type - בוחר את האלמנט האחרון מסוג זה;

   :nth-last-of-type() - בוחר אלמנט מהסוג הנתון ברשימת אלמנטים לפי המיקום שצוין, החל מהסוף;

   :only-of-type - בוחר אלמנט בודד סוג שצויןבין מרכיבי הצאצא של אלמנט האב.

   2.12. בורר אלמנטים פסאודו

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

   :first-letter - בוחר את האות הראשונה של כל פסקה, חל רק על רכיבי בלוק;

   :first-line - בוחר את השורה הראשונה של טקסט האלמנט, חל רק על רכיבי בלוק;

   :before - מוסיף תוכן שנוצר לפני האלמנט;

   :after - מוסיף תוכן שנוצר אחרי האלמנט.

   3. שילוב בורר

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

   img:nth-of-type(even) - יבחר את כל התמונות הזוגיות שהטקסט החלופי שלהן מכיל את המילה css .

   4. קיבוץ בוררים

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

   H1, h2, p, span (צבע: עגבנייה; רקע: לבן;)

   5. ירושה ומפל

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

   5.1. יְרוּשָׁה

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

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

   ירושה בכפייה

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

   כיצד מוגדרים ופועלים סגנונות CSS

   1) סגנונות יכולים לעבור בירושה מאלמנט האב (מאפיינים בירושה או שימוש בערך הירושה);

   2) סגנונות הממוקמים בגיליון הסגנונות למטה גוברים על סגנונות הממוקמים בטבלה למעלה;

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

   
   אורז. 2. מצב מפתחים ב דפדפן גוגלכרום

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

   div (גבול: 1px מוצק #eee;) #wrap (רוחב: 500px;).box (float: left;).clear (clear: both;)

   5.2. אֶשֶׁד

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

   כלל! חשוב

   ניתן לציין משקל של כלל באמצעות מילת המפתח!חשוב, שמתווספת מיד אחרי ערך המאפיין, למשל span (font-weight: bold!important;) . את הכלל יש למקם בסוף ההצהרה לפני סוגר הסוגר, ללא רווח. הודעה כזו תקבל עדיפות על פני כל שאר הכללים. כלל זה מאפשר לך לבטל ערך מאפיין ולהגדיר ערך חדש עבור אלמנט מקבוצת אלמנטים במקרה בו אין גישה ישירה לקובץ הסגנון.

   ספֵּצִיפִיוּת

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

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

   H1 (צבע: כחול בהיר;) /*ספציפיות 0, 0, 0, 1*/ em (צבע: כסף;) /*ספציפיות 0, 0, 0, 1*/ h1 em (צבע: זהב;) /*ספציפיות: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (צבע: כחול;) /*ספציפיות: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (צבע: אפור;) /*ספציפיות 0, 0, 1, 0 */ #sidebar (צבע: כתום;) /*ספציפיות 0, 1, 0, 0*/ li#sidebar (צבע: aqua;) /*ספציפיות: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

   כתוצאה מכך, כללים ספציפיים יותר יחולו על האלמנט. לדוגמה, אם לאלמנט יש שני סגולות עם ערכים 0, 0, 0, 2 ו-0, 1, 0, 1, אז הכלל השני ינצח.

   סדר שולחנות מחוברים

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

   
   
   
   שתף את המאמר הזה:
   מאמרים דומים

   
   17 באפריל, 2015
   מה לעשות אם המוכר מבקש לסגור מחלוקת באליאקספרס?
   
   17 באפריל, 2015
   גלה מי התקשר למספר טלפון באינטרנט
   
   17 באפריל, 2015
   סקירה של תוכנית Elex-tech הורד את תוכנית השירות להסרה
   
   17 באפריל, 2015
   איך להחיות אנדרואיד "לבנה" - החזרת לחיים סמארטפון "לבן".