Wednesday, July 15, 2015

CSS Combinators

Sebuah selector CSS dapat berisi lebih dari satu pemilih sederhana. Antara pemilih sederhana, kita dapat mencakup combinator a. Ada empat combinators berbeda dalam CSS3: pemilih keturunan pemilih anak pemilih saudara yang berdekatan pemilih saudara umum

Descendant Selector


Pemilih keturunan cocok dengan semua elemen yang adalah keturunan dari elemen tertentu. Contoh berikut memilih semua <p> unsur dalam <div> elemen:

div p {
    background-color: yellow;
}

Child Selector


Pemilih anak memilih semua elemen yang adalah anak-anak langsung dari elemen tertentu. Contoh berikut memilih semua <p> elemen yang adalah anak-anak langsung dari elemen <div>:

div > p {
    background-color: yellow;
}

Adjacent Sibling Selector


Pemilih saudara yang berdekatan memilih semua elemen yang merupakan saudara kandung berdekatan elemen tertentu. Elemen saudara harus memiliki unsur induk yang sama, dan "berdekatan" berarti "segera setelah". Contoh berikut memilih semua <p> elemen yang ditempatkan segera setelah <div> elemen:

div + p {
    background-color: yellow;
}

General Sibling Selector


Pemilih saudara umum memilih semua elemen yang saudara dari elemen tertentu. Contoh berikut memilih semua <p> elemen yang saudara dari <div> elemen:

div ~ p {
    background-color: yellow;
}





CSS Layout - Horizontal Align

Mengatur lebar elemen blok-tingkat akan mencegah dari peregangan keluar ke tepi wadah. Gunakan margin: auto ;, ke horizontal pusat elemen dalam wadah. Unsur kemudian akan mengambil lebar tertentu, dan ruang yang tersisa akan dibagi sama antara kedua margin:

.center {
    margin: auto;
    width: 60%;
    border:3px solid #8AC007;
    padding: 10px;
}

Tip: Pusat menyelaraskan tidak berpengaruh jika properti lebar tidak diatur (atau set ke 100%). Tip: Untuk menyelaraskan teks, lihat bab CSS Text.


Left and Right Align - Using position


Salah satu metode menyelaraskan elemen adalah dengan menggunakan position: absolute ;:

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border:3px solid #8AC007;
    padding: 10px;
}

Catatan: elemen diposisikan Absolute dikeluarkan dari aliran normal, dan dapat tumpang tindih elemen. Tip: Ketika menyelaraskan elemen dengan posisi, selalu menentukan margin dan padding untuk <body> elemen. Hal ini untuk menghindari perbedaan visual dalam browser yang berbeda. Ada juga masalah dengan IE8 dan sebelumnya, ketika menggunakan posisi. Jika elemen wadah (dalam kasus kami <div class = "container">) memiliki lebar yang ditentukan, dan deklarasi DOCTYPE! Hilang, IE8 dan versi sebelumnya akan menambahkan margin menjadi 17px di sisi kanan. Hal ini tampaknya menjadi ruang dicadangkan untuk scrollbar. Jadi, selalu mengatur deklarasi DOCTYPE ketika menggunakan posisi:

body {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    width: 100%;
}

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}

Left and Right Align - Using float


Metode lain menyelaraskan elemen adalah dengan menggunakan properti float:

.right {
    float: right;
    width: 300px;
    border:3px solid #8AC007;
    padding: 10px;
}

Tip: Ketika menyelaraskan elemen dengan float, selalu menentukan margin dan padding untuk <body> elemen. Hal ini untuk menghindari perbedaan visual dalam browser yang berbeda. Ada juga masalah dengan IE8 dan sebelumnya, ketika menggunakan pelampung. Jika DOCTYPE deklarasi! Hilang, IE8 dan versi sebelumnya akan menambahkan margin menjadi 17px di sisi kanan. Hal ini tampaknya menjadi ruang dicadangkan untuk scrollbar. Jadi, selalu mengatur deklarasi DOCTYPE ketika menggunakan Float!:

body {
    margin: 0;
    padding: 0;
}

.right {
    float: right;
    width: 300px;
    background-color: #b0e0e6;
}




CSS Layout - inline-block

Telah memungkinkan untuk waktu yang lama untuk membuat kotak kotak yang mengisi lebar peramban dan membungkus baik (ketika browser diubah ukurannya), dengan menggunakan properti float. Namun, nilai inline-blok properti layar membuatnya bahkan lebih mudah. elemen inline-block seperti elemen inline tetapi mereka dapat memiliki lebar dan tinggi.

Contoh Cara lama - menggunakan pelampung (perhatikan bahwa kita juga perlu menentukan properti yang jelas untuk elemen setelah kotak mengambang):

.floating-box {
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #8AC007; 
}

.after-box {
    clear: left;
}

Efek yang sama dapat dicapai dengan menggunakan nilai inline-blok properti display (perhatikan bahwa tidak ada properti yang jelas diperlukan):

.floating-box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #8AC007; 
}



CSS Layout - The position Property

Properti posisi menentukan jenis metode penentuan posisi yang digunakan untuk elemen (statis, relatif, tetap atau absolut).

The position Property


Properti posisi menentukan jenis metode penentuan posisi yang digunakan untuk elemen. Ada empat nilai posisi yang berbeda:

  • static
  • relative
  • fixed
  • absolute

Elemen kemudian diposisikan menggunakan bagian atas, bawah, kiri, dan sifat yang tepat. Namun, sifat ini tidak akan bekerja kecuali milik posisi diatur pertama. Mereka juga bekerja berbeda tergantung pada nilai posisi.

position: static;


Elemen HTML diposisikan statis secara default. Elemen diposisikan statis tidak terpengaruh oleh bagian atas, bawah, kiri, dan sifat yang tepat.

Sebuah elemen dengan posisi: statis; tidak diposisikan dalam cara yang khusus; itu selalu diposisikan sesuai dengan aliran normal halaman:

div.static {
    position: static;
    border: 3px solid #8AC007;
}

position: relative;


Sebuah elemen dengan posisi: relatif; diposisikan relatif terhadap posisi normal.

Mengatur atas, kanan, bawah, dan sifat kiri elemen yang relatif strategis akan menyebabkan disesuaikan jauh dari posisi normal. Konten lainnya tidak akan disesuaikan untuk masuk ke setiap celah yang ditinggalkan oleh elemen.

div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #8AC007;
}

position: fixed;


Sebuah elemen dengan posisi: fixed; diposisikan relatif terhadap viewport, yang berarti selalu tetap di tempat yang sama bahkan jika halaman tersebut menggulir. Atas, kanan, bawah, dan sifat kiri digunakan untuk posisi elemen.

Unsur tetap tidak meninggalkan celah di halaman mana biasanya telah berada. Perhatikan elemen tetap di sudut kanan bawah halaman. Berikut adalah CSS yang digunakan:

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #8AC007;
}

position: absolute;


Sebuah elemen dengan position: absolute; diposisikan relatif terhadap leluhur diposisikan terdekat (bukan diposisikan relatif terhadap viewport, seperti tetap).

Namun; jika elemen diposisikan mutlak tidak memiliki nenek moyang posisi, ia menggunakan tubuh dokumen, dan bergerak bersama dengan halaman bergulir.

Catatan: Sebuah "diposisikan" elemen adalah salah satu yang posisinya apa-apa kecuali statis. Berikut ini adalah contoh sederhana:

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #8AC007;


div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #8AC007;
}

Overlapping Elements


Ketika elemen diposisikan, mereka dapat tumpang tindih elemen lainnya. Properti z-index menentukan urutan tumpukan elemen (elemen yang harus ditempatkan di depan, atau di belakang, yang lain).

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}






CSS Layout - width and max-width

Seperti disebutkan dalam bab sebelumnya; elemen blok-tingkat selalu mengambil lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh itu bisa).

Mengatur lebar elemen blok-tingkat akan mencegah dari peregangan keluar ke tepi wadah. Kemudian, Anda dapat mengatur margin untuk mobil, untuk horizontal pusat elemen dalam wadah. Elemen akan mengambil lebar tertentu, dan ruang yang tersisa akan dibagi sama antara kedua margin

Catatan: Masalah dengan <div> di atas terjadi ketika jendela browser lebih kecil dari lebar dari elemen. Browser kemudian menambahkan scrollbar horisontal ke halaman. Menggunakan max-width sebaliknya, dalam situasi ini, akan meningkatkan penanganan browser dari jendela kecil. Hal ini penting ketika membuat sebuah situs yang dapat digunakan pada perangkat kecil:

Tip: Tarik jendela browser lebih kecil dari 500px lebar, untuk melihat perbedaan antara dua divs! Berikut adalah contoh dari dua divs di atas:

div.ex1 {
    width: 500px;
    margin: auto;
    border: 3px solid #8AC007;
}

div.ex2 {
    max-width: 500px;
    margin: auto;
    border: 3px solid #8AC007;
}



CSS Layout - The display Property

Properti display menentukan apakah / bagaimana elemen ditampilkan. Setiap elemen HTML memiliki nilai tampilan default tergantung pada jenis elemen itu. Tampilan nilai default untuk sebagian besar elemen adalah blok atau inline.

Block-level Elements


Sebuah elemen blok-tingkat selalu dimulai pada baris baru dan mengambil lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh itu bisa).

<Div> elemen adalah elemen blok-tingkat.

Inline Elements


Sebuah elemen inline tidak dimulai pada baris baru dan hanya membutuhkan sebanyak lebar yang diperlukan. Ini adalah inline <span> elemen dalam sebuah paragraf

Display: none;


display: none; umumnya digunakan dengan JavaScript untuk menyembunyikan dan menampilkan elemen tanpa menghapus dan menciptakan mereka. <Script> penggunaan elemen display: none; sebagai default.

Override The Default Display Value


Seperti disebutkan, setiap unsur memiliki nilai tampilan default. Namun, Anda dapat mengganti ini. Mengubah elemen inline untuk elemen blok, atau sebaliknya, dapat berguna untuk membuat halaman terlihat dengan cara tertentu, dan masih mengikuti standar web.

Sebuah contoh umum adalah membuat inline <li> elemen untuk menu horisontal:

li {
    display: inline;
}

Contoh berikut menampilkan <span> elemen sebagai elemen blok:

span {
    display: block;
}

Hide an Element - display:none or visibility:hidden?


Menyembunyikan elemen dapat dilakukan dengan menetapkan properti display none. Elemen akan disembunyikan, dan halaman yang akan ditampilkan sebagai jika elemen tidak ada:

h1.hidden {
    display: none;
}

visibility: hidden; juga menyembunyikan elemen. Namun, elemen masih akan mengambil ruang yang sama seperti sebelumnya. Elemen akan disembunyikan, tapi masih mempengaruhi tata letak:

h1.hidden {
    visibility: hidden;
}




CSS Dimension

All CSS Dimension Properties


PropertyDescriptionValues
heightSets the height of an elementauto
length
%
inherit
max-heightSets the maximum height of an elementnone
length
%
inherit
max-widthSets the maximum width of an elementnone
length
%
inherit
min-heightSets the minimum height of an elementlength
%
inherit
min-widthSets the minimum width of an elementlength
%
inherit
widthSets the width of an elementauto
length
%
inherit




Monday, July 6, 2015

CSS Layout - The display Property

The display Property


The display property specifies if/how an element is displayed.

Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

Block-level Elements


Sebuah elemen blok-tingkat selalu dimulai pada baris baru dan mengambil lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh itu bisa).

<Div> elemen adalah elemen blok-tingkat.

Contoh unsur blok-tingkat:

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

Inline Elements


Sebuah elemen inline tidak dimulai pada baris baru dan hanya membutuhkan sebanyak lebar yang diperlukan.

Ini adalah inline <span> elemen dalam sebuah paragraf.

Contoh elemen inline:

  • <span>
  • <a>
  • <img>

Display: none;

display: none; umumnya digunakan dengan JavaScript untuk menyembunyikan dan menampilkan elemen tanpa menghapus dan menciptakan mereka.

<Script> penggunaan elemen display: none; sebagai default.

Override The Default Display Value


Seperti disebutkan, setiap unsur memiliki nilai tampilan default. Namun, Anda dapat mengganti ini.

Mengubah elemen inline untuk elemen blok, atau sebaliknya, dapat berguna untuk membuat halaman terlihat dengan cara tertentu, dan masih mengikuti standar web.

Sebuah contoh umum adalah membuat inline <li> elemen untuk menu horisontal:

li {
    display: inline;
}

Contoh berikut menampilkan <span> elemen sebagai elemen blok:

span {
    display: block;
}

Hide an Element - display:none or visibility:hidden?


Menyembunyikan elemen dapat dilakukan dengan menetapkan properti display none. Elemen akan disembunyikan, dan halaman yang akan ditampilkan sebagai jika elemen tidak ada:

h1.hidden {
    display: none;
}

visibility: hidden; juga menyembunyikan elemen.

Namun, elemen masih akan mengambil ruang yang sama seperti sebelumnya. Elemen akan disembunyikan, tapi masih mempengaruhi tata letak:

h1.hidden {
    visibility: hidden;
}




CSS Padding

Padding


Padding membersihkan area di sekitar konten (di dalam perbatasan) dari elemen. Padding dipengaruhi oleh warna latar belakang dari elemen.

Atas, kanan, bawah, dan padding kiri dapat diubah secara independen menggunakan properti terpisah. Properti Padding singkatan juga dapat digunakan, untuk mengubah semua bantalan sekaligus.

Possible Values


ValueDescription
lengthDefines a fixed padding (in pixels, pt, em, etc.)
%Defines a padding in % of the containing element

Padding - Individual sides


Dalam CSS, adalah mungkin untuk menentukan bantalan yang berbeda untuk sisi yang berbeda:

{
    padding-top: 25px;
    padding-right: 50px;
    padding-bottom: 25px;
    padding-left: 50px;
}

Padding - Shorthand property


Untuk mempersingkat kode, adalah mungkin untuk menentukan semua properti bantalan dalam satu properti. Ini disebut properti steno.

Properti singkat untuk semua properti padding "Padding ":

{
    padding: 25px 50px;
}