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 <- id <- class <- thẻ, tức là với các loại bộ chọn CSS, bộ chọn thẻ có phạm vi tác động mở rộng nhất là trên toàn bộ trang có thẻ đó, sau đó mới đến thẻ có thuộc tính lớp, . v

II. CHỒNG CHÉO CSS VÀ THỨ TỰ ƯU TIÊN

– Sự kiện chéo xảy ra khi một đối tượng chịu tác động bởi nhiều quy tắc khác nhau
– Khi sự kiện chéo xảy ra thì ưu tiên thứ nhất sẽ quyết định định dạng của đối tượng

1. Chồng chéo 1

Chồng chéo giữa các loại quy tắc khác nhau
Thứ tự ưu tiên của quy tắc định dạng 4 như sau

Quy tắc định dạng Thứ tự ưu tiênPhạm vi tác độnginline14id23class32tag41

Nhận xét. Thứ tự ưu đãi ngược với phạm vi tác động. Quy tắc mở rộng có phạm vi tác động càng cao thì ưu tiên càng thấp, đảo ngược dạng quy tắc có phạm vi tác động càng thấp thì ưu tiên càng cao

Ví dụ 1. 1

Đoạn văn “Chào mừng bạn đến với khóa học CSS. ” chịu tác động bởi 4 quy tắc thuộc 4 dạng khác nhau (inline, thẻ p, class. p1, id #p2). 4 rule this quy định 4 màu chữ (color) khác nhau

Kết quả. Theo bảng thứ tự ưu tiên thì màu của chữ “Chào mừng bạn đến với khóa học CSS” sẽ theo màu ưu tiên của quy tắc nội tuyến (màu đen)

Ví dụ 1. 2

Bây giờ nếu ta bỏ style=”color. black” (rule format inline) thì theo bạn kết quả sẽ như thế nào?
Chạy trực tiếp ví dụ 1. 1 by way erase line style=”color. đen” rồi kích nút Run để xem kết quả

Kết quả dòng chữ “Chào mừng bạn đến với khóa học CSS. ” sẽ có màu theo quy định của định dạng quy tắc id #p2 (màu xanh lam)

Ví dụ 1. 3

If ta continue bỏ thuộc tính id (rule format id)

Kết quả chữ “Chào mừng bạn đến với khóa học CSS. ” sẽ có màu theo quy định của lớp định dạng quy tắc. p1 (color green)

Ví dụ 1. 4

Ta could use. quan trọng để tăng mức độ ưu tiên

• Với việc làm thêm. quan trọng vào sau giá trị màu đỏ, thẻ định dạng quy tắc, lúc này css của thẻ này có mức độ ưu tiên cao nhất

Ví dụ 1. 5

Nhưng if the format rule đều có. important thì thứ tự ưu tiên lại theo bảng ưu tiên ở trên (inline > id > class > 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 đỏ }