Home » Uncategories » belajar css 3
Edit

belajar css 3



POSITION absolute

/* belajar CSS 101 */
/* POSITION: fixed, absolute, relative, static*/

p{
        font-size:40px;
        padding:10px;
        width:100%;
}
/*
absolute:
posisi awal dianggap hilang;
ikut scroll;
koordinat tergantung?1.browser
2. parent element. 2.a punya parent element
                                  2.b parent tidak boleh static.


*/

div{
        position:relative;
       
}
#satu{
        background-color:red;
        position:absolute;
        top:50px;
        left:20px;
}
#dua{
        background-color:green;
}
#tiga{
        background-color:yellow;
}
#empat{
        background-color:blue;
}
===========================================================================

<!DOCTYPE html>
<html>
<head><title></title>
<link href="style14.css" rel="stylesheet">
</head>
<body>
<h1>Belajar CSS</h1>
<div>
<p id="satu">Box 1</p>
</div>
<p id="dua">Box 2</p>
<p id="tiga">Box 3</p>
<p id="empat">Box 4</p>
</body>
</html>
==========================================================================
output





Z-INDEX
===========================================================================



/* belajar CSS 101 */
/* POSITION: fixed, absolute, relative, static*/

p{
        font-size:40px;
        padding:10px;
        width:100%;
}
/*
absolute:
posisi awal dianggap hilang;
ikut scroll;
koordinat tergantung?
1.browser
2. parent element. 2.a punya parent element
                                  2.b parent tidak boleh static.
                                 
                                  z-index tidak bisa dipakai pada posisi static
                                  z-index:-1 == posisi jadi dibelakang
                                 


*/


#satu{
        background-color:red;
        position:absolute;
        top:100px;
        left:20px;
        z-index:-1;
}
#dua{
        background-color:green;
        position:absolute;
        top:100px;
        z-index:-2;
}
#tiga{
        background-color:yellow;
}
#empat{
        background-color:blue;
}

<!DOCTYPE html>
<html>
<head><title></title>
<link href="style15.css" rel="stylesheet">
</head>
<body>
<h1>Belajar CSS</h1>
<p id="satu">Box 1</p>
<p id="dua">Box 2</p>
<p id="tiga">Box 3</p>
<p id="empat">Box 4</p>
</body>
</html>

Output







FLOAT
img{
       
        float:right;
}
p{
        /*untuk mnghilanhkan float
        clear:both;
       
        */
        clear:right;
}
<!DOCTYPE html>
<html>
<head><title></title>
<link href="style16.css" rel="stylesheet">
</head>
<body>
<h1>Belajar CSS</h1>
<img src="../FEBRIAN_FUTU.jpg" height="100"></img>
<p>
lore ipsum lore ipsum lore ipsumlore ipsumlore ipsumlore ipsum lore ipsum lore ipsum lore ipsum lore ipsumlore ipsumlore ipsumlore ipsum lore ipsumlore ipsumlore ipsumlore ipsumlore ipsumlore ipsum lore ipsum
lore ipsum lore ipsum lore ipsumlore ipsumlore ipsumlore ipsum lore ipsum lore ipsum lore ipsum lore ipsumlore ipsumlore ipsumlore ipsum lore ipsumlore ipsumlore ipsumlore ipsumlore ipsumlore ipsum lore ipsum
lore ipsum lore ipsum lore ipsumlore ipsumlore ipsumlore ipsum lore ipsum lore ipsum lore ipsum lore ipsumlore ipsumlore ipsumlore ipsum lore ipsumlore ipsumlore ipsumlore ipsumlore ipsumlore ipsum lore ipsum
</p>
</body>
</html>

OUTPUT







FLOAT BAGIAN 2
#satu{
        float:left;
        width:60%;
        margin-right:5px;
}
#test{
        clear:left;
        text-align:center;
}


<!DOCTYPE html>
<html>
<head><title></title>
<link href="style17.css" rel="stylesheet">
</head>
<body>
<h1>Belajar CSS</h1>
<div id="satu">
<p >
lore ipsum lore ipsum lore ipsumlore ipsumlore ipsumlore ipsum lore ipsum lore ipsum lore ipsum lore ipsumlore ipsumlore ipsumlore ipsum lore ipsumlore ipsumlore ipsumlore ipsumlore ipsumlore ipsum lore ipsum
lore ipsum lore ipsum lore ipsumlore ipsumlore ipsumlore ipsum lore ipsum lore ipsum lore ipsum lore ipsumlore ipsumlore ipsumlore ipsum lore ipsumlore ipsumlore ipsumlore ipsumlore ipsumlore ipsum lore ipsum
lore ipsum lore ipsum lore ipsumlore ipsumlore ipsumlore ipsum lore ipsum lore ipsum lore ipsum lore ipsumlore ipsumlore ipsumlore ipsum lore ipsumlore ipsumlore ipsumlore ipsumlore ipsumlore ipsum lore ipsum
</p>
</div>
<div id="dua">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</div>
<p id="test">copyright 2015</p>
</body>
</html>

OUTPUT







PSEUDO ELEMENT
========================================================================

h1::after{
        content:'Nama' url(../FEBRIAN_FUTU.jpg) ;

}

p::first-letter{
        color:red;
}
p::first-line{
        color:blue;
}
p::selection{
        color:yellow;
        background-color:black;
}
====================================================================

<!DOCTYPE html>
<html>
<head><title></title>
<link href="style18.css" rel="stylesheet">
</head>
<body>
<h1 >Belajar CSS</h1>
<p>Mengintip pseudo Element</p>
</body>
</html>

Output


selector

div > a > p{
        background-color:red;
}
<!DOCTYPE html>
<html>
<head><title></title>
<link href="style19.css" rel="stylesheet">
</head>
<body>
<h1> Belajar CSS</h1>
<div>
<p>Paragraph pertama dalam div</p>
<p>Paragraph kedua dalam div</p>
<a href=""><p>ini p lagi</p></a>
</div>
<p>Paragraph pertama luar div</p>
<a href="">asdf</a>
<p>Paragraph kedua luar div</p>
</body>
</html>



Catatan tambahan

/*satu elemen lgsg dibwh div*/
div + p{
        background-color:red;
}
/*semua elemen p dibwh div*/
div ~ p{
        background-color:red;
}
/*semua elemen p didlm div*/
div p{
        background-color:red;
}
/*semua elemen p didlm div dbwhnya lgsg*/

div > p{
        background-color:red;
}

/*semua elemen p didlm div dbwhnya lgsg*/

div > a > p{
        background-color:red;
}

output



0 Response to "belajar css 3"

Posting Komentar

Langganan: Posting Komentar (Atom)