css

最後更新: 2018-03-27

介紹

 


CSS Syntax

<head>
  <style>
    Selector {
      Property1:Value1;
      Property2:Value2;
      .................
    }
  </style>
</head>

 


Import stylesheet.css

 

<head>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

 


Cascading Order

 

  1. Inline style (inside an HTML element)
  2. External and internal style sheets (in the head section)
  3. Browser default

 


Comment

/* This is a comment */

 


Import the "?.css" into current css:

 

@import "navigation.css";          /* Using a string */

or

@import url("navigation.css");     /* Using a url */

 


Example

 

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

 


css 一共有 3 種 selector

 

<1> element Selector:

h1
p
...

<2> id Selector:

當 html element 有以下的內容時

< ... id=id1 ... >

#id1 { ... }

<3> class Selector

當 html element 有以下的內容時

< ... class="center" ... >

.center { ... }

Grouping Selectors

h1, h2, p {
    text-align: center;
    color: red;
}


Height & Width

 

p.ex {
    height: 100px;
    width: 300px;
}

* it sets the height of the area inside the padding, border, and margin of the element!

 


text-align

 

#t1{
    text-align: center;
}

Type

  • text-align: center;
  • text-align: left;
  • text-align: right;