A. Fogalmak 46
B.2. XHTML
xhtmlexample01.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Az els\H o XHTML dokumentumom</title>
</head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>An internal stylesheet example</title>
<style type="text/css" id="internalStyle">
This is text that uses our
<code>internal stylesheet</code>.
H1 { font-family: Arial; font-size: 40pt; Color:red } P { font-size: 12pt; line-height: 20pt }
cssexample01.html
<HTML>
<HEAD>
B.3 CSS
<LINK rel="stylesheet" type="text/css" href="cssexample01.css">
</HEAD>
<BODY>
<H1>Today is fine.</H1>
<P>
Long before the advent of TV weather forecasters, people used tabletop glasses like a spherical flask to predict upcoming changes in weather.
</P>
H1 { font-family: Arial; font-size: 40pt; Color:red } P { font-size: 12pt; line-height:20pt }
</STYLE>
</HEAD>
<BODY>
<H1>Today is fine.</H1>
<P>
Long before the advent of TV weather forecasters, people used tabletop glasses like a spherical flask to predict upcoming changes in weather.
</P>
<H1 style="font-family: Arial; font-size: 40pt; Color:red">
Today is fine.
</H1>
<P style="font-size:12pt; line-height:20pt">
Long before the advent of TV weather forecasters, people used tabletop glasses like a spherical flask to predict upcoming changes in weather.
</P>
</STYLE>
</HEAD>
<BODY>
<H1>Today is fine.</H1>
<P>
Long before the advent of TV weather forecasters, people used tabletop glasses like a spherical flask to predict upcoming changes in weather.
</P>
H1 > B {color:green}
I + B {color:yellow}
</STYLE>
</HEAD>
<BODY>
<H1><B>Today</B> is <I>very <B>fine</B></I>.</H1>
<I>Tomorrow</I> <B>will</B> <B>be</B> "fine".
</BODY>
H3.red { font-family: Arial; font-size: 10pt; color:red}
H3.green { font-family: Times New Roman; font-size: 14pt;
color:green}
</STYLE>
</HEAD>
<BODY>
<H3 class="red">Today is fine.</H3>
<H3 class="green">Today is fine.</H3>
</BODY>
.green {font-family: Arial; color: green }
.red {font-family: Times New Roman; font-size: 14pt;
B.3 CSS
line-height: 20pt; color: red }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS="green">Today is fine.</H3>
<H2 CLASS="green">Today is fine.</H3>
<H3 CLASS="green">Today is fine.</H3>
<H4 CLASS="green">Today is fine.</H3>
<P CLASS="green">Today is fine.</P>
<DIV CLASS="green">Today is fine.</DIV>
<hr>
<H1 CLASS="red">Today is fine.</H3>
<H2 CLASS="red">Today is fine.</H3>
<H3 CLASS="red">Today is fine.</H3>
<H4 CLASS="red">Today is fine.</H3>
<P CLASS="red">Today is fine.</P>
<DIV CLASS="red">Today is fine.</DIV>
</BODY>
#id100 { color:red }
#id101 { color:green}
.green { color:green}
</STYLE>
</HEAD>
<BODY>
<DIV id="id100">Today is fine.</DIV>
<DIV id="id101">Today is fine.</DIV>
<DIV class="green">Today is fine.</DIV>
<DIV class="green" id="id100">Today is fine.</DIV>
</BODY>
<div style="position:relative; left:20px; top:10px">Today is fine.</div>
</BODY>
</HTML>
cssexample10.html
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
<!-- ... -->
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</DIV>
<DIV style="position:absolute; left:0; top:0">
Today is fine.
</DIV>
<DIV style="position:absolute; right:0; bottom:0">
Today is fine.
<SPAN style="display:block">Today is block.</SPAN> Today is fine.
<DIV style="display:inline">Today is inline.</DIV> Today is fine.
<DIV style="display:list-item">Today is list-item.</DIV>
Today is fine.
<BODY style="margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
overflow: hidden">
B.3 CSS
<TABLE style="width: 100%; height:100%;
border-collapse: collapse; border-spacing: 0pt">
<TR>
<TD style="color: CaptionText; background-color:
ActiveCaption; font-weight: bold">Felpattanós ablakos</TD>
</TR>
<TR>
<TD style="color: WindowText; background-color: ThreeDFace">
A rendszered bugyi!<BR>Akarod, hogy mégbugyibb legyen?
</TD>
</TR>
<TR>
<TD style="color: WindowText; background-color: ThreeDFace;
text-align: center">
<FORM><INPUT type="button" value="Legyen, persze!">
</FORM>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>