CSS (גליונות סגנון מדורגים) היא אחת מטכנולוגיות הליבה המשמשות לבניית דפי אינטרנט. מכיוון שזו שפת גליונות הסגנון היחידה שהדפדפנים יכולים להבין, חשוב ללמוד לעומק CSS כדי לשלוט בפיתוח אתרים.
קל מאוד להתחיל לעבוד עם CSS. בעזרת אימונים של מספר שעות בלבד תוכלו לעצב טקסטים, אלמנטים ופריסות בקלות. עם זאת, זה הופך להיות קשה בהדרגה ובקרוב תגיע למצב שבו הקוד שלך מתחיל להיות מבולגן למדי. הרכיבים שפעם עבדו לפני שהתחלתם להישבר, ואתם מחפשים בגוגל ומוצאים את התיקון שמתקן את האלמנט שלכם אך שובר 5 אלמנטים אחרים, מכיוון שהפתרון שמצאתם בגוגל שינה את display או position?
מדוע לימוד CSS בדרך הנכונה חשוב
אם אין לך הבנה מעמיקה יותר של היסודות, CSS הופך להיות יותר כמו שיטת ניסוי וטעייה. תנסה ערכים שונים עבור מאפיינים שונים ולבסוף תשמור את זה שעובד בסמוך למה שרצית מבלי להבין באמת איך זה עובד.
תתחיל לחפש בגוגל דברים בסיסיים כמו "כיצד למרכז שתי מחלקות" או "כיצד ליישר דיב וטקסט אנכית" ולהעתיק את הקוד מ- StackOverflow או codePen בכל פעם. עוד בימים ההם, כש- Flexbox לא היה כל כך פופולרי, "איך מיישרים חלוקה אנכית ואופקית בעמוד?" הייתה שאלה ראיונית קלאסית של CSS. מתחילים רבים יכלו לקבל את החלק האופקי נכון, אך רק מעטים קיבלו את החלק האנכי נכון.
מפת הדרכים ??
1. היסודות?
אם אתה רק מתחיל בפיתוח אתרים, למד כמה יסודות של HTML לפני שתתחיל CSS. ב- CSS קרא תחילה את התיאוריה על מה זה CSS, איך זה עובד בדפדפן, והתחביר והשימוש הבסיסיים שלו.
מידע על הסוגים השונים של stylesheets זמין, ההבדלים ביניהם, סלקטורים, ובסיסי סטיילינג כגון font-size, width, heightוכו '
אתה יכול להתחיל בעבודה על ידי הדרכות ב- MDN.
2. מודל תיבת CSS?
הבן את היסודות של המודל תיבת CSS ואת המאפיינים הקשורים אליו כגון margin, border, padding וכו '
3. תמונות ורקע?
תמונות גורמות לדף האינטרנט להתעורר. ישנן דרכים רבות להוסיף תמונה כגון תגי תמונה, הוספת צבעי רקע / שיפועים ותמונות רקע לתגיות שונות אחרות. תוכל גם ליישם את מה שלמדת בעבר, כגון הגדרת גבולות לתמונות או להשתמש בתמונות מרובות ולפתח גלריה פשוטה.
.image { background-image: url(../images/wallpaper.jpg);}4. תצוגה ומיקום?
שני אלה הם חלק ממאפייני הייבוא ביותר ב- CSS, שם אתה צריך לשים לב כדי להבין אותם נכון. ידיעת שני המאפיינים הללו היטב יכולה להפוך את מסע ה- CSS שלך לחלק הרבה יותר.
display: block | inline | inline-block | table | etcהבן כיצד משתמשים בכל אחד display מהמאפיינים הללו . תתחיל להבחין בכמה אלמנטים של HTML כגון תצוגת ike: חסום ו- s אני אוהב
v> &
lt;p> or
ome eements
position: static | absolute | relative | fixed | stickyזהו אחד המאפיינים בהם אפילו מתכנתים מנוסים עושים טעויות. למד כיצד כל אחד מהם עובד, כיצד המיקום של אלמנט אחד משפיע על אחיו או על הוריו, באילו מצבים אתה משתמש בהם וכו '.
שלב זה כל כך חשוב שתוכל לחזור עליו שוב ושוב עד שתבין!
float: left | rightאף על פי שפריסות לצוף הן בית ספר ישן עכשיו, ישנם אתרי אינטרנט ישנים רבים שעדיין משתמשים בפריסות לצוף.
5. צבעים, גופנים, רשימות וטבלאות ☑️
להבין פורמטי צבע שונים כגון HEXקוד, rgb, rgba, hsl, hsla, transparentוכו '
color: white;color: #fff;color: rgb(255, 255, 255);color: rgba(255, 255, 255, 1);color: hsl(0, 100%, 100%);color: hsla(0, 100%, 100%, 1);color: transparent;למד כיצד להשתמש בגופנים שונים. גופנים מסוימים אינם זמינים בכל הדפדפנים, כך שתצטרך ללמוד להוסיף גופנים באופן ידני עם woffאו ttfקבצים או ייבוא גופני Google.
CSS יכול להפוך רשימה לא מסודרת בסיסית <ul> לסרגל ניווט יפה! לפני שנים טבלאות שימשו ליצירת פריסות מסך, תודה לאל שאנחנו כבר לא עושים את זה! ?
6. שיעורי פסאודו וקומבינטורים ➕
מחלקת פסאודו של CSS היא מילת מפתח שנוספה לבורר המציינת מצב מיוחד של האלמנטים שנבחרו. A-class פסאודו יכול להיות פשוט כמו :hover או :visitedאו משהו מורכב כמו:nth-last-of-type(odd)
קומבינטורים עוזרים לנו ליישם סגנונות על אלמנטים ילדים או אחים בקלות מבלי שנצטרך ליצור שיעורים חדשים לכל אחד מהם.
/* all the paragraph elements inside the container will have color red */.container > p { color: yellow;}7. כלים לאיתור באגים והתפתחות?
CSS לא זורק שום שגיאה. זה שובר את ממשק המשתמש בשקט אם אתה לא מבין את הסגנונות הנכונים? לכן חשוב מאוד ללמוד כיצד להשתמש בכלי Dev.
כלי ה- Chrome Dev הוא כלי מדהים עבור מפתחי אתרים. זה ארוז עם הרבה תכונות נהדרות לניפוי באגים באתר שלך בזמן אמת ויש לו גם כלים לבדיקת ביצועים כמו מגדלור המובנים בתוכו.
8. להתאמן להתאמן?
התכנים שלמדתם למעלה מספיקים לפיתוח אתר בסיסי, לכן בשלב זה עליכם להתחיל להתאמן על ידי פיתוח אתרים קטנים. תיתקל באתגרים שונים בעת בניית יישום אמיתי. לתרגול שלך, אתה יכול לפתח אתר פשוט עבור אתר נופש, או לבנות גלריית תמונות, או בלוג, או שאתה יכול גם לבנות כמה תכונות בסיסיות של המדיה החברתית המועדפת עליך כמו פייסבוק או אינסטגרם.
9. עיצוב אתרים רספונסיבי ??
After learning web development for desktop there are a lot of other devices through which the websites are accessed. Supporting these devices is equally important. Before the Responsive design got popular, developers used to design a separate website for mobiles, a separate website for touch-enabled devices etc. remember m.facebook.com and touch.facebook.com?
There are 3 important things in Responsive web design:
Fluid Layouts:
Width set with px does not scale based on the browser window. To make the elements scale based on the browser size, we need to create fluid layouts by setting the sizes in % or rem units.
Media Queries:
A media query is a technique to include a block of CSS properties only if a certain condition is true. We set breakpoints based on our design and change the CSS depending on the browser width.
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Responsive images:
Images scale down as the width of the browser window decreases or if the website is viewed in mobile devices. Sometimes it would be difficult to focus on the important details on a particular image so we’d need to use different images for different screens.
10. Flexbox and Grid ◼️ ⬛ ?
It’s been around 10 years(!) since Flexbox was first introduced, but it was incorporated only recently in 2015. — source
Flexbox and Grid are the styles used to create flexible layouts, and they make our lives so much easier! This is one of the best things that has ever happened to CSS. ?
The layout shown below would have taken more than 300 lines of CSS code without Flexbox or Grid.
11. Transforms, transitions and animations ?
Learning basic transforms and transitions will come in handy if you want to create an interactive web page with moving parts on mouse events or keyboard events such as hover or click.
Before CSS3, animations were done mostly using jQuery — A JavaScript library. Now CSS has become so powerful that we can do complex animations without any JavaScript.
12. Preprocessors ✴️
CSS preprocessors are scripting languages that extend the default capabilities of CSS. They enable us to use logic in our CSS code, such as variables, nesting, inheritance, mixins, functions, and mathematical operations. Some of the popular ones are SASS, LESS, STYLUS and POSTCSS.
The SCSS format of SASS is more widely used, so it's good to get started with SASS for development.
The autoprefixer plugin of POSTCSS makes your CSS rules compatible across various browsers by adding extra rules such as -moz- and-webkit-.
13. Frameworks ?
Learning frameworks such as Bootstrap, Semantic-UI or Materialize is optional but very useful for faster development as they provide a lot of styles and layouts out of the box.
These Frameworks are tested across various browsers, so using these will avoid some of the compatibility issues. Most of the frameworks follow the responsive design pattern and lots of free 3rd party templates are be available to get started quickly.
14. Specificity ?
“tries to modify a button style of bootstrap but fails, googles for a solution, uses !important , gets all excited thinking that’s the right fix for all the problems!” And that's how you doomed your project! ? If you understand the concept of Specificity correctly, problems regarding overlapping rules in multiple stylesheets will be reduced significantly.
Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. Each selector has a different weight, and using multiple selectors can change the specificity. If the overall specificities are equal then the order is considered. See the example below:
div.wrapper p.paragraph {
color: pink;
}#container p{
color: violet;
}p {
color: green;
}.paragraph {
color: yellow;
}
This is a dummy text
What do you think would be the colour of the paragraph? ?
15. CSS Architecture ?
Writing CSS code is easy, but writing maintainable CSS code is hard. A proper structure and method have to be followed to write good CSS code. Just following the best practices is not sufficient to write maintainable CSS.
Some of the Architecture patterns for CSS are BEM, OOCSS, SMACSS etc. You can go through the documentation and choose whichever pattern fits your tastes and project.
There you have it! ?
Mastering CSS takes patience and lots of practice. As you start practising you'll experience the awesomeness of CSS. 15 big steps might seem daunting at first but they’re actually not. I loved each and every step, and my experience got better every time. ?
Thanks for reading my article. I hope that you have found this useful. If so, be sure to leave lots of claps! ? (You can leave up to 50 ?)