Professional Documents
Culture Documents
Outline
CSS
CSS
CSS
HTMLCSS
CSS
www,
Mosaic,<font>
www
CSS
CSS
CSSW3C1996
HTML
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>
:
<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
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>
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
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
<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>
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>
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