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

bài tập 1Sửa đổi

<!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 cssSửa đổi

Đâ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 2Sửa đổi

<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 cssSửa đổi

Đâ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 3Sửa đổi

  <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 cssSửa đổi

Đâ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 4Sửa đổi

  <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 cssSửa đổi

đâ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 5Sửa đổi

<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 cssSửa đổi

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 6Sửa đổi

  <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 cssSửa đổi

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 7Sửa đổi

  <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 cssSửa đổi

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

p.topmargin
{
   margin-top: 5cm
}

Tập tin:Đề mụcSửa đổi

bài tập 8Sửa đổi

<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 cssSửa đổi

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 9Sửa đổi

<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 cssSửa đổi

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

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