Sử dụng CSS trong HTML

Giới thiệu nội dung bài viết

Chào các bạn,hôm nay anh sẽ hướng dẫn mọi người cách sử dụng Sử dụng CSS trong HTML là như thế nào?

1. Nhúng CSS vào HTML thông qua thẻ style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
   <head>
      <style type = "text/css" media = "all">
         body {
            background-color: linen;
         }
         h1 {
            color: maroon;
            margin-left: 40px;
         }
      </style>
   </head>   
   <body>
      <h1>This is a heading</h1>
      <p>This is a paragraph.</p>
   </body>
</html>

css1

2. Nhúng CSS vào HTML trong một hàng

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
   <head>
   </head>

   <body>
      <h1 style = "color:#36C;"> 
         This is inline CSS 
      </h1>
   </body>
</html>

css2

3. Nhúng CSS vào HTML qua file

Giả sử chúng ta có một file css tên my.css như sau

1
2
3
4
5
6
7
h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Ta sẽ nhúng file my.css này vào trang HTML thông qua thẻ link như sau

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
   <head>
      <link type = "text/css" href = "my.css" media = " all" />
   </head>

   <body>
      <h1 style = "color:#36C;"> 
         This is inline CSS 
      </h1>
   </body>
</html>
  • Ngoài cách dùng thẻ link chúng ta có thể sử dụng annotation @import như sau
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
   <head>
     @import "my.css";
   </head>

   <body>
      <h1 style = "color:#36C;"> 
         This is inline CSS 
      </h1>
   </body>
</html>

4. Comment chú thích trong CSS

Chúng ta dùng /* để ghi chú thích các dòng code CSS như sau.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            color: red;
            /* This is a single-line comment */
            text-align: center;
         }
         /* This is a multi-line comment */
      </style>
   </head>

   <body>
      <p>Hello World!</p>
   </body>
</html>

Mọi người hãy subcribe kênh youtube dưới đây nhé. Videos về các kỹ năng mềm và lập trình sẽ được cập nhật hằng tuần


Comments