Tìm hiểu css trong html


Tự học html css javascript 21/11/2018 7

Giới thiệu về ngôn ngữ css trong html: cú pháp cơ bản, lợi ích và các thể loại (inline css, internal css, external css).

CSS LÀ GÌ ?

CSS là ngôn ngữ dùng để định dạng hiển thị mã HTML.

CÚ PHÁP CƠ BẢN

Cấu trúc chung:

[phần tử html] { mã định dạng}

Ví dụ 1: Định dạng thẻ body font size 14px
body { font-size: 14px}

trong đó mã định dạng có cú pháp chung: [tên mã định dạng]: [giá trị]

LỢI ÍCH CỦA CSS

CSS giúp định dạng mã html linh hoạt, dễ quản lý, tăng cường sức mạnh cho hiển thị web (mã html đóng vai trò khung nền còn css làm cho web đẹp hơn).

Để hiểu hơn vai trò của css, các bạn xét ví dụ sau: một trang web A có 10 trang html, ban đầu không định nghĩa font-size. Sau một thời gian, cần điều chỉnh font-size là 14px để nhìn cho đẹp. Nếu không dùng css thì sẽ vào 10 file mà sửa mã thẻ body, nếu dùng css thì sẽ chỉ sửa trong 1 file mà thôi (file được import chung cho 10 file html). Đó là trong trường hợp sửa có 1 phần tử body, nếu sửa hàng chục phần tử nữa thì rõ ràng việc sửa phân mảnh từng file sẽ rất mệt nhọc. 

CÁC LOẠI CSS

CSS có 3 loại áp dụng cho mã html:

  1. Inline css: Là mã css áp dụng riêng cho thẻ ngay tại tài liệu html và vùng tác động chỉ tính cho thẻ đó.
  2. Internal css: Là mã css lưu vào thẻ style, áp dụng riêng cho tài liệu html
  3. External css: Là mã css lưu vào file .css, khi dùng thì import vào các tài liệu html. 

Thông thường internal css được đưa vào thẻ style, nằm trong thẻ head ở đầu file html; thực tế bạn có thể đặt thẻ style ở bất kỳ vị trí mong muốn (html5). 

Ví dụ 2: inline css - làm chữ đậm

<div style="font-weight: 700">Inline css</div>
<div>Gía trị của mã css inline ở dòng trên tương đường thẻ <bold></div>

Ví dụ 3: Internal css - làm thẻ h1 chữ màu đỏ

<head>
<style>
h1 {color: red}
</style>
</head>
<body>
<h1>Chữ màu đỏ</h1>
</body>

Ví dụ 4: External css - làm cho body font-size: 14px; riêng thẻ h1 font-size: 18px và màu đỏ

<head>
<link rel="stylesheet" type="text/css" href="myexternalcss.css">
</head>
<body>
Chữ bên ngoài font-size: 14px
<h1>Thẻ H1 font-size: 18px và màu đỏ</h1>
</body>

File myexternalcss.css

h1 {
    color: red;
    font-size: 18px;
}
body{
    font-size: 14px
}

Lưu ý:
Nếu không nói gì thêm thì từ nay về sau mã html và css khi các bạn tìm hiểu luôn đặt trong file html có định dạng sau:

<!DOCTYPE html>
<html>
<head>
<!---
các loại css
-->
</head>
<body>

<!----
mã css và html
-->

</body>
</html>

 


Bài cùng chuyên mục:


  • Định dạng màu trong css
  • Tìm hiểu css trong html
  • Tạo bảng (table) trong html
  • Thẻ chèn video - audio vào trong trang html
  • Các thẻ phân chia khu vực - div span - thông tin address - trích dẫn blockquote - định dạng pre trong html
  • Tạo biểu mẫu - form nhập liệu trong html
  • Các thẻ căn lề - thay đổi nền trang - chèn ảnh - siêu liên kết - khối văn bản trong html
  • Các thẻ định dạng kiểu chữ và văn bản trong html
  • Các thẻ cơ bản trong HTML
  • Giới thiệu ngôn ngữ HTML

  • Bài liên quan (0)



    Bình Luận(0)

    
    • Videos
    • Cài đặt XAMPP

    • PHP HELLO WORLD

    • PHP - nhập xuất dữ liệu

    
    tự học css