Css màu từ thứ hai

Với Cascading Style Sheets – CSS giúp chúng ta có thể định kiểu cho bất kỳ phần tử HTML nào trên trang web. Một phần tử trên trang có thể sử dụng các bộ chọn khác nhau như bộ chọn lớp, bộ chọn id hoặc bộ chọn thẻ. Cũng có nhiều cách nhúng CSS

• Inline [nhúng trực tiếp vào phần tử HTML bằng cách sử dụng kiểu thuộc tính của phần tử
• Internal [tạo các bộ chọn trực tiếp trên trang bằng cách đặt trong thẻ
• External [tạo file css nằm riêng và nhúng vào trang sử dụng thẻ để nhúng vào trang

Vấn đề xảy ra khi một phần tử HTML chịu tác động của nhiều bộ lựa chọn với nhiều giá trị giống nhau ví dụ như kiểu màu sắc cho chữ, thì nó sẽ ưu tiên giá trị nào để thiết lập kiểu cho thẻ

Và với một trang web làm sao để có thể tối ưu hóa thiết kế để có thể tái sử dụng lại CSS, làm cho giữa các trang web được đồng nhất về giao diện và rất nhiều khía cạnh khác như tốc độ tải trang tối đa, bảo đảm

hôm nay Tìm ở đây sẽ tổng hợp cách sử dụng CSS cơ bản, ưu tiên thứ tự ưu tiên trong CSS và tư vấn để những bạn thiết kế web có thể tối ưu hóa trong công việc thiết kế WebSite của mình

Nội dung

I. CSS NHẮC LẠI

Có 3 cách sử dụng CSS để định loại thẻ trên trang HTML

1. nội tuyến

Định dạng CSS được đặt trực tiếp vào bên trong mỗi phần tử HTML thông qua kiểu thuộc tính

2. Nội bộ

Định dạng CSS đặt trong thẻ  và nằm bên trong trang HTML. Các định dạng CSS này sẽ được đưa vào các đối tượng thông qua 3 dạng rule:

a. Rule dạng THẺ: Được định nghĩa bằng tên_thẻ {…}, sẽ tác động lên tất cả các thẻ trên trang đó. Như ví dụ bên dưới, tất các các thẻ

phần nội dung sẽ có màu chữ là đỏ

b. Định dạng quy tắc LỚP. Định dạng định nghĩa. tên_ lớp {…}, tác động lên các thẻ có thuộc tính class=”tên_ lớp”

c. ID định dạng quy tắc. định nghĩa bằng #tên_định_danh {…}  và tác động lên thẻ có thuộc tính id=”tên_định_danh” [Trong một trang. id thuộc tính html nên đặt là duy nhất]

3. Bên ngoài

Cũng có 3 định dạng [thẻ, lớp, id] như Nội bộ nhưng các quy tắc không được đặt trong một trang. html [Chỉ sử dụng cho trang duy nhất. html this] được đặt trong tệp. css private and could call from a or many pages. html

Tóm tắt. can see as has 4 format rule in CSS. nội tuyến, thẻ, lớp, id

• Thứ tự ưu tiên của CSS từ cao đến thấp như sau. nội tuyến -> id -> lớp -> thẻ
• Phạm vi tác động giảm dần. inline tag]

  2. Chồng chéo 2

  Chồng chéo do nhiều quy tắc của cùng một loại nào đó
  Nhận xét. Khi có sự chồng chéo của các quy tắc cùng một loại thì các thuộc tính trong cùng một quy tắc sẽ lấy các thuộc tính sau cùng, các thuộc tính khác nhau sẽ hợp nhất lại

  Ví dụ 2. 1

  
  Trong khai báo trên thì cả 2 quy tắc đều là dạng lớp và cùng tên p1. Hai quy tắc này có thuộc tính màu chồng nhau
  Trình duyệt xử lý mã [html,css,javascript] theo thứ tự từ trái qua phải, từ trên xuống dưới nên trong trường hợp này quy tắc nào nằm sau sẽ được ưu tiên hơn quy tắc trước đó. Làm như vậy, màu sẽ là màu xanh

  Ví dụ 2. 2

  Trong ví dụ trên thì các đối tượng đều chịu tác động bởi 2 lớp định dạng quy tắc. p1 và. p2. Vì. p2 nằm sau. p1 nên màu sẽ theo quy tắc. p2

  Ví dụ 2. 3

  Một quy tắc thiết lập ở dạng Internal [tức trong thẻ ] ví dụ. p2 {màu. blue} and a rule setting in External format [file mystyle. css rồi nhúng vào trang html] ví dụ là. p1 { màu. màu đỏ }