Nhập môn CSS/Bài tập CSS

bài tập 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <title>Zentrale Formate</title>
    <style type="text/css">
        h1 {
            color: blue;
            font-size: 48px; 
        }
    </style>
</head>
<body>
    <h1>48 Pixel und Rot!</h1>
</body>
</html>

Tạo css

Đây là cách viết CSS bằng cách nhúng css trực tiếp vào HTML. Ta muốn làm cho đoạn văn có màu sắc và kích thước thì ta sẽ làm như sau:

h1 {
    color: red;
    font-size: 48px; 
}

bài tập 2

<html>
<head>

<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>

</head>

<body>

<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>

</body>
</html>

Tạo css

Đây là cách viết CSS bằng cách nhúng css trực tiếp vào HTML. muốn tạo một hình nền và tô màu cho chử ta làm như sau:

body {
background-color: yellow
}
h1 {
 background-color: #00ff00
}
h2 {
 background-color: transparent
}
p {
 background-color: rgb(250,0,255)
}

bài tập 3

  <html>
<head>
<style type="text/css">
span.highlight
{
background-color:yellow
}
</style>
</head>

<body>
<p>
<span class="highlight">This is a text.</span> This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. <span class="highlight">This is a text.</span>
</p>
</body>
</html>

tạo css

Đây là cách viết CSS bằng cách nhúng css trực tiếp vào HTML. muốn tạo hightlight cho đoạn text ta lam nhu sau:

  span.highlight
{
background-color:yellow
}

bài tập 4

  <html>
<head>
<style type="text/css">
h1 {font-size-adjust: 0.50}
h2 {font-size-adjust: 0.40}
p {font-size-adjust: 0.60}
</style>
</head>
<body>

<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>

</body>
</html>

tạo css

đây là cách nhúng trực tiếp css vào html .muốn tạo font cho chử ta làm như sau:

  h1 {font-size-adjust: 0.50}
  h2 {font-size-adjust: 0.40}
  p {font-size-adjust: 0.60}

bài tập 5

<html>
<head>
<style type="text/css">
p 
{
border: medium double rgb(250,0,255)
}
</style>
</head>

<body>
<p>Some text</p>
</body>
</html>

tạo css

muốn tạo đưòng viền ta làm như sau:

  p 
{
  border: medium double rgb(250,0,255)
}

p 
{
border-bottom: medium solid #ff0000
}

p 
{
border-right: medium solid #ff0000
}

bài tập 6

  <html>
<head>
<style type="text/css">
p 
{
border: red solid thin;
outline: green dotted thick
}
</style>
</head>
<body>

<p>Some text.</p>

</body>
</html>

tạo css

muốn tạo viền ngoài của đoạn text ta làm như sau:

   p 
{
  border: red solid thin;
  outline: green dotted thick
}

bài tập 7

  <html>
<head>
<style type="text/css">
p.topmargin {margin-top: 5cm}
</style>
</head>

<body>
<p>This is a paragraph with no margin specified</p>
<p class="topmargin">This is a paragraph with a specified top margin</p>
</body>
</html>

tạo css

muốn canh lề cho đoạn text ta lam như sau:

p.topmargin
{
   margin-top: 5cm
}

Tập tin:Đề mục

bài tập 8

<html>
<head>
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head>

<body>
<ul class="disc">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="square">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="none">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>

</html>

tạo css

muốn tạo một list ta làm như sau:

ul.disc
 {
  list-style-type: disc
 }
ul.circle
 {
list-style-type: circle
}
ul.square
 {
list-style-type: square
}
ul.none 
{
list-style-type: none
}

bài tập 9

<html>
<head>
<style type="text/css">
table
{
border-collapse: separate;
empty-cells: show
}
</style>
</head>
<body>

<table border="1">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>

</body>
</html>

tạo css

muốn tạo một boder ta làm như sau:

table
{
  border-collapse: separate;
  empty-cells: show
}