/*auto readmore*/ /*auto readmore*/ /* an hien script*/ // an hien password /*an hien ma chuong trinh cong tru */ /*Scrollbox thanh cuon*/ /***Nhung CODE***/ /* dòng xanh dòng trắng */ /* https://cdnjs.com/libraries/prism lay thu vien, can vao ten file ma goi 1. copy link vao vi du:prism-python.min.js 2. ten ngon nua la python */ /*=== New posts ===*/ /*header slider*/ /*=== bai viet lien quan===*/ /*===tabcode===*/

[Tự Học HTML & CSS Cơ Bản] WEB1013 - Bài 3 - Tìm Hiểu CSS

MỤC TIÊU
Kết thúc bài này bạn có khả năng:
  • Biết cách định dạng văn bản với CSS: inline CSS, embed/internal CSS và external CSS
  • Biết cách định nghĩa và sử dụng các selector cơ bản: HTML, class và id

LÝ THUYẾT

CSS là gì?
CSS - Cascading Style Sheets: là ngôn ngữ được dùng để trình bày văn bản viết bằng ngôn ngữ HTML hay XHTML. Hay nói cách khác CSS là ngôn ngữ tạo style cho trang web.

Bố cục CSS dạng hộp

  • Margin: Là khoảng cách xung quanh bên ngoài của phần tử.
  • Border: Là đường liền nằm bên ngoài phần đệm.
  • Padding: Không gian xung quanh nội dung.

Có 3 loại CSS:
Inline CSS: áp dụng trực tiếp trên một đối tượng nhất định bằng cách sử dụng thuộc tính style

Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tìm hiểu CSS inline</title>
</head>
<body>
    <h1 style="color:blue;">CSS inline - Đây là dòng tiêu đề</h1>
    <p style="color:red;">CSS inline</p>
</body>
</html>

Internal CSS: là đặt CSS ở đầu trang web để áp dụng kiểu dáng cho toàn bộ trang, khi đó chỉ cần đặt đoạn CSS vào trong cặp thẻ <style> rồi đặt vào trong phần header của website (giữa <head> và </head>):

Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tìm hiểu CSS Embed/Internal</title>
    <style> /* internal CSS */
        .thuykieu{
            color: blue;
            font-style: italic;
        }
        strong{
            font-weight: bold;
            color: red;
        }
    </style>
</head>
<body>
    <div class="thuykieu">
        Đầu lòng hai ả tố nga <br>
        <strong>Thúy Kiều</strong>  là chị, em là <strong>Thúy Vân</strong>  <br>
        Mai cốt cách tuyết tinh thần <br>
        Mỗi người một vẻ mười phân vẹn mười <br>
    </div>
</body>
</html>
External CSS: là cách thuận tiện nhất bởi vì nó được trong một file .css. Bạn có thể tạo một file CSS với phong cách riêng rồi tải lên. Cách này sẽ cải thiện được thời gian tải trang trên website của bạn.

Ví dụ: 
Tạo file CSS có tên mystyle.css
.thuykieu{
    color: blue;
    font-style: italic;
}
strong{
    font-size: larger;
    font-weight: bold;
    color: red;
}

Từ trang HTML liên kết đến file mystyle.css bằng thẻ link
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tìm hiểu CSS External</title>
    <link rel="stylesheet" href="mystyle.css">
</head>
<body>
    <div class="thuykieu">
        Đầu lòng hai ả tố nga <br>
        <strong>Thúy Kiều</strong>  là chị, em là <strong>Thúy Vân</strong>  <br>
        Mai cốt cách tuyết tinh thần <br>
        Mỗi người một vẻ mười phân vẹn mười <br>
    </div>
</body>
</html>

Độ ưu tiên: Nếu có nhiều CSS trên cùng một trang HTML thì độ ưu tiên sẽ là:
  • Ưu tiên 1: Inline CSS.
  • Ưu tiên 2: External and internal style sheets.
  • Ưu tiên 3: Browser default – Mặc định của trình duyệt
  • Nếu các kiểu khác nhau được xác định trên cùng mức ưu tiên, kiểu cuối cùng có mức ưu tiên cao nhất.

YÊU CẦU

Bài 1:
Thiết kế trang web trình  bài thơ SAO theo yêu cầu và kết quả như



Bài 2:
Nội dung bài thơ:

ANH HỨA MÃI MÃI CHỈ YÊU EM
Em chẳng còn Con gái nữa đâu anh
Chữ trinh nguyên chẳng kịp dành anh nữa
Người đến trước trao em bao thề hứa
Cướp mất rồi, em khờ dại còn tin.

Em chẳng còn là đứa Con gái vẹn nguyên
Vẫn vui tươi, mộng mơ nhưng bình yên đã mất
Em sợ – Sợ một ngày sự thật
Chẳng giữ nổi anh, anh sẽ hận, sẽ cười.
Anh hứa mãi mãi chỉ yêu em

Em chẳng còn tự tin lúc bên người
Cái gia giáo, cái chữ trinh đè thân em trĩu nặng
Rồi một ngày biết em không còn trong trắng
Như anh vẫn chờ, anh có hết yêu em ?

Em vẫn cầu, vẫn nguyện ước bao đêm
Vẫn sợ lo anh sẽ xa em mãi
Bởi Con gái khi yêu luôn khờ dại
Anh có yêu nhiều để giữ chặt vòng tay?

Sử dụng external để định bài thơ với các yêu cầu:
  • Nội dung các đoạn in nghiêng (dùng thẻ em)
  • Chữ anh, em định dạng in đậm, màu nâu
  • Đoạn 1 màu đỏ, đoạn 2 màu xanh (green), đoạn 3 màu blue, đoạn 4 màu giống đoạn 1


THỰC HIỆN

Bài 1:

Tạo folder css có tên: css/lab3.1.doan3.css có nội dung: 
em.doan3{
    color: blue;
}
strong{
    color: brown;
}
	
Tạo file có phần mở rộng .html với nội dung
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lab 3 | Bài 1, bài thơ SAO</title>
    <style>
        .doan2{
            color: green;

        }
        strong{
            color: brown;
        }
    </style>
    <link rel="stylesheet" href="css/lab3.1.doan3.css">
</head>
<body>
    <h2>SAO</h2>
    <!-- Đoạn 1 CSS inline style-->
    <em style="color: red;">
        Một ngôi <strong style="color:brown;">sao</strong>  vừa rơi <br>
        vụt tắt trên bầu trời <br>
        hay là tên người ấy <br>
        vụt tắt ở trong tôi? <br> <br>
    </em>
    <!-- Đoạn 2 CSS nội bộ/embed - Internal nhúng trong html-->
    <em  class="doan2">
        Vẫn thấy trên bầu trời <br>
        có muôn vàn <strong> sao</strong>  sáng <br>
        mà ở trong lòng tôi <br>
        như một hành lang vắng <br> <br>


    </em>
    <!-- Đoạn 3 CSS Extention, bên ngoài-->
    <em class="doan3">
        Một ngôi <strong>sao</strong>  vừa tắt <br>
        bầu trời vẫn không buồn <br>
        <strong>sao</strong> tên người ấy tắt <br>
        trong lòng tôi cô đơn? <br> <br>
    </em>
</body>
</html>
	

Bài 2:
Tạo file css/lab3.2.css
em.doan1{
    color: red;
}
strong{
    color: brown;
}
em.doan2{
    color: green;
}
em.doan3{
    color: blue;
}
	
Tạo file .html có nội dung
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lab 3 Bài 2</title>
    <link rel="stylesheet" href="css/lab3.2.css">
</head>
<body>
    <h2>ANH HỨA MÃI MÃI CHỈ YÊU EM</h2>
    <em class="doan1">
        
        <strong>Em</strong> chẳng còn Con gái nữa đâu <strong>anh</strong> <br>
        Chữ trinh nguyên chẳng kịp dành <strong>anh</strong> nữa <br>
        Người đến trước trao <strong>em</strong> bao thề hứa <br>
        Cướp mất rồi, <strong>em</strong> khờ dại còn tin. <br> <br>

    </em>
    <em class="doan2">
        <strong>Em</strong> chẳng còn là đứa Con gái vẹn nguyên <br>
        Vẫn vui tươi, mộng mơ nhưng bình yên đã mất <br>
        <strong>Em</strong> sợ – Sợ một ngày sự thật <br>
        Chẳng giữ nổi <strong>anh, anh</strong> sẽ hận, sẽ cười. <br>
        <strong>Anh</strong> hứa mãi mãi chỉ yêu <strong>em</strong> <br> <br>

    </em>
    <em class="doan3">
        <strong>Em</strong> chẳng còn tự tin lúc bên người <br>
        Cái gia giáo, cái chữ trinh đè thân <strong>em</strong> trĩu nặng <br>
        Rồi một ngày biết <strong>em</strong> không còn trong trắng <br>
        Như <strong>anh</strong> vẫn chờ, <strong>anh</strong> có hết yêu <strong>em</strong> ? <br><br>

    </em>

    <em class="doan1">
        <strong>Em</strong> vẫn cầu, vẫn nguyện ước bao đêm <br>
        Vẫn sợ lo <strong>anh</strong> sẽ xa <strong>em</strong> mãi <br>   
        Bởi Con gái khi yêu luôn khờ dại <br>
        <strong>Anh</strong> có yêu nhiều để giữ chặt vòng tay? <br>

    </em>
</body>
</html>
	
Xong!

No comments:

Post a Comment

/*header slide*/