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

Thêm liên kết
Tủ sách mở Wikibooks

bài tập 1[sửa]

<!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[sửa]

Đâ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[sửa]

<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[sửa]

Đâ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[sửa]

  <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[sửa]

Đâ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[sửa]

  <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[sửa]

đâ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[sửa]

<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[sửa]

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[sửa]

  <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[sửa]

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[sửa]

  <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[sửa]

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

p.topmargin
{
   margin-top: 5cm
}

Tập tin:Đề mục[sửa]

bài tập 8[sửa]

<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[sửa]

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[sửa]

<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[sửa]

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

table
{
  border-collapse: separate;
  empty-cells: show
}
Lấy từ “https://vi.wikibooks.org/w/index.php?title=Nhập_môn_CSS/Bài_tập_CSS&oldid=376538”