You are on page 1of 70

CSS1

Outline

CSS
CSS
CSS
HTMLCSS
CSS


www,

Mosaic,<font>

www





CSS

CSS
CSSW3C1996

HTML





<table width="232" border="0>


<tr valign="top">
<td width="44%"
bgcolor="#ffffcc">&nbsp;
</td>
<td width="56%" bgcolor="#ffffcc" valign="top">
<font color="#00FFFF" face="Times New Roman, Times,
serif" >
CSS First Example</font>
</td>
</tr>
</table>

2
<style>
table { width:232; border:0;}
tr { vertical-align:top; background-color:#FFFFCC}
td { width:auto; vertical-align:top}
</style>
<table>
<tr>
<td >Joseph</td>
<td>CSS First Example</td>
</tr>
</table>


,css
:
<h2>
<font color="purple">This is purple!</font>
</h2>
<style>
h2 { color=purple;}
</style>
<h2>This is purple!</h2>


<h1> Leaping Above The Water</h1>

<h1><font color="#FF0000"><b><i><U><font face="Courier New,
Courier, monospace">
Leaping Above The Water</font></U></i></b></font></h1>

CSS
h1 {
color:maroon;
font: italic 2em Times,serif;
text-decoration: underline;
background: yellow;
}


CSS
,css
css

1-1
<table width="232" border="0>
<tr valign="top">
<td width="44%"
bgcolor="#ffffcc"><em>Joseph</em>
</td>
<td width="56%" bgcolor="#ffffcc" valign="top">
<font color="#00FFFF" face="Times New Roman,
Times,serif" >
<em>CSS First Example</em></font>
</td>
</tr>
</table>

2-1
<style>
table { width:232; border:0;}
tr { vertical-align:top; background-color:#FFFFCC;}
td { width:auto; vertical-align:top; font-style:italic;}
/*h1 {
color:maroon;
font: italic 2em Times,serif;
text-decoration: underline;
background: yellow;
} */
</style>
<table>
<tr>
<td>Joseph</td>
<td><h1>CSS First Example</h1></td>
<td><h2>CSS is good thing</h2></td>
</tr>
</table>


CSS

:Link css,
:<style></style>

:<p style=color: gray;>



:
<table>
<tr>
<td >Joseph</td>
<td>CSS First Example</td>
</tr>
</table>
CSS,


CSSHTMLTAG
<FONT> <U><B>
HTMLXML

CSS
CSS (Element)

CSS (Element)
:,HTML
,p,table,span,div,



<img src=hinnet.gif/>
src=hinnet.gifsrc=seed.gif


HTML
<SPAN>How are you?</span>

html,css


,
:
<div>This is wonderfull day</div> ,have a
<div>sun</div> shing


,
:
<span>This is wonderfull day</span> ,have a
<span>sun</span> shing

<?xml-stylesheet type="text/css" href="cd_catalog.css"?>


<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
</CATALOG>

cd_catalog.css
CATALOG {
background-color: #ffffff;
width: 100%; }
CD {
display: block;
margin-bottom: 30pt;
margin-left: 0; }
TITLE {
color: #FF0000;
font-size: 20pt; }
ARTIST {
color: #0000FF;
font-size: 20pt; }
COUNTRY,PRICE,YEAR,COMPANY {
display: block;
color: #000000;
margin-left: 20pt; }

HTMLCSS
CSS,
:Link css,
:<style></style>

:<p style=color: gray;>


link
<link rel=stylesheet type=text/css href=sheet1.css media=all />

link:html,

rel:(relation),stylesheet
type:text/css,link
href:url
media:css

browser.css

CSS link media


all :
aural:
braille:
emboddes:
handheld:
print:()
projection:
screen:
tty:
tv:
all,screen,print,operaprojection

CSS link media


media
<link rel=stylesheet type=text/css href=sheet1.css
media=screen,projection />

CSS
CSS ,C
//
/* */

:1
<html>
<head>
<link rel="stylesheet" type="text/css" href="ex1.css" />
</head>
<body>
<h1>This header is 26 pt</h1>
<h2>This header is blue</h2>
<p>This paragraph has a left margin of 50 pixels</p>

</body>
</html>

ex1.css
body {
background-color: yellow
}
h1 {font-size: 36pt}
h2 {color: blue}
p {margin-left: 50px}

:2

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

<body>
<h1>This is a header 1</h1><hr />
<p>You can see that the style sheet formats the text</p>
<p><a href="http://www.w3schools.com" target="_blank">This is a
link</a></p>
</body>
</html>

ex2.css
body {background-color: tan}
h1 {color:maroon; font-size:20pt}
hr {color:navy}
p {font-size:11pt; margin-left: 15px}
a:link {color:green}
a:visited {color:yellow}
a:hover {color:black}
a:active {color:blue}

HTMLCSS
HTMLCSS,
,
<html>
<head>
<link rel=stylesheet type=text/css href=sheet1.css />
<link rel=stylesheet type=text/css href=sheet2.css />
</head>
<body>
*********************
</body>
</html>


<html>
<head>
<!-- CSS -->
<link rel=stylesheet type=text/css href=ex1.css title=default css"/>
<!-- CSS-->
<link rel=alternate stylesheet type=text/css href=ex2.css
title="other css"/>
</head>
<body>
<h1>This is a header 1</h1> <hr />
<p>You can see that the style
sheet formats the text</p>
<p><a href="http://www.w3schools.com"
target="_blank">This is a link</a></p>
</body>
</html>


<style type=text/css></style>
<style>,
@import
:@import url(sheet1.css) media;
@importcss(ie)

<style>css
h1{color:maroon;}
body {background:yellow;}

@import
<html><head></head>
<style type=text/css>
@import url(ex1.css);
h3 {color:gray;}
</style>
<body>
<h1>This is a header 1</h1><hr />
<p>You can see that the style
sheet formats the text</p>
<p><a href="http://www.w3schools.com"
target="_blank">This is a link</a></p>
<h3>Joseph Yeh 2008</h3>
</body>
</html>

@importlink
link ,

@import,
@import
@import

@import

<html>
<head>
<link rel="stylesheet" type="text/css" href="ex3.css" />
</head>
<body>
<h1>shaking brain</h1> <hr />
<p>This Dynamic World</p>
<p><a href="http://www.w3schools.com"
target="_blank">This is a link</a></p>
<h3>Joseph Yeh</h3>
</body>
</html>

ex3.css
@import url(ex1.css);
h3 {color: blue;}

browsercss
html
<style type=text/css>
<!-body {background-color: tan}
h1 {color:maroon; font-size:20pt}
hr {color:navy}
p {font-size:11pt; margin-left: 15px}
a:link {color:green}
a:visited {color:yellow}
a:hover {color:black}
a:active {color:blue}
-->
</style>


<style>,
@import.

<font>,<b>
:
<p style="color: red; background: blue;">
CSS
</p>

CSS

{[:;]}
htmlxml
{[:;]}
[:;] ,


brain-size: 2cm;
color:ultraviolet;


:
h1,h2,h3 {color: blue;}

h1 {color: blue;}
h2 {color: blue;}
h3 {color: blue;}

*
:
* {background: red;}

<html>
<head>
<link rel="stylesheet" type="text/css" href="ex4.css"/>
</head>
<body>
<h1>CSS </h2>
css html
<h2>css </h2>
<b>CSS , , ,</b>
Change anthing@_@
<h3>Joseph Yeh 2008</h3>
</body>
</html>

ex4.css
h1 {color: silver; background: white;}
h2 {color: silver; background: gray;}
h3 {color: white; background: gray;}
b {color: gray; background: white;}

<html>
<head>
<link rel="stylesheet" type="text/css" href="ex5.css"/>
</head>
<body>
<h1>CSS </h2>
css html
<h2>css </h2>
<b>CSS , , ,</b>Change anthing@_@
<h3>Joseph Yeh 2008</h3>
</body>
</html>

ex5.css
h1 {font:18px Helvetica; color: purple; background: agua;}
h2 {color: silver; background: gray;}
h3 {color: white; background: gray;}
b{color: gray; background: white;}

ex5_1.css
h1 {
font:18px Helvetica;
color: purple;
background: agua;
}
h2 {color: silver; background: gray;}
h3 {color: white; background: gray;}
b {color: gray; background: white;}


<html>
<head>
<link rel="stylesheet" type="text/css" href="ex6.css"/>
</head>
<body>
<h1>CSS </h2>
css html
<h2>css </h2>
<b>CSS , , ,</b>Change anthing@_@
<h3>Joseph Yeh 2008</h3>
</body>
</html>

ex6.css
h1 {font:18px Helvetica}
h1 {color: purple;}
h1 {background: agua;}
h2 {color: silver; background: gray;}
h3 {color: white; background: gray;}
b {color: gray; background: white;}


CSS

(class selector)
(ID selector)

,CSS,
,
,

CSS
<html>
<head>
<link rel="stylesheet" type="text/css" href="ex6.css"/>
</head>
<body>
<h1>CSS </h2>
css html
<h2>css </h2>
<b>CSS , , ,</b>Change anthing@_@
<h2>web</h2>
<h3>Joseph Yeh 2008</h3>
</body>
</html>

(class selector)
:class

: <p class=wa> good idea</p>


:
*.wa {font-weight: bold;}
.wa {font-weight: bold;}
p.wa {font-weight: bold;}
<p>classwa


<html>
<head>
<link rel="stylesheet" type="text/css" href="ex7.css"/>
</head>
<body>
<h1>CSS </h2>
css html
<h2>css </h2>
<b>CSS , , ,</b>Change anthing@_@
<h2 class="wa">web</h2>
<h3>Joseph Yeh 2008</h3>
</body>
</html>

ex7.css
h1 {
font:18px Helvetica;
color: purple;
background: agua;
}
*.wa {color: silver; background: gray;}
h3 {color: white; background: gray;}
b {color: gray; background: white;}

<html>
<head>
<link rel="stylesheet" type="text/css" href="ex8.css"/>
</head>
<body>
<h1>CSS </h2>
css html
<h2>css </h2>
<b>CSS , , ,</b>Change anthing@_@
<h2 class="wa">web</h2>
<h3>Joseph Yeh 2008</h3>
</body>
</html>

ex8.css
h1 {
font:18px Helvetica;
color: purple;
background: agua;
}
.wa {color: silver; background: gray;}
h3 {color: white; background: gray;}
b{color: gray; background: white;}

<html>
<head>
<link rel="stylesheet" type="text/css" href="ex9.css"/>
</head>
<body>
<h1>CSS </h2>
css html
<h2>css </h2>
<b>CSS , , ,</b>Change anthing@_@
<h2 class="wa">web</h2>
<h3>Joseph Yeh 2008</h3>
</body>
</html>

ex9.css
h1 {
font:18px Helvetica;
color: purple;
background: agua;
}
h2 {color: silver; background: blue;}
h2.wa {color: silver; background: gray;}
h3 {color: white; background: gray;}
b {color: gray; background: white;}


<html>
<head>
<link rel="stylesheet" type="text/css" href="ex10.css"/>
</head>
<body>
<h1>CSS </h2>

<h2 class="k1">1 @_@</h2>


<b>CSS , , ,</b>
<h2 class="k2">2 @_@</h2>
<h3 class="k1 k2">Joseph Yeh 2008</h3>
</body>
</html>

ex10.css
h1 {font:18px Helvetica; color: purple;
background: agua;
}
.k1 {font-weight: bold;}
.k2 {font-style: italic;}
.k1.k2{background: silver;}
h3 {color: white; background: gray;}
b{color: gray; background: white;}

(ID selector)
:
id
<p id=urid>direct contral</p>
css#
#urid {font-weight: bold;}


<html>
<head>
<link rel="stylesheet" type="text/css" href="ex11.css"/>
</head>
<body>
<h1>CSS </h2>

<h2 class="k1">1 @_@</h2>


<b>CSS , , ,</b>
<h2 class="k2">2 @_@</h2>
<h3 id="urid">Joseph Yeh 2008</h3>
</body>
</html>

ex11.css
h1 { font:18px Helvetica; color: purple;
background: agua;
}
.k1 {font-weight: bold;}
.k2 {font-style: italic;}
#urid {color: red; background: silver;}
h3 {color: white; background: gray;}
b{color: gray; background: white;}


,id

You might also like