Programming: Standard CSS

Syntax:
selector {property: value; property: value;}

p {
    color: red;
    text-align: center;
}

RGB color picker: http://www.w3schools.com/css/css_colors.asp

Background image:
body {
    background-image: url("bgdesert.jpg");
   }
The image above is repeated only horizontally ( background-repeat: repeat-x;) or no repeat (background-repeat: no-repeat;).
The position of the image is specified by the background-position property: background-position: right top;
To specify that the background image should be fixed (will not scroll with the rest of the page), use the background-attachment property: background-attachment: fixed;
Short Key -->
body {
    background: #ffffff url("img_tree.png") no-repeat right top;}

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;}

Border style:
p {
    border: 5px solid red;}

The border-radius property is used to add rounded borders to an element:
p {
    border: 2px solid red;
    border-radius: 5px;}

Margin:
p {
    margin: 100px 150px 100px 80px;}

To use the Font Awesome icons, add the following line inside the <head> section of your HTML page:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

To use the Bootstrap glyphicons, add the following line inside the <head> section of your HTML page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

To use the Google icons, add the following line inside the <head> section of your HTML page:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

The four links states are:

a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked

Link Button Example:
a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;}

a:hover, a:active {
    background-color: red;}

Add a container element (like <div>) with overflow-x:auto around the <table> element to make it responsive:

Example

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>

Web Layout Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 3px solid blue;
}

.clearfix {
    overflow: auto;
}

nav {
    float: left;
    width: 200px;
    border: 3px solid #73AD21;
}

section {
    margin-left: 206px;
    border: 3px solid red;
}
</style>
</head>
<body>

<div class="clearfix">

<nav>
<span>nav</span>
    <ul>
      <li><a target="_blank" href="/default.asp">Home</a></li>
      <li><a target="_blank" href="default.asp">CSS</a></li>
      <li><a target="_blank" href="/html/default.asp">HTML</a></li>
      <li><a target="_blank" href="/js/default.asp">JavaScript</a></li>
    </ul>
</nav>

<section>
    <span>section</span>
    <p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p>
</section>

<section>
    <span>section</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.</p>
</section>

</div>

</body>
</html>

Center an image:
img {
    display: block;
    margin: auto;
    width: 40%;
}

Animation Example:

@keyframes example {
from {background-color: red;}
to {background-color: yellow;}

div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
animation-direction: alternate;
animation-iteration-count: 3; <--- can also be "infinite"
animation-timing-function: linear/ease/ease-in/ease-out/ease-in-out;
}

short cut:
div {
animation: example 5s linear 2s infinite alternate;
}

Programming

maandag 17 oktober 2016

Standard CSS

Example

Geen opmerkingen:

Een reactie posten