Dasar Tata Letak CSS Front-End Yang Biasa Digunakan Web Development

Berikut ini adalah dasar- dasar tata letak kode CSS Front-End yang biasa digunakan untuk pengembangan website. Kode CSS tersebut akan di gabungkan dengan kode html.

Read More

HTML dan CSS bisa sangat nyaman untuk pengaturan huruf dan tata letak halaman web dan juga dapat mengurangi banyak kode yang tidak perlu. Namun bagi kalian yang belum paham itu CSS, kalian dapat membaca Apa Itu CSS? Jenis Apa Saja Yang Ada?.

Dasar Tata Letak CSS Front-End Yang Biasa Digunakan Web Development

1. Text Settings

  • font-size: untuk ukuran font
  • font-style: untuk font style
  • font-weight: untuk berat font
  • Color : Untuk membuat warna
  • text-decoration:  Tujuan utamanya adalah untuk mengubah garis bawah saat browser menampilkan tautan  teks.
  • underline: teks garis bawah
  • overline: menggaris bawahi teks
  • line-through: membuat coretan pada teks
  • blink: membuat teks berkedip
  • none: tidak menampilkan efek

3. Background

  • Background color : Membuat warna background
  • Background image : membuat background degan gambar bias any menggunakan url(URL)
  • Background image repetition

background-repeat parameter :

  • no-repeat: tidak ada pengulangan pada gambar
  • repeat-x: membuat beckground secara horizontal
  • repeat-y: membuat beckground secara vertikal

Jika properti pengulangan gambar background tidak ditentukan, default gambar pada browser harus menggunakan horizontal atau vertikal.

  • Background Image Is Fixed

Background Gambar pada posisi fixed atau tetap akan mengontrol apakah gambar background bergulir dengan pengguliran halaman web. Jika properti gambar background tetap tidak disetel, gambar background default browser akan menggulir dengan menggulir halaman web. Untuk menghindari gambar background yang terlalu mewah untuk mengalihkan perhatian pengunjung saat menggulir, umumnya disetel sebagai tetap

Parameter :

  • fixed: Saat halaman web digulir, gambar background relatif terhadap jendela browser
  • scroll: Saat halaman web di-scroll, gambar background di-scroll bersamaan dengan jendela browser.

4. Tata Letak Block CSS

  • Word spacing

word-spacing: jarak spasi

  • Letter spacing

letter-spacing: Spasi huruf

  • text-align

Parameter Text aligment

left: rata kiri

right: rata kanan

center: center

justify: rata kiri dan kanan

  • Vertical alignment

vertical-align: parameter

top: Peletakan diatas

bottom: Peletakan dibwah

text-top: Sejajarkan bagian atas relatif terhadap teks

text-bottom: Ratakan relatif ke bagian bawah teks

baseline: Keselarasan dasar

middle: center

sub: tampilan dalam bentuk subscript

super: tampilan dalam bentuk superscript

  • Text Indent

text-indent:  Jarak indensi

12px setara dengan jarak teks

  • Space

white-space: parameter

normal

pre reserved

nowrap not wrap

  • Display style

display: parameter

Parameter value range:

block: elemen level blok, membungkus garis sebelum dan sesudah objek

inline: nowrap sebelum dan sesudah objek

list-item: wraps line sebelum dan sesudah objek menambahkan bullets

none: no display

5. Tata Letak Box CSS

  • height
  • width
  • padding
  • margin
  • float (floating): memungkinkan elemen tingkat blok diatur dalam satu baris, seperti menu horizontal.
  • Clear : Membersihakan float

6. Border

  • border Style

border style parameter

Parameters for border style:

none: tidak ada border

dotted: border putus putus

dashed: border dengan garis panjang dan pendek

solid: membuat border solid line

double: membuat border double line

  • Width

Parameter lebar border

  • Color

Parameter warna boder

7. Tata Letak List CSS

list-style-type    

Karakter daftar browser yang berbeda mungkin berbeda yang dapat mempengaruhi halaman web. Sehingga sebagian besar daftar di halaman web ditampilkan dengan gambar latar belakang.

8. Cursor

cursor: Parameter bentuk kursor

CSS cursor shape parameter table:

Mouse Shape: CSS Code

style="cursor:hand" hand shape
style="cursor:crosshair" cross
style="cursor:text" text shape
style="cursor:wait" Hourglass
style="cursor:move" Crosshairs:
style="cursor:help" question mark
style="cursor:e-resize" right arrow
style="cursor:n-resize" up arrow
style="cursor:nw-resize" upper left arrow
style="cursor:w-resize" left arrow
style="cursor:s-resize" down arrow
style="cursor:se-resize" right down arrow
style="cursor:sw-resize" lower left arrow

9. Tata Letak Reset CSS

Karena browser yang berbeda mengurai tag secara berbeda, reset CSS dapat membuat tag memiliki efek yang sama di bawah browser yang berbeda. Mengurangi kemungkinan masalah yang disebabkan oleh gaya default.

reset CSS biasanya ditulis di reset.css, seperti :


/* Hapus batas dan ubah font default */
body, div, dl, dt, ul, li, h1, h2, h3, h4, h5, h6, input, form, a, p, textarea {
   margin: 0;
   padding:0;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* menghilangkan titik kecil di depan list */
ul, ol, li {
   list-style: none;
}

/* menghilangkan garis bawah hyperlink */
a {
   text-decoration: none;
}
/*hapus batas gambar*/
img {
   border: none;
}
/
*clear float*/
.clearfloat {
   zoom:1;
}
.clearfloat:after{
   display: block;
   clear: both;
   content: "";
   visibility: hidden;
   height: 0;
}

10. Contoh Tata Letak CSS Dan Sintaks Dasarnya

Kode CSS dapat dibuka dan diedit di editor teks apa pun. Oleh karena itu, terlepas dari apakah pembaca memiliki latar belakang pemrograman, CSS akan terasa sangat sederhana saat pertama kali terpapar. Bagian ini akan memperkenalkan sintaks dasar CSS.

Gaya adalah unit sintaksis terkecil dari CSS, dan setiap gaya berisi dua bagian: Selector dan declaration (rule).

  • Selector

Selector memberi tahu browser objek mana di halaman yang akan diterapkan gaya. Objek ini bisa berupa tag, semua objek halaman web, kelas atau nilai id tertentu dan seterusnya. Saat browser mem-parsing style ini, itu membuat tampilan objek sesuai dengan pemilih.

  • Declaration

Mungkin ada satu atau lebih deklarasi yang memberi tahu browser cara merender objek yang ditentukan oleh pemilih.

Deklarasi harus berisi dua bagian: atribut dan nilai atribut dan titik koma digunakan untuk menandai akhir deklarasi. Titik koma dapat dihilangkan untuk deklarasi terakhir dalam sebuah style.

Semua deklarasi ditempatkan di dalam sepasang kurung kurawal { }, dan kemudian keseluruhannya segera mengikuti pemilih.

  • Property

Properti adalah opsi penataan gaya yang disediakan oleh CSS. Nama atribut terdiri dari satu atau lebih kata yang dihubungkan dengan tanda hubung. Dengan cara ini, sangat intuitif untuk mengekspresikan efek gaya yang akan diatur oleh properti.

  • Nilai Atribut (Value)

Nilai properti digunakan untuk menampilkan parameter efek properti. Ini termasuk nilai dan unit atau kata kunci.

Contoh 1 : Menentukan ukuran font halaman web sebagai 12 piksel dan warna font abu-abu gelap, Anda dapat mengatur style sebagai berikut.

body {  ukuran font:  12px ; warna:  #CCCCCC ; }

Contoh 2 : Menentukan warna latar belakang teks paragraf dengan warna ungu, Anda dapat menentukan style berikut berdasarkan style di atas.

body{ font-size: 12px; color: #CCCCCC;} p{ background-color: #FF00FF; }

Karena bahasa CSS mengabaikan spasi kecuali spasi di dalam selektor. Spasi dapat digunakan untuk memformat kode sumber CSS, dan kode di atas dapat dipercantik sebagai berikut:

body {
    font-size: 12px;
    color: #CCCCCC;
}
p {
    background-color: #FF00FF;
}

Dengan cara ini, ketika membaca kode sumber CSS. Sekilas jelas dan lebih mudah yang tidak hanya nyaman dibaca, tetapi juga lebih mudah dirawat.

Komentar atau penjelasan diperlukan dalam bahasa apa pun. Contoh penggunaan HTML <!–Komentar–>. Untuk komentar dan penggunaan CSS /* Komentar */untuk komentar.

Contoh 3 Komentar berikut dapat dibuat untuk style di atas.

body {  /*properti dasar halaman*/
    font-size: 12px;
    color: #CCCCCC;

/*Properti dasar teks paragraf */
p {
    background-color: #FF00FF;
}

Dengan contoh diatas makan akan mempermudah mengetahui properti CSS yang digunakan.

Kesimpulan

Diatas adalah penjelasan mengenai Dasar Tata Letak CSS Front-End Yang Biasa Digunakan Web Development yang dibagikan Labkom99. Dengan begitu akan mempermudah kita untuk belajar menggunakan CSS dengan cepat. Semoga bermanfaat

Related posts

Leave a Reply

Your email address will not be published.