Monday, February 20, 2012

CSS

index  




CSS Cascading Style Sheets

[] square bracket角括弧(かくかっこ) 大括弧
() parantheses  小括弧
{} curly braces 中括弧
; semicolon セミコロン
& ampersandアンパーサンド
/ slash スラッシュ
\ backslash バックスラッシュ

External Style Sheet
<head> <link rel = "stylesheet" type = "text/css" 
href = "mystyle.css" /> </head>

Internal Style Sheet
<head> <style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style> </head>

Inline Styles
<p style = "color:blue; margin-left:20px;" >
This is a paragraph.</p>
<html><head><style type="text/css">
body{ background-color:#d0e4fe;}
h1 { color:orange;text-align:center;}
p { font-family:"Times New Roman"; font-size:20px;}
</style></head>
<body>
<h1>CSS example!</h1>
<p>This is a paragraph.</p>
</body></html>
-------------------------------
/*This is a comment*/
-------------------------------
#bb {text-align:center;color:red;}
<p id="bb">This is a paragraph.</p>
-------------------------------
.aa { text-align:center; color:red; }
<p class="aa">This is a paragraph.</p>
-------------------------------
h1.aa {text-align:center;}
<h1 class = "aa">CSS example!</h1>
-------------------------------
h1,h2,p { color:green }
-------------------------------
p elements with class="marked"
.marked p { color:white; } 
-------------------------------
Cascading order
1.Inline style (inside an HTML element)
2.Internal style sheet (in the head section)
3.External style sheet
4.Browser default
-------------------------------
body {background-color:#b0c4de;}
background-image:url('paper.gif');
background-repeat:repeat-x;
repeat | repeat-x | repeat-y | no-repeat | inherit
-------------------------------
background-position:right top;
left top | left center | left bottom | right top | right center
| right bottom | center top | center center | center bottom | 50% 50 % | 
-------------------------------
color:blue; blue | #00ff00 | rgb(255,0,0)
-------------------------------
text-align:center; center | right | justify | left | inherit
-------------------------------
text-decoration:overline; none | overline | line-through | underline | blink | inherit
-------------------------------
text-transform:uppercase;
uppercase | lowercase | capitalize | none | inherit
-------------------------------
text-indent:50px; 50px | 2 cm | 2%
-------------------------------
font-family:"Times New Roman", Times, serif;
-------------------------------
font-style:normal; normal | italic | oblique | inherit
-------------------------------
font-size:40px; (1em = 16px)
40px | 2.5em | 50% | small | medium | large | smaller | larger
-------------------------------
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
-------------------------------
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 */
-------------------------------
ul.a {list-style-type: circle;}
circle | disc | none | square | cjk-ideographic | decimal | hiragana | hiragana-iroha | lower-alpha | lower-latin | lower-roman | none | upper-alpha | upper-roman
-------------------------------
list-style-image: url('sqpurple.gif'); 
padding: 0px; 
margin: 0px; 
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px; 
padding-left: 14px;
-------------------------------
ul { list-style: square url("sqpurple.gif"); }
-------------------------------
border-width:5px;
border-style:solid;
border-color:red;
or
border:5px solid red;
-------------------------------
border-style:solid;
none | hidden | dotted | dashed |  solid | double | groove | ridge | inset | outset |inherit 
-------------------------------
border-collapse:collapse;  collapse | separate | inherit
-------------------------------
width:100%; height:50px; text-align:right; 
vertical-align:bottom; padding:15px; 
-------------------------------
margin > border > padding > content
width:250px; /*width of the content*/
padding:10px; 
border:5px solid gray;
margin:10px;
-------------------------------
border-top-style:dotted;     border-right-style:solid;
border-bottom-style:dotted;  border-left-style:solid; 
or
border-style:dotted solid;
-------------------------------
margin-top:10px;    margin-right:5px;
margin-bottom:15px; margin-left:20px;
or
margin:10px 5px 15px 20px;
-------------------------------
padding-top:25px; padding-bottom:25px;
padding-right:50px; padding-left:50px;
or
padding:25px 50px;
-------------------------------
visibility:hidden;  visible | hidden | collapse | inherit
-------------------------------
display:none;  inline | block | list-item | none
-------------------------------
position:fixed;   static | absolute | fixed | relative | inherit
-------------------------------
top:30px;  right:5px;  left:-20px bottom:5px; 
-------------------------------
img { position:absolute; left:0px; top:0px; z-index:-1 }
-------------------------------
float:right;   left | right | none | inherit
-------------------------------
clear:both;   left | right | none | inherit | both
-------------------------------
<html> <head> <style type="text/css">
p:first-child { color:blue;  } 
</style> </head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body> </html>
-------------------------------
first-child | first-line | first-letter 
-------------------------------
font-variant:small-caps;
small-caps | normal | inherit
-------------------------------
ime-mode: deactivated;
auto | active | inactive | deactivated
-------------------------------

No comments:

Post a Comment