Lanjutan CSS | CSS Dimension - CSS Attr Selector Aspire

CSS

CSS Dimension – CSS Attr Selector

- CSS Dimension

CSS Dimension adalah properti di css yang digunakan untuk mengatur tinggi dan lebar elemen di html dengan menggunakan style width and height.

Contoh Script :

<!DOCTYPE html>

<html>

<body>

<br>

</body>

</html>

- CSS Display

CSS Display digunakan untuk mengatus tampilan dari elemen di html, apakah elemen tersebut mau ditampilkan atau disembunyikan ataupun dihilangkan.

Contoh Script :

<!DOCTYPE html>

<html>

<head>

<style>

.hilang {

visibility:hidden;

}

.buang {

display:none;

}

li.segaris {

display:inline;

}

</style>

</head>

<body>

Gambar di atas hilang<br>

<ul>

<li>Manajemen Informatika</li>

<li>Komputerisasi Akuntansi</li>

<li>Teknik Otomotif</li>

</ul>

<ul>

<li class="segaris">Manajemen Informatika</li>

<li class="segaris">Komputerisasi Akuntansi</li>

<li class="segaris">Teknik Otomotif</li>

</ul>

</body>

</html>

Hasil script di atas :

- CSS Positioning

CSS Positioning digunakan untuk mengatur bagaimana atau dimana kita akan memposisikan atau menempatkan elemen html. Kita bisa menempatkannya di kanan, kiri, atas, tengah atau bawah. Bagaimana itu kita akan menempatkan elemen html kita tetap tidak dapat berpindah, atau ikut berpindah.

Contoh Script :

<!DOCTYPE html>

<html>

<head>

<style>

.tetap {

position:fixed;

top:30px;

left:100px;

}

.relatif1{

position:relative;

left:-20px;

}

.relatif2{

position:relative;

left:20px;

}

.absolut{

position:absolute;

left:100px;

}

</style>

</head>

<body>

</body>

</html>

Hasil script di atas :

- CSS Float

CSS Float digunakan untuk membuat elemen yang kita setting menjadi mengapung atau bisa disebut ditempatkan disebelahmananya elemen setelah elemen yang kita setting. Kita juga bisa menghentikan settingan atau membuat salah satu elemen di dalamnya tidak terpengaruh settingan float kita.

Contoh Script :

<!DOCTYPE html>

<html>

<head>

<style>

.kanan {

float:right;

border:1px solid red;

}

.kiri {

float: left;

margin: 5px;

border:1px solid blue;

}

.hilangkan {

clear:both;

margin-bottom:2px;

}

</style>

</head>

<body>

<h2 class="hilangkan">Baris kedua</h2>

</body>

</html>

Hasil script di atas :

- CSS Align

CSS Align disini berisi cara-cara untuk mengatur rerata blok elemen didalam dokumen yang kita buat menggunakan berbagai cara antara lain dengan margin, posision dan float. Blok elemen yang ada di html antara lain h1,p dan div.

Contoh Script :

<!DOCTYPE html>

<html>

<head>

<style>

.margin {

color:yellow;

margin-left: auto;

margin-right: auto;

width: 60%;

background-color: red;

}

.kanan {

color:yellow;

position: absolute;

right: 0px;

width: 300px;

background-color: blue;

}

.kiri {

float: left;

width: 300px;

background-color: black;

color:white;

}

</style>

</head>

<body>

<p>lokasi yang berwarna merah ini akan rata tengah</p>

<p>Karena kita sudah mengatur margin kiri dan kanan sama besar</p>

</div>

<p>lokasi yang berwarna biru ini akan rata tengah</p>

<p>Karena kita sudah mengatur posisi berada di kanan</p>

</div>

<p>lokasi yang berwarna hitam ini akan rata tengah</p>

<p>Karena kita sudah mengatur float berada di kiri</p>

</div>

</body>

</html>

Hasil script di atas :

- CSS Combinators

CSS Combinators disini adalah sesuatu yang menjelaskan hubungan antara selector-selector yang ada.

Ada 4 combinator, yaitu :

· Descendant selector :

Disini memberi settingan pada semua selector yang ditentukan berada di dalam selector yang dipilih

· Child Selector :

Memberi settingan pada semua selector yang ditentukan tepat setelah selector yang dipilih

· Adjacent sibling selector :

Memberi settingan pada selector pertama yang ditentukan setelah selector yang dipilih

· General Sibling selector :

Memberi settingan pada semua selector yang ditentukan setelah selector yang dipilih

Contoh Script :

è Descendant selector :

<!DOCTYPE html>

<html>

<head>

<style>

div p {

background-color: yellow;

}

</style>

</head>

<body>

<div>

<p>Descendant selector</p>

</div>

<p>Descendant selector</p>

</body>

</html>

è Child selector

<!DOCTYPE html>

<html>

<head>

<style>

div > p {

background-color: yellow;

}

</style>

</head>

<body>

<div>

<p>General sibling selector</p>

</div>

<p>General sibling selector</p>

</body>

</html>

è Adjacent sibling selector

<!DOCTYPE html>

<html>

<head>

<style>

div + p {

background-color: yellow;

}

</style>

</head>

<body>

<div>

<p>General sibling selector</p>

</div>

<p>General sibling selector</p>

</body>

</html>

è General Sibling selector

<!DOCTYPE html>

<html>

<head>

<style>

div ~ p {

background-color: yellow;

}

</style>

</head>

<body>

<div>

<p>General sibling selector</p>

</div>

<p>General sibling selector</p>

</body>

</html>

Hasil script di atas :

- CSS Pseudo-class

CSS Pseudo-class disini digunakan untuk mengatur keadaan-keadaan khusus pada elemen yang ada di dokumen html kita. Seperti saat mouse kita berada diatas sebuah link, saat kita fokus ke sebuah teksbox. Ada juga first-child dimana kita akan memberi settingan pada elemen pertama yang kita pilih atau elemen pertama di dalam elemen yang kita pilih.

Contoh Script :

<!DOCTYPE html>

<html>

<head>

<style>

a.mouse:hover {

background-color:red;

color:yellow;

}

p:first-child {

color:blue;

}

p i:first-child {

color:blue;

}

</style>

</head>

<body>

<a class="mouse" href="http://www.w3schools.com">Contoh Link</a>

<a href="http://www.w3schools.com">Contoh Link</a>

<p>Ini adalah sebuah kalimat :-P</p>

<p><i>Ini</i> adalah sebuah <i>kalimat</i> :-P</p>

<p>Ini adalah sebuah kalimat :-P</p>

</body>

</html>

Hasil script di atas :

- CSS Pseudo-element

CSS Pseudo-element disini hampir sama seperti pseudo-class tapi disini pseudo-elemen mengatur bagian-bagian yang spesifik pada sebuah elemen. Seperti huruf pertama, baris pertama.Kita juga bisa memberi gambar ke sebelum atau setelah elemen yang kita setting. Atau elemen saat di blok. Kita juga bisa memberi class pada settingannya.

Contoh Script :

<!DOCTYPE html>

<html>

<head>

<style>

p::first-line {

color:red;

}

p::first-letter{

color:blue;

}

p.awal::first-letter{

color:green;

}

::selection {

background-color:black;

color:white;

}

</style>

</head>

<body>

<p>Ini adalah sebuah kalimat :-P. Ya iyalah >_<. Jika ukuran dari windows browsernya diatur ukurannya bagaimanapun yang ada di baris pertama akan berwarna merah. Jika memang kalian semua tidak percaya lakukan saja :-P</p>

<p>Ini adalah sebuah kalimat :-P</p>

<p class="awal">Ini adalah sebuah kalimat :-P</p>

</body>

</html>

Hasil script di atas :

- CSS Navigation Bar

Ini digunakan untuk membuat sebuah bar navigasi atau yang biasa kita sebut sebagai menu di sebuah website. Atau bisa disebut navigation merupakan list dari beberapa link.

Navigation bar bisa dibuat secara horizontal maupun vertical

Contoh Script :

<!DOCTYPE html>

<html>

<head>

<style>

li.horiz {

display:inline;

}

</style>

</head>

<body>

Contoh navigasi :

<br>

Secara vertikal

<ul>

<li><a href=#About>About</a></li>

<li><a href=#Contact>Contact</a></li>

</ul>

<br>

Secara horizontal

<br>

<ul>

<li class="horiz"><a href=#About>About</a></li>

<li class="horiz"><a href=#Contact>Contact</a></li>

</ul>

</body>

</html>

Hasil script di atas :

- CSS Image Galerry

CSS Image Galerry ini dimana kita membuat sebuah galeri yang merupakan kumpulan dari gambar-gambar yang kita susun secara rapi

Contoh Script :

<!DOCTYPE html>

<html>

<head>

<style>

div.img {

margin: 5px;

border: 1px solid #ccc;

float: left;

width: 180px;

}

div.img:hover {

border: 1px solid #777;

}

div.img img {

width: 100%;

height: auto;

}

div.desc {

padding: 15px;

text-align: center;

}

</style>

</head>

<body>

</a>

<div class="desc">Deskripsi dari gambar di atas</div>

</div>

</a>

<div class="desc">Deskripsi dari gambar di atas</div>

</div>

</a>

<div class="desc">Deskripsi dari gambar di atas</div>

</div>

</a>

<div class="desc">Deskripsi dari gambar di atas</div>

</div>

</body>

</html>

Hasil script di atas :

- CSS Image Opacity

Ini digunakan untuk membuat settingan gambar menjadi transparan. Kita juga bisa memberi efek jika mouse berada di atas gambar gambarnya menjadi tidak transparan lagi. Nilai dari opacity nya adalah dari 0.0 – 1.0 dimana semakin kecil nilainya semakin transparan gambarnya.

Contoh Script :

<!DOCTYPE html>

<html>

<head>

<style>

img.trans {

opacity:0.5;

}

img:hover {

opacity:1.0;

}

</style>

</head>

<body>

Gambar Asli <br>

Gambar transparan<br>

<br>

Dengan efek mouse di atasnya <br>

<img class="trans" src="3a.jpg" width="240" height="135"> /

</body>

</html>

Hasil script di atas :

- CSS Media Types

CSS Media types disini digunakan untuk menyetting dokumen ini dapat ditampilkan di media apa saja. Contohnya dokumen ini akan ditampilkan di printer saja, atau dapat ditampilkan hanya di projector saja.

Property yang ada di css media types antara lain :

All : untuk semua media

Aural : untuk pidato dan perangkat suara

Braille : untuk perangkat khusus braille

Embossed : untuk halaman print braille

Handheld : untuk perangkat kecil atau yang bisa digenggam tangan

Print : hanya muncul di printer

Projection : untuk presentasi yang diprojeksikan

Screen : untuk layar komputer

Tv : untuk perangkat bertipekan televisi

Contoh Script :

<!DOCTYPE html>

<html>

<head>

<style>

@media screen {

p {

font-family: verdana,sans-serif;

font-size: 14px;

}

@media print {

p {

font-size:20px;

color:red;

}

</style>

</head>

<body>

<p>Settingan yang saya buat diatas akan membuat tampilan dari paragraf ini menjadi berbeda jika kita lihat dari layar atau saat di print.

Ukuran dari hurufnya akan berbeda dan warnanya akan berbeda</p>

</body>

</html>

Hasil script di atas :

- CSS Attr Selector

Digunakan untuk memberi settingan pada attribut yang kita pilih.

Ada 7 CSS Attr Selector yaitu

1. CSS [attribute] selector

Memberi settingan pada attribute yang kita pilih

2. CSS [attribut=value] selector

Memberi settingan pada attribute yang memiliki value yang kita tentukan

3. CSS [attribute~=value] selector

Memberi settingan pada attribute yang valuenya memiliki kata yang kita tentukan

4. CSS [attribute|=value] selector

Memberi settingan pada attribut yang namanya diawali oleh kata yang kita tentukan tapi harus kata yang kita tentukan itu berdiri sendiri misal. “top_blank”, tidak boleh “topblank”

5. CSS [attribute^=value] selector

Memberi settingan pada attribute yang namanya diawali oleh kata yang kita tentukan

6. CSS [attribute$=value] selector

Memberi settingan pada attribute yang namanya diakhiri oleh kata yang kita tentukan

7. CSS [attribute*=value] selector

Memberi settingan pada attribute yang namanya mengandung kata yang kita tentukan

Contoh Script :

<!DOCTYPE html>

<html>

<head>

<style>

a[target] {

color:yellow;

background-color: red;

}

a[target="_blank"] {

color:blue;

background-color: yellow;

}

[title~="flower"] {

border: 5px solid yellow;

}

[class|="top"] {

background: blue;

}

[class^="top"] {

background: pink;

}

[class$="test"] {

color:white;

background: black;

}

[class*="te"] {

background: yellow;

}

</style>

</head>

<body>

<div class="first_test">The first div element.</div>

<a href="http://www.w3schools.com"> Ini adalah sebuah link</a>

<a href="http://www.w3schools.com" target="_blank"> Ini adalah sebuah link</a>

<a href="http://www.w3schools.com" target="_parent"> Ini adalah sebuah link</a>

<div class="second">The second div element.</div>

<div class="my-test">The third div element.</div>

<p class="mytest" title="flower">This is some text in a paragraph.</p>

<p class="mytest">This is some text in a paragraph.</p>

<p class="toptip">This is some text in a paragraph.</p>

<p class="top_tip">This is some text in a paragraph.</p>

<p class="mytest">This is some text in a paragraph.</p>

</body>

</html>

» Thanks for reading: Lanjutan CSS | CSS Dimension - CSS Attr Selector

Latest News and Artikel

Lanjutan CSS | CSS Dimension - CSS Attr Selector