סקירת רמת עדיפות CSS

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

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

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

ברירת המחדל של סגנונות הדפדפן

פיירפוקס, Chrome, Safari, Opera ו- Internet Explorer נמצאים כיום בחמישה הדפדפנים המובילים בשוק. דפדפנים אלה וכל הדפדפנים האחרים עוקבים אחר כלל סטנדרטי כדי לכלול סגנונות ברירת מחדל מובנים כדי להציג את רכיבי HTML.

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

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

לדוגמה, כפי שניתן לראות מתוך המסך לעיל, החדש ביותר של Firefox שניתנו בלוקוטה כברירת מחדל עם שוליים: 16px 40px 16px 40px, ואילו בצד השני Internet Explorer 7 יעבד בלוקוטה עם שוליים: 0px 40px.

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

יש הרבה CSS reset זמין, אבל הנה שלי הדף שלושה המועדפים:

• Normalize.css
• איפוס CSS
• HTML5 איפוס גיליון סגנונות

בוררים

אתה כנראה לעתים קרובות לקרוא את המונח הזה על פני עיצוב אתרים / בלוגים פיתוח ביקרת; בוררים.

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

הקלד בורר

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

 p / ** הצהרה ** / 

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

בורר מחלקה

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

 .תיבה / ** הצהרה ** / 

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

 p.box / ** הצהרה ** / 

זה יהיה רק ​​היעד עמ ' רכיב שיש לו את קופסא מעמד.

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

בורר מזהה

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

 
תוכן
 

במקרה יש לנו id באלמנט, אנו יכולים להשתמש מזהה מזהה למקד אלמנט זה; בורר הזיהוי מוגדר עם חשיש # פרמטר.

 #uniqueID / ** הצהרה ** / 

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

הטבעת הסגנונות

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

סגנונות חיצוניים

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

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

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

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

סגנונות פנימיים

סגנונות פנימיים הם סגנונות מוטבעים ישירות במסמך HTML, בדרך כלל בתוך תג.

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

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

סגנונות מוטבעים

סגנונות מוטבעים הם סגנונות שמוטבעים ישירות באלמנט HTML.

 
זוהי פסקה
 

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

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

לקריאה נוספת: שלוש דרכים להכניס CSS - W3CSchools.

הכלל החשוב!

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

יש לנו את תג העוגן הבא עם סגנונות מוטבעים

 זהו קישור 

ויש לנו גם סגנון נפרד עבור תג עוגן זה בגיליון הסגנון.

 a border: 1px solid # 333; צבע רקע: # 555;  

בדוגמה זו, אנו יכולים להשתמש !חשוב הכלל כדי לאלץ את הדפדפן להשתמש בסגנונות בגיליון הסגנון במקום זה שבאלמנט.

 a border: 1px solid # 333 חשוב; צבע רקע: # 555! חשוב;  

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

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

סיכום

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

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

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

• הדגמה
• הורד מקור

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