HTML & CSS: cách chúng hoạt động cùng nhau – css và html có thể nằm trong cùng một tệp không

Bạn đang xem : css và html có thể nằm trong cùng một tệp không

Bài đăng này dựa trên hướng dẫn trước đó Trang web chính xác là gì? Tổng quan về HTML trong Chuỗi kiến ​​thức cơ bản về phát triển web . Bạn sẽ cần lấy mã từ bài đăng trước để làm theo các bước bên dưới.

Sau khi hoàn thành hướng dẫn trước, chúng ta sẽ có tất cả tệp HTML đầu tiên của mình sẵn sàng để sử dụng. Bây giờ chúng tôi muốn bắt đầu làm cho nó trông đẹp. Để làm được điều này, chúng ta sẽ học một số CSS…

Tại sao sử dụng HTML và CSS? Sự khác biệt là gì?

Rất vui vì bạn đã hỏi. HTML và CSS là hai loại đánh dấu (mã) khác nhau, có cú pháp riêng biệt (cách sắp xếp mã được viết). Có một sự khác biệt quan trọng giữa hai điều này. Bạn có thể coi HTML là cấu trúc của trang, trong khi CSS cung cấp kiểu dáng cho HTML.

HTML = cấu trúc
CSS = style

(Nhân tiện, HTML là viết tắt của HyperText Markup Language và CSS là viết tắt của Cascading Style Sheets, nếu bạn đang thắc mắc.)

Để có một ví dụ tuyệt vời về khái niệm tách nội dung khỏi phong cách bằng HTML và CSS, hãy xem trang web CSS Zen Garden . Thực sự, làm điều đó ngay bây giờ. Liên kết sẽ mở ra trong một tab hoặc cửa sổ mới và tôi sẽ nghỉ giải lao.

Được rồi, chúng tôi quay lại?

Ngày trước, trang web này khá truyền cảm hứng — nó là một trong những ví dụ trực tuyến đầu tiên về mối quan hệ giữa HTML và CSS thực sự mạnh mẽ như thế nào. Khi bạn duyệt qua các thiết kế thay thế cho trang web, hãy nhớ rằng mọi thiết kế đơn lẻ đều sử dụng chính xác cùng một HTML ! Điều duy nhất thay đổi từ thiết kế sang thiết kế là tệp CSS . Đây là một ví dụ tuyệt vời về những gì có thể đạt được chỉ bằng cách sử dụng CSS để thay đổi giao diện của một trang web.

Trong các hướng dẫn tiếp theo khi mã của chúng ta trở nên phức tạp, chúng ta sẽ tìm hiểu tầm quan trọng của việc giữ hai mã này riêng biệt. Bây giờ, hãy cùng tìm hiểu và thực sự viết mã.

Bước 1

Tạo một tệp mới có tên “style.css” và lưu nó trong cùng một thư mục với tệp của bạn có tên “index.html”. (Trong hướng dẫn trước , chúng tôi đã tạo một thư mục “trang web”. Lưu tệp CSS của bạn ở đó.)

Liên kết các tệp HTML và CSS của bạn

Bước 2

Trước khi viết CSS, chúng tôi thực sự phải quay lại HTML của mình. Chúng ta cần viết một dòng mới để liên kết tệp html và tệp css với nhau. Vì vậy, hãy mở tệp index.html từ hướng dẫn trước và thêm dòng mã được đánh dấu bên dưới (dòng 5) vào & lt; head & gt; phần tài liệu của bạn. Kết quả sẽ như thế này:

 & lt;! DOCTYPE html & gt;
& lt; html & gt;
 & lt; đầu & gt;
  & lt; title & gt; Đây là tiêu đề trang của tôi. & lt; / title & gt;
  & lt; link href = "style.css" rel = "stylesheet" type = "text / css" / & gt;
 & lt; / head & gt;
 & lt; body & gt;
  & lt; h1 & gt; Đây là phần tử đầu đề 1 & lt; / h1 & gt;
  & lt; p & gt; Hello world, đây là một đoạn văn đơn giản. & lt; / p & gt;
 & lt; / body & gt;
& lt; html & gt; 

Dòng mã này liên kết tệp CSS mới với tệp HTML của bạn. Hãy phân tích nó: thuộc tính href thực sự chỉ định liên kết tương đối đến tệp css. Chúng ta sẽ truy cập vào các liên kết sau, bây giờ, chỉ cần đảm bảo rằng tệp style.css nằm trong cùng một thư mục với tệp index.html của bạn. Thuộc tính rel cho trình duyệt biết rằng đây là một biểu định kiểu. Thuộc tính type cho trình duyệt biết rằng tệp được liên kết này phải được hiểu là cú pháp CSS.

Xem Thêm  Thiết kế trang biểu mẫu đăng nhập với HTML và CSS - html màn hình đăng nhập đơn giản

Hiểu cú pháp CSS

Bước 3

Bây giờ chuyển sang CSS thực. Điều đầu tiên chúng ta sẽ làm là làm cho văn bản đoạn văn có một màu khác. Vì vậy, hãy nhập hoặc dán tệp này vào tệp style.css của bạn

 p {color: blue; } 

Mã này trông khác với mã trong tệp HTML của chúng tôi vì nó là một cú pháp khác. Tôi sẽ thêm một số khoảng trắng và dấu ngắt vào mã đó như sau:

 p {
  màu sắc: xanh lam;
} 

Cả hai ví dụ trên đều hoàn toàn giống với trình duyệt của bạn. Nhưng các nhà phát triển thường viết ra CSS như ví dụ sau để phân tách các kiểu một cách trực quan. Điều này rất hữu ích khi tệp CSS của bạn bắt đầu tích lũy hàng trăm kiểu khác nhau và để tìm hiểu ý nghĩa của cú pháp:

ruleset

Toàn bộ văn bản ở trên về mặt kỹ thuật được gọi là bộ quy tắc hay đơn giản là quy tắc. Nó được chia thành một vài phần khác nhau:

selector-statement-block

Trong bộ quy tắc cụ thể này, chúng tôi có thể gọi p là bộ chọn. (Điều này “chọn” phần của HTML tương ứng sẽ có hiệu lực — p {} chọn & lt; p & gt; trong tệp HTML của chúng tôi.)

Mã bao gồm và giữa các dấu ngoặc nhọn {} được gọi là khối khai báo.

tuyên bố

Có một khai báo duy nhất bên trong khối khai báo của chúng tôi: color: blue; . Các khai báo là các cặp tên-giá trị (tương tự như các thuộc tính HTML). Ở đây, tên của khai báo là “color” và giá trị là “blue”. Điều quan trọng là phải phân tách tên và giá trị bằng dấu hai chấm: và kết thúc khai báo bằng dấu chấm phẩy; .

Xem Thêm  Creating a Custom Inventory Management Application in PHP and MySQL - parseint php

Bước 4

Chúng tôi sẽ thêm một bộ quy tắc mới để thay đổi màu sắc của tiêu đề, như sau:

 p {
  màu sắc: xanh lam;
}
h1 {
  màu đỏ;
} 

Bây giờ phần đầu 1 của chúng ta sẽ có màu đỏ và đoạn văn của chúng ta phải có màu xanh lam, như hình bên dưới và trong bản trình diễn .

Vì vậy, hãy lưu tệp CSS của bạn và sau đó xem tệp HTML tương ứng trong trình duyệt của bạn để đảm bảo rằng tệp của bạn trông giống như ví dụ trên.

Tóm tắt lại

Được rồi, vậy là bạn vừa sử dụng thành công các bộ quy tắc trong tệp CSS của mình để thay đổi giao diện của các phần tử trong tệp HTML của mình. Đây là nền tảng của mọi thứ chúng tôi sẽ làm để xây dựng trang web của mình. Đảm bảo mã của bạn đang hoạt động và bạn mất một chút thời gian để hiểu tại sao mã này hoạt động. Hy vọng rằng bạn đã có một số câu hỏi… chúng tôi sẽ tiếp tục xây dựng vấn đề này và trả lời những câu hỏi đó trong phần còn lại của loạt bài.

Tải xuống tệp demo (ZIP) để so sánh mã này với mã của riêng bạn.

Và tiếp tục đến với bài đăng tiếp theo trong loạt bài này, Tất cả về liên kết tương đối và liên kết tuyệt đối…


Xem thêm những thông tin liên quan đến chủ đề css và html có thể nằm trong cùng một tệp không

#9. TẠO FORM HTML TOÀN TẬP ít người biết (nên xem)| Học html css cùng untiop.vn

alt

  • Tác giả: Unitop – Học web đi làm
  • Ngày đăng: 2021-12-08
  • Đánh giá: 4 ⭐ ( 3871 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Video này hướng dẫn bạn tất tần tật mọi thứ quan trọng nhất về form để phục vụ xây dựng giao diện website.
    Video chia sẻ chi tiết về từng loại thành phần form, cách sử dụng thế nào cho hiệu quả và cả những thuộc tính đi kèm của từng phần tử form trong website.
    ——–
    Tóm tắt:
    TẠO FORM TRONG HTML
    – Form là công cụ để giúp người dùng nhập liệu để gửi lên server
    – Form đăng nhập, đăng ký, khảo sát, trắc nghiệm, comment, vote, tìm kiếm, liên hệ…

    1. Cách tạo form trong html
    – input text
    – email
    – password
    – checkbox
    – number
    – color
    – radio
    – selectbox
    – textarea
    – submit
    – date
    – …

    2. Thuộc tính phần tử form
    – type
    – name
    – value
    – id
    – for label
    – required
    – readonly
    – disabled
    – selected
    – min, max
    – step

    3. Bài tập
    Form đăng nhập
    – Tên đăng nhập
    – Mật khẩu
    – Button “Đăng nhập”

    Form đăng ký
    – Họ và tên
    – Email
    – Tuổi
    – Giới tính
    – Ngày sinh
    – Ngôn ngữ yêu thích: Html, Css, Php, ReactJs
    – Màu yêu thích
    – Sống tại: Hà Nội, Tp.HCM…
    – Chia sẻ ngắn về mục tiêu của bản thân
    – Button “Đăng ký”

    Rất nhiều nội dụng quan trọng phù hợp với những ai muốn học để đi theo nghề lập trình web, bây giờ chúng ta bắt đầu thôi nào!
    – – – – – – – – – – – – – – – – – – – – – –
    MIỄN PHÍ
    » » Nhận tài liệu học web miễn phí qua mail: https://www.hocwebdilam.com?utm_source=yt-unitop
    » » Bấm đăng ký kênh để tránh bỏ sót video mới: https://bit.ly/30TZXyS
    – – – – – – – – – – – – – – – – – – – – – –
    LIÊN KẾT QUAN TRỌNG
    » » Blog lập trình: https://unitop.com.vn
    » » Khoá học lập trình web đi làm: https://unitop.vn
    » » Fanpage: https://www.facebook.com/hocwebdilam
    – – – – – – – – – – – – – – – – – – – – – –
    LỘ TRÌNH HỌC WEB ĐI LÀM
    » http://unitop.vn
    – – – – – – – – – – – – – – – – – – – – – –
    Copyright by Unitop.vn and Phan Van Cuong
    Do not reup, please!
    – – – – – – – – – – – – – – – – – – – – – –
    unitop hocwebdilam

Tổng quan về HTML & CSS

  • Tác giả: tuhoclaptrinh.edu.vn
  • Đánh giá: 4 ⭐ ( 5964 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: HTML & CSS là hai ngôn ngữ cơ bản mà bạn cần phải tìm hiểu thật kỹ nếu muốn học lập trình web và trở nên chuyên nghiệp hơn.

Tất tần tật về độ ưu tiên trong CSS

  • Tác giả: evondev.com
  • Đánh giá: 5 ⭐ ( 5199 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Độ ưu tiên trong CSS rất là quan trọng. Nó giúp chúng ta code hợp lý để có thể style ra cho đúng kết quả mong muốn. Hôm nay chúng ta sẽ cùng tìm hiểu…

3 cách thêm css vào Html

  • Tác giả: unitop.com.vn
  • Đánh giá: 4 ⭐ ( 5717 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tìm hiểu về HTML và CSS cơ bản

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 1814 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 1. Định nghĩa về HTML và CSS

One moment, please…

  • Tác giả: intero.vn
  • Đánh giá: 5 ⭐ ( 4942 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

30 Bộ chọn CSS bạn phải thuộc lòng

  • Tác giả: code.tutsplus.com
  • Đánh giá: 3 ⭐ ( 9616 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Như vậy, bạn đã học được các bộ chọn cơ bản id, lớp và phần tử con – và sau đó bạn nghĩ rằng bao nhiêu đó đã đủ? Nếu vậy, bạn đang bỏ lỡ một cấp độ linh hoạt lớn hơn. Mặc dù rất nhiều các bộ chọn…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  LinkedList trong Java - lớp danh sách liên kết trong java