B5: Các loại khai báo CSS, CSS là gì? các thẻ CSS căn bản trong html5(p2)

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi phamcongson, 10/12/15.

  1. phamcongson

    phamcongson

    Police

    Tham gia ngày:
    3/6/13
    Bài viết:
    477
    Đã được thích:
    92
    Điểm thành tích:
    28
    Giới tính:
    Nam
    B5: Các loại khai báo CSS, CSS là gì? các thẻ CSS căn bản trong html5(p2)​

    1. CSS là gì?
    • Trong tiếng Anh là Cascading Style Sheets (CSS) – được dùng để miêu tả cách trình bày giao diện cho web dưới dạng HTML và XHTML, giúp giao diện html liên kết lại cho người dùng dễ dàng thao tác hơn. Các đặc điểm kỹ thuật của CSS được duy trì bởi World Wide Web Consortium (W3C). VD: khi bạn xây dựng 1 ngôi nhà Code HTML chính là phần thô của ngôi nhà, CSS chính là phần trang trí, màu sơn, vị trí vật dụng đặt ở đâu,...
    2. Để tạo 1 thuộc tính CSS ta có 3 dạng:

    CSS dạng Inline    : code css và code html nằm trên 1 dòng.
    Mã:
    <p style="color:#369;font-size:14px;font-weight:bold;">note note note</p>
    CSS dạng Internal: code CSS nằm trong trang html.
    Mã:
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> css dạng Internal</title>
<!-- Start css dạng Internal -->
<style>
   /* Rule css dạng tag
   p
   {
     color:#F00;
     font-size::20px;
   }
   */
   h4
   {
     color:#0F0;
     font-weight:bold;
   }
 
   /*  Rule dạng class */
   .mau-do
   {
     color:red;
   }
   .mau-xanh
   {
     color:green;
   }
   /*  Rule dạng id */
   #ketthuc
   {
     color:#6F3;
     font-weight:bold;
   }
</style>
<!-- End css dạng Internal -->
</head>
<body>
<h3>Internal : CSS nằm trong 1 trang</h3>
<h4>Tiêu đề dạng internal</h4>
<p class="mau-do">Đoạn văn 1</p>
<p class="mau-do">Đoạn văn 2</p>
<p class="mau-xanh">Đoạn văn 3</p>
<p id="ketthuc">Kết thúc đoạn văn</p>
</body>
</html>
    CSS dạng external : code css nằm ngoài file .html file chứa code html.
    • File HTML
    Mã:
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Css dạng external</title>
<!-- Start css dạng external trỏ link tới file chứa code css-->
<link href="css/main.css" rel="stylesheet">
<!-- End css dạng external-->
</head>
<body>
<h5>Nội dung externl 1</h5>
<p class="mau-cam">Doạn văn 1 external</p>
</body>
</html>
    • File main.css chứa code css bên ngoài có đuôi .css
    Mã:
    @charset "utf-8";
/* CSS Document */
h5
{
    color:#F00;
}
.mau-cam
{
    color:#FC6;
}

    3. Download code
     
    Cảm ơn đã xem bài:

    B5: Các loại khai báo CSS, CSS là gì? các thẻ CSS căn bản trong html5(p2)

    Lượt xem: 1,238 - Xem Bài Viết Cùng Chủ Đề

    Chỉnh sửa cuối: 10/12/15
    phamcongson, 10/12/15
    #1


Like và Share ủng hộ ITSEOVN