my code stock.com

Snippet options

Download: Download snippet as 2-basiccsshtml.html.
Copy snippet: For this you need a free my code stock.com account.
Embed code : You will find the embed code for this snippet at the end of the page, if you want to embed it into a website or a blog!

<html>

<head>
    <meta charset="utf-8">
    <title>CSS Cơ Bản</title>
    <link rel="stylesheet" href="FileHoTro.css">
    <style>
        #phanhead{
            color: red;
            background: blue;
        }
    </style>
    
</head>

<body>
    <div id="gioithieuvecss">
        <h1>
            <font color="red">-----------------------------------------------------------------------</font>
        </h1>
        <h1><b><strong><font color="red">Giới thiệu CSS. Các cách nhúng CSS vào Website</font></strong></b></h1>
        <div id="soluoccss">
            
            CSS là một ngôn ngữ được nhúng vào bố cục trang web, nếu HTML là <b>Khung Xương</b> thì CSS là <b>Da Thịt</b><br>
            Có 3 cách cơ bản để nhúng CSS vào HTML : <br>
            1. Nhúng Trực Tiếp : <font color="red">Không Khuyên Dùng</font> <br>
            2. Nhúng Vào Phần Head : <font color="red">Không Khuyên Dùng</font> <br>
            3. Sử Dụng File CSS Riêng : <font color="green"><b>Khuyên Dùng</b></font><br>
        </div>
        <br>
        Mình sẽ ví dụ cả 3 cách trong 3 ô riêng luôn cho dễ hình dung :
        <br>
        
        <br><div id="nhungcsscach1">
        Cách 1 : Nhúng Trực Tiếp Bằng Câu Lệnh
<xmp>
<p style="color :red">Đây là câu lệnh được định dạng bằng css trong thẻ p</p>    
</xmp>
        Sau đây là kết quả của lệnh trên : <p style="color :red">Đây là câu lệnh được định dạng bằng css trong thẻ p</p> 
        </div>
        <br>
        <div id="nhungcsscach2">
            Cách 2 : Nhúng Bằng Phần Head
<xmp>
    <div id="phanhead">Đây là nội dung được định dạng ở phần head</div>
-----------------------------------------------------    
Còn ở phần head ta thêm đoạn sau
-----------------------------------------------------   
<style>
#phanhead{
    color: red;
    background: blue;
}
</style>
    
-----------------------------------------------------
Một số chú ý :
- phải gọi đúng id, có phân biệt viết hoa và viết thường 
- trước id phải có dấu thăng (#) và kết thúc bằng đóng mở ngoặc nhọn {}
- Code định hình như color, background,... được code chính giữa 2 cái dấu {}
- ngoại trừ gọi ra một số id đặc biệt như 'html' hay 'body' hay 'head' thì không cần dấu thăng (#)
- mỗi đoạn code định hình sẽ phân cách với nhau bằng dấu chấm phẩy (;)
-----------------------------------------------------
</xmp>
       Và đây là kết quả thu được ở lệnh trên :
        <div id="phanhead">Đây là nội dung được định dạng ở phần head</div>
            
        </div>
        <br>
        <div id="nhungcsscach3">
        Cách 3 : Đây là cách hay nhất, gọi hẳn 1 File CSS ra luôn, sau này chỉ cần gọi id ở file đó, đỡ rối hơn rất nhiều cho File HTML
        Chia bước cho nó đơn giản nhé :P <br><br>
Bước 1 : Tạo 1 file CSS, ở đây tui đặt tên là <strong>FileHoTro.CSS</strong> <br>
Bước 2 : Gọi file ra ở phần Head, chú ý tên file có phân biệt viết hoa viết thường, cách gọi : <br>
<xmp>
    <link rel="stylesheet" href="FileHoTro.css"> 
</xmp>
Bước 3 : đặt id cho đoạn lệnh muốn mã hóa bằng CSS ở phần Body, ví dụ :
<xmp>
    <div id="daylavidu">Đây Là Ví Dụ</div>
</xmp>
Bước 4 : chuyển qua file css và gọi ra như cách 2 thôi :
<xmp>
#daylavidu{ color: red; background: black; }
</xmp>
      ----------------------------------------------------- <br>
       Và đây là kết quả thu được ở lệnh trên :  
       <div id="daylavidu">Đây Là Ví Dụ</div>
        </div>
        <br>
    </div>

</body>

</html>

Create a free my code stock.com account now.

my code stok.com is a free service, which allows you to save and manage code snippes of any kind and programming language. We provide many advantages for your daily work with code-snippets, also for your teamwork. Give it a try!

Find out more and register now

You can customize the height of iFrame-Codes as needed! You can find more infos in our API Reference for iframe Embeds.