CSS. inheritance (pewarisan)

Ukuran: px

Mulai penontonan dengan halaman:

Download "CSS. inheritance (pewarisan)"

Widya Jayadi
7 tahun lalu
Tontonan:

1 {CSS} lanjut

2 CSS inheritance (pewarisan)

3 sebuah elemen mewarisi beberapa nilai dari properti yang dimiliki oleh elemen parent-nya

5 properti yang diwariskan color font letter-spacing line-height list-style text-align text-indent text-transform visibility white-space

6 X

8 elemen <a> tidak mewarisi nilai dari properti color

10 CSS specificity

11 setiap deklarasi css (selector) memiliki berat yang berbeda. Berat tersebut menentukan seberapa spesifik sebuah elemen dapat dipilih oleh selector tersebut.

14 #p1 lebih spesifik dari p

15 menghitung nilai specificity

16 0inline id 0 class 0 element 0

17 0inline id 0 class 0 element 0

18 inline id class element #p1 = vs. p =

19 #p1 =

21 ?

23 ul#sarapan li vs..favorit

24 ul#sarapan li

25 solusi?

26 buat elemen yang diinginkan agar menjadi lebih spesifik tambahkan beban pada elemen tersebut agar semakin berat

27 ul#sarapan li vs..favorit

28 ul#sarapan li vs. ul#sarapan li.favorit

29 ul#sarapan li.favorit

31 kalkulator spesificity

32 4. urutan yang paling atas berarti 1. tulis selector yang ingin yang dibandingkan paling spesifik 3. klik untuk mengetahui hasilnya 1. tulis selector yang ingin dibandingkan 2. klik jika ingin membandingkan lebih dari 2 selector

33 CSS Basic Layouting 1

34 CSS elemen block dan inline

35 CSS <div> & <span>

36 tag pada HTML digunakan untuk memberikan maksud / arti pada sebuah konten (p untuk paragraf, h1 untuk heading utama, dll). Tag <div> dan <span> tidak memiliki arti apapun, keduanya digunakan untuk mengelompokkan tag-tag HTML dan memberikan informasi terhadap tag-tag tersebut.

47 CSS elemen block dan inline

48 setiap tag pada HTML berada di dalam sebuah kotak. properti display pada CSS mengatur perilaku dari kotak tersebut.

49 setiap tag pada HTML memiliki nilai default untuk properti display.tetapi kita juga dapat mengubah perilaku dari tag tersebut dengan mengubahnya.

50 display inline block inline-block none

51 inline

54 Tidak terpengaruh oleh width dan height

55 elemen inline b, strong, i, em, a, span, sub, sup, button, input, label, select, textarea,

56 block

58 elemen block h1-h6, p, ol, ul, li form, hr, div,

59 mengubah display

60 inline-block display: inline-block;

61 Terpengaruh oleh width dan height

62 Berubah menjadi inline defaultnya block

63 CSS Basic Layouting 1

64 CSS dimensi

66 dimensi pada CSS width height

67 width & height px %

69 80% terhadap lebar body

70 tetap 80% terhadap lebar body

71 bagaimana jika dimensi dari <div> lebih kecil daripada konten di dalamnya?

73 CSS overflow

74 overflow visible auto hidden scroll

75 visible nilai default: konten akan keluar jika tidak cukup

76 auto akan memunculkan scroll jika dibutuhkan

77 hidden menyembunyikan konten

78 scroll selalu memunculkan scroll meskipun konten cukup

79 CSS box model

80 setiap elemen di halaman berada di dalam sebuah box (kotak) kita bisa mengatur ukuran dan posisi kotak tersebut kita bisa memberi warna / gambar sebagai background kotak tersebut

81 Google Chrome : * { border: 1px solid red }

82 Mozilla Firefox : 3D View

83 CSS box model mendefinisikan perilaku dari kotak yang dihasilkan oleh sebuah elemen, lalu menampilkannya sesuai dengan format visualnya

84 CSS box model terdiri dari margin, border, padding dan content.

86 CSS Box Model margin area transparan di sekitar kotak (di luar border) padding area transparan di dalam kotak (antara content dan border) border batas disekeliling content dan padding content konten sebenarnya di dalam box, bisa berupa teks atau gambar

87 properti untuk margin, padding & border margin-top margin-right margin-bottom margin-left margin padding-top padding-right padding-bottom padding-left padding border-top border-right border-bottom border-left border

88 margin boleh negatif px % auto

89 HTML CSS

90 CSS 50px 50px 50px 50px

91 CSS 100px auto auto auto akan membuat elemen berada di tengah 100px

92 CSS 50px auto auto 25px

93 CSS 50px 20px 40px 30px

94 padding tidak boleh negatif px %

95 CSS 50px 20px 30px 40px

96 border width style color

97 border: width style color;

98 width style border: 3px solid black; color

99 style

100 total width dan height elemen width + padding + border atau height + padding + border

101 box-sizing solusi agar padding dan border tidak mempengaruhi width

102 thankyou.

dokumen-dokumen yang mirip

DASAR-DASAR CSS DASAR-DASAR CSS By: Rohi Abdulloh A. PENGENALAN

DASAR-DASAR CSS DASAR-DASAR CSS 2015 A. PENGENALAN CSS merupakan kependekan dari Cascading Style Sheet yaitu suatu skrip yang digunakan untuk mempercantik tampilan HTML atau mengatur bagaimana elemen HTML