Home > HTML > HTML and CSS (2)

HTML and CSS (2)

HTML中的Style Sheet:

  • /* HTML body中的CSS */
    <div style=”color:red; background:teal;”></div> <!– whole line –>
    <span style=”color:red; background:teal;”></span> <!– part of line –>
  • /* HTML header中的CSS */
    <style>
    em {color:green;}
    span {font-family:monospace;}
    .className {color:green;}
    </style>
  • /* 連結HTML外部文件的CSS */
    <head><link rel=”stylesheet” href=”style.css” /></head>
    <head><link rel=”stylesheet” href=”http://twitter.github.com/bootstrap/assets/css/bootstrap.css”></head&gt;

外部文件的CSS:

  • selector, selector  {property: value value; property: value value;}
    parent descendant: {…}
    parent > child: {…}
  • * { color:red; } /* Global Selector */
    html * * *  /* HTML下第三層所有 */
  • p { color:red; } /*  */
  • .className {color:blue;} /* Class,HTML中加入「class=”className”」顯示 */
    p.className /* 在Paragraph中符合className的 */
  • #idName {color:yellow;} /* ID attribute,HTML中加入「id=”idName”」顯示 */
  • #idName li /* 在idName子層的li */
    #idName li:hover /* Mouseover時的反應 */
    #idName li:first-child /* 第一個li */
    #idName li:last-child /* 最後一個li */

CSS Style(color):

CSS Style(text appearance):
  • font-family:monospace/arial;
  • font-weight:bold;
  • font-size:25px;
  • font-style:italic;
  • text-decoration:underline/overline/line-through;
  • text-shadow: 3px 3px 3px yellow;
  • text-transform:capitalize/uppercase/lowercase;
CSS Style(layout):
  • text-align:left/right/center/justify;
  • text-indent: 5%/20px; /* 第一行縮行 */
  • width: 10px/10%;
  • height: 10px/10%;
  • letter-spacing:normal/10px;
  • line-height: 5%/20px;
  • column-count: 3;
  • transform: rotate(25deg);

CSS Style(shadow):

  • text-shadow: [left] [top] [blur] [color];
  • box-shadow: [left] [top] [blur] [color];

CSS Style(“Box Model”: content > padding > border > margin ):

  • padding: 30px/30%; /* = [top] [right] [bottom] [left] */
  • box-shadow: 8px 8px 6px -2px black; /* shadowed box */
  • border: solid/dashed 1px black; /* = [style] [width] [color] */
  • border-radius: 15px; /* rounded corners */
  • margin: 10px/10%;  /* = [all four]/[vert][horz] */
  • margin: 10px/10%;  /* [top] [right] [bottom] [left] */

CSS Style(positioning):

  • float: left/right; height/width: 50%; /* make it “float” and separate as left and right columns */
  • right: 15px; left: 15px; top: 15px; bottom: 15px;
  • position: absolute; /* to position elements relative to their ‘containing block’ */
  • position: relative; /*  to position blocks relative to where they would have been in the document flow */
  • position: fixed; /* like absolute but ALWAYS relative to the browser window no matter how you scroll */
  • position: static;
  • display: inline; /* include part, not whole line */
  • display: block; /* include whole line */
  • display: none; /* not displaying */
  • display: inline-block; /* vertical lined >> in one line */
  • clear: right/left/both;  /* clear format set previously */
  • z-index: -5 /* vertical depth */
Categories: HTML
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: