Russ Weakleys CSS inheritance i auktoriserad översättning av Thomas Lindbjer

1. CSS ARV

2. Vad är arv?

3. Arv innebär att vissa CSS-egenskaper förs vidare till underliggande element.

4. Vi kommer att använda HTML- koden nedan för att se hur arv fungerar: <p> Lorem <em> ipsum </em> dolor sit amet consect etuer. </p>

5. Lägg märke till att elementet <em> ligger inuti elementet <p>

6. Vi använder även denna CSS-kod. Lägg märke till att elementet <em> inte har specificerats . p { color: red; }

7. I webbläsaren kommer både elementen <p> och <em> att färgas röda . <em> element

8. Men varför är elementet <em> rött när det inte har formaterats?

9. Därför att elementet <em> har ärvt egenskapen för färg från elementet <p>

10. Varför är arv användbart?

11. Arv har skapats för att underlätta för utvecklaren.

12. Annars skulle vi behöva ange egenskaper för alla underliggande element . p { color: red; } p em { color: red; }

13. CSS-filer skulle bli mycket större , vara svårare att skapa och underhålla. Dessutom långsammare att ladda ner.

14. Ärvs alla egenskaper i CSS?

15. Nej. Alla egenskaper i CSS ärvs inte!

16. Om alla egenskaper ärvdes, skulle det göra det mycket svårare för utvecklare.

17. Utvecklare skulle tvingas stänga av oönskade egenskaper i CSS för underliggande element.

18. Vad skulle t.ex. hända om egenskapen för border ärvdes som standard…

19. och vi använde en border på elementet <p> ? p { border: 1px solid red; }

20. <em> inuti <p> skulle också få en röd border . <em> element

21. Border ärvs inte som tur är, därför får inte <em> en röd border. <em> element

22. Rent allmänt: enbart egenskaper som gör vårt jobb lättare ärvs!

23. Vilka egenskaper är det då som ärvs?

24. Följande egenskaper i CSS ärvs …

25. azimuth, border-collapse, border-spacing, caption-side, color, cursor, direction, elevation, empty-cells, font-family, font-size, font-style, font-variant, font-weight, font, letter-spacing, line-height, list-style-image, list-style-position, list-style-type, list-style, orphans, pitch-range, pitch, quotes, richness, speak-header, speak-numeral, speak-punctuation, speak, speech-rate, stress, text-align, text-indent, text-transform, visibility, voice-family, volume, white-space, widows, word-spacing

26. Skona mig! Det var många egenskaper .

27. Låt oss underlätta. Här är några av de viktigaste grupperna med egenskaper.

28. Egenskaper som har med text att göra ärvs:

29. azimuth, border-collapse, border-spacing, caption-side, color, cursor, direction, elevation, empty-cells, font-family, font-size, font-style, font-variant, font-weight, font, letter-spacing, line-height, list-style-image, list-style-position, list-style-type, list-style, orphans, pitch-range, pitch, quotes, richness, speak-header, speak-numeral, speak-punctuation, speak, speech-rate, stress, text-align, text-indent, text-transform, visibility, voice-family, volume, white-space, widows, word-spacing

30. Egenskaper som har med listor att göra ärvs:

31. azimuth, border-collapse, border-spacing, caption-side, color, cursor, direction, elevation, empty-cells, font-family, font-size, font-style, font-variant, font-weight, font, letter-spacing, line-height, list-style-image, list-style-position, list-style-type, list-style, orphans, pitch-range, pitch, quotes, richness, speak-header, speak-numeral, speak-punctuation, speak, speech-rate, stress, text-align, text-indent, text-transform, visibility, voice-family, volume, white-space, widows, word-spacing

32. Och, allra viktigast, egenskapen color (textfärg) ärvs:

33. azimuth, border-collapse, border-spacing, caption-side, color , cursor, direction, elevation, empty-cells, font-family, font-size, font-style, font-variant, font-weight, font, letter-spacing, line-height, list-style-image, list-style-position, list-style-type, list-style, orphans, pitch-range, pitch, quotes, richness, speak-header, speak-numeral, speak-punctuation, speak, speech-rate, stress, text-align, text-indent, text-transform, visibility, voice-family, volume, white-space, widows, word-spacing

34. Ärvs font-size?

35. Det enkla svaret är “ja”. Men font-size ärvs på ett annorlunda sätt än många andra egenskaper.

36. I stället för att det faktiskta värdet ärvs, blir det beräknade värdet ärvt.

37. Innan vi förklarar hur arvet för font-size fungerar, behöver vi se på varför font-size inte ärvs direkt .

38. Vi börjar med samma exempel på HTML-kod vi använde tidigare: <p> Lorem <em> ipsum </em> dolor sit amet consect etuer. </p>

39. Som tidigare finns <em> inuti <p> .

40. Vi tillämpar en font-size på enbartelementet <p> . <em> har inte specificerats. p { font-size: 80%; }

41. Om värdet 80% på font-size ärvdes, skulle <em> få storleken 80% av elementet <p> …

42. och i webbläsaren skulle sidan se ut så här : <em> element

43. Men - så är det inte ! <em> har samma storlek som <p> . <em> element

44. Så hur fungerar arv för font-size ?

45. Vi ska se på tre exempel , där vi använder samma HTML-kod som tidigare:

46. Exempel 1: pixlar

47. Elementet <p> har fått font-size 14px . Notera: pixlar rekommenderas inte för fontstorlek på grund av tillgänglighetsproblem som hör ihop med äldre webbläsare, som IE5 och IE6. p { font-size: 14px ; }

48. Pixelvärdet (14px) går före webbläsarens standardvärde för font-size (ungefär 16px). Detta nya värde ärvs av underliggande element .

49. Så elementet <em> ärver värdet 14px .

50. Exempel 2: procent

51. Elementet <p> har fått font-size 85% . p { font-size: 85% ; }

52. Webbläsarens standardvärde (16px) och procentvärdet (85%) används för att skapa ett beräknat värde (16px x 85% = 13.6px). Detta beräknade värde ärvs av underliggande element .

53. Elementet <em> ärver det beräknade värdet på 13.6px .

54. Det här var alltför enkelt. Vad händer vid mer invecklade situationer med olika element ?

55. Exempel 3: mer invecklat

56. Alla element har angetts med hjälp av värden i procent . body { font-size: 85% ; } h1 { font-size: 200% ; } h2 { font-size: 150% ; }

57. Webbläsarens standardvärde för font-size (16px) och procentvärdet för body (85%) används för att skapa ett beräknat värde (16px x 85% = 13.6px). Detta beräknade värde ärvs av underliggande element om inte nya värden är specificerade .

58. Så här ser arvet för font-size ut

59. Använd arv effektivt

60. Utvecklare kan använda arv för att skriva effektiv CSS .

61. Man kan t.ex. ange color, font-size and font-family på elementet body . body { color: #222; font-family: arial, helvetica, sans-serif; font-size: 90%; }

62. Dessa egenskaper kommer att ärvas av alla underliggande element .

63. Man kan upphäva egenskaperna vid behov, genom att ange nya värden för t.ex. color...

64. body { color: #222; font-family: arial, helvetica, sans-serif; font-size: 90%; } h1, h2, h3 { color: green; } h4, h5, h6 { color: black; }

65. nya värden för font-family ...

66. body { color: #222; font-family: arial, helvetica, sans-serif; font-size: 90%; } h1, h2, h3 { color: green; } h4, h5, h6 { color: black; } h1, h2, h3, h4, h5, h6 { font-family: georgia, times, serif; }

67. och nya värden för font-size när det behövs.

68. } h1, h2, h3 { color: green; } h4, h5, h6 { color: black; } h1, h2, h3, h4, h5, h6 { font-family: georgia, times, serif; } h1 { font-size: 200%; } h2 { font-size: 150%; } h3 { font-size: 125%; } #footer { font-size: 90%; }

69. Russ Weakley Max Design Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley (översättning: Thomas Lindbjer)