Penerapan CSS (Part 4)

Februari 13, 2017

Penerapan CSS (Part 4)

I.Latar Belakang.
Latar belakang kali ini kita masih mengenal sintag tentang CSS untuk memperindah tamoilan web / program.

II.Alat dan Bahan.

Laptop / PC
W3SCHOOLS
Sublime text

III.Tujuan.
untuk mengetahui langkah dasar untuk membuat web yang sederhana.

IV.Penjelasan.
CSS Box Model
SS Box Model

Semua elemen HTML dapat dianggap sebagai kotak. Dalam CSS, istilah "model kotak" digunakan ketika berbicara tentang desain dan tata letak.

Kotak CSS Model pada dasarnya adalah sebuah kotak yang membungkus di sekitar setiap elemen HTML. Ini terdiri dari: margin, perbatasan, padding, dan konten yang sebenarnya. Gambar di bawah mengilustrasikan model kotak:

Penjelasan dari bagian-bagian yang berbeda:

    Konten - Isi kotak, di mana teks dan gambar muncul
    Padding - Menghapus sebuah daerah di sekitar konten. Padding transparan
    Border - Sebuah perbatasan yang terjadi di sekitar padding dan konten
    Margin - Menghapus sebuah daerah di luar perbatasan. Margin transparan

Model kotak memungkinkan kita untuk menambahkan perbatasan sekitar elemen, dan untuk menentukan ruang antara unsur-unsur.

Contoh

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

Lebar dan Tinggi dari Elemen

Dalam rangka untuk mengatur lebar dan tinggi dari suatu elemen dengan benar di semua browser, Anda perlu tahu bagaimana model kotak bekerja.

Penting: Bila Anda mengatur lebar dan tinggi sifat suatu unsur dengan CSS, Anda hanya mengatur lebar dan tinggi dari area konten . Untuk menghitung ukuran penuh elemen, Anda juga harus menambahkan padding, perbatasan dan margin.

Asumsikan kita ingin gaya <div> elemen untuk memiliki lebar total 350px:
Contoh

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}

Berikut adalah matematika:

320px (lebar)
+ 20px (kiri + kanan padding)
+ 10px (batas kiri + kanan)
+ 0px (margin kiri + kanan)
= 350px

Total lebar elemen harus dihitung seperti ini:

Jumlah elemen width = lebar + bantalan kiri + bantalan kanan + batas kiri + batas kanan + margin kiri + margin kanan

Tinggi total elemen harus dihitung seperti ini:

Tinggi total elemen = tinggi + padding atas + bantalan bawah + batas atas + batas bawah + margin atas + margin bawah

Catatan untuk IE tua: Internet Explorer 8 dan versi sebelumnya, termasuk padding dan perbatasan di properti lebar. Untuk memperbaiki masalah ini, tambahkan <! DOCTYPE html> ke halaman HTML.

Contoh :

Maka outputnya :

CSS Outline
CSS Outline

CSS outlineproperti menentukan gaya, warna, dan lebar garis.

Garis adalah garis yang ditarik sekitar elemen (luar perbatasan) untuk membuat elemen "menonjol".

Namun, properti outline berbeda dari properti perbatasan - outline adalah TIDAK bagian dari dimensi elemen ini; Total lebar elemen dan tinggi tidak terpengaruh oleh lebar garis besar.

Elemen ini memiliki batas hitam tipis dan garis ganda yang 10px lebar dan hijau.

garis Gayaoutline-styleproperti menentukan gaya garis besar.
outline-styleproperti dapat memiliki salah satu dari nilai berikut:

dotted - Mendefinisikan garis putus-putus
dashed - Mendefinisikan garis putus-putus
solid - Mendefinisikan garis yang solid
double - Mendefinisikan garis ganda
groove- Mendefinisikan beralur garis 3D. Efeknya tergantung pada nilai garis warna
ridge- Mendefinisikan garis bergerigi 3D. Efeknya tergantung pada nilai garis warna
inset- Mendefinisikan garis inset 3D. Efeknya tergantung pada nilai garis warna
outset- Mendefinisikan garis awal 3D. Efeknya tergantung pada nilai garis warna
none - Mendefinisikan ada garis
hidden - Mendefinisikan garis tersembunyi

Contoh

p {
    border: 1px solid black;
    outline-color: red;
}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Catatan: Tidak ada sifat CSS garis OTHER dijelaskan di bawah akan memiliki efek APAPUN kecuali outline-styleproperti diatur!
garis Warna

outline-colorproperti digunakan untuk mengatur warna garis.

warna dapat diatur oleh:

    nama - menentukan nama warna, seperti "merah"
    RGB - menentukan nilai RGB, seperti "rgb (255,0,0)"
    Hex - menentukan nilai hex, seperti "# ff0000"
    invert - melakukan inversi warna (yang menjamin bahwa garis yang terlihat, terlepas dari latar belakang warna)

Contoh

p {
    border: 1px solid black;
    outline-style: double;
    outline-color: red;
}

garis Lebar
outline-widthproperti menentukan lebar garis besar.

Lebar dapat diatur sebagai ukuran tertentu (dalam px, pt, cm, em, dll) atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan: tipis, sedang, atau tebal.

Contoh

p {border: 1px solid black;}

p.one {
    outline-style: double;
    outline-color: red;
    outline-width: thick;
}

p.two {
    outline-style: double;
    outline-color: green;
    outline-width: 3px;
}

Garis - properti Steno
Untuk mempersingkat kode, juga memungkinkan untuk menentukan semua properti outline individu dalam satu properti.
outlineproperti adalah properti singkatan untuk properti outline individu berikut:

    outline-width
    outline-style (wajib)
    outline-color

Contoh

p {
    border: 1px solid black;
    outline: 5px dotted red;
}

Contoh :

Maka outputnya :

CSS Text
Warna teks

colorproperti digunakan untuk mengatur warna teks.

Dengan CSS, warna yang paling sering ditentukan oleh:

    nama warna - seperti "merah"
    nilai HEX - seperti "# ff0000"
    nilai RGB - seperti "rgb (255,0,0)"

Lihatlah CSS Nilai Warna untuk daftar lengkap dari kemungkinan nilai warna.

Warna teks default untuk halaman didefinisikan dalam pemilih tubuh.

Contoh

body {
    color: blue;
}

h1 {
    color: green;
}
Catatan: Untuk W3C compliant CSS: Jika Anda mendefinisikan colorproperti, Anda juga harus menentukan background-color.

teks Keselarasan
text-alignproperti digunakan untuk mengatur alignment horizontal teks.

Sebuah teks dapat kiri atau kanan sejajar, berpusat, atau dibenarkan.

Contoh berikut menunjukkan pusat sejajar, dan kiri dan kanan teks selaras (perataan kiri adalah default jika arah teks kiri-ke-kanan, dan keselarasan yang tepat adalah default jika arah teks kanan-ke-kiri):

Contoh

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}

Ketika text-alignproperti diatur ke "membenarkan", setiap baris meregang sehingga setiap baris memiliki lebar yang sama, dan kiri dan kanan margin lurus (seperti di majalah dan koran):

Contoh

div {
    text-align: justify;
}

Dekorasi teks

text-decorationproperti digunakan untuk mengatur atau menghapus dekorasi dari teks.

Nilai text-decoration: none;sering digunakan untuk menghilangkan garis bawah dari link:

Contoh

a {
    text-decoration: none;
}

Yang lain text-decorationnilai-nilai yang digunakan untuk menghias teks:

Contoh

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

Catatan: Hal ini tidak dianjurkan untuk menggarisbawahi teks yang tidak link, karena ini sering membingungkan pembaca.
Transformasi teks

text-transformproperti ini digunakan untuk menentukan huruf besar dan huruf kecil dalam teks.

Hal ini dapat digunakan untuk mengubah segalanya menjadi huruf besar atau kecil, atau memanfaatkan huruf pertama dari setiap kata:

Contoh

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

teks Indentasi

text-indentproperti digunakan untuk menentukan indentasi dari baris pertama dari teks:

Contoh

p {
    text-indent: 50px;
}
surat Spasi

letter-spacingproperti digunakan untuk menentukan ruang antara karakter dalam teks.

Contoh berikut menunjukkan bagaimana untuk menambah atau mengurangi ruang antara karakter:

Contoh

h1 {
    letter-spacing: 3px;
}

h2 {
    letter-spacing: -3px;
}
Tinggi garis
line-heightproperti digunakan untuk menentukan ruang antara garis:

Contoh

p.small {
    line-height: 0.8;
}

p.big {
    line-height: 1.8;
}
Arah teks

directionproperti digunakan untuk mengubah arah teks dari unsur:

Contoh

div {
    direction: rtl;
}
kata Spasi

word-spacingproperti digunakan untuk menentukan ruang antara kata-kata dalam sebuah teks.

Contoh berikut menunjukkan bagaimana untuk menambah atau mengurangi ruang antara kata-kata:

Contoh

h1 {
    word-spacing: 10px;
}

h2 {
    word-spacing: -5px;
}

Bayangan teks
text-shadowproperti menambahkan bayangan untuk teks.

Contoh

h1 {
    text-shadow: 3px 2px red;
}

Contoh :