Kiếm thu nhập bằng kỹ năng CSS của bạn

Đăng ký và chúng tôi sẽ gửi cho bạn những cơ hội làm việc tự do tốt nhất ngay trong hộp thư đến của bạn.
Chúng tôi đang xây dựng thị trường việc làm tự do lớn nhất dành cho những người như bạn.

Bộ chọn CSS cho phép chúng tôi nhắm mục tiêu các phần tử HTML cụ thể bằng biểu định kiểu của chúng tôi. Mặc dù có nhiều loại Bộ chọn CSS khác nhau, bài học hôm nay tập trung vào bốn bộ chọn cơ bản;

Đầu tiên chúng ta cần một trang để tạo kiểu

CSS không hữu ích lắm nếu không có trang để tạo kiểu. Tạo một tài liệu văn bản trống, sao chép và dán HTML sau

CSS Selectors


This is the first paragraph.
This is an important paragraph inside the Intro Div.


This is a regular paragraph.
This is an important paragraph that is not in the Intro Div.

Tạo một thư mục mới có tên “CSS-Selectors” trên màn hình của bạn hoặc bất kỳ vị trí nào khác mà bạn thích. Sau đó, lưu tài liệu của chúng tôi trong thư mục này với tên tệp là chỉ mục. htm

Trang không có CSS

mở chỉ mục. htm trong trình duyệt web và bạn sẽ thấy một cái gì đó rất giống với cái này

Hãy để CSS bắt đầu

Bây giờ, hãy tạo một tài liệu văn bản trống mới và lưu nó vào thư mục “CSS-Selectors” của chúng tôi với tên tệp là style. css. Bây giờ chúng tôi đã sẵn sàng để bắt đầu tạo kiểu cho trang của mình với bốn loại Bộ chọn cần thiết

1 – Bộ chọn loại

Bộ chọn loại rất đơn giản. Chúng tương ứng với bất kỳ loại phần tử HTML nào. Ví dụ: thêm mã sau vào tệp CSS trống của bạn;

body {
font-family: Arial, sans-serif;
font-size: small;
}

h1 {
color: green;
}

em {
color: red;
}

This code selects and styles our element, as well as all

and elements on our page.

2 – Bộ chọn ID

If you take a look at the code of our HTML page, you’ll notice we have a

element with an ID of intro.   We assign elements IDs when they are unique on a page; there is only one “intro” section on our page.  This is important, because two elements cannot have the same ID.

When an element has an “ID” we can access it with a CSS selector by placing a pound sign (#) in front of it’s ID value.  Add the following code to your CSS file, directly below our

rule:

#intro {
font-size: 130%;
border: 1px solid black;
}

3 – Bộ chọn lớp

Bộ chọn lớp rất giống với Bộ chọn ID. Sự khác biệt chính là trong khi một ID nhất định chỉ nên được gán cho một phần tử, chúng ta có thể gán cùng một lớp cho bao nhiêu phần tử tùy thích

Nếu bạn xem mã của trang HTML của chúng tôi, bạn sẽ nhận thấy rằng hai trong số các thẻ đoạn văn của chúng tôi có một loại “quan trọng. ”   Khi một phần tử có một lớp, chúng ta có thể truy cập phần tử đó bằng bộ chọn CSS bằng cách đặt dấu chấm trước tên lớp của phần tử đó. Hãy thêm quy tắc sau vào tệp CSS của chúng tôi để làm nổi bật các đoạn văn này

.important {
background-color: yellow;
}

4 – Bộ chọn hậu duệ

Hãy tưởng tượng chúng ta muốn đoạn quan trọng trong Div “giới thiệu” trông khác với đoạn quan trọng ở cuối trang. Chúng ta có thể sử dụng Descendant Selector để đạt được điều này

Thêm quy tắc CSS sau vào cuối tệp CSS của chúng tôi

#intro .important {
background-color: orange;
}

Hãy phân tích cách hoạt động của bộ chọn. Nó bắt đầu bằng “#intro” chọn Div giới thiệu của chúng tôi. Tiếp theo là một khoảng trắng, và sau đó “. quan trọng. ” Vì vậy, về cơ bản, bộ chọn của chúng tôi yêu cầu trình duyệt web (1) tìm phần tử có ID là phần giới thiệu, (2) đi vào bên trong phần tử đó và tìm bất kỳ phần tử nào có loại quan trọng

Notice that within the orange paragraph, the word “important” is red.  Let’s imagine we want to change the color, since red text on an orange background is difficult to read.  The word “important” is inside an element, so we’ll use the following code to select and style it;

#intro .important em {
color: white;
}

This code is telling the browser to (1) find the element with an ID of intro, (2) go inside that element and find any elements with a class of important, (3) go inside that element and select any elements.

Đó là nó cho bài học hôm nay. Hãy tóm tắt lại

• Bộ chọn loại tương ứng với các phần tử HTML
• Bộ chọn ID được sử dụng bằng cách thêm # trước ID phần tử
• Bộ chọn lớp được sử dụng bằng cách thêm dấu chấm trước lớp phần tử
• Descendant Selectors tương tự như cây phả hệ;

Trong bài học tiếp theo, chúng ta sẽ bắt đầu nghiên cứu bản chất của tất cả Thiết kế CSS;

Nếu bạn thích xem các bài học video thay vì đọc các bài học viết, hãy xem khóa học video 8 giờ của tôi và tham gia cùng hơn 4.000 người khác đã học HTML, CSS và thiết kế đáp ứng cấp độ chuyên nghiệp

5 bộ chọn trong CSS là gì?

Có nhiều loại bộ chọn cơ bản khác nhau. .

Bộ chọn phần tử

bộ chọn id

Bộ chọn lớp

Bộ chọn chung

Bộ chọn nhóm

Bộ chọn thuộc tính

Bộ chọn lớp giả

Bộ chọn phần tử giả

Bộ chọn CSS là gì?

Bộ chọn CSS là phần đầu tiên của Quy tắc CSS. Đó là mẫu phần tử và các thuật ngữ khác cho trình duyệt biết nên chọn phần tử HTML nào để có các giá trị thuộc tính CSS bên trong quy tắc được áp dụng cho chúng .

Có bao nhiêu bộ chọn CSS?

Có 6 các loại bộ chọn CSS.

Các loại bộ chọn là gì?

Bộ chọn loại . Trong ví dụ dưới đây, chúng tôi đã sử dụng span , em và bộ chọn mạnh. Hãy thử thêm quy tắc CSS để chọn phần tử

và thay đổi màu của phần tử thành màu xanh lam. A type selector is sometimes referred to as a tag name selector or element selector because it selects an HTML tag/element in your document. In the example below, we have used the span , em and strong selectors. Try adding a CSS rule to select the

element and change its color to blue.

Đọc tiếp