css
/* */
vertical-align: middle;
<p style=”font-family: effloresceregular;”><span style=”font-size: large; color: #ffffff;”>Our products features everything</span></p>
http://coveloping.com/tools/css-box-shadow-generator
[spoiler title=”Bootstrap” open=”0″ style=”2″]http://getbootstrap.com/getting-started/
[/spoiler] [spoiler title=”full CSS3 generator” open=”0″ style=”2″]http://www.css3maker.com/css3-animation.html
http://virtuosoft.eu/tools/css-gradient-generator/
[/spoiler] [spoiler title=”sites” open=”0″ style=”2″]- http://www.w3schools.com/
- http://reference.sitepoint.com/css
- http://www.cssportal.com/
- http://learnlayout.com/position.html
- http://responsivetest.net/#u=infolap.hu|1024|768
- http://caniuse.com/
http://www.w3schools.com/css3/css3_animations.asp
[/spoiler] [spoiler title=”Efektek” open=”0″ style=”2″]http://h5bp.github.io/Effeckt.css/dist/
[/spoiler] [spoiler title=”Font face” open=”0″ style=”2″]http://www.fontsquirrel.com/tools/webfont-generator
http://www.artisteer.com/Default.aspx?post_id=204412&p=forum_post
[/spoiler] [spoiler title=”px -> em” open=”0″ style=”2″]h1 { font-size: 2em; /* 2*16 = 32 */ }
h2 { font-size: 1.5em; /* 1.5*16 = 24 */ }
h3 { font-size: 1.17em; /* 1.17*16 = 18.72 */ }
h4 { font-size: 1em; /* 1*16 = 16 */ }
h5 { font-size: 0.83em; /* 0.83*16 = 13.28 */ }
h6 { font-size: 0.75em; /* 0.75*16 = 12 */ }
[/spoiler] [spoiler title=”Szintaxisok” open=”0″ style=”2″]p {color:red;text-align:center;}
====
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
=====
all p elements with will be center-aligned:
p.center {text-align:center;}
=====
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
=====
Inline Styles
<p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>
======
[/spoiler] [spoiler title=”CSS Background” open=”0″ style=”2″]div {background-color:#b0c4de;}
=====
body
{
background-image:url(‘gradient2.png’);
background-repeat:repeat-x; / no-repeat;
background-position:right top;
}
=====
Background – Shorthand property
body {background:#ffffff url(‘img_tree.png’) no-repeat right top;}
====
| background | Sets all the background properties in one declaration |
| background-attachment | Sets whether a background image is fixed or scrolls with the rest of the page |
| background-color | Sets the background color of an element |
| background-image | Sets the background image for an element |
| background-position | Sets the starting position of a background image |
| background-repeat | Sets how a background image will be repeated |
With CSS, a color is most often specified by:
- a HEX value – like „#ff0000”
- an RGB value – like „rgb(255,0,0)”
- a color name – like „red”
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
======
| color | Sets the color of text |
| direction | Specifies the text direction/writing direction |
| letter-spacing | Increases or decreases the space between characters in a text |
| line-height | Sets the line height |
| text-align | Specifies the horizontal alignment of text |
| text-decoration | Specifies the decoration added to text |
| text-indent | Specifies the indentation of the first line in a text-block |
| text-shadow | Specifies the shadow effect added to text |
| text-transform | Controls the capitalization of text |
| unicode-bidi | |
| vertical-align | Sets the vertical alignment of an element |
| white-space | Specifies how white-space inside an element is handled |
| word-spacing | Increases or decreases the space between words in a text |
======
[/spoiler] [spoiler title=”CSS Font” open=”0″ style=”2″]CSS Font Families
| Serif | Times New Roman Georgia |
Serif fonts have small lines at the ends on some characters |
| Sans-serif | Arial Verdana |
„Sans” means without – these fonts do not have the lines at the ends of characters |
| Monospace | Courier New Lucida Console |
All monospace characters have the same width |
p{font-family:”Times New Roman”, Times, serif;}
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p {font-size:14px;}
1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
p {font-size:0.875em;} /* 14px/16=0.875em */
| font | Sets all the font properties in one declaration |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |
======
[/spoiler] [spoiler title=”CSS Links” open=”0″ style=”2″]a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
a:link {background-color:#B2FF99;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
======
[/spoiler] [spoiler title=”CSS Lists” open=”0″ style=”2″]- unordered lists – the list items are marked with bullets
- ordered lists – the list items are marked with numbers or letters
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
======
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
======
| list-style | Sets all the properties for a list in one declaration |
| list-style-image | Specifies an image as the list-item marker |
| list-style-position | Specifies if the list-item markers should appear inside or outside the content flow |
| list-style-type | Specifies the type of list-item marker |
======
[/spoiler] [spoiler title=”CSS Tables” open=”0″ style=”2″]Table Borders
To display a single border for the table, use the border-collapse property.
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
======
table
{
width:100%;
}
th
{
height:50px;
}
td
{
text-align:right;
height:50px;
vertical-align:bottom;
}
======
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
======
[/spoiler] [spoiler title=”Css table to center” open=”0″ style=”2″]http://theodorakis.net/tablecentertest.html
[/spoiler] [spoiler title=”CSS Border” open=”0″ style=”2″]p.one
{
border-style:solid;
border-width:5px;
border-color:#98bf21;
}
p.two
{
border-style:dashed;
border-width:medium;
}
| border | Sets all the border properties in one declaration |
| border-bottom | Sets all the bottom border properties in one declaration |
| border-bottom-color | Sets the color of the bottom border |
| border-bottom-style | Sets the style of the bottom border |
| border-bottom-width | Sets the width of the bottom border |
| border-color | Sets the color of the four borders |
| border-left | Sets all the left border properties in one declaration |
| border-left-color | Sets the color of the left border |
| border-left-style | Sets the style of the left border |
| border-left-width | Sets the width of the left border |
| border-right | Sets all the right border properties in one declaration |
| border-right-color | Sets the color of the right border |
| border-right-style | Sets the style of the right border |
| border-right-width | Sets the width of the right border |
| border-style | Sets the style of the four borders |
| border-top | Sets all the top border properties in one declaration |
| border-top-color | Sets the color of the top border |
| border-top-style | Sets the style of the top border |
| border-top-width | Sets the width of the top border |
| border-width | Sets the width of the four borders |
======
[/spoiler] [spoiler title=”CSS Margin” open=”0″ style=”2″]
It is possible to use negative values, to overlap content.
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
======
margin:100px 50px;
======
[/spoiler] [spoiler title=”CSS Padding” open=”0″ style=”2″]padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
======
[/spoiler] [spoiler title=”CSS Grouping and Nesting Selectors” open=”0″ style=”2″]h1,h2,p
{
color:green;
}
======
In the example below, one style is specified for all p elements, one style is specified for all elements with, and a third style is specified only for p elements within elements with:
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
======
[/spoiler] [spoiler title=”CSS Dimension – height-width” open=”0″ style=”2″]| height | Sets the height of an element | auto length % inherit |
1 |
| max-height | Sets the maximum height of an element | none length % inherit |
2 |
| max-width | Sets the maximum width of an element | none length % inherit |
2 |
| min-height | Sets the minimum height of an element | length % inherit |
2 |
| min-width | Sets the minimum width of an element | length % inherit |
2 |
| width | Sets the width of an element | auto length % inherit |
======
[/spoiler] [spoiler title=”CSS Display and Visibility” open=”0″ style=”2″]Hiding an element can be done by setting the display property to „none” or the visibility property to „hidden”. However, notice that these two methods produce different results:
visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.
h1.hidden {visibility:hidden;}
======
display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there:
h1.hidden {display:none;}
======
CSS Display – Block and Inline Elements
A block element is an element that takes up the full width available, and has a line break before and after it.
Examples of block elements:
- <h1>
- <p>
- <div>
An inline element only takes up as much width as necessary, and does not force line breaks.
Examples of inline elements:
- <span>
- <a>
Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow web standards.
li {display:inline;}
span {display:block;}
======
[/spoiler] [spoiler title=”CSS Positioning” open=”0″ style=”2″]Fixed Positioning
An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled.
Note: IE7 and IE8 support the fixed value only if a !DOCTYPE is specified.
Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist. Fixed positioned elements can overlap other elements.
{
position:fixed;
top:30px;
right:5px;
}
======
Relative Positioning
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
Relatively positioned elements are often used as container blocks for absolutely positioned elements.
======
Absolute Positioning
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>. Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist. Absolutely positioned elements can overlap other elements.
h2
{
position:absolute;
left:100px;
top:150px;
}
======
Overlapping Elements
When elements are positioned outside the normal flow, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). An element can have a positive or negative stack order:
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
======
| bottom | Sets the bottom margin edge for a positioned box | auto length % inherit |
2 |
| clip | Clips an absolutely positioned element | shape auto inherit |
2 |
| cursor | Specifies the type of cursor to be displayed | url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help |
2 |
| left | Sets the left margin edge for a positioned box | auto length % inherit |
2 |
| overflow | Specifies what happens if content overflows an element’s box | auto hidden scroll visible inherit |
2 |
| position | Specifies the type of positioning for an element | absolute fixed relative static inherit |
2 |
| right | Sets the right margin edge for a positioned box | auto length % inherit |
2 |
| top | Sets the top margin edge for a positioned box | auto length % inherit |
2 |
| z-index | Sets the stack order of an element | number auto inherit |
2 |
======
[/spoiler] [spoiler title=”CSS Float” open=”0″ style=”2″]Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.
img
{
float:right;
}
======
Floating Elements Next to Each Other
If you place several floating elements after each other, they will float next to each other if there is room.
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
======
Turning off Float – Using Clear
.text_line
{
clear:both;
}
======
[/spoiler] [spoiler title=”CSS Pseudo-classes” open=”0″ style=”2″]selector:pseudo-class {property:value;}
selector.class:pseudo-class {property:value;}
| :link | a:link | Selects all unvisited links |
| :visited | a:visited | Selects all visited links |
| :active | a:active | Selects the active link |
| :hover | a:hover | Selects links on mouse over |
| :focus | input:focus | Selects the input element which has focus |
| :first-letter | p:first-letter | Selects the first letter of every <p> element |
| :first-line | p:first-line | Selects the first line of every <p> element |
| :first-child | p:first-child | Selects every <p> elements that is the first child of its parent |
| :before | p:before | Insert content before every <p> element |
| :after | p:after | Insert content after every <p> element |
| :lang(language) | p:lang(it) | Selects every <p> element with a lang attribute value starting with „it” |
======
[/spoiler] [spoiler title=”CSS Navigation Bar” open=”0″ style=”2″]Navigation Bar = List of Links
<ul>
<li><a href=”default.asp”>Home</a></li>
<li><a href=”news.asp”>News</a></li>
<li><a href=”contact.asp”>Contact</a></li>
<li><a href=”about.asp”>About</a></li>
</ul>
Vertical Navigation Bar
a
{
display:block;
width:60px;
}
- display:block – Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width
- width:60px – Block elements take up the full width available by default. We want to specify a 60 px width
======
Horizontal Navigation Bar
There are two ways to create a horizontal navigation bar. Using inline or floating list items.
li
{
float:left;
}
a
{
display:block;
width:60px;
}
- float:left – use float to get block elements to slide next to each other
- display:block – Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width
- width:60px – Since block elements take up the full width available, they cannot float next to each other. We specify the width of the links to 60px
======
[/spoiler] [spoiler title=”CSS Image Opacity / Transparency” open=”0″ style=”2″]img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
<html>
<head>
<style>
div.background
{
width:500px;
height:250px;
background:url(klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>
<body>
<div>
<div>
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
======
[/spoiler] [spoiler title=”CSS Image Sprites” open=”0″ style=”2″]img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}
- <img src=”img_trans.gif” /> – Only defines a small transparent image because the src attribute cannot be empty. The displayed image will be the background image we specify in CSS
- width:46px;height:44px; – Defines the portion of the image we want to use
- background:url(img_navsprites.gif) 0 0; – Defines the background image and its position (left 0px, top 0px)
======
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url(‘img_navsprites.gif’) 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url(‘img_navsprites.gif’) -47px 0;}
#next{left:129px;width:43px;}
#next{background:url(‘img_navsprites.gif’) -91px 0;}
- #navlist{position:relative;} – position is set to relative to allow absolute positioning inside it
- #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} – margin and padding is set to 0, list-style is removed, and all list items are absolute positioned
- #navlist li, #navlist a{height:44px;display:block;} – the height of all the images are 44px
Now start to position and style for each specific part:
- #home{left:0px;width:46px;} – Positioned all the way to the left, and the width of the image is 46px
- #home{background:url(img_navsprites.gif) 0 0;} – Defines the background image and its position (left 0px, top 0px)
- #prev{left:63px;width:43px;} – Positioned 63px to the right (#home width 46px + some extra space between items), and the width is 43px.
- #prev{background:url(‘img_navsprites.gif’) -47px 0;} – Defines the background image 47px to the right (#home width 46px + 1px line divider)
- #next{left:129px;width:43px;}- Positioned 129px to the right (start of #prev is 63px + #prev width 43px + extra space), and the width is 43px.
- #next{background:url(‘img_navsprites.gif’) no-repeat -91px 0;} – Defines the background image 91px to the right (#home width 46px + 1px line divider + #prev width 43px + 1px line divider )
======
Our new image („img_navsprites_hover.gif”) contains three navigation images and three images to use for hover effects:
home a:hover{background: url(‘img_navsprites_hover.gif’) 0 -45px;}
#prev a:hover{background: url(‘img_navsprites_hover.gif’) -47px -45px;}
#next a:hover{background: url(‘img_navsprites_hover.gif’) -91px -45px;}
- Since the list item contains a link, we can use the :hover pseudo-class
- #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} – For all three hover images we specify the same background position, only 45px further down
======
[/spoiler]