Công ty thiết kế website chuẩn SEO Web Mới
Tìm kiếm
Công ty thiết kế website chuẩn SEO Web Mới

CSS là gì? Mối quan hệ của CSS và HTML

CSS là gì? Đó là ngôn ngữ quy định cách hiển thị của các thành phần trong HTML như font chữ, màu sắc, background, bố cục, viền,…, chi tiết như nào hãy cùng chúng tôi phân tích:

CSS là gì? Mối quan hệ của CSS và HTML

CSS là gì? Mối quan hệ của CSS và HTML

Mục Lục [Ẩn]


CSS là gì?

CSS (Cascading Style Sheets) là ngôn ngữ quy định cách hiển thị của các thành phần trong HTML như font chữ, màu sắc, background, bố cục, viền,… hoạt động theo phương pháp tìm và dựa vào các vùng chọn (có thể là thẻ HTML, ID, class,...) sau đó áp dụng các thuộc tính cần thay thế lên vùng chọn đó.

Xem thêm bài viết:

Website là gì?

CSS3 là gì?

Bootstrap là gì?

Lịch sử phát triển của CSS

Cựu Giám đốc công nghệ của Opera Software là HĂ¥kon Wium Lie vào năm 1994 đã đề xuất ý tưởng về một ngôn ngữ định dạng trang (style sheet language) cho World Wide Web. Đề xuất của Lie là tạo ra một ngôn ngữ cho phép các nhà phát triển web tách biệt nội dung của một trang web với diện mạo của nó khi đó HTML là công cụ duy nhất để tạo kiểu cho các trang web và rất khó sử dụng.

Vào năm 1996 phiên bản CSS1 được phát hành. CSS1 nhanh chóng được các trình duyệt web áp dụng và sớm trở thành công cụ tiêu chuẩn để thiết kế web cho phép nhà phát triển web kiểm soát diện mạo của website một cách dễ dàng hơn so với việc sử dụng HTML.

Phiên bản CSS2 được phát hành vào năm 1998. CSS2 cũng là phiên bản đầu tiên của CSS được hỗ trợ bởi tất cả các trình duyệt web chính với nhiều đổi mới như hỗ trợ cho việc xếp chồng các phần tử, sắp xếp vị trí và gradient.

CSS3 đã bắt đầu được phát triển sau khi CSS2 được phát hành, phát triển dưới dạng một tập hợp các module riêng biệt.

Mối quan hệ của CSS và HTML

Để xây dựng lên giao diện website thì cần cả 2 CSS và HTML, thiếu HTML thì CSS không là gì cả, thiếu CSS thì HTML cũng không làm được trò trống gì.

HTML có nhiệm vụ tạo và cấu trúc các phần trong trang web còn CSS có nhiệm vụ tổ chức bố cục dựa theo cấu trúc mà HTML đã tạo.

Ngoài cấu trúc thì HTML có tạo thêm các thẻ và CSS có nhiệm vụ chỉnh cho các thẻ HTML hoạt động theo ý của người lập trình sao cho giao diện nhìn đẹp và chuyên nghiệp.

Cách hoạt động của CSS

Trên thẻ HTML sẽ khai báo các thuộc tính ID hoặc Class. Trong file CSS sẽ quy định ID sẽ là #, Class sẽ là dấu chấm ".".

Nếu chỉ định dạng cho duy nhất 1 thẻ thì bạn đặt là ID, còn nếu định dạng chung cho nhiều thẻ giống nhau thì dùng Class.

Mỗi Class hay Id trong CSS phải có 2 dấu mở ngoặc đóng mở {}, các thuộc tính cách nhau bằng dấu chấm phẩy ";".

Tên thuộc tính của CSS và giá trị của nó cách nhau bằng dấu 2 chấm ":".

<!DOCTYPE html>
<html>
    <head>
        <title>CSS và HTML</title>
         <style>
        #theid{color: red;}
        .theclass{color: green;}
        <style>
    </head>
    <body>
        <p id="theid">Định dạng ID</p>
        <p class="theclass">Định dạng Class</p>
        <p class="theclass">Định dạng Class</p>
       
    </body>
</html>

Đoạn code trên đã nêu ra cách hoạt động của CSS, bạn hãy đọc những ý mình nói trên kết hợp với đoạn code này để hiểu hơn. CSS ở ví dụ này mình để trong thẻ style.

Các loại CSS

External Style sheet

Bạn đưa tất cả định dạng Css vô trong 1 file hoặc nhiều file, file đó có đuôi .css, bạn phải tạo thẻ nhúng thẻ .css vào website.

<!DOCTYPE html>
<html>
    <head>
        <title>CSS và HTML</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <p id="theid">Định dạng ID</p>
        <p class="theclass">Định dạng Class</p>
        <p class="theclass">Định dạng Class</p>
        
    </body>
</html>

Internal Style sheet

CSS được đặt trong thẻ đóng mở <style></style>,  thẻ này đặt ở head:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS và HTML</title>
         <style>
        #theid{color: red;}
        .theclass{color: green;}
        <style>
    </head>
    <body>
        <p id="theid">Định dạng ID</p>
        <p class="theclass">Định dạng Class</p>
        <p class="theclass">Định dạng Class</p>
       
    </body>
</html>

Inline Styles

CSS trực tiếp luôn trên thẻ html bằng cách khai báo style="":

<!DOCTYPE html>
<html>
    <head>
        <title>CSS và HTML</title>
         <style>
        #theid{color: red;}
        .theclass{color: green;}
        <style>
    </head>
    <body>
        <p style="color: red;">Định dạng ID</p>
        <p style="color: green;">Định dạng Class</p>
        <p style="color: green;">Định dạng Class</p>
       
    </body>
</html>

Lời kết

Cảm ơn các bạn đã tham khảo bài viết CSS là gì?

  • 0 Bình luận
CEO Bùi Tấn Lực
Bùi Tấn Lực
CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên website, người viết content, chuyên tư vấn các vấn đề về website và SEO website
  • Zalo
Chia sẻ nội dung đánh giá của bạn về CSS là gì? Mối quan hệ của CSS và HTML
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
Đánh giá của bạn
Tên *
Email
Số điện thoại *
Bình luận, Hỏi đáp
Đăng ký tư vấn miễn phí
Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn
0398.259.259