Trong bài viết này, tôi hướng dẫn bạn 3 cách thêm css vào tài liệu html của trang web bao gồm css nội tuyến, css nội bộ, css bên ngoài
Css nội tuyến
Đây là cách thêm css trực tiếp vào thẻ html cần định dạng. Tập hợp các kiểu css được khai báo bên trong kiểu thuộc tính của thẻ
ưu điểm. Tạo kiểu cho một đối tượng html rất nhanh chóng
nhược điểm. Những style css này chỉ áp dụng cho một cụ thể, không áp dụng chung cho nhiều thẻ html cùng lúc
Ví dụ 1. Thiết lập đoạn văn bản có màu đỏ, chúng ta có thể thiết lập như mã bên dưới
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, unde?
Css nội bộ
Đây là cách thêm đoạn mã css vào một vùng riêng trong tệp html
ưu điểm. Phân vùng rõ ràng đoạn mã css và những nội dung html còn lại
nhược điểm. Những kiểu css này chỉ được áp dụng trong phạm vi một tệp cụ thể mà nó được khai báo. Nó không thể sử dụng chung cho nhiều trang khác nhau
Ví dụ 2. Thiết lập font-size: 18px và color: orange cho thẻ tiêu đề h1
Title
h1 {
color: orange;
font-size: 18px;
}
Unitop.vn - Học lập trình web đi làm
Css bên ngoài
Với công thức này, tất cả các mã css được đưa vào trong tệp có đuôi mở rộng. css [ví dụ. chủ yếu. css]
ưu điểm. Giúp Css có thể sử dụng chung cho nhiều trang khác nhau của website và quản lý dễ dàng
Ví dụ bên dưới giúp thiết lập màu sắc cho thẻ p thông qua tệp main.css
Constructor file directory
index.html css ----main.css
Tệp main.css nằm trong thư mục
Title
h1 {
color: orange;
font-size: 18px;
}
Unitop.vn - Học lập trình web đi làm
1p{
color: #f15c25;
}Nội dung file index. html
Unitop.vn - Học lập trình web đi làm
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem doloribus officia reiciendis sed similique sit sunt suscipit tempore! Eaque, possimus?
Trong đó dòng mã
giúp liên kết đến tập tin chính. css nằm trong thư mục css của dự án
Tổng kết
Qua bài viết này tôi chia sẻ cho bạn 3 cách thêm css vào tài liệu html. Tùy vào từng trường hợp cụ thể mà bạn có thể lựa chọn cách thích hợp
Nếu trang web chỉ có một trang, bạn có thể sử dụng css nội bộ là đủ. Nhưng nếu dự án có tệp hệ thống lớn thì bạn nên sử dụng cách css bên ngoài
Xin chào các bạn đặc biệt là các bạn mới học ngành web này. Đây là series về kiến thức HTML cơ bản toàn tập dành cho người mới mà mình quyết định viết và chia sẻ cách học, cách sử dụng ứng dụng vào thực tế như thế nào, cấu trúc ra sao… thông qua những năm kinh tế . Hi vọng những kiến thức về HTML cơ bản toàn tập mà mình chia sẻ sẽ giúp các bạn hiểu hơn về HTML cơ bản cũng như sử dụng chúng một cách tốt nhất
Mình thấy nhiều bạn mới học ở nhiều nguồn như w3schools hay MDN là những nguồn học nước ngoài tốt, tuy nhiên đôi khi các bạn đọc tiếng Anh cũng không hiểu như học xong không biết các thẻ trong HTML có những thẻ gì, áp dụng ra . OK bắt đầu thôi nào
# Constructor a tag in HTML that you should know
Ở trong HTML thì việc tìm hiểu cấu trúc một thẻ có thể quá dễ dàng tuy nhiên các bạn mới học thì nên biết chúng trông như thế nào và cách sử dụng ra sao để làm cho chuẩn hơn
Content
Ở trên thì là thẻ p với
9 là thẻ mở sau đó đến nội dung là chữcontent0 rồi đến thẻ đóng là
content1 các bạn thấy thẻ đóng nó giống thẻ mở nhưng có dấu
content2 phía trước nhé. Ngoài ra sau này các bạn học thêm thì sẽ thấy có một số thẻ người ta gọi là thẻ tự đóng nó như thế này
Các thẻ có cấu trúc như trên gọi là thẻ tự đóng nghĩa là chúng ta không thể truyền nội dung vào giữa như thẻ đóng mở ở chỗ thẻ p mình nói ở trên, nếu các bạn có mã như dưới đây là sai nhé, vì thế khi
content
# Các thuộc tính của thẻ trong HTML
Các thẻ trong HTML được tạo ra đều có các thuộc tính đi kèm ví dụ như lớp, id là chung nhất ngoài ra mỗi thẻ sẽ có thêm các thuộc tính riêng ví dụ như thẻ a thì sẽ có
content3,
content4, input thì
content5,
evondev
Còn nếu thẻ đó không có mà các bạn đã đưa nó vào thì nhìn mã của các bạn nó tệ lắm như thế này
google.comnhấn vô đây
- Khi sử dụng CSS biến thẻ thành khối nội tuyến thì nó là sự kết hợp giữa thẻ nội tuyến và thẻ khối, tức là nó sẽ có mức độ mở rộng theo nội dung mà nó chỉ bao gồm [điểm đặc biệt của thẻ nội tuyến], và không bị giới hạn chế độ.
# Tất tần tật các thẻ trong HTML hay được sử dụng nhiều nhất
Ở những mục trên mình đã nói về cấu trúc cơ bản của một thẻ, các thuộc tính trong HTML, sự khác nhau giữa thẻ nội tuyến và khối thẻ và cách sử dụng đúng rồi đấy. Ở mục này và các bài tiếp theo của series này mình sẽ tập trung nói về các thẻ, các tính năng kèm theo để giải thích chi tiết hơn và cách sử dụng cho các bạn để các bạn thông tin hơn về HTML nhé.
## Thẻ pThẻ p là thẻ block, thẻ p có thuộc tính hay dùng là class, id. Thẻ p theo mình nghĩ nó là viết tắt của đoạn là thẻ đại diện cho các đoạn văn bản, ví dụ các bạn đang đọc bài viết của mình các bạn nhấn F12 thì các đoạn văn bản đều thấy trong thẻ p, vì thế khi . Tuy nhiên đoạn chữ ngắn vài 3 chữ sử dụng thẻ p cũng không sao cả, tuy nhiên chữ ngắn thì mình khuyến khích sử dụng thẻ inline hoặc các thẻ tiêu đề hơn
scroll to content
Trong thẻ các bạn cần biết 3 thuộc tính quan trọng đó chính là
content8, href sẽ truyền vào đường dẫn hoặc như mình nói ở trên dấu #, mục tiêu thì có 2 giá trị thường được sử dụng nhiều nhất là
content9 và
evondev0, _self thì
evondev 1, khi các bạn sử dụng với mục tiêu có giá trị là
evondev0 thì Google Chrome khuyến mãi được bổ sung vào giá trị cho mục tiêu là
evondev3 để tăng tính bảo mật. Default value in target is
content9 rồi nên các bạn không cần ghi vào cũng được, ví dụ dưới đây
google.com google.com
Khi làm việc với thẻ a các bạn cần lưu ý thêm nữa là thẻ a không nên bọc thẻ a vì như vậy nó sẽ sai về mã ý nghĩa và ý nghĩa sử dụng vì khi nhấn vào liên kết nó đã chạy rồi sẽ không có tác dụng cho
0
Bên trong thẻ a có thể chứa nhiều thẻ khác luôn nhé như thẻ khối khác, thẻ nội tuyến…Sau đây, mã giao diện của bạn mà người dùng đã nhấn vào một khối nào đó thì chắc chắn rằng bạn sẽ sử dụng . ## Thẻ img
Là thẻ nội tuyến và là thẻ tự đóng nên không truyền nội dung vào giữa các thẻ đóng mở khác được. Thẻ này được sử dụng rất nhiều trong trang web để hiển thị hình ảnh, thẻ img có 2 thuộc tính chính mà các bạn cần nắm lấy đó là
evondev5 và
evondev6 trong đó src truyền vào đường dẫn hình ảnh để hiển thị hình ảnh lên trang web,
evondev 7 để hiển thị hình ảnh ở nhiều kích thước màn hình khác nhau tuy nhiên thuộc tính này khá khó sử dụng cho người mới nên mình không thích ở phạm vi dành cho . ## Các thẻ tiêu đề
Các thẻ tiêu đề là những thẻ
evondev8 là thẻ chặn và thường đại diện cho các tiêu đề từ nhỏ đến nhỏ và có cách sử dụng khác nhau nhé[h1 là to nhất đến h6 là nhỏ nhất]. Thẻ h1 là thẻ thường được sử dụng cho một tiêu đề lớn nhất của trang web và lưu ý trong một trang web thì chỉ có tối đa một thẻ h1 mà thôi, vì nó ảnh hưởng đến SEO cho nên nếu các bạn sử dụng nhiều hơn
evondev 9 và
google.comgoogle.com