Null/CSS: Difference between revisions
Andre Castro (talk | contribs) No edit summary |
Andre Castro (talk | contribs) No edit summary |
||
| Line 63: | Line 63: | ||
=example= | =example= | ||
<source lang=" | <source lang="html4strict"> | ||
<!DOCTYPE HTML> | <!DOCTYPE HTML> | ||
<html> | <html> | ||
Revision as of 17:43, 6 November 2014
css declation
- style in a html document
- css rule
- css block
- declaration
- css block
css rule
css block
css declaration
css declaration
Images from https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
selector rules
- id
- class
- several selectors for 1 rule
http://www.w3.org/TR/CSS2/selector.html
positioning
- absolute, relative, fixed
- stacking https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
typography
- native fonts
- font-size: pt, em
- font-weight
- font-style
- font-family
- embedding fonts
pseudo-class
- a :visited :hover
- :first :first-line :not
https://developer.mozilla.org/en-US/docs/Web/CSS/:first
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line
resources
https://developer.mozilla.org/en-US/Learn/CSS/Basic_text_styling_in_CSS
https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
https://developer.mozilla.org/en-US/docs/Web/CSS
example
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>My beautiful page</title>
<!--html comment -->
<style>
/* css comment */
body {
background-color: #33d5ad;
color: rgb(0,0,0);
font-family:serif;
font-size: 14pt;
font-weight: normal;
font-family: 'Ubuntu Mono Bold';
}
div#yellow {
display:show;
position:fixed;
background: yellow;
width:50%;
margin-left: 200px;
margin-top: 0px;
padding:0px;
font-size:1em;
font-family: 'Ubuntu Mono Bold';
border: solid 15px black ;
}
span#test{
font-size: 0.6em;
vertical-align:super;
}
a {
color: black;
text-decoration:none;
background: none;
}
a:hover{
text-decoration:underline;
background: yellow;
font-family:monospace;
}
h1 {
color: pink;
font-size: 2em;
}
h1.title, h2.title {
background: blue;
color: yellow;
}
p{
color:red;
}
p:first-line{
color:black;
font-weight:bold;
}
div#empty{
background:black;
width:200px;
height:200px;
}
</style>
</head>
<body>
<div id="yellow">
<p>This will be my text.
<a href="http://en.wikipedia.org/wiki/Bear" >
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Ursus_arctos_-_Norway.jpg/300px-Ursus_arctos_-_Norway.jpg" alt="A Bear" width="100px" />
</a> And other sentence</br>This is the <span id="test">second</span> paragraph</p>
<hr />
</div>
<div id="empty">
</div>
<h1 class="title">My title</h1>
<h2 class="title">My sub title</h2>
<h1 class="title">My title</h1>
<h1><span>My não is Basilicum</span></h1>
<br />
<a href="http://en.wikipediax.org" target="_top" title="dont bother me" >http://en.wikipediax.org</a>
<br/>
<a href="http://en.wikipedia.org" target="_top" title="dont bother me" >http://en.wikipedia.org</a>
<br/>
<a class="title" href="./01intro.html" target="_blank" title="the same page">self</a>
<br />
<a class="title" href="../02/garage.html">My garage</a>
<h2></h2>
<h1 class="title">ی</h1>
<h2 class="title">My sub title</h2>
<h1 class="title">My title</h1>
<h1><span>My não is Basilicum</span></h1>
<h1 class="title">My title</h1>
<h2 class="title">My sub title</h2>
<h1 class="title">My title</h1>
<h1><span>My não is Basilicum</span></h1>
</body>
</html>