CSS

CSS 格式

basic:
ex:
h1, h2 {
color: gray;
background: white;
}

class:
class can apply to many elements
ex:
*.warning or .warning
for each element with warning class

ex:
p.warning
for p element with warning class

the element can has more than one class
ex: <p class = "urgent warning">

串聯:
ex:
.warning.urgent
for the element with warning and urgent class
( There are problems for IE version < 7 using 串聯 )

id
use #
an id can only appear once in one HTML element
id has higher priority than class
class and id會識別大小寫

ex: *#cat = #cat
id cat applies to all elements

attribute selector:
( IE version < 7 does not support)
ex:
h1[class]
apply to <h1 class="xxx">

ex:
cat[eat]
apply to <cat eat="xxx">

ex: *[eat]
apply to all elements with eat="xxx"

串聯:
ex:
a[href][title]
apply to a element with href="xxx" and title = "xxx"

ex:
cat[eat="1"]
apply to cat with eat element = "1"

span.cat = span[class~="cat"]
apply to span element with class = "cat"

descendent selector(後代選取項)
ex:
h1 em {
color: gray;
}
apply to em element belongs to h1 element

ex:
ul ol ul em
apply to
< ul >
< ol >
< ul >
< em >

for後代選取項，選取項之間的層極可以無限大
ex: ul em
apply to
< ul >
< ol >
< ul >
< em >

選取子代組件
ex:
h1 > strong
apply only to
< h1 > < strong >
not < h1 > < em > < strong >

ex: table.sun td > p
apply to 身為td子代的p，而td是table的後代，且table的class ="sun"

ul

list-style: none;
remove the default bullet

box model for css

For css, every elements in html is a box


padding: the space between content and border
margin: the space between elements

css example

css can style webpage
css file is usually separated from html file

a css file example:

body{
font-size: small;
}

h1, h2 {
color: #007e7e;
}

font-size is small for boy and each element in the body
color #007e7e is for h1 and h2

table in html

table: form a table
caption: caption of the table. It is above the table by deafult
tr : form a table row
th: form the table header
td: from table data(cell)

id and class

class
different elements can share the same class:
when you want to apply attribute to many elements, use class
an element can belong to many classes
ex: h1 class="red", h2 class="red"

how to define the class:
ex: p.green{
color: green;
}
class name is green. It only apply to p

ex: .green
class name is green. It can apply to all elements

id
id is for only one element
when you want to apply attribute to an unique element, use id
an element can only have one id
an element can have one id and belong to many classes
ex: error: h1 id= "red" , h2 id ="red"
error: p id ="red" , p id = "red"

how to define the id
ex: #test {
color: green;
}
id name is test, It can apply to all elements

p#test {
color: green
}
id name is test, it can only apply to p element

html 4.01

tell browser what version of html we use with loose standard:
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html/loose.dtd"

tell browser what version of html we use with strict standard:
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html/strict.dtd"

tell browser what encoding we use:
meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"

how to suit standard:
1. img elements: add alt attribute
2. put inline element in the block element
ex: put img element in the p element
3. tell browser html version
4. tell browser encoding

html 4.01

tell browser what version of html we use:
!DOCTYPE html PUBLIC "-//W3C//DTD

html and xml 注解

special character in html

<q> and <blockquote>

<q>:
for short quotes that are part of an existing paragraph

<blockquote>:
for longer qoutes taht need to be displayed on their own

list in html

(1) put each list item in <li> element
li = list item

(2) enclouse list items with either <ol> or <ul> element
ol = ordered list
ul = unordered list