search

Hướng dẫn css-interview-questions github - css-phỏng vấn-câu hỏi github

Ngày đăng: 02/11/2022
Trả lời: 0
Lượt xem: 155

Câu hỏi phỏng vấn CSS

Nhấp vào nếu bạn thích dự án. Yêu cầu kéo được đánh giá cao.

Hướng dẫn css-interview-questions github - css-phỏng vấn-câu hỏi github
if you like the project. Pull Request are highly appreciated.

Show

Mục lục

  • Thực hành mã hóa CSS
  • Thuộc tính CSS3
  • Câu hỏi trắc nghiệm CSS
  • SCSS cơ bản

Q. CSS là gì?

CSS là viết tắt của các bảng phong cách xếp tầng. CSS được sử dụng để xác định các kiểu cho các trang web, bao gồm thiết kế, bố cục và các biến thể trong màn hình cho các thiết bị và kích thước màn hình khác nhau. CSS được dự định để cho phép các chuyên gia web phân tách nội dung và cấu trúc của mã trang web khỏi thiết kế trực quan. stands for Cascading Style Sheets. CSS is used to define styles for web pages, including the design, layout and variations in display for different devices and screen sizes. CSS was intended to allow web professionals to separate the content and structure of a website's code from the visual design.

CSS có thể được sử dụng để tạo kiểu văn bản tài liệu - ví dụ như thay đổi màu sắc và kích thước của các tiêu đề và liên kết. Nó có thể được sử dụng để tạo bố cục - ví dụ như biến một cột văn bản thành một bố cục với khu vực nội dung chính và thanh bên cho thông tin liên quan. Nó thậm chí có thể được sử dụng cho các hiệu ứng như hoạt hình.

Example:

h2 {
  color: red;
  font-size: 5em;
}

p {
  color: black;
}

Q. Việc sử dụng quy tắc CSS là gì?

CSS là một quy tắc hoặc tập hợp các quy tắc mô tả định dạng (thay đổi ngoại hình) của các yếu tố riêng lẻ trên một trang web. Quy tắc bao gồm hai phần: bộ chọn và khối khai báo tiếp theo. Hình ảnh dưới đây cho thấy cấu trúc (cú pháp) của quy tắc:

div {
  color: blue;
  text-align: justify;
}

Hướng dẫn css-interview-questions github - css-phỏng vấn-câu hỏi github

  • Đầu tiên luôn là bộ chọn, nó cho biết trình duyệt nào phần tử hoặc phần tử của trang web sẽ được tạo kiểu.selector, it tells the browser which element or elements of the web page will be styled.
  • Tiếp theo là khối khai báo, bắt đầu bằng niềng răng xoăn mở {và kết thúc bằng việc đóng}, giữa niềng răng xoăn được chỉ định các lệnh định dạng (khai báo), được trình duyệt sử dụng để cách điệu phần tử chọn đã chọn.declaration block, which begins with the opening curly brace { and ends with the closing }, between the curly braces are specified formatting commands (declarations), which are used by the browser to stylize the selected selector element.
  • Mỗi tuyên bố bao gồm hai phần: tài sản và giá trị của nó. Tuyên bố phải luôn kết thúc bằng một dấu chấm phẩy (;). Bạn có thể bỏ qua; Chỉ ở cuối tuyên bố cuối cùng trước khi đóng giằng xoăn.declaration consists of two parts: the property and its value. The declaration must always end with a semicolon (;). You can omit the ; only at the end of the last declaration before the closing curly brace.
  • Một thuộc tính là một lệnh định dạng xác định hiệu ứng kiểu cụ thể cho một phần tử. Mỗi thuộc tính có tập hợp các giá trị được xác định trước. Sau tên thuộc tính, một dấu hai chấm được chỉ định, tách tên thuộc tính với giá trị hợp lệ.property is a formatting command that defines a specific style effect for an element. Each property has its own predefined set of values. After the property name, a colon is specified, which separates the property name from the valid value.

Q. Những cách có thể để áp dụng các kiểu CSS cho một trang web là gì?

Có ba cách để áp dụng CSS cho HTML: nội tuyến, nội bộ và bên ngoài.

1. CSS nội tuyến:

CSS nội tuyến được chỉ định trực tiếp trong thẻ mở của phần tử bạn muốn nó áp dụng. Nó được nhập vào thuộc tính kiểu trong HTML. Điều này cho phép các thuộc tính CSS trên cơ sở "mỗi thẻ".

Example:

<p style="font-weight:bold;">Bold Fontp>

Loại CSS này không thực sự được khuyến nghị, vì mỗi thẻ HTML cần được tạo kiểu riêng lẻ. Tuy nhiên, CSS nội tuyến trong HTML có thể hữu ích trong một số tình huống. Ví dụ: trong trường hợp bạn không có quyền truy cập vào các tệp CSS hoặc chỉ cần áp dụng các kiểu cho một phần tử duy nhất.

2. CSS nội bộ:

Nội bộ hoặc nhúng, các kiểu được sử dụng cho toàn bộ trang. Bên trong phần tử đầu, các thẻ kiểu bao quanh tất cả các kiểu cho trang.

Example:

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...

Phong cách CSS này là một phương pháp hiệu quả để tạo kiểu cho một trang duy nhất. Tuy nhiên, sử dụng kiểu này cho nhiều trang là tốn thời gian vì bạn cần đặt các quy tắc CSS lên mỗi trang của trang web của bạn.

3. CSS bên ngoài:

Trong các quy tắc CSS bên ngoài được lưu trữ trong một tệp riêng biệt. Để tham khảo tệp đó từ trang HTML, hãy thêm phần tử liên kết (và phần tử đóng của nó trong XHTML) vào phần tử đầu. Loại CSS này là một phương pháp hiệu quả hơn, đặc biệt là để tạo kiểu cho một trang web lớn. Bằng cách chỉnh sửa tệp .css, bạn có thể thay đổi toàn bộ trang web của mình cùng một lúc..css file, you can change your entire site at once.

style.css:

  p {
      color: red;
  }
  
  a {
      color: blue;
  }

>
<html>
<head>
    <title>External CSS Exampletitle>
    <link rel="stylesheet" type="text/css" href="style.css">
...

Phần tử liên kết trong ví dụ có ba thuộc tính. Đầu tiên, 

div {
  color: blue;
  text-align: justify;
}
69, cho trình duyệt loại mục tiêu của liên kết. Cái thứ hai, 
div {
  color: blue;
  text-align: justify;
}
70, cho biết trình duyệt đó là loại biểu định kiểu nào. Và thứ ba, 
div {
  color: blue;
  text-align: justify;
}
71, nói với trình duyệt theo đó URL để tìm biểu định kiểu.

Q. Phần xếp tầng của CSS có nghĩa là gì?

Việc xếp tầng trong CSS đề cập đến thực tế là các quy tắc kiểu dáng "xếp tầng" xuống từ một số nguồn. Điều này có nghĩa là CSS có hệ thống phân cấp vốn có và các phong cách ưu tiên cao hơn sẽ ghi đè lên các quy tắc ưu tiên thấp hơn.cascading in CSS refers to the fact that styling rules "cascade" down from several sources. This means that CSS has an inherent hierarchy and styles of a higher precedence will overwrite rules of a lower precedence.

Ngay cả tài liệu HTML đơn giản nhất cũng có thể có ba bảng hoặc nhiều phong cách liên quan đến nó bao gồm:

  • Bảng kiểu của trình duyệt
  • Bảng kiểu người dùng
  • Bảng kiểu của tác giả

1. Bảng phong cách trình duyệt:

Trình duyệt áp dụng bảng phong cách cho tất cả các tài liệu web. Mặc dù các bảng phong cách này thay đổi từ trình duyệt đến trình duyệt, nhưng tất cả chúng đều có các đặc điểm chung như văn bản đen, liên kết màu xanh, liên kết truy cập màu tím, v.v ... Chúng được gọi là bảng kiểu trình duyệt "mặc định".

Ngay khi bạn, tác giả, áp dụng một bảng kiểu cho một tài liệu, nó sẽ ghi đè lên bảng kiểu của trình duyệt. Điều này là do các bảng phong cách tác giả sẽ luôn ghi đè các bảng phong cách trình duyệt.

2. Kiểu người dùng:

Hầu hết các trình duyệt hiện đại cho phép người dùng đặt bảng phong cách của riêng họ trong trình duyệt của họ. Các bảng kiểu này sẽ ghi đè lên các bảng kiểu mặc định của trình duyệt - chỉ dành cho người dùng đó.

3. Phong cách tác giả:

Ngay sau khi bạn áp dụng một bảng kiểu cơ bản hoặc kiểu nội tuyến cho một trang, bạn đã thêm những gì được gọi là "Bảng kiểu tác giả". Tất cả mọi thứ bạn làm, từ việc chọn phông chữ, màu sắc và đặt các trang trong CSS đều được thực hiện bằng cách sử dụng các bảng kiểu tác giả.

Q. Giải thích các tính năng mới trong CSS3?

1. Bộ chọn CSS3:

  • Khớp với bất kỳ phần tử E nào có thuộc tính attr bắt đầu với val giá trị. Nói cách khác, Val phù hợp với sự khởi đầu của giá trị thuộc tính.E whose attribute attr starts with the value val. In other words, the val matches the beginning of the attribute value.

E[attr^=val]
/* Example */
a[href^='http://sales.']{color: teal;}

  • Khớp với bất kỳ phần tử E nào có thuộc tính attr kết thúc ở Val. Nói cách khác, Val phù hợp với phần cuối của giá trị thuộc tính.E whose attribute attr ends in val. In other words, the val matches the end of the attribute value.

E[attr$=val]
/* Example */
a[href$='.jsp']{color: purple;}

  • Khớp với bất kỳ phần tử E nào có thuộc tính attr phù hợp với val ở bất cứ đâu trong thuộc tính. Nó tương tự như e [attr ~ = val], ngoại trừ val có thể là một phần của một từ.E whose attribute attr matches val anywhere within the attribute. It is similar to E[attr~=val], except the val can be part of a word.

E[attr*=val]  
/* Example */
img[src*='artwork']{
        border-color: #C3B087 #FFF #FFF #C3B087;
}

2. Lớp giả:

CSS2 hỗ trợ các lớp giả tương tác của người dùng, cụ thể là 

div {
  color: blue;
  text-align: justify;
}
72, 
div {
  color: blue;
  text-align: justify;
}
73, 
div {
  color: blue;
  text-align: justify;
}
74, 
div {
  color: blue;
  text-align: justify;
}
75 và 
div {
  color: blue;
  text-align: justify;
}
76. Một vài bộ chọn phân loại giả đã được thêm vào trong CSS3. Một là bộ chọn 
div {
  color: blue;
  text-align: justify;
}
77, cho phép các nhà thiết kế trỏ đến phần tử gốc của tài liệu.
A few more pseudo-class selectors were added in CSS3. One is the 
div {
  color: blue;
  text-align: justify;
}
77 selector, which allows designers to point to the root element of a document.

Như một bổ sung cho bộ chọn 

div {
  color: blue;
  text-align: justify;
}
78, 
div {
  color: blue;
  text-align: justify;
}
79 đã được thêm vào. Với nó, người ta có thể chọn phần tử cuối cùng có tên của phần tử cha.

  div.article > p:last-child{font-style: italic;}

Một bộ chọn giả tương tác người dùng mới đã được thêm vào, bộ chọn 

div {
  color: blue;
  text-align: justify;
}
80.

div {
  color: blue;
  text-align: justify;
}
0

Bộ chọn giả âm, 

div {
  color: blue;
  text-align: justify;
}
81 có thể được ghép nối với hầu hết mọi bộ chọn khác đã được thực hiện.

div {
  color: blue;
  text-align: justify;
}
1

3. Màu sắc CSS3:

Danh sách từ khóa màu đã được mở rộng trong mô -đun màu CSS3 để bao gồm 147 màu từ khóa bổ sung (thường được hỗ trợ tốt), CSS3 cũng cung cấp cho chúng tôi một số tùy chọn khác: HSL, HSLA, RGBA và Opacity.HSL, HSLA, RGBA and Opacity.

div {
  color: blue;
  text-align: justify;
}
2

4. Các góc tròn: Border-Radius:

5 Drop Shadows:

div {
  color: blue;
  text-align: justify;
}
3

6. Bóng tối văn bản:

div {
  color: blue;
  text-align: justify;
}
4

7. Độ dốc tuyến tính:

div {
  color: blue;
  text-align: justify;
}
5

8. Độ dốc xuyên tâm:

div {
  color: blue;
  text-align: justify;
}
6

9. Nhiều hình ảnh nền:

Trong CSS3, không cần phải bao gồm một phần tử cho mỗi hình ảnh nền; Nó cung cấp cho chúng tôi khả năng thêm nhiều hơn một hình ảnh nền cho bất kỳ yếu tố nào, thậm chí là các yếu tố giả.

div {
  color: blue;
  text-align: justify;
}
7

Q. Bộ chọn CSS là gì?

Bộ chọn CSS là một phần của bộ quy tắc CSS thực sự chọn nội dung bạn muốn tạo kiểu.

i) Bộ chọn phổ quát: Bộ chọn phổ quát hoạt động giống như một ký tự thẻ hoang dã, chọn tất cả các yếu tố trên một trang. Mỗi trang HTML được xây dựng trên nội dung được đặt trong các thẻ HTML. Mỗi bộ thẻ đại diện cho một phần tử trên trang.: The universal selector works like a wild card character, selecting all elements on a page. Every HTML page is built on content placed within HTML tags. Each set of tags represents an element on the page.

div {
  color: blue;
  text-align: justify;
}
8

ii) Bộ chọn loại phần tử: Bộ chọn này khớp với một hoặc nhiều phần tử HTML cùng tên.: This selector match one or more HTML elements of the same name.

div {
  color: blue;
  text-align: justify;
}
9

<p style="font-weight:bold;">Bold Fontp>
0

iii) Bộ chọn ID: Bộ chọn này khớp với bất kỳ phần tử HTML nào có thuộc tính ID có cùng giá trị với bộ chọn.: This selector matches any HTML element that has an ID attribute with the same value as that of the selector.

<p style="font-weight:bold;">Bold Fontp>
1

<p style="font-weight:bold;">Bold Fontp>
2

iv) Bộ chọn lớp: Trình chọn lớp cũng khớp với tất cả các phần tử trên trang có thuộc tính lớp của chúng được đặt thành cùng giá trị với lớp.: The class selector also matches all elements on the page that have their class attribute set to the same value as the class.

<p style="font-weight:bold;">Bold Fontp>
3

v) Bộ kết hợp hậu duệ: Bộ chọn hậu duệ hoặc chính xác hơn là Combinator Hậu duệ cho phép bạn kết hợp hai hoặc nhiều bộ chọn để bạn có thể cụ thể hơn trong phương thức lựa chọn của mình.: The descendant selector or, more accurately, the descendant combinator lets you combine two or more selectors so you can be more specific in your selection method.

<p style="font-weight:bold;">Bold Fontp>
4

Khối khai báo này sẽ áp dụng cho tất cả các phần tử có một lớp hộp nằm trong một phần tử có ID là 

div {
  color: blue;
  text-align: justify;
}
82. Điều đáng chú ý là phần tử 
div {
  color: blue;
  text-align: justify;
}
83 không phải là một đứa trẻ ngay lập tức: có thể có một yếu tố khác bao bọc 
div {
  color: blue;
  text-align: justify;
}
83, và các phong cách vẫn sẽ được áp dụng.

<p style="font-weight:bold;">Bold Fontp>
5

VI) Trình kết hợp trẻ em: Một bộ chọn sử dụng bộ kết hợp trẻ em tương tự như bộ chọn sử dụng bộ kết hợp hậu duệ, ngoại trừ nó chỉ nhắm mục tiêu các yếu tố trẻ em ngay lập tức.: A selector that uses the child combinator is similar to a selector that uses a descendant combinator, except it only targets immediate child elements.

<p style="font-weight:bold;">Bold Fontp>
6

Bộ chọn sẽ phù hợp với tất cả các yếu tố có lớp 

div {
  color: blue;
  text-align: justify;
}
85 và đó là trẻ em ngay lập tức của yếu tố 
div {
  color: blue;
  text-align: justify;
}
86. Điều đó có nghĩa là, không giống như bộ kết hợp hậu duệ, có thể có một yếu tố khác gói ____ 183, nó phải là một yếu tố con trực tiếp.

<p style="font-weight:bold;">Bold Fontp>
7

vii) Tổng hợp anh chị em chung: Một bộ chọn sử dụng một tổ hợp anh chị em chung phù hợp với các yếu tố dựa trên các mối quan hệ anh chị em. Các phần tử được chọn nằm bên nhau trong HTML.: A selector that uses a general sibling combinator matches elements based on sibling relationships. The selected elements are beside each other in the HTML.

<p style="font-weight:bold;">Bold Fontp>
8

Trong ví dụ này, tất cả các yếu tố đoạn (

div {
  color: blue;
  text-align: justify;
}
88) sẽ được tạo kiểu với các quy tắc được chỉ định, nhưng chỉ khi chúng là anh chị em của các yếu tố 
div {
  color: blue;
  text-align: justify;
}
89. Có thể có các yếu tố khác ở giữa 
div {
  color: blue;
  text-align: justify;
}
89 và 
div {
  color: blue;
  text-align: justify;
}
88, và các phong cách vẫn sẽ được áp dụng.

<p style="font-weight:bold;">Bold Fontp>
9

viii) Combinator anh chị em liền kề: một bộ chọn sử dụng bộ kết hợp anh chị em liền kề sử dụng ký hiệu cộng (+) và gần giống như bộ chọn anh chị em chung. Sự khác biệt là yếu tố được nhắm mục tiêu phải là anh chị em ngay lập tức, không chỉ là anh chị em nói chung.: A selector that uses the adjacent sibling combinator uses the plus symbol (+), and is almost the same as the general sibling selector. The difference is that the targeted element must be an immediate sibling, not just a general sibling.

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
0

Trong ví dụ này sẽ chỉ áp dụng các kiểu được chỉ định cho các phần tử đoạn ngay theo các yếu tố đoạn khác. Điều này có nghĩa là phần tử đoạn đầu tiên trên một trang sẽ không nhận được các kiểu này. Ngoài ra, nếu một yếu tố khác xuất hiện giữa hai đoạn văn, đoạn thứ hai của cả hai sẽ có các kiểu được áp dụng.

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
1

ix) Bộ chọn thuộc tính: Bộ chọn thuộc tính nhắm mục tiêu các thành phần dựa trên sự hiện diện và/hoặc giá trị của các thuộc tính HTML và được khai báo bằng cách sử dụng dấu ngoặc vuông: The attribute selector targets elements based on the presence and/or value of HTML attributes, and is declared using square brackets

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
2

Bộ chọn thuộc tính cũng có thể được khai báo chỉ bằng cách sử dụng chính thuộc tính, không có giá trị, như thế này:

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
3

x) Pseudo-Class: Một lớp giả sử dụng ký tự đại tràng để xác định trạng thái giả rằng một phần tử có thể nằm trong tình trạng, trạng thái bị bay lơ lửng hoặc trạng thái được kích hoạt.: A pseudo-class uses a colon character to identify a pseudo-state that an element might be in—for example, the state of being hovered, or the state of being activated.

XI) Phần tử giả: Một phần tử giả CSS được sử dụng để tạo kiểu các phần được chỉ định của một phần tử. Ví dụ, nó có thể được sử dụng để:: A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to:

  • Kiểu chữ cái đầu tiên, hoặc dòng của một yếu tố
  • Chèn nội dung trước hoặc sau, nội dung của một phần tử

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
4

Trực tiếp Demo: Bộ chọn CSS: CSS Selectors

Q. Bộ chọn theo ngữ cảnh là gì?

Bộ chọn theo ngữ cảnh giải quyết sự xuất hiện cụ thể của một yếu tố. Đây là một chuỗi các bộ chọn riêng lẻ được phân tách bằng không gian trắng (mẫu tìm kiếm), trong đó chỉ phần tử cuối cùng trong mẫu được giải quyết, cung cấp nó phù hợp với contex được chỉ định.

Nó cũng kiểm tra bối cảnh của lớp trong cây HTML, gán kiểu cho phần tử thông qua một tuyến đường cụ thể, có tính đến thứ tự độ sâu trong cây.

Example:

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
5

Q. Sự khác biệt giữa các lớp giả và yếu tố giả là gì?

Một lớp giả là một bộ chọn hỗ trợ lựa chọn một cái gì đó không thể được thể hiện bằng một bộ chọn đơn giản, ví dụ 

div {
  color: blue;
  text-align: justify;
}
74. Tuy nhiên, một phần tử giả cho phép chúng tôi tạo các mục thường không tồn tại trong cây tài liệu, ví dụ 
div {
  color: blue;
  text-align: justify;
}
93.

Pseudo-classes:

Các lớp giả chọn các yếu tố thông thường nhưng trong một số điều kiện nhất định, như khi vị trí của chúng so với anh chị em hoặc khi họ thuộc một trạng thái cụ thể. Dưới đây là danh sách các lớp giả trong CSS3:

a) Lớp giả động:

  • :link
  • :visited
  • :hover
  • :active
  • :focus

b) Phần tử UI trạng thái các lớp giả:

  • :enabled
  • :disabled
  • :checked

c) Lớp giả cấu trúc:

  • :first-child
  • :nth-child(n)
  • :nth-last-child(n)
  • :nth-of-type(n)
  • :nth-last-of-type(n)
  • :last-child
  • :first-of-type
  • :last-of-type
  • :only-child
  • :only-of-type
  • :root
  • :empty

D) Các lớp giả khác:

: Không (x): Target: Lang (Ngôn ngữ)

Pseudo-elements:

Các yếu tố giả tạo hiệu quả các yếu tố mới không được chỉ định trong đánh dấu của tài liệu và có thể được thao tác giống như một yếu tố thông thường.

  • ::before
  • ::after
  • ::first-letter
  • ::first-line
  • ::selection

Q. Bộ chọn tổ hợp là gì?

Một bộ kết hợp là ký tự trong một bộ chọn kết nối hai bộ chọn với nhau. Có bốn loại kết hợp.

A) Bộ kết hợp hậu duệ (không gian): Bộ chọn hậu duệ phù hợp với tất cả các yếu tố là hậu duệ của một phần tử được chỉ định.: The descendant selector matches all elements that are descendants of a specified element.

Ví dụ sau đây chọn tất cả các yếu tố 

div {
  color: blue;
  text-align: justify;
}
88 bên trong 
div {
  color: blue;
  text-align: justify;
}
95 Các yếu tố:

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
6

b) Trình kết hợp trẻ em (>): Bộ chọn con chọn tất cả các yếu tố là con của một yếu tố được chỉ định.: The child selector selects all elements that are the children of a specified element.

Ví dụ sau đây chọn tất cả các yếu tố 

div {
  color: blue;
  text-align: justify;
}
88 là trẻ em thuộc yếu tố 
div {
  color: blue;
  text-align: justify;
}
95:

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
7

c) Bộ kết hợp anh chị em liền kề (+): Bộ chọn anh chị em liền kề chọn tất cả các yếu tố là anh chị em liền kề của một phần tử được chỉ định.: The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.

Ví dụ sau đây chọn tất cả các yếu tố 

div {
  color: blue;
  text-align: justify;
}
88 được đặt ngay sau các phần tử 
div {
  color: blue;
  text-align: justify;
}
95:

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
8

d) Bộ kết hợp anh chị em chung (~): Bộ chọn anh chị em chung chọn tất cả các yếu tố là anh chị em của một yếu tố được chỉ định.: The general sibling selector selects all elements that are siblings of a specified element.

Ví dụ sau đây chọn tất cả các yếu tố 

div {
  color: blue;
  text-align: justify;
}
88 là anh chị em của các yếu tố 
div {
  color: blue;
  text-align: justify;
}
95:

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
9

Q. Sự khác biệt giữa bộ chọn lớp và bộ chọn ID là gì?

Trong CSS, một bộ chọn lớp là một tên có trước một điểm dừng hoàn toàn (".") Và bộ chọn ID là một tên trước ký tự băm ("#"). Sự khác biệt giữa ID và lớp là ID có thể được sử dụng để xác định một yếu tố, trong khi một lớp có thể được sử dụng để xác định nhiều hơn một.

  p {
      color: red;
  }
  
  a {
      color: blue;
  }
0

  p {
      color: red;
  }
  
  a {
      color: blue;
  }
1

H: Sự khác biệt giữa các bộ chọn của Nth Nth-child () và và các bộ chọn của nth-of-type () là gì?

Lớp giả 

<p style="font-weight:bold;">Bold Fontp>
02 được sử dụng để phù hợp với một phần tử dựa trên một số, đại diện cho vị trí của phần tử trong số các anh chị em của nó. Cụ thể hơn, số đại diện cho số lượng anh chị em tồn tại trước phần tử trong cây tài liệu (trừ 1).

Example: 

  p {
      color: red;
  }
  
  a {
      color: blue;
  }
2

  p {
      color: red;
  }
  
  a {
      color: blue;
  }
3

Các pseudo-class 

<p style="font-weight:bold;">Bold Fontp>
03, như nth-child (), được sử dụng để phù hợp với một phần tử dựa trên một số. Tuy nhiên, số này đại diện cho vị trí của phần tử chỉ trong các anh chị em của nó có cùng loại phần tử.

Số này cũng có thể được biểu thị dưới dạng hàm hoặc sử dụng từ khóa chẵn hoặc lẻ.

  p {
      color: red;
  }
  
  a {
      color: blue;
  }
4

  p {
      color: red;
  }
  
  a {
      color: blue;
  }
5

Q. Giải thích bố cục lưới CSS với ví dụ?

Bố cục lưới CSS vượt trội khi chia một trang thành các vùng chính hoặc xác định mối quan hệ về kích thước, vị trí và lớp, giữa các phần của một điều khiển được xây dựng từ các nguyên thủy HTML. Giống như các bảng, bố cục lưới cho phép chúng tôi sắp xếp các phần tử thành các cột và hàng.

Thuật ngữ cơ bản:

Hướng dẫn css-interview-questions github - css-phỏng vấn-câu hỏi github

  • Mục lưới: Container lưới chứa các mục lưới.: The grid container contains the grid items.
  • Đường lưới: Đường lưới là một đường thẳng đứng hoặc đường ngang tạo thành cấu trúc của lưới.: The grid line is either a vertical or horizontal grid line that makes up the structure of the grid.
  • Tế bào lưới: Đơn vị nhỏ nhất trên lưới được gọi là ô lưới. Đó là khoảng trống giữa hai hàng và cột liền kề.: The smallest unit on a grid is referred to as a Grid cell. It is the space between the two adjacent rows and columns.
  • Hàng: Hàng lưới là đường đua ngang của lưới.: The grid row is the horizontal track of the grid.
  • Các cột: Cột lưới là bản nhạc dọc của lưới.: The grid column is the vertical track of the grid.
  • Gutter: Máng xối là khoảng trống giữa các hàng và cột trong lưới.: A gutter is a space between the rows and columns in the grid.

Thuộc tính lưới CSS:

Tài sảnSự mô tả
khoảng cách cộtChỉ định khoảng cách giữa các cột
khoảng cáchMột thuộc tính tốc ký cho khoảng cách hàng và các thuộc tính khoảng cách cột
LướiMột thuộc tính tốc ký cho các hàng bản địa, các cột lưới, cột lưới, các tầng tự động, các tầng tự động lưới, các cột tự động lưới, và các thuộc tính lưu-flow lưới điện lưới, và các thuộc tính
khu vực lướiChỉ định tên cho mục lưới hoặc thuộc tính này là thuộc tính tốc ký cho các thuộc tính của hàng lưới, gall-m-m-me
lưới-tự độngChỉ định kích thước cột mặc định
Lưới-Auto-FlowChỉ định cách chèn các mục tự động được đặt trong lưới
Lưới-tự động-hàngChỉ định kích thước hàng mặc định
cột lướiMột thuộc tính tốc ký cho các thuộc tính của cột lưới và các thuộc tính kết thúc cột
kết thúc cột lướiChỉ định nơi kết thúc mục lưới
khoảng cách cột điệnChỉ định kích thước của khoảng cách giữa các cột
COLUMN-COLUMN-STARTChỉ định nơi bắt đầu mục lưới
khoảng cách lướiMột thuộc tính tốc ký cho các thuộc tính của Get-Row-Row và Grid-Column-Gap
hàng lướiMột thuộc tính tốc ký cho các thuộc tính của hàng lưới và các thuộc tính kết thúc lưới
RET-ROW-endChỉ định nơi kết thúc mục lưới
khoảng cách cột điệnChỉ định kích thước của khoảng cách giữa các cột
COLUMN-COLUMN-STARTChỉ định nơi bắt đầu mục lưới
khoảng cách lướiMột thuộc tính tốc ký cho các thuộc tính của Get-Row-Row và Grid-Column-Gap
hàng lướiMột thuộc tính tốc ký cho các thuộc tính của hàng lưới và các thuộc tính kết thúc lưới
RET-ROW-endGet-Row-Gap
Chỉ định kích thước của khoảng cách giữa các hàngKhởi động hàng lưới
TẢI XUỐNG GRIDMột thuộc tính tốc ký cho các hàng hóa bản lưới, cột lưới và các thuộc tính của các địa điểm lưới

Example:

  p {
      color: red;
  }
  
  a {
      color: blue;
  }
6

Grid-Template-Areas: Grid Layout

Chỉ định cách hiển thị các cột và hàng, bằng cách sử dụng các mục lưới được đặt tên

cột lưới-m-mốc

Chỉ định kích thước của các cột và có bao nhiêu cột trong bố cục lưới

  • Lưới-mẫu-ROWS, for sections in a webpage
  • Chỉ định kích thước của các hàng trong bố cục lưới, for text
  • Khoảng cách hàng, for two-dimensional table data
  • Chỉ định khoảng cách giữa các hàng lưới, for explicit position of an element

Bản demo trực tiếp: Bố cục lưới

Q. CSS Flexbox là gì?flex container. To create a flex container, we set the value of the area's container's 

<p style="font-weight:bold;">Bold Fontp>
04 property to 
<p style="font-weight:bold;">Bold Fontp>
05 or 
<p style="font-weight:bold;">Bold Fontp>
06. As soon as we do this the direct children of that container become flex items.

Mô -đun bố cục hộp linh hoạt, giúp thiết kế cấu trúc bố cục phản hồi linh hoạt dễ dàng hơn mà không cần sử dụng phao hoặc định vị. Flexbox làm cho nó đơn giản để căn chỉnh các mục theo chiều dọc và chiều ngang bằng cách sử dụng các hàng và cột. Các mục sẽ "uốn" đến các kích cỡ khác nhau để lấp đầy không gian.

Hướng dẫn css-interview-questions github - css-phỏng vấn-câu hỏi github

Trước mô -đun bố cục FlexBox, có bốn chế độ bố cục:

Chặn, cho các phần trong một trang web

Tài sảnSự mô tả
khoảng cách cộtChỉ định khoảng cách giữa các cột
khoảng cáchMột thuộc tính tốc ký cho khoảng cách hàng và các thuộc tính khoảng cách cột
LướiMột thuộc tính tốc ký cho các hàng bản địa, các cột lưới, cột lưới, các tầng tự động, các tầng tự động lưới, các cột tự động lưới, và các thuộc tính lưu-flow lưới điện lưới, và các thuộc tính
khu vực lướiChỉ định tên cho mục lưới hoặc thuộc tính này là thuộc tính tốc ký cho các thuộc tính của hàng lưới, gall-m-m-me
lưới-tự độngChỉ định kích thước cột mặc định
Lưới-Auto-FlowChỉ định cách chèn các mục tự động được đặt trong lưới
Lưới-tự động-hàngChỉ định kích thước hàng mặc định

cột lưới

Tài sảnSự mô tả
khoảng cách cộtChỉ định khoảng cách giữa các cột
khoảng cáchMột thuộc tính tốc ký cho khoảng cách hàng và các thuộc tính khoảng cách cột
LướiMột thuộc tính tốc ký cho các hàng bản địa, các cột lưới, cột lưới, các tầng tự động, các tầng tự động lưới, các cột tự động lưới, và các thuộc tính lưu-flow lưới điện lưới, và các thuộc tính
khu vực lướiChỉ định tên cho mục lưới hoặc thuộc tính này là thuộc tính tốc ký cho các thuộc tính của hàng lưới, gall-m-m-me
lưới-tự độngChỉ định kích thước cột mặc định
Lưới-Auto-FlowChỉ định cách chèn các mục tự động được đặt trong lưới

Example:

  p {
      color: red;
  }
  
  a {
      color: blue;
  }
7

Lưới-tự động-hàng: flex-direction Property

Chỉ định kích thước hàng mặc định

  • cột lướitwo-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a one-dimensional system (either in a column or a row).
  • Một thuộc tính tốc ký cho các thuộc tính của cột lưới và các thuộc tính kết thúc cộtlayout-first while Flexbox’ approach is content-first. If you are well aware of your content before making layout, then blindly opt for Flexbox and if not, opt for CSS Grid.
  • Bố cục Flexbox phù hợp nhất với các thành phần của một ứng dụng (vì hầu hết chúng về cơ bản là tuyến tính) và bố cục quy mô nhỏ, trong khi bố cục lưới được dành cho bố cục quy mô lớn hơn mà không phải là tuyến tính trong thiết kế của chúng.small-scale layouts, while the Grid layout is intended for larger-scale layouts which aren’t linear in their design.
  • Nếu bạn chỉ cần xác định bố cục là một hàng hoặc một cột, thì có lẽ bạn cần Flexbox. Nếu bạn muốn xác định một lưới và phù hợp với nội dung vào nó theo hai chiều - bạn cần lưới.

Hướng dẫn css-interview-questions github - css-phỏng vấn-câu hỏi github
Hướng dẫn css-interview-questions github - css-phỏng vấn-câu hỏi github

Example:

  p {
      color: red;
  }
  
  a {
      color: blue;
  }
8

Bản demo trực tiếp: CSS Grid và Flexbox: CSS Grid and flexbox

Q. CSS BEM là gì?

Phương pháp BEM (Công cụ sửa đổi phần tử khối) là một quy ước đặt tên cho các lớp CSS để giữ CSS có thể duy trì hơn bằng cách xác định các không gian tên để giải quyết các vấn đề phạm vi. Một khối là một thành phần độc lập có thể tái sử dụng giữa các dự án và hoạt động như một "không gian tên" cho các thành phần phụ (phần tử). Bộ điều chỉnh được sử dụng làm cờ khi một khối hoặc phần tử ở một trạng thái nhất định hoặc khác nhau về cấu trúc hoặc kiểu dáng.Block Element Modifier) methodology is a naming convention for CSS classes in order to keep CSS more maintainable by defining namespaces to solve scoping issues. A Block is a standalone component that is reusable across projects and acts as a "namespace" for sub components (Elements). Modifiers are used as flags when a Block or Element is in a certain state or is different in structure or style.

  p {
      color: red;
  }
  
  a {
      color: blue;
  }
9

Example:

>
<html>
<head>
    <title>External CSS Exampletitle>
    <link rel="stylesheet" type="text/css" href="style.css">
...
0

>
<html>
<head>
    <title>External CSS Exampletitle>
    <link rel="stylesheet" type="text/css" href="style.css">
...
1

Benefits:

  • Mô -đun: Kiểu khối không bao giờ phụ thuộc vào các yếu tố khác trên một trang, vì vậy bạn sẽ không bao giờ gặp vấn đề từ xếp tầng.: Block styles are never dependent on other elements on a page, so you will never experience problems from cascading.
  • Khả năng tái sử dụng: Việc soạn thảo các khối độc lập theo những cách khác nhau và tái sử dụng chúng một cách thông minh, giảm lượng mã CSS mà bạn sẽ phải duy trì.: Composing independent blocks in different ways, and reusing them intelligently, reduces the amount of CSS code that you will have to maintain.
  • Cấu trúc: Phương pháp BEM cung cấp cho mã CSS của bạn một cấu trúc vững chắc vẫn đơn giản và dễ hiểu.: BEM methodology gives your CSS code a solid structure that remains simple and easy to understand.

Q. Lợi ích của việc sử dụng Sprites CSS là gì?

CSS Sprites kết hợp nhiều hình ảnh thành một hình ảnh lớn hơn. Nó là một kỹ thuật thường được sử dụng cho các biểu tượng.

Advantages:

  • Giảm số lượng yêu cầu 

    <p style="font-weight:bold;">Bold Fontp>
    11 cho nhiều hình ảnh (chỉ cần một yêu cầu duy nhất cho mỗi spritesheet). Nhưng với 
    <p style="font-weight:bold;">Bold Fontp>
    12, tải nhiều hình ảnh không còn là vấn đề.

  • Tải xuống trước các tài sản sẽ không được tải xuống cho đến khi cần thiết, chẳng hạn như hình ảnh chỉ xuất hiện trên các trạng thái giả 

    div {
  color: blue;
  text-align: justify;
}
    74. Nháy mắt sẽ không được nhìn thấy.

  • Khi bạn có nhiều hình ảnh/ biểu tượng, trình duyệt sẽ gọi riêng đến máy chủ cho mỗi người trong số chúng. Sprite là một kỹ thuật để kết hợp tất cả/ một số trong số chúng (thường là một loại tương tự về loại hình ảnh. Ví dụ, bạn sẽ đặt JPG vào một sprite) trong một hình ảnh. Để hiển thị biểu tượng bạn đặt chiều cao, chiều rộng và vị trí nền.

Alternatives:

  • Dữ liệu URI - Cho phép bạn nhúng dữ liệu hình ảnh trực tiếp vào bảng kiểu. Điều này tránh các yêu cầu HTTP bổ sung cho hình ảnh, làm cho nó về cơ bản giống như một sprite, mà không cần định vị ưa thích.
  • Phông chữ biểu tượng
  • SVG

Q. Điều gì là Tweening trong CSS?

Tùy chọn tư thế là tạo ra một vài khung chính trong suốt chuỗi, và sau đó điền vào các khoảng trống sau đó. Điền vào những khoảng trống này được gọi là Tweening. Đó là quá trình tạo khung trung gian giữa hai hình ảnh. Nó cho ấn tượng rằng hình ảnh đầu tiên đã phát triển trơn tru thành hình thứ hai. Trong CSS3, các biến đổi (ma trận, dịch, xoay, tỷ lệ, v.v.) có thể được sử dụng để đạt được tweening.tweening. It is the process of generating intermediate frames between two images. It gives the impression that the first image has smoothly evolved into the second one. In CSS3, Transforms (matrix, translate, rotate, scale etc.) module can be used to achieve tweening.

Example:

>
<html>
<head>
    <title>External CSS Exampletitle>
    <link rel="stylesheet" type="text/css" href="style.css">
...
2

Q. Giải thích sự khác biệt giữa

Bold Font

14 và

Bold Font

15? Những ưu và nhược điểm của việc sử dụng

Bold Font

16 là gì?

  • Tầm nhìn: Hidden chỉ đơn giản che giấu phần tử nhưng nó sẽ chiếm không gian và ảnh hưởng đến bố cục của tài liệu. simply hides the element but it will occupy space and affect the layout of the document.
  • Hiển thị: Không loại bỏ phần tử khỏi luồng bố cục bình thường (gây ra DOM Reflow). Nó sẽ không ảnh hưởng đến bố cục của tài liệu cũng như chiếm không gian. removes the element from the normal layout flow (causes DOM reflow). It will not affect the layout of the document nor occupy space.

Q. Mục đích của

Bold Font

17 là gì và bối cảnh xếp chồng được hình thành như thế nào?

<p style="font-weight:bold;">Bold Fontp>
17 giúp chỉ định thứ tự ngăn xếp của các phần tử được định vị có thể chồng chéo lẫn nhau. Giá trị mặc định 
<p style="font-weight:bold;">Bold Fontp>
17 bằng không và có thể nhận được một số dương hoặc số âm. Một phần tử có 
<p style="font-weight:bold;">Bold Fontp>
17 cao hơn luôn được xếp chồng lên nhau so với chỉ số thấp hơn.

<p style="font-weight:bold;">Bold Fontp>
17 có thể lấy các giá trị sau:

  • Tự động: Đặt thứ tự ngăn xếp bằng cha mẹ của nó.: Sets the stack order equal to its parents.
  • Số: đặt hàng thứ tự ngăn xếp.: Orders the stack order.
  • Ban đầu: Đặt thuộc tính này thành giá trị mặc định của nó (0).: Sets this property to its default value (0).
  • Kế thừa: kế thừa thuộc tính này từ phần tử cha của nó.: Inherits this property from its parent element.

Example:

>
<html>
<head>
    <title>External CSS Exampletitle>
    <link rel="stylesheet" type="text/css" href="style.css">
...
3

Bản demo trực tiếp: Z-index: Z-Index

Q. Thuộc tính vị trí của Exaplain CSS?

Hướng dẫn css-interview-questions github - css-phỏng vấn-câu hỏi github

  • Tuyệt đối, đặt một yếu tố chính xác nơi bạn muốn đặt nó. Vị trí tuyệt đối thực sự được đặt so với cha mẹ của phần tử. Nếu không có cha mẹ có sẵn thì tương đối với chính trang (nó sẽ mặc định tất cả các cách trở lại thành phần)., place an element exactly where you want to place it. absolute position is actually set relative to the element's parent. if no parent available then relatively place to the page itself (it will default all the way back up to the element).

  • tương đối, có nghĩa là "liên quan đến chính nó". Vị trí cài đặt: tương đối; Trên một yếu tố và không có thuộc tính định vị nào khác, nó sẽ không ảnh hưởng đến định vị của nó. Nó cho phép sử dụng 

    <p style="font-weight:bold;">Bold Fontp>
    17 trên phần tử và nó giới hạn phạm vi của các yếu tố con hoàn toàn có vị trí. Bất kỳ yếu tố con nào sẽ được định vị hoàn toàn trong khối đó., means "relative to itself". Setting position: relative; on an element and no other positioning attributes, it will no effect on it's positioning. It allows the use of 
    <p style="font-weight:bold;">Bold Fontp>
    17 on the element and it limits the scope of absolutely positioned child elements. Any child element will be absolutely positioned within that block.

  • Đã sửa lỗi, phần tử được định vị so với chế độ xem hoặc cửa sổ trình duyệt. Viewport không thay đổi nếu bạn cuộn và do đó phần tử cố định sẽ ở ngay trong cùng một vị trí., element is positioned relative to viewport or the browser window itself. viewport doesn't changed if you scroll and hence fixed element will stay right in the same position.

  • Mặc định tĩnh cho mỗi phần tử trang. Lý do duy nhất bạn từng đặt một yếu tố thành vị trí: tĩnh là để buộc mạnh một số định vị được áp dụng cho một yếu tố bên ngoài sự kiểm soát của bạn. default for every single page element. The only reason you would ever set an element to position: static is to forcefully-remove some positioning that got applied to an element outside of your control.

  • Sticky - Định vị dính là một sự kết hợp của định vị tương đối và cố định. Phần tử được coi là 

    <p style="font-weight:bold;">Bold Fontp>
    23 được định vị cho đến khi nó vượt qua một ngưỡng được chỉ định, tại thời điểm đó nó được coi là 
    <p style="font-weight:bold;">Bold Fontp>
    24 được định vị.     - Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as 
    <p style="font-weight:bold;">Bold Fontp>
    23 positioned until it crosses a specified threshold, at which point it is treated as 
    <p style="font-weight:bold;">Bold Fontp>
    24 positioned.

Bản demo trực tiếp: Thuộc tính vị trí CSS: CSS Position Property

Q. Sự khác biệt giữa tương đối và tuyệt đối trong CSS là gì?

Vị trí tương đối

Một phần tử với 

<p style="font-weight:bold;">Bold Fontp>
25 được định vị so với vị trí bình thường của nó.

Đặt các thuộc tính trên, phải, dưới và bên trái của một phần tử tương đối có vị trí sẽ khiến nó được điều chỉnh khỏi vị trí bình thường của nó. Nội dung khác sẽ không được điều chỉnh để phù hợp với bất kỳ khoảng cách nào do phần tử để lại.

Hướng dẫn css-interview-questions github - css-phỏng vấn-câu hỏi github

Example:

>
<html>
<head>
    <title>External CSS Exampletitle>
    <link rel="stylesheet" type="text/css" href="style.css">
...
4

Bản demo trực tiếp: Thuộc tính vị trí tương đối: Relative Position Property

Vị trí tuyệt đối:

Một phần tử có 

<p style="font-weight:bold;">Bold Fontp>
26 sẽ khiến nó điều chỉnh vị trí của nó đối với cha mẹ của nó. Nếu không có cha mẹ có mặt, thì nó sử dụng cơ thể tài liệu làm cha mẹ.

Hướng dẫn css-interview-questions github - css-phỏng vấn-câu hỏi github

Example:

>
<html>
<head>
    <title>External CSS Exampletitle>
    <link rel="stylesheet" type="text/css" href="style.css">
...
5

Bản demo trực tiếp: Thuộc tính vị trí tuyệt đối: Absolute Position Property

Q. Sự khác biệt giữa phần tử khối, nội tuyến và nội tuyến?

a) Các phần tử khối Các phần tử khối luôn bắt đầu trên một dòng mới. Họ cũng sẽ chiếm không gian của toàn bộ hàng hoặc chiều rộng. Danh sách các phần tử khối là 

div {
  color: blue;
  text-align: justify;
}
88, 
div {
  color: blue;
  text-align: justify;
}
89, 
div {
  color: blue;
  text-align: justify;
}
95, 
<p style="font-weight:bold;">Bold Fontp>
30.
The block elements always start on a new line. They will also take space of an entire row or width. List of block elements are 
div {
  color: blue;
  text-align: justify;
}
88, 
div {
  color: blue;
  text-align: justify;
}
89, 
div {
  color: blue;
  text-align: justify;
}
95, 
<p style="font-weight:bold;">Bold Fontp>
30.

Example:

>
<html>
<head>
    <title>External CSS Exampletitle>
    <link rel="stylesheet" type="text/css" href="style.css">
...
6

b) Các phần tử nội tuyến không bắt đầu trên một dòng mới, chúng xuất hiện trên cùng một dòng với nội dung và thẻ bên cạnh chúng. Một số ví dụ về các yếu tố nội tuyến là 

<p style="font-weight:bold;">Bold Fontp>
31, 
<p style="font-weight:bold;">Bold Fontp>
32, 
<p style="font-weight:bold;">Bold Fontp>
33 và 
<p style="font-weight:bold;">Bold Fontp>
34.
Inline elements don't start on a new line, they appear on the same line as the content and tags beside them. Some examples of inline elements are 
<p style="font-weight:bold;">Bold Fontp>
31, 
<p style="font-weight:bold;">Bold Fontp>
32 , 
<p style="font-weight:bold;">Bold Fontp>
33, and 
<p style="font-weight:bold;">Bold Fontp>
34 tags.

Khi nói đến lợi nhuận và đệm, trình duyệt xử lý các yếu tố nội tuyến khác nhau. Bạn có thể thêm không gian vào bên trái và bên phải trên một phần tử nội tuyến, nhưng bạn không thể thêm chiều cao vào phần đệm trên cùng hoặc dưới cùng hoặc lề của một phần tử nội tuyến.

Example:

>
<html>
<head>
    <title>External CSS Exampletitle>
    <link rel="stylesheet" type="text/css" href="style.css">
...
7

C) Các phần tử khối nội tuyến là các yếu tố khối nội tuyến tương tự như các phần tử nội tuyến, ngoại trừ chúng có thể có đệm và lề được thêm vào ở cả bốn phía. Một cách sử dụng phổ biến để sử dụng khối nội tuyến là để tạo các liên kết điều hướng theo chiều ngang. Một số ví dụ về các yếu tố khối nội tuyến là 

<p style="font-weight:bold;">Bold Fontp>
35, 
<p style="font-weight:bold;">Bold Fontp>
36, 
<p style="font-weight:bold;">Bold Fontp>
37, 
<p style="font-weight:bold;">Bold Fontp>
38, v.v.
Inline-block elements are similar to inline elements, except they can have padding and margins added on all four sides. One common use for using inline-block is for creating navigation links horizontally. Some examples of inline-block elements are 
<p style="font-weight:bold;">Bold Fontp>
35, 
<p style="font-weight:bold;">Bold Fontp>
36, 
<p style="font-weight:bold;">Bold Fontp>
37, 
<p style="font-weight:bold;">Bold Fontp>
38 etc.

>
<html>
<head>
    <title>External CSS Exampletitle>
    <link rel="stylesheet" type="text/css" href="style.css">
...
8

>
<html>
<head>
    <title>External CSS Exampletitle>
    <link rel="stylesheet" type="text/css" href="style.css">
...
9

Bản demo trực tiếp: Hiển thị thuộc tính: Display Property

Q. Bộ đếm trong CSS3 là gì?

Bộ đếm CSS cho phép bạn điều chỉnh sự xuất hiện của nội dung dựa trên vị trí của nó trong một tài liệu. Để sử dụng bộ đếm CSS, trước tiên nó phải được khởi tạo thành một giá trị với thuộc tính 

<p style="font-weight:bold;">Bold Fontp>
39 (0 theo mặc định). Cùng một thuộc tính cũng có thể được sử dụng để thay đổi giá trị của nó thành bất kỳ số cụ thể nào. Sau khi khởi tạo, giá trị của một bộ đếm có thể được tăng hoặc giảm khi phản ứng. Tên của bộ đếm không phải là "Không", "kế thừa" hoặc "ban đầu"; nếu không thì tuyên bố bị bỏ qua.

E[attr^=val]
/* Example */
a[href^='http://sales.']{color: teal;}
0

E[attr^=val]
/* Example */
a[href^='http://sales.']{color: teal;}
1

Thuộc tính bộ đếm CSS:

Tài sảnSự mô tả
Nội dungĐược sử dụng với :: Trước và :: sau các yếu tố giả, để chèn nội dung được tạo
phản đốiTăng một hoặc nhiều giá trị bộ đếm
Thiết lập lại bộ đếmTạo hoặc đặt lại một hoặc nhiều quầy

Example:

E[attr^=val]
/* Example */
a[href^='http://sales.']{color: teal;}
2

Bản demo trực tiếp: Bộ đếm CSS: CSS Counters

Q. Làm thế nào để bạn chỉ định các đơn vị trong CSS? Những cách khác nhau để làm điều đó là gì?

Có nhiều đơn vị khác nhau trong CSS để thể hiện phép đo và chiều dài. Một đơn vị CSS được sử dụng để xác định kích thước thuộc tính mà chúng tôi đặt cho một phần tử hoặc nội dung của nó. Các đơn vị trong CSS được yêu cầu để xác định phép đo như lề: 20px; trong đó PX (hoặc pixel) là đơn vị CSS. Chúng được sử dụng để đặt lề, đệm, chiều dài, v.v.

Đơn vị chiều dài trong CSS có hai loại:

  • Đơn vị chiều dài tuyệt đối.
  • Đơn vị chiều dài tương đối.

Đơn vị chiều dài tuyệt đối:

Sau đây là tất cả các đơn vị chiều dài tuyệt đối - chúng không liên quan đến bất cứ thứ gì khác và thường được coi là luôn luôn có cùng kích thước.

Đơn vịTênTương đương với
cmCentimet1cm = 38px = 25/64in
mmMilimet1mm = 1/10 của 1cm
Q.Quarnimeter1Q = 1/40 của 1cm
TrongInch1in = 2,54cm = 96px
máy tínhPicas1pc = 1/6 của 1in
ptĐiểm1pt = 1/72 của 1in
PXĐiểm ảnh1px = 1/96 của 1in

Đơn vị chiều dài tương đối:

Các đơn vị chiều dài tương đối chỉ định một chiều dài so với thuộc tính chiều dài khác. Đơn vị chiều dài tương đối tỷ lệ tốt hơn giữa các phương tiện kết xuất khác nhau.

Đơn vịTên
Tương đương vớicm
Centimet1cm = 38px = 25/64in
mmMilimet
1mm = 1/10 của 1cmQ.
Quarnimeter1Q = 1/40 của 1cm
TrongInch
VH1% chiều cao của chế độ xem.
vmin1% kích thước nhỏ hơn của chế độ xem.
vmax1% kích thước lớn hơn của chế độ xem.

Example:

E[attr^=val]
/* Example */
a[href^='http://sales.']{color: teal;}
3

Bản demo trực tiếp: Đơn vị CSS: CSS Units

Q. Bạn thích cái nào trong số PX, EM % hoặc PT và tại sao?

  • <p style="font-weight:bold;">Bold Fontp>
    40 cung cấp kiểm soát hạt mịn và duy trì sự liên kết vì 1 px hoặc bội số của 1 px được đảm bảo trông sắc nét. PX không phải là tầng, điều này có nghĩa là nếu kích thước phông chữ cha mẹ là 20px và con 16px. Trẻ sẽ là 16px.

  • <p style="font-weight:bold;">Bold Fontp>
    41 duy trì kích thước tương đối. Bạn có thể có phông chữ đáp ứng. EM là chiều rộng của chữ cái 'M' trong kiểu chữ đã chọn. Tuy nhiên, khái niệm này là khó khăn. 1em bằng với kích thước phông chữ hiện tại của phần tử hoặc mặc định trình duyệt. Nếu bạn gửi kích thước phông chữ đến 16px thì 1em = 16px. Thực tiễn phổ biến là đặt kích thước phông chữ thân mặc định thành 62,5% (bằng 10px). Em là Cascade

  • <p style="font-weight:bold;">Bold Fontp>
    42 Đặt kích thước phông chữ so với kích thước phông chữ của cơ thể. Do đó, bạn phải đặt kích thước phông chữ của cơ thể thành một kích thước hợp lý. Điều này rất dễ sử dụng và không xếp tầng. Ví dụ: nếu kích thước phông chữ cha mẹ là 20px và kích thước phông chữ con là 50%. Trẻ sẽ là 10px.

  • ________ 243 (điểm) theo truyền thống được sử dụng trong bản in. 1pt = 1/72 inch và nó là đơn vị kích thước cố định.

Q. Phần tử giả là gì? Lớp giả là gì?

1. Phần tử giả: Một phần tử giả CSS được sử dụng để tạo kiểu các phần được chỉ định của một phần tử.: A CSS pseudo-element is used to style specified parts of an element.

Ví dụ, nó có thể được sử dụng để:

  • Kiểu chữ cái đầu tiên, hoặc dòng của một yếu tố
  • Chèn nội dung trước hoặc sau, nội dung của một phần tử

Các yếu tố giả CSS:

Sl.NoBộ chọnThí dụsự mô tả
01. ::sauP :: SauChèn một cái gì đó sau nội dung của mỗi

yếu tố

02. ::trướcP :: TrướcChèn một cái gì đó trước nội dung của mỗi

yếu tố

03. ::trướcP :: TrướcChèn một cái gì đó trước nội dung của mỗi

yếu tố

04. ::trướcP :: TrướcChèn một cái gì đó trước nội dung của mỗi

yếu tố

05. ::trướcP :: TrướcChèn một cái gì đó trước nội dung của mỗi

:: Quỹ đầu tiên: A pseudo-class is used to define a special state of an element.

Ví dụ, nó có thể được sử dụng để:

  • Kiểu chữ cái đầu tiên, hoặc dòng của một yếu tố
  • Chèn nội dung trước hoặc sau, nội dung của một phần tử
  • Các yếu tố giả CSS:

Bộ chọn

Sl.NoBộ chọnThí dụsự mô tả
01. ::sauP :: SauChèn một cái gì đó sau nội dung của mỗi
02. yếu tố::trướcP :: Trước
03. Chèn một cái gì đó trước nội dung của mỗi:: Quỹ đầu tiênP :: Quỹ đầu tiên
04. Chọn chữ cái đầu tiên của mỗi::dòng đầu tiênP :: Dòng đầu tiên
05. Chọn dòng đầu tiên của mỗi:: Lựa chọnP :: Lựa chọn
06. Chọn phần của phần tử được chọn bởi người dùng2. Lớp giả: Một lớp giả được sử dụng để xác định trạng thái đặc biệt của một phần tử.Kiểu một phần tử khi người dùng thay đổi nó
07. Phong cách đã truy cập và không được liên kết khác nhauKiểu một yếu tố khi nó được lấy nétCác lớp giả CSS:
08. :tích cựcA: Hoạt độngChọn liên kết hoạt động
09. :đã kiểm traĐầu vào: Đã kiểm traChọn mọi phần tử 
<p style="font-weight:bold;">Bold Fontp>
35 đã kiểm tra
10. :Vô hiệu hóaĐầu vào: bị vô hiệu hóaChọn mọi phần tử 
<p style="font-weight:bold;">Bold Fontp>
35 bị vô hiệu hóa
11. :trống rỗngP: trống rỗngChọn mọi yếu tố 
div {
  color: blue;
  text-align: justify;
}
88 không có con
12. : Đã bậtĐầu vào: Đã bậtChọn mọi phần tử 
<p style="font-weight:bold;">Bold Fontp>
35 được bật
13. : con đầu tiênP: Đầu tiênChọn mọi yếu tố 
div {
  color: blue;
  text-align: justify;
}
88 là con đầu tiên của cha mẹ
14. : đầu tiênP: Loại đầu tiênChọn mọi yếu tố 
div {
  color: blue;
  text-align: justify;
}
88 là phần tử 
div {
  color: blue;
  text-align: justify;
}
88 đầu tiên của cha mẹ của nó
15. :tiêu điểmĐầu vào: Tập trungChọn phần tử 
<p style="font-weight:bold;">Bold Fontp>
35 có tiêu điểm
16. :bay lượnA: Di chuộtChọn các liên kết trên chuột qua
17. :trong phạm viĐầu vào: Trong phạm viChọn các phần tử 
<p style="font-weight:bold;">Bold Fontp>
35 có giá trị trong phạm vi được chỉ định
18. :không hợp lệĐầu vào: Không hợp lệChọn tất cả các phần tử 
<p style="font-weight:bold;">Bold Fontp>
35 với giá trị không hợp lệ
19. : Lang (Ngôn ngữ)P: Lang (nó)Chọn mọi phần tử 
div {
  color: blue;
  text-align: justify;
}
88 với giá trị thuộc tính Lang bắt đầu bằng "nó"
20. :con cuối cùngP: Last-ChictChọn mọi yếu tố 
div {
  color: blue;
  text-align: justify;
}
88 là con cuối cùng của cha mẹ
21. : Loại cuối cùngP: Loại cuối cùngChọn mọi yếu tố 
div {
  color: blue;
  text-align: justify;
}
88 là yếu tố 
div {
  color: blue;
  text-align: justify;
}
88 cuối cùng của cha mẹ của nó
22. : Liên kếtđường dẫnChọn tất cả các liên kết không được biết đến
23. : không (bộ chọn):Không p)Chọn mọi yếu tố không phải là phần tử 
div {
  color: blue;
  text-align: justify;
}
88
24. : nth-child (n)P: Nth-con (2)Chọn mọi yếu tố 
div {
  color: blue;
  text-align: justify;
}
88 là con thứ hai của cha mẹ của nó
25. : thứ n-last-child (n)P: Nth-Last-Child (2)Chọn mọi yếu tố 
div {
  color: blue;
  text-align: justify;
}
88 là con thứ hai của cha mẹ,
26. : thứ n-last-of-type (n)P: thứ n-last-of-type (2)Chọn các phần tử 
<p style="font-weight:bold;">Bold Fontp>
35 không có thuộc tính "đọc"
27. :yêu cầuĐầu vào: Yêu cầuChọn các phần tử 
<p style="font-weight:bold;">Bold Fontp>
35 với thuộc tính "bắt buộc" được chỉ định
28. : Root gốc Chọn phần tử gốc của tài liệu
29. :Mục tiêu#News: TargetChọn phần tử #News hoạt động hiện tại (nhấp vào URL chứa tên neo đó)
30. :có giá trịĐầu vào: Hợp lệChọn tất cả các phần tử 
<p style="font-weight:bold;">Bold Fontp>
35 với giá trị hợp lệ
31. : Đã ghé thămA: Đã ghé thămChọn tất cả các liên kết đã truy cập

Q. Giải thích mô hình hộp CSS và các thành phần bố cục mà nó bao gồm?

Mô hình hộp CSS là mô hình bố cục hình chữ nhật cho các phần tử HTML bao gồm các phần sau:

  • Nội dung: Nội dung của hộp, nơi xuất hiện văn bản và hình ảnh: The content of the box, where text and images appear
  • Đadding: Một khu vực trong suốt xung quanh nội dung (nghĩa là, lượng không gian giữa đường viền và nội dung): A transparent area surrounding the content (i.e., the amount of space between the border and the content)
  • Biên giới: một biên giới xung quanh phần đệm (nếu có) và nội dung: A border surrounding the padding (if any) and content
  • Biên độ: Một khu vực trong suốt xung quanh biên giới (tức là, lượng không gian giữa đường viền và bất kỳ yếu tố lân cận nào): A transparent area surrounding the border (i.e., the amount of space between the border and any neighboring elements)

Hướng dẫn css-interview-questions github - css-phỏng vấn-câu hỏi github

Kích thước của hộp được tính như thế này:

Tài sảnTổng cộng
Bề rộngChiều rộng + Padding-Left + Padding-right + Border-Left + Border-right
Chiều caoChiều cao + Padding-Top + Padding-Bottom + Border-Top + Border-Bottom

Example:

E[attr^=val]
/* Example */
a[href^='http://sales.']{color: teal;}
4

Demo trực tiếp: Mô hình hộp CSS: CSS Box Model

Q. Làm thế nào bạn sẽ nói với trình duyệt trong CSS để hiển thị bố cục của bạn trong các mô hình hộp khác nhau?

Thuộc tính quy mô hộp cho phép chúng tôi bao gồm phần đệm và đường viền trong tổng chiều rộng và chiều cao của một yếu tố. Nếu bạn đặt 

<p style="font-weight:bold;">Bold Fontp>
74 trên một phần tử, phần đệm và đường viền được bao gồm trong chiều rộng và chiều caobox-sizing property allows us to include the padding and border in an element's total width and height. If you set 
<p style="font-weight:bold;">Bold Fontp>
74 on an element, padding and border are included in the width and height

Syntax:

E[attr^=val]
/* Example */
a[href^='http://sales.']{color: teal;}
5

Giá trị tài sản:

Giá trịSự mô tả
Hộp nội dungMặc định. Các thuộc tính chiều rộng và chiều cao (và thuộc tính tối thiểu/tối đa) chỉ bao gồm nội dung. Không bao gồm biên giới và đệm không được bao gồm
Hộp biênCác thuộc tính chiều rộng và chiều cao (và thuộc tính tối thiểu/tối đa) bao gồm nội dung, đệm và đường viền
ban đầuĐặt thuộc tính này thành giá trị mặc định của nó. Đọc về ban đầu
thừa kếKế thừa thuộc tính này từ phần tử cha của nó. Đọc về kế thừa

Example:

E[attr^=val]
/* Example */
a[href^='http://sales.']{color: teal;}
6

Q. Sự khác biệt giữa hộp biên và hộp nội dung là gì?

1. Hộp nội dung:

Thuộc tính quy mô hộp mặc định. Các thuộc tính chiều rộng và chiều cao (và thuộc tính tối thiểu/tối đa) chỉ bao gồm nội dung. Không bao gồm biên giới và đệm không được bao gồm

2. Hộp biên giới:

Các thuộc tính chiều rộng và chiều cao (và thuộc tính tối thiểu/tối đa) bao gồm nội dung, đệm và đường viền.

Hướng dẫn css-interview-questions github - css-phỏng vấn-câu hỏi github

Q. Giải thích ý nghĩa của từng đơn vị CSS này để thể hiện độ dài?

  • <p style="font-weight:bold;">Bold Fontp>
    75 cm
  • Các phần tử 
    <p style="font-weight:bold;">Bold Fontp>
    41 (tức là, liên quan đến kích thước phông chữ của phần tử; ví dụ: 2 em có nghĩa là gấp 2 lần kích thước phông chữ hiện tại)
  • <p style="font-weight:bold;">Bold Fontp>
    77 inch
  • <p style="font-weight:bold;">Bold Fontp>
    78 milimet
  • <p style="font-weight:bold;">Bold Fontp>
    79 PICA (1 PC = 12 pt = 1/6 của một inch)
  • <p style="font-weight:bold;">Bold Fontp>
    43 điểm (1 pt = 1/72 inch)
  • <p style="font-weight:bold;">Bold Fontp>
    40 pixel (1 PX = 1/96 của một inch)

Q. Trong CSS3, bạn sẽ chọn như thế nào?

  • Mỗi phần tử 
    <p style="font-weight:bold;">Bold Fontp>
    31 có giá trị thuộc tính HREF bắt đầu bằng cách https.
  • Mỗi phần tử 
    <p style="font-weight:bold;">Bold Fontp>
    31 có giá trị thuộc tính HREF kết thúc bằng cách .PDF.
  • Mỗi phần tử 
    <p style="font-weight:bold;">Bold Fontp>
    31 có giá trị thuộc tính HREF chứa phần phụ CSS CSS.

Q. Mục đích của thuộc tính quy mô hộp là gì?

Hướng dẫn css-interview-questions github - css-phỏng vấn-câu hỏi github

Thuộc tính CSS có kích thước hộp đặt ra tổng chiều rộng và chiều cao của một phần tử được tính toán.

  • Hộp nội dung: Giá trị chiều rộng và chiều cao mặc định chỉ áp dụng cho nội dung của phần tử. Phần đệm và đường viền được thêm vào bên ngoài hộp.: the default width and height values apply to the element's content only. The padding and border are added to the outside of the box.
  • Hộp đệm: Giá trị chiều rộng và chiều cao áp dụng cho nội dung của phần tử và phần đệm của nó. Biên giới được thêm vào bên ngoài hộp. Hiện tại, chỉ có Firefox hỗ trợ giá trị hộp đệm.: Width and height values apply to the element's content and its padding. The border is added to the outside of the box. Currently, only Firefox supports the padding-box value.
  • Hộp viền: Giá trị chiều rộng và chiều cao áp dụng cho nội dung, đệm và đường viền.: Width and height values apply to the content, padding, and border.
  • kế thừa: kế thừa kích thước hộp của phần tử cha.: inherits the box sizing of the parent element.

Example:

E[attr^=val]
/* Example */
a[href^='http://sales.']{color: teal;}
7

Q. Sự khác biệt giữa RGBA, Hex và HSLA là gì?

  • RGB (đỏ/xanh lá cây/xanh dương) là một mô hình màu. (Red/Green/Blue) is a color model.

E[attr^=val]
/* Example */
a[href^='http://sales.']{color: teal;}
8

  • Hex (giá trị màu thập lục phân)
  • HSLA (HUE Saturation Lightness Alpha)

E[attr^=val]
/* Example */
a[href^='http://sales.']{color: teal;}
9

Q. Bộ tiền xử lý CSS là gì?

Các bộ xử lý trước mở rộng CSS với các biến, toán tử, nội suy, chức năng, mixin và nhiều tài sản có thể sử dụng khác. Sau khi phát triển, các tệp cụ thể này được biên dịch thành CSS thông thường mà bất kỳ trình duyệt nào cũng có thể hiểu được. Bộ xử lý trước giúp viết các mã có thể tái sử dụng, dễ dàng duy trì và có thể mở rộng trong CSS.

Tiền xử lý CSS:

  • Sass (SCSS)
  • ÍT HƠN
  • Bút stylus
  • Postcss

Advantages:

  • CSS được thực hiện duy trì nhiều hơn.
  • Dễ dàng viết các bộ chọn lồng nhau.
  • Các biến cho chủ đề phù hợp. Có thể chia sẻ các tập tin chủ đề trên các dự án khác nhau.
  • Mixin để tạo CSS lặp đi lặp lại.
  • Chia mã của bạn thành nhiều tập tin. Các tệp CSS cũng có thể được phân chia nhưng làm như vậy sẽ yêu cầu yêu cầu HTTP để tải xuống từng tệp CSS.

Q. Sự khác biệt giữa "đặt lại" và "bình thường hóa" CSS là gì?

1. Đặt lại: Đặt lại CSS nhằm mục đích loại bỏ tất cả các kiểu dáng trình duyệt tích hợp. Ví dụ, lề, mái chèo, kích thước phông chữ của tất cả các yếu tố được đặt lại là giống nhau. Bạn sẽ phải tạo lại kiểu dáng cho các yếu tố đánh máy phổ biến.: CSS resets aim to remove all built-in browser styling. For example margins, paddings, font-sizes of all elements are reset to be the same. You will have to redeclare styling for common typographic elements.

Example:

E[attr$=val]
/* Example */
a[href$='.jsp']{color: purple;}
0

2. Bình thường hóa: Bình thường hóa CSS nhằm mục đích làm cho việc tạo kiểu trình duyệt tích hợp nhất quán trên các trình duyệt. Nó cũng sửa lỗi cho các phụ thuộc trình duyệt phổ biến.: Normalize CSS aims to make built-in browser styling consistent across browsers. It also corrects bugs for common browser dependencies.

Example:

E[attr$=val]
/* Example */
a[href$='.jsp']{color: purple;}
1

Q. Giải thích bối cảnh định dạng khối CSS?

Phao, các phần tử được định vị hoàn toàn, các thùng chứa khối (như khối nội tuyến, tế bào bảng và bộ chứa bảng) không phải là hộp khối và các hộp khối có 'tràn' khác với 'có thể nhìn thấy' (ngoại trừ khi giá trị đó được truyền đến chế độ xem) thiết lập bối cảnh định dạng khối mới cho nội dung của chúng.

Trong bối cảnh định dạng khối, cạnh bên ngoài bên trái của mỗi hộp chạm vào cạnh trái của khối chứa (cho định dạng từ phải sang trái, các cạnh phải chạm vào)

BFC là một hộp HTML thỏa mãn ít nhất một trong các điều kiện sau:

  • Giá trị của 
    <p style="font-weight:bold;">Bold Fontp>
    85 không phải là 
    <p style="font-weight:bold;">Bold Fontp>
    86.
  • Giá trị của 
    <p style="font-weight:bold;">Bold Fontp>
    87 không phải là 
    <p style="font-weight:bold;">Bold Fontp>
    88 cũng như 
    <p style="font-weight:bold;">Bold Fontp>
    23.
  • Giá trị của 
    <p style="font-weight:bold;">Bold Fontp>
    04 là 
    <p style="font-weight:bold;">Bold Fontp>
    91, 
    <p style="font-weight:bold;">Bold Fontp>
    92, 
    <p style="font-weight:bold;">Bold Fontp>
    93, 
    <p style="font-weight:bold;">Bold Fontp>
    05 hoặc 
    <p style="font-weight:bold;">Bold Fontp>
    06.
  • Giá trị của 
    <p style="font-weight:bold;">Bold Fontp>
    96 không phải là 
    <p style="font-weight:bold;">Bold Fontp>
    97.

Trong một BFC, cạnh bên ngoài bên trái của mỗi hộp chạm vào cạnh trái của khối chứa (cho định dạng từ phải sang trái, các cạnh phải chạm vào). Biên độ dọc giữa các hộp cấp độ liền kề trong sự sụp đổ của BFC.

Example:

E[attr$=val]
/* Example */
a[href$='.jsp']{color: purple;}
2

Demo trực tiếp: Định dạng khối CSS: CSS Block Formatting

Q. Thuộc tính Float là gì và Float làm gì?

Thuộc tính Float CSS đặt một phần tử ở bên trái hoặc bên phải của container của nó, cho phép các phần tử văn bản và nội tuyến quấn quanh nó.

Syntax:

E[attr$=val]
/* Example */
a[href$='.jsp']{color: purple;}
3

Giá trị tài sản:

Sl.NoGiá trịSự mô tả
01. không aiPhần tử không nổi, (sẽ được hiển thị chỉ ở nơi nó xảy ra trong văn bản).
02. bên tráiPhần tử nổi ở bên trái của container của nó
03. bên phảiPhần tử nổi bên phải của thùng chứa của nó
04. ban đầuĐặt thuộc tính này thành giá trị mặc định của nó.
05. thừa kếKế thừa thuộc tính này từ phần tử cha của nó.

Example:::

E[attr$=val]
/* Example */
a[href$='.jsp']{color: purple;}
4

E[attr$=val]
/* Example */
a[href$='.jsp']{color: purple;}
5

Q. Mô tả tài sản rõ ràng trong CSS?

Thuộc tính rõ ràng chỉ định những yếu tố nào có thể nổi bên cạnh phần tử đã xóa và ở phía nào.

Sl.NoĐặc tínhSự mô tả
01. không aiPhần tử không nổi, (sẽ được hiển thị chỉ ở nơi nó xảy ra trong văn bản).
02. bên tráiPhần tử nổi ở bên trái của container của nó
03. bên phảiPhần tử nổi bên phải của thùng chứa của nó
04. ban đầuĐặt thuộc tính này thành giá trị mặc định của nó.
05. thừa kếKế thừa thuộc tính này từ phần tử cha của nó.

Example:

Q. Mô tả tài sản rõ ràng trong CSS?

Thuộc tính rõ ràng chỉ định những yếu tố nào có thể nổi bên cạnh phần tử đã xóa và ở phía nào.clear property is directly related to the float property. It specifies if an element should be next to the floated elements or if it should move below them. This property applies to both floated and non-floated elements.

Đặc tính

E[attr$=val]
/* Example */
a[href$='.jsp']{color: purple;}
6

Giá trị tài sản:

Giá trịSự mô tả
không aiPhần tử không nổi, (sẽ được hiển thị chỉ ở nơi nó xảy ra trong văn bản).
bên tráiPhần tử nổi ở bên trái của container của nó
bên phảiPhần tử nổi bên phải của thùng chứa của nó
ban đầuĐặt thuộc tính này thành giá trị mặc định của nó.

Example:

E[attr$=val]
/* Example */
a[href$='.jsp']{color: purple;}
7

thừa kế: CSS clear Property

Kế thừa thuộc tính này từ phần tử cha của nó.

Q. Mô tả tài sản rõ ràng trong CSS?clearfix is a way for an element to clear its child elements automatically without any additional markup. The clearfix property is generally used in float layouts where elements are floated to be stacked horizontally.

Thuộc tính rõ ràng chỉ định những yếu tố nào có thể nổi bên cạnh phần tử đã xóa và ở phía nào.

Hướng dẫn css-interview-questions github - css-phỏng vấn-câu hỏi github

Syntax:

Example:

E[attr$=val]
/* Example */
a[href$='.jsp']{color: purple;}
8

Đặc tính: CSS Clearfix

Rõ ràng: Không có

Cho phép các yếu tố nổi ở cả hai bên. Đây là mặc định

Rõ ràng: Trái

  • Không có yếu tố nổi cho phép ở phía bên trái
  • Rõ ràng: Phải
  • Không có yếu tố nổi cho phép ở phía bên phải

E[attr$=val]
/* Example */
a[href$='.jsp']{color: purple;}
9

rõ ràng: cả hai

Không có yếu tố nổi cho phép ở bên trái hoặc bên phải

E[attr*=val]  
/* Example */
img[src*='artwork']{
        border-color: #C3B087 #FFF #FFF #C3B087;
}
0

E[attr*=val]  
/* Example */
img[src*='artwork']{
        border-color: #C3B087 #FFF #FFF #C3B087;
}
1

Rõ ràng: kế thừa

E[attr*=val]  
/* Example */
img[src*='artwork']{
        border-color: #C3B087 #FFF #FFF #C3B087;
}
2

E[attr*=val]  
/* Example */
img[src*='artwork']{
        border-color: #C3B087 #FFF #FFF #C3B087;
}
3

Phần tử kế thừa giá trị rõ ràng của cha mẹ của nó

E[attr*=val]  
/* Example */
img[src*='artwork']{
        border-color: #C3B087 #FFF #FFF #C3B087;
}
4

E[attr*=val]  
/* Example */
img[src*='artwork']{
        border-color: #C3B087 #FFF #FFF #C3B087;
}
5

Q. Giải thích mục đích xóa phao trong CSS?

E[attr*=val]  
/* Example */
img[src*='artwork']{
        border-color: #C3B087 #FFF #FFF #C3B087;
}
6

E[attr*=val]  
/* Example */
img[src*='artwork']{
        border-color: #C3B087 #FFF #FFF #C3B087;
}
7

Kỹ thuật: 05:

E[attr*=val]  
/* Example */
img[src*='artwork']{
        border-color: #C3B087 #FFF #FFF #C3B087;
}
8

E[attr*=val]  
/* Example */
img[src*='artwork']{
        border-color: #C3B087 #FFF #FFF #C3B087;
}
9

Kỹ thuật: 06:

  div.article > p:last-child{font-style: italic;}
0

  div.article > p:last-child{font-style: italic;}
1

Kỹ thuật: 07:

  div.article > p:last-child{font-style: italic;}
2

  div.article > p:last-child{font-style: italic;}
3

Kỹ thuật: 08:

  div.article > p:last-child{font-style: italic;}
4

  div.article > p:last-child{font-style: italic;}
5

Kỹ thuật: 09:

  div.article > p:last-child{font-style: italic;}
6

  div.article > p:last-child{font-style: italic;}
7

Q. Truy vấn truyền thông là gì? Làm thế nào bạn có thể áp dụng các quy tắc CSS cụ thể cho một phương tiện truyền thông?

Các truy vấn phương tiện rất hữu ích khi bạn muốn sửa đổi trang web hoặc ứng dụng của mình tùy thuộc vào loại chung của thiết bị (như in so với màn hình) hoặc các đặc điểm và tham số cụ thể (như độ phân giải màn hình hoặc chiều rộng chế độ xem trình duyệt). Nó sử dụng quy tắc @Media để bao gồm một khối thuộc tính CSS chỉ khi một điều kiện nhất định là đúng.

Các loại phương tiện truyền thông:

Sl.NoGiá trịSự mô tả
01. tất cả cácMặc định. Được sử dụng cho tất cả các thiết bị loại phương tiện
02. inĐược sử dụng cho máy in
03. màn hìnhĐược sử dụng cho màn hình máy tính, máy tính bảng, điện thoại thông minh, v.v.
04. lời nóiĐược sử dụng cho các trình đọc sách "đọc" trang

Các tính năng truyền thông:

Sl.NoGiá trịSự mô tả
01. tất cả cácMặc định. Được sử dụng cho tất cả các thiết bị loại phương tiện
02. inĐược sử dụng cho máy in
03. màn hìnhĐược sử dụng cho màn hình máy tính, máy tính bảng, điện thoại thông minh, v.v.
04. lời nóiĐược sử dụng cho các trình đọc sách "đọc" trang
05. Các tính năng truyền thông:bất cứ nơi nào
06. Có bất kỳ cơ chế đầu vào có sẵn cho phép người dùng di chuột qua các yếu tố?bất kỳ con trỏ nào
07. Có bất kỳ cơ chế đầu vào có sẵn là một thiết bị trỏ, và nếu vậy, nó chính xác như thế nào?Khía cạnh tỷ lệ
08. Tỷ lệ giữa chiều rộng và chiều cao của chế độ xemmàu sắc
09. Số lượng bit trên mỗi thành phần màu cho thiết bị đầu ragam màu
10. Phạm vi màu gần đúng được hỗ trợ bởi tác nhân người dùng và thiết bị đầu raChỉ số màu
11. Số lượng màu mà thiết bị có thể hiển thịLưới
12. Cho dù thiết bị là lưới hay bitmapChiều cao
13. Chiều cao chế độ xembay lượn
14. Cơ chế đầu vào chính có cho phép người dùng di chuột qua các yếu tố không?màu đảo ngược
15. Là trình duyệt hoặc màu sắc cơ sở của hệ điều hành?mức độ ánh sáng
16. Mức ánh sáng xung quanh hiện tạiMax-ASPECT-CATIO
17. Tỷ lệ tối đa giữa chiều rộng và chiều cao của khu vực hiển thịMax-Color
18. Số lượng bit tối đa cho mỗi thành phần màu cho thiết bị đầu rachỉ số tối đa
19. Số lượng màu tối đa mà thiết bị có thể hiển thịĐộ cao tối đa
20. Chiều cao tối đa của khu vực hiển thị, chẳng hạn như cửa sổ trình duyệtMax-Monochrom
21. Số lượng bit tối đa cho mỗi "màu" trên một thiết bị đơn sắc (gryscale)Độ phân giải tối đa
22. Độ phân giải tối đa của thiết bị, sử dụng DPI hoặc DPCMchiều rộng tối đa
23. Chiều rộng tối đa của khu vực hiển thị, chẳng hạn như cửa sổ trình duyệtMin-ASPECT-CATIO
24. Tỷ lệ tối thiểu giữa chiều rộng và chiều cao của khu vực hiển thịMin-color
25. Số lượng bit tối thiểu trên mỗi thành phần màu cho thiết bị đầu rachỉ số tối thiểu
26. Số lượng màu tối thiểu mà thiết bị có thể hiển thịchiều cao tối thiểu
27. Chiều cao tối thiểu của khu vực hiển thị, chẳng hạn như cửa sổ trình duyệtMin-Monochrom
28. Số lượng bit tối thiểu trên mỗi "màu" trên thiết bị đơn sắc (màu xám)độ phân giải tối thiểu
29. Độ phân giải tối thiểu của thiết bị, sử dụng DPI hoặc DPCMchiều rộng tối thiểu
30. Chiều rộng tối thiểu của vùng hiển thị, chẳng hạn như cửa sổ trình duyệtđơn sắc
31. Số lượng bit trên mỗi "màu" trên thiết bị đơn sắc (gryscale)định hướng
32. Định hướng của chế độ xem (chế độ cảnh quan hoặc chân dung)tràn
33. Làm thế nào để thiết bị đầu ra xử lý nội dung tràn qua chế độ xem dọc theo trục khốitràn dòng
34. Nội dung có thể tràn qua chế độ xem dọc theo trục nội tuyếncon trỏ
35. Là cơ chế đầu vào chính là một thiết bị trỏ, và nếu vậy, nó chính xác như thế nào?nghị quyết

Example:

  div.article > p:last-child{font-style: italic;}
8

Độ phân giải của thiết bị đầu ra, sử dụng DPI hoặc DPCM

quét

Quá trình quét của thiết bị đầu ra

kịch bản

Scripting (ví dụ: JavaScript) có sẵn không?

cập nhật

Thiết bị đầu ra có thể nhanh chóng sửa đổi sự xuất hiện của nội dung như thế nào

bề rộng

Chiều rộng chế độ xem

Q. Làm thế nào bạn có thể tải tài nguyên CSS một cách có điều kiện?

@Import: Cho phép tải SheetHeet bằng cách sử dụng đường dẫn (URI) đại diện cho vị trí của tệp.: allows to load stylesheet by using a path (uri) representing the location of the file.

  div.article > p:last-child{font-style: italic;}
9

matchmedia (): Sử dụng matchmedia cho phép bạn thực hiện các khối javascript khi một điều kiện truy vấn phương tiện nhất định được đáp ứng. Điều này có nghĩa là bạn chỉ có thể viết ra CSS khi và nếu truy vấn là đúng:: Using matchMedia lets you execute blocks of JavaScript only when a certain media query condition is met. This means you can just write out the CSS when and if the query is true:

div {
  color: blue;
  text-align: justify;
}
00

Q. Internal CSS Example ...11 làm gì? Ưu điểm của nó là gì?

  • Làm cho mọi yếu tố trong tài liệu bao gồm phần đệm và đường viền trong kích thước bên trong của phần tử; Làm cho nó dễ dàng hơn để lý luận về bố cục của các yếu tố trên trang.
  • Theo mặc định, các yếu tố có 
    >
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
    12 được áp dụng và chỉ kích thước nội dung được tính đến.
  • >
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
    13 Thay đổi cách các yếu tố 
    >
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
    14 và 
    >
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
    15 đang được tính toán, 
    >
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
    16 và 
    >
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
    17 cũng đang được đưa vào tính toán.
  • >
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
    15 của một phần tử hiện được tính toán theo chiều rộng 
    >
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
    15 + dọc 
    >
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
    17 + chiều rộng dọc 
    >
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
    16.
  • >
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
    14 của một phần tử hiện được tính toán bởi nội dung 
    >
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
    14 + chiều ngang 
    >
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
    17 + chiều rộng ngang 
    >
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
    16.
  • Có tính đến 
    >
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
    17 và 
    >
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
    16 như một phần của mô hình hộp của chúng tôi cộng hưởng tốt hơn với cách các nhà thiết kế thực sự tưởng tượng nội dung trong lưới.

Q. Danh sách hiển thị thuộc tính trong CSS?

Thuộc tính hiển thị chỉ định hành vi hiển thị (loại hộp kết xuất) của một phần tử.

Example:

div {
  color: blue;
  text-align: justify;
}
01

Giá trị tài sản:

Sl.NoGiá trịSự mô tả
01. nội tuyếnHiển thị một phần tử dưới dạng phần tử nội tuyến (như 
<p style="font-weight:bold;">Bold Fontp>
32). Bất kỳ tính chất chiều cao và chiều rộng nào sẽ không có hiệu lực
02. khốiHiển thị một phần tử dưới dạng phần tử khối (như 
div {
  color: blue;
  text-align: justify;
}
88). Nó bắt đầu trên một dòng mới, và chiếm toàn bộ chiều rộng
03. nội dungLàm cho container biến mất, làm cho trẻ em yếu tố trẻ em của yếu tố lên cấp tiếp theo trong DOM
04. uốn congHiển thị một phần tử dưới dạng container flex cấp khối
05. LướiHiển thị một phần tử dưới dạng thùng chứa lưới cấp khối
06. chặn Nội tuyếnHiển thị một phần tử dưới dạng hộp chứa khối nội tuyến. Bản thân phần tử được định dạng là một phần tử nội tuyến, nhưng bạn có thể áp dụng các giá trị chiều cao và chiều rộng
07. nội tuyến-flexHiển thị một phần tử dưới dạng container flex cấp nội tuyến
08. nội tuyến-lướiHiển thị một phần tử dưới dạng thùng chứa lưới cấp nội tuyến
09. Bảng nội tuyếnPhần tử được hiển thị dưới dạng bảng cấp nội tuyến
10. Danh sách mụcĐặt phần tử hoạt động như một phần tử 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
30
11. chạy vàoHiển thị một phần tử dưới dạng khối hoặc nội tuyến, tùy thuộc vào ngữ cảnh
12. bànĐặt phần tử hoạt động như một phần tử 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
31
13. bảng chú thíchĐặt phần tử hoạt động như một phần tử 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
32
14. Bảng điểm bảngĐặt phần tử hoạt động như một phần tử 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
33
15. Nhóm tiêu đềĐặt phần tử hoạt động như một phần tử 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
34
16. Bảng chân bànĐặt phần tử hoạt động như một phần tử 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
35
17. nhóm bànĐặt phần tử hoạt động như một phần tử 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
36
18. tế bào bànĐặt phần tử hoạt động như một phần tử 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
37
19. cột bànĐặt phần tử hoạt động như một phần tử 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
38
20. Xếp bànĐặt phần tử hoạt động như một phần tử 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
39
21. không aiPhần tử bị loại bỏ hoàn toàn
22. ban đầuĐặt thuộc tính này thành giá trị mặc định của nó. Đọc về ban đầu
23. thừa kếKế thừa thuộc tính này từ phần tử cha của nó. Đọc về kế thừa

Q. Thiết kế đáp ứng khác với thiết kế thích ứng như thế nào?

1) Thiết kế đáp ứng sử dụng 

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
40 để thay đổi các kiểu dựa trên thiết bị đích như loại hiển thị, chiều rộng, chiều cao, v.v. và chỉ một trong số này là cần thiết để trang web thích ứng với các màn hình khác nhau. uses 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
40 to change styles based on the target device such as display type, width, height, etc., and only one of these is necessary for the site to adapt to different screens.

Phản hồi không cung cấp nhiều quyền kiểm soát như thích ứng, nhưng mất ít công việc hơn để cả xây dựng và duy trì. Bố cục đáp ứng cũng là chất lỏng và trong khi thích ứng có thể và sử dụng tỷ lệ phần trăm để mang lại cảm giác chất lỏng hơn khi chia tỷ lệ, những điều này một lần nữa có thể gây ra một bước nhảy khi một cửa sổ được thay đổi kích thước.

2) Thiết kế thích ứng sử dụng bố cục tĩnh dựa trên các điểm dừng không phản hồi sau khi chúng được tải ban đầu. Thích ứng hoạt động để phát hiện kích thước màn hình và tải bố cục thích hợp cho nó. Nói chung trang web thích ứng sử dụng sáu chiều rộng màn hình chung: uses static layouts based on breakpoints which don't respond once they\’re initially loaded. Adaptive works to detect the screen size and load the appropriate layout for it. Generally adaptive site uses six common screen widths:

  • 320 PX
  • 480 PX
  • 760 px
  • 960 PX
  • 1200 px
  • 1600 PX

Thích ứng rất hữu ích cho việc trang bị thêm một trang web hiện có để làm cho nó thân thiện với thiết bị di động hơn. Điều này cho phép bạn kiểm soát thiết kế và phát triển cho nhiều chế độ xem cụ thể.

Q. Đồ họa võng mạc là gì? Bạn sử dụng loại kỹ thuật nào để xử lý hình ảnh cho màn hình võng mạc?

Để có đồ họa sắc nét, đẹp mắt, làm cho màn hình võng mạc tốt nhất, chúng ta cần sử dụng hình ảnh độ phân giải cao bất cứ khi nào có thể. Tuy nhiên, việc sử dụng luôn luôn các hình ảnh có độ phân giải cao nhất sẽ có tác động đến hiệu suất vì nhiều byte sẽ cần được gửi qua dây.

Để khắc phục vấn đề này, chúng ta có thể sử dụng hình ảnh đáp ứng, như được chỉ định trong HTML5. Nó yêu cầu cung cấp các tệp độ phân giải khác nhau có sẵn của cùng một hình ảnh cho trình duyệt và để nó quyết định hình ảnh nào là tốt nhất, sử dụng thuộc tính HTML 

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
41 và tùy chọn 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
42, ví dụ::

div {
  color: blue;
  text-align: justify;
}
02

Các trình duyệt không hỗ trợ 

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
41 của HTML5 (tức là IE11) sẽ bỏ qua nó và sử dụng 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
44 thay thế. Nếu chúng tôi thực sự cần hỗ trợ IE11 và chúng tôi muốn cung cấp tính năng này vì lý do hiệu suất, chúng tôi có thể sử dụng JavaScript 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
45.

Phần tử hình ảnh HTML5:

div {
  color: blue;
  text-align: justify;
}
03

Retina Display Media Truy vấn:

div {
  color: blue;
  text-align: justify;
}
04

Q. Có lý do nào bạn muốn sử dụng dịch () thay vì định vị tuyệt đối hoặc ngược lại không?

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
46 là giá trị của CSS 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
47. Thay đổi 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
47 hoặc 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
49 không kích hoạt trình duyệt phản xạ hoặc sơn lại nhưng không kích hoạt các chế phẩm; trong khi việc thay đổi các kích hoạt định vị tuyệt đối 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
50. 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
47 khiến trình duyệt tạo lớp GPU cho phần tử nhưng thay đổi thuộc tính định vị tuyệt đối sử dụng CPU. Do đó 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
46 hiệu quả hơn và sẽ dẫn đến thời gian sơn ngắn hơn cho các hình ảnh động mượt mà hơn.

Khi sử dụng 

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
46, phần tử vẫn chiếm không gian ban đầu của nó (giống như 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
54), không giống như trong việc thay đổi định vị tuyệt đối.

Example:

Nếu chúng ta kết hợp 

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
55 với một trong các thuộc tính bù 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
56, 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
57, 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
58 hoặc 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
59, phần tử sẽ được chuyển từ vị trí ban đầu của nó trong bố cục trong khi bảo quản không gian trong tài liệu mà nó từng chiếm. Phần tử sẽ được chuyển sang một lớp mới và thứ tự lớp của nó hoặc thứ tự xếp chồng của nó sau đó có thể được kiểm soát với thuộc tính 
<p style="font-weight:bold;">Bold Fontp>
17.

div {
  color: blue;
  text-align: justify;
}
05

Trong ví dụ trên, phần tử sẽ được di chuyển 100px ra khỏi đỉnh và 50px cách xa bên trái của vị trí ban đầu.

Khi sử dụng 

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
61, chúng tôi nhận được kết quả trực quan rất giống với việc sử dụng vị trí tương đối. Kết quả tương tự như trên có thể đạt được với đoạn trích sau:

div {
  color: blue;
  text-align: justify;
}
06

Trong trường hợp này, chúng tôi đang dịch tọa độ của phần tử bằng 

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
62 dọc theo trục X và 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
63 dọc theo trục y. Kết quả cuối cùng giống như ví dụ 
<p style="font-weight:bold;">Bold Fontp>
87 trước đó.

Q. Hàm dịch () có thể di chuyển vị trí của một phần tử trên trục z?

  • Sai

Q. Cho biết mỗi thẻ này làm gì, nếu có các lựa chọn thay thế, thích hợp hơn, tại sao?

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
65: Thẻ HTML 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
65 thể hiện sự nhấn mạnh căng thẳng của nội dung của nó.: The HTML 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
65 tag represents stress emphasis of its contents.

div {
  color: blue;
  text-align: justify;
}
07

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
67: Thẻ 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
67 chỉ định văn bản táo bạo mà không có bất kỳ tầm quan trọng nào.: The 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
67 tag specifies bold text without any extra importance.

div {
  color: blue;
  text-align: justify;
}
08

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
69: Phần tử viết tắt HTML (
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
69) đại diện cho viết tắt hoặc từ viết tắt; Thuộc tính tiêu đề tùy chọn có thể cung cấp một bản mở rộng hoặc mô tả cho chữ viết tắt.: The HTML Abbreviation element (
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
69) represents an abbreviation or acronym; the optional title attribute can provide an expansion or description for the abbreviation.

div {
  color: blue;
  text-align: justify;
}
09

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
71: Thẻ 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
71 xác định một tập hợp các liên kết điều hướng.: The 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
71 tag defines a set of navigation links.

div {
  color: blue;
  text-align: justify;
}
10

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
73: Nội dung của thẻ 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
73 thường được hiển thị bằng chữ in nghiêng.: The content of the 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
73 tag is usually displayed in italic.

div {
  color: blue;
  text-align: justify;
}
11

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
75: Thẻ HTML 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
75 được sử dụng để xác định liên kết đến tài nguyên bên ngoài. Nó được đặt trong phần 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
77 của tài liệu HTML.: The HTML 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
75 tag is used for defining a link to an external resource. It is placed in in the 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
77 section of the HTML document.

div {
  color: blue;
  text-align: justify;
}
12

<p style="font-weight:bold;">Bold Fontp>
33: Phần tử 
<p style="font-weight:bold;">Bold Fontp>
33 được sử dụng để xác định văn bản có tầm quan trọng lớn hơn văn bản xung quanh. Theo mặc định, tất cả các trình duyệt kết xuất văn bản 
<p style="font-weight:bold;">Bold Fontp>
33 trong một kiểu chữ in đậm.: The 
<p style="font-weight:bold;">Bold Fontp>
33 element is used to identify text that is of greater importance than the surrounding text. By default, all browsers render 
<p style="font-weight:bold;">Bold Fontp>
33 text in a bold typeface.

div {
  color: blue;
  text-align: justify;
}
13

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
81: Thẻ 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
81 chỉ định nội dung độc lập, khép kín.: The 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
81 tag specifies independent, self-contained content.

div {
  color: blue;
  text-align: justify;
}
14

Q. QUULE là gì?

Các quy tắc là 

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
83 hướng dẫn CSS cách cư xử. Họ bắt đầu với một dấu hiệu AT, 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
84, sau đó là một định danh và bao gồm mọi thứ cho đến dấu chấm phẩy tiếp theo, 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
85 hoặc khối CSS tiếp theo, tùy theo điều kiện nào đến trước.

div {
  color: blue;
  text-align: justify;
}
15

Sl.Noat-rulesSự mô tả
01. @charsetXác định bộ ký tự được sử dụng bởi bảng kiểu.
02. @nhập khẩuNói với động cơ CSS bao gồm một bảng kiểu bên ngoài.
03. @namespaceNói với công cụ CSS rằng tất cả nội dung của nó phải được coi là tiền tố với không gian tên XML.
04. @phương tiện truyền thôngMột quy tắc nhóm có điều kiện sẽ áp dụng nội dung của nó nếu thiết bị đáp ứng các tiêu chí của điều kiện được xác định bằng truy vấn phương tiện.
05. @SupportsMột quy tắc nhóm có điều kiện sẽ áp dụng nội dung của nó nếu trình duyệt đáp ứng các tiêu chí của điều kiện đã cho.
06. @trangMô tả khía cạnh của các thay đổi bố cục sẽ được áp dụng khi in tài liệu.
07. @mặt chữMô tả khía cạnh của một phông chữ bên ngoài sẽ được tải xuống.
08. @KeyFramesMô tả khía cạnh của các bước trung gian trong chuỗi hoạt hình CSS.

Q. Làm thế nào có thể loại bỏ khoảng cách dưới hình ảnh?

Vì hình ảnh là các yếu tố nội tuyến được xử lý giống như các văn bản, do đó, có một khoảng cách còn lại, có thể bị xóa bởi:

div {
  color: blue;
  text-align: justify;
}
16

Q. Kết xuất tiến bộ là gì?

Kết xuất tiến bộ là tên được đặt cho các kỹ thuật được sử dụng để cải thiện hiệu suất của trang web (đặc biệt, cải thiện thời gian tải nhận thức) để hiển thị nội dung để hiển thị càng nhanh càng tốt.

Examples:

  • Tải hình ảnh lười biếng - hình ảnh trên trang không được tải cùng một lúc. JavaScript sẽ được sử dụng để tải một hình ảnh khi người dùng cuộn vào một phần của trang hiển thị hình ảnh. - Images on the page are not loaded all at once. JavaScript will be used to load an image when the user scrolls into the part of the page that displays the image.
  • Ưu tiên nội dung có thể nhìn thấy (hoặc kết xuất đã gấp hoặc lắng nghe sự kiện DomContentLoaded/Load để tải trong các tài nguyên và nội dung khác. - Include only the minimum CSS/content/scripts necessary for the amount of page that would be rendered in the users browser first to display as quickly as possible, you can then use deferred scripts or listen for the DOMContentLoaded/load event to load in other resources and content.
  • Các đoạn HTML ASYNC - Các phần xả của HTML cho trình duyệt khi trang được xây dựng ở phía sau. - Flushing parts of the HTML to the browser as the page is constructed on the back end.

Q. Đầu tiên trên thiết bị di động là gì? Bạn có thể giải thích sự khác biệt giữa việc mã hóa một trang web để đáp ứng so với sử dụng chiến lược đầu tiên trên thiết bị di động không?

Làm cho một trang web phản hồi có nghĩa là một số yếu tố sẽ phản hồi bằng cách điều chỉnh kích thước hoặc chức năng khác theo kích thước màn hình của thiết bị, điển hình là chiều rộng chế độ xem, thông qua các truy vấn phương tiện CSS, ví dụ, làm cho kích thước phông chữ nhỏ hơn trên các thiết bị nhỏ hơn.

div {
  color: blue;
  text-align: justify;
}
17

Chiến lược đầu tiên trên thiết bị di động cũng đáp ứng, tuy nhiên nó đồng ý rằng chúng ta nên mặc định và xác định tất cả các kiểu cho các thiết bị di động và chỉ thêm các quy tắc đáp ứng cụ thể vào các thiết bị khác sau này. Làm theo ví dụ trước:

div {
  color: blue;
  text-align: justify;
}
18

Chiến lược đầu tiên trên thiết bị di động có 2 lợi thế chính:

  • Đó là hiệu suất hơn trên các thiết bị di động, vì tất cả các quy tắc được áp dụng cho chúng không phải được xác thực đối với bất kỳ truy vấn phương tiện nào.
  • Nó buộc phải viết mã sạch hơn đối với các quy tắc CSS đáp ứng.

Example:

div {
  color: blue;
  text-align: justify;
}
19

Bản demo trực tiếp: Truy vấn truyền thông: Media Query

Q. Tài sản nào được sử dụng để thay đổi khuôn mặt của phông chữ?

Thuộc tính 

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
03 được sử dụng để thay đổi khuôn mặt của phông chữ.

Q. Tài sản nào được sử dụng để tạo ra một phông chữ in nghiêng hoặc xiên?

Thuộc tính 

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
87 được sử dụng để tạo ra một phông chữ in nghiêng hoặc xiên.

Q. Tài sản nào được sử dụng để tạo hiệu ứng Vình nhỏ?

Thuộc tính 

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
88 được sử dụng để tạo hiệu ứng Vình nhỏ.

Q. Tài sản nào được sử dụng để tăng hoặc giảm mức độ đậm hoặc ánh sáng của phông chữ xuất hiện?

Thuộc tính 

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
04 được sử dụng để tăng hoặc giảm mức độ in đậm hoặc ánh sáng một phông chữ xuất hiện.

Q. Thuộc tính nào được sử dụng để thêm hoặc trừ không gian giữa các chữ cái tạo nên một từ?

Thuộc tính 

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
90 được sử dụng để thêm hoặc trừ không gian giữa các chữ cái tạo nên một từ.

Q. Thuộc tính nào được sử dụng để thêm hoặc trừ không gian giữa các từ của câu?

Thuộc tính 

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
91 được sử dụng để thêm hoặc trừ không gian giữa các từ của một câu.

Q. Tài sản nào được sử dụng để thụt lề văn bản của một đoạn văn?

Thuộc tính 

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
92 được sử dụng để thụt lề văn bản của một đoạn văn.

Q. Tài sản nào được sử dụng để sắp xếp văn bản của một tài liệu?

Thuộc tính 

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
93 được sử dụng để sắp xếp văn bản của một tài liệu.

Q. Tài sản nào được sử dụng để gạch chân, Overline và văn bản Strikethrough?

Thuộc tính 

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
94 được sử dụng để gạch chân, nối tiếp và văn bản Strikethrough.

Q. Tài sản nào được sử dụng để viết hoa văn bản hoặc chuyển đổi văn bản thành chữ hoa hoặc chữ thường?

Thuộc tính 

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
95 được sử dụng để viết hoa văn bản hoặc chuyển đổi văn bản thành chữ hoa hoặc chữ thường.

Q. Tài sản nào cho phép bạn kiểm soát hình dạng hoặc sự xuất hiện của điểm đánh dấu của một danh sách?

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
96 cho phép bạn kiểm soát hình dạng hoặc sự xuất hiện của điểm đánh dấu.

Q. Làm cách nào để khôi phục giá trị mặc định của thuộc tính?

Từ khóa 

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
97 có thể được sử dụng để đặt lại nó về giá trị mặc định của nó, được xác định trong đặc tả CSS của thuộc tính đã cho.

Q. Tính đặc hiệu là gì?

Một quá trình xác định quy tắc CSS nào sẽ được áp dụng cho một phần tử. Nó thực sự xác định quy tắc nào sẽ được ưu tiên. Kiểu nội tuyến thường thắng sau đó ID sau đó giá trị lớp (hoặc bộ chọn thuộc tính hoặc phân loại thuộc tính), bộ chọn phổ quát (*) không có tính đặc hiệu. Bộ chọn ID có độ đặc hiệu cao hơn các bộ chọn thuộc tính.

Các loại chọn

Danh sách sau đây các loại chọn tăng theo tính đặc hiệu:

  • Loại bộ chọn (ví dụ: H2) và các yếu tố giả (ví dụ: :: Trước). (e.g., h2) and pseudo-elements (e.g., ::before).
  • Bộ chọn lớp (ví dụ: .example), các bộ chọn thuộc tính (ví dụ: [type = "radio"]) và các lớp giả (ví dụ:: di chuột). (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
  • Bộ chọn ID (ví dụ: #Example). (e.g., #example).

div {
  color: blue;
  text-align: justify;
}
20

Các bộ chọn theo ngữ cảnh cụ thể hơn một bộ chọn phần tử duy nhất. Bảng kiểu nhúng gần với phần tử được tạo kiểu. Quy tắc cuối cùng được xác định ghi đè bất kỳ quy tắc nào, xung đột trước đó.

div {
  color: blue;
  text-align: justify;
}
21

Một bộ chọn lớp đánh bại bất kỳ số lượng bộ chọn phần tử.

div {
  color: blue;
  text-align: justify;
}
22

Q. Bạn biết gì về chuyển đổi CSS?

Chuyển tiếp CSS cho phép thêm hiệu ứng trong khi thay đổi từ kiểu này sang kiểu khác. Bạn có thể đặt thuộc tính bạn muốn chuyển đổi, thời lượng, cách bạn muốn chuyển tiếp (tuyến tính, dễ dàng, dễ dàng, dễ dàng, hình khối) và độ trễ khi chuyển tiếp sẽ bắt đầu. allows to add an effect while changing from one style to another. You can set the which property you want to transition, duration, how you want to transit (linear, ease, ease-in, ease-out, cubic-bezier) and delay when transition will start.

Thuộc tính chuyển tiếp CSS

Sl.NoTài sảnSự mô tả
01. chuyển đổiMột thuộc tính tốc ký để đặt bốn thuộc tính chuyển tiếp thành một thuộc tính duy nhất
02. Transition-DelayChỉ định độ trễ (tính bằng giây) cho hiệu ứng chuyển tiếp
03. Thời gian chuyển tiếpChỉ định số giây hoặc mili giây một hiệu ứng chuyển tiếp để hoàn thành
04. chuyển tiếp-tài sảnChỉ định tên của thuộc tính CSS, hiệu ứng chuyển tiếp dành cho
05. Chuyển đổi thời gian chức năngChỉ định đường cong tốc độ của hiệu ứng chuyển tiếp

Ví dụ: 01

div {
  color: blue;
  text-align: justify;
}
23

Bản demo trực tiếp: Chuyển tiếp CSS: CSS Transitions

Q. Các bộ lọc CSS khác nhau bạn có thể sử dụng là gì?

Thuộc tính CSS bộ lọc áp dụng các hiệu ứng đồ họa như mờ hoặc chuyển màu sang một phần tử. Các bộ lọc thường được sử dụng để điều chỉnh kết xuất hình ảnh, hình nền và đường viền.

Example:

div {
  color: blue;
  text-align: justify;
}
24

Chức năng lọc

Sl.NoLọcSự mô tả
01. chuyển đổiMột thuộc tính tốc ký để đặt bốn thuộc tính chuyển tiếp thành một thuộc tính duy nhất
02. Transition-DelayChỉ định độ trễ (tính bằng giây) cho hiệu ứng chuyển tiếp
03. Thời gian chuyển tiếpChỉ định số giây hoặc mili giây một hiệu ứng chuyển tiếp để hoàn thành
04. chuyển tiếp-tài sảnChỉ định tên của thuộc tính CSS, hiệu ứng chuyển tiếp dành cho
05. Chuyển đổi thời gian chức năngChỉ định đường cong tốc độ của hiệu ứng chuyển tiếp
06. Ví dụ: 01Bản demo trực tiếp: Chuyển tiếp CSS
07. Q. Các bộ lọc CSS khác nhau bạn có thể sử dụng là gì?Thuộc tính CSS bộ lọc áp dụng các hiệu ứng đồ họa như mờ hoặc chuyển màu sang một phần tử. Các bộ lọc thường được sử dụng để điều chỉnh kết xuất hình ảnh, hình nền và đường viền.
08. Chức năng lọcLọc
09. không aiGiá trị mặc định. Chỉ định không có hiệu ứng
10. Blur (PX)Áp dụng hiệu ứng mờ cho hình ảnh. Một giá trị lớn hơn sẽ tạo ra nhiều mờ hơn.
11. độ sáng(%)Điều chỉnh độ sáng của hình ảnh.
12. tương phản(%)Điều chỉnh độ tương phản của hình ảnh.
13. Drop-Shadow (H-Shadow V-Shadow Blur màu)Áp dụng hiệu ứng bóng rơi cho hình ảnh.
14. thang độ xám (%)Chuyển đổi hình ảnh thành thang độ xám.

Hue-ROTATE (DEG)

Tài sảnSự mô tả
Áp dụng một vòng quay màu sắc trên hình ảnh. Giá trị xác định số độ xung quanh vòng tròn màuĐảo ngược (%)
Đảo ngược các mẫu trong hình ảnh.Độ mờ (%)
Đặt mức độ mờ cho hình ảnh. Cấp độ mờ mô tả mức độ minh bạchbão hòa (%)
Bão hòa hình ảnh.SEPIA (%)
Chuyển đổi hình ảnh thành SEPIA.url ()
Hàm URL () lấy vị trí của tệp XML chỉ định bộ lọc SVG và có thể bao gồm neo vào một phần tử bộ lọc cụ thể. Ví dụ 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
98		ban đầu
Đặt thuộc tính này thành giá trị mặc định của nó.thừa kế
Kế thừa thuộc tính này từ phần tử cha của nó.Q. Tranh thủ các thuộc tính phông chữ khác nhau?
kiểu phông chữChỉ định phong cách phông chữ.
Phông chữ-biến thểChỉ định biến thể phông chữ.
Phông chữ-Trọng lượngChỉ định trọng lượng phông chữ.
Drop-Shadow (H-Shadow V-Shadow Blur màu)Áp dụng hiệu ứng bóng rơi cho hình ảnh.
thang độ xám (%)Chuyển đổi hình ảnh thành thang độ xám.

Hue-ROTATE (DEG)

Tài sảnSự mô tả
Áp dụng một vòng quay màu sắc trên hình ảnh. Giá trị xác định số độ xung quanh vòng tròn màuĐảo ngược (%)
Đảo ngược các mẫu trong hình ảnh.Độ mờ (%)
Đặt mức độ mờ cho hình ảnh. Cấp độ mờ mô tả mức độ minh bạchbão hòa (%)
Bão hòa hình ảnh.SEPIA (%)
Chuyển đổi hình ảnh thành SEPIA.url ()
Hàm URL () lấy vị trí của tệp XML chỉ định bộ lọc SVG và có thể bao gồm neo vào một phần tử bộ lọc cụ thể. Ví dụ 
>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
98		ban đầu
Đặt thuộc tính này thành giá trị mặc định của nó.thừa kế
Kế thừa thuộc tính này từ phần tử cha của nó.Q. Tranh thủ các thuộc tính phông chữ khác nhau?
Drop-Shadow (H-Shadow V-Shadow Blur màu)Áp dụng hiệu ứng bóng rơi cho hình ảnh.
thang độ xám (%)Chuyển đổi hình ảnh thành thang độ xám.

Hue-ROTATE (DEG)

Áp dụng một vòng quay màu sắc trên hình ảnh. Giá trị xác định số độ xung quanh vòng tròn màu

  • Đảo ngược (%)

div {
  color: blue;
  text-align: justify;
}
25

div {
  color: blue;
  text-align: justify;
}
26

  • Đảo ngược các mẫu trong hình ảnh.

div {
  color: blue;
  text-align: justify;
}
27

div {
  color: blue;
  text-align: justify;
}
28

Độ mờ (%)

Đặt mức độ mờ cho hình ảnh. Cấp độ mờ mô tả mức độ minh bạch

bão hòa (%)

div {
  color: blue;
  text-align: justify;
}
29

div {
  color: blue;
  text-align: justify;
}
30

Bão hòa hình ảnh.

div {
  color: blue;
  text-align: justify;
}
31

  • SEPIA (%)

Chuyển đổi hình ảnh thành SEPIA.

div {
  color: blue;
  text-align: justify;
}
32

  • Không

Q. Định vị CSS là gì?

Từ khóaGiá trịSự mô tả
Chức vụtĩnhChế độ mặc định, phần tử khối được định vị trong luồng. Top, trái, vv bị bỏ qua.
Chức vụtĩnhChế độ mặc định, phần tử khối được định vị trong luồng. Top, trái, vv bị bỏ qua.
Chức vụtĩnhChế độ mặc định, phần tử khối được định vị trong luồng. Top, trái, vv bị bỏ qua.
Chức vụtĩnhChế độ mặc định, phần tử khối được định vị trong luồng. Top, trái, vv bị bỏ qua.
quan hệPhần tử khối được định vị so với vị trí của nó trong luồng.Tuyệt đối
Phần tử khối được định vị so với container của nó.Phần tử khối được định vị so với vị trí của nó trong luồng.Tuyệt đối
Phần tử khối được định vị so với container của nó.Phần tử khối được định vị so với vị trí của nó trong luồng.Tuyệt đối
Phần tử khối được định vị so với container của nó.Phần tử khối được định vị so với vị trí của nó trong luồng.Tuyệt đối

Phần tử khối được định vị so với container của nó.

đã sửa is applied to the outside of you element hence effecting how far your element is away from other elements.
2) Padding is applied to the inside of your element hence effecting how far your element's content is away from the border.

Phần tử khối được định vị so với cửa sổ và giành được cuộn.

Hướng dẫn css-interview-questions github - css-phỏng vấn-câu hỏi github

đứng đầuTop/Bottom margins are collapsible: if you have a 20px margin at the bottom of an element and a 30px margin at the top of the next element, the margin between the two elements will be 30px rather than 50px. This does not apply to left/right margin or padding.

Số [PX, CM, trong phạm vi]

Vị trí khối xuống từ điểm tham chiếu ở khoảng cách được chỉ định.

  • đáy
  • Vị trí khối lên từ điểm tham chiếu ở khoảng cách được chỉ định.
  • bên trái

Vị trí khối ngay từ điểm tham chiếu ở khoảng cách được chỉ định.

div {
  color: blue;
  text-align: justify;
}
33

bên phải

Hướng dẫn css-interview-questions github - css-phỏng vấn-câu hỏi github

Vị trí khối bên trái từ điểm tham chiếu ở khoảng cách được chỉ định.

div {
  color: blue;
  text-align: justify;
}
34

div {
  color: blue;
  text-align: justify;
}
35

Q. Sự khác biệt giữa đệm và lề là gì?

1) Biên độ được áp dụng cho bên ngoài phần tử của bạn do đó ảnh hưởng đến phần yếu tố của bạn cách xa các phần tử khác.2) Đệm được áp dụng cho bên trong phần tử của bạn do đó ảnh hưởng đến khoảng cách của phần tử của bạn cách xa biên giới.

Example:

div {
  color: blue;
  text-align: justify;
}
36

Ngoài ra, sử dụng ký quỹ sẽ không ảnh hưởng đến kích thước của phần tử của bạn trong khi phần đệm sẽ tạo ra kích thước phần tử của bạn (đặt chiều cao + đệm) vì vậy nếu bạn có div 100x100px với đệm 5 px, div của bạn sẽ thực sự là 105x105px

Lưu ý: lề trên/dưới có thể thu gọn: Nếu bạn có biên độ 20px ở dưới cùng của một phần tử và biên độ 30px ở đầu phần tử tiếp theo, biên độ giữa hai phần tử sẽ là 30px thay vì 50px. Điều này không áp dụng cho lề trái/phải hoặc đệm.

div {
  color: blue;
  text-align: justify;
}
37

Q. Độ dốc trong CSS là gì?

Độ dốc CSS được biểu thị bằng kiểu dữ liệu 

  p {
      color: red;
  }
  
  a {
      color: blue;
  }
03, một loại 
  p {
      color: red;
  }
  
  a {
      color: blue;
  }
04 đặc biệt được thực hiện từ sự chuyển đổi tiến bộ giữa hai hoặc nhiều màu. Có ba loại độ dốc:

div {
  color: blue;
  text-align: justify;
}
38

tuyến tính (được tạo bằng hàm p { color: red; } a { color: blue; }05),

xuyên tâm (được tạo bằng 

  p {
      color: red;
  }
  
  a {
      color: blue;
  }
06) và

  • hình nón (được tạo bằng hàm 
      p {
      color: red;
  }
  
  a {
      color: blue;
  }
    07).    : Android, Chrome, iOS, and Safari
  • Chúng ta cũng có thể tạo độ dốc lặp lại với các hàm 
      p {
      color: red;
  }
  
  a {
      color: blue;
  }
    08, 
      p {
      color: red;
  }
  
  a {
      color: blue;
  }
    09 và 
      p {
      color: red;
  }
  
  a {
      color: blue;
  }
    10.    : Mozilla Firefox
  • Q. Độ mờ CSS là gì?: Internet Explorer
  • Thuộc tính 
    >
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
    49 CSS đặt độ mờ của một phần tử. Độ mờ là mức độ mà nội dung đằng sau một yếu tố bị ẩn, và trái ngược với tính minh bạch.    : Opera

Q. Khái niệm thừa kế được áp dụng trong CSS như thế nào?

Kế thừa là một khái niệm trong đó lớp con sẽ kế thừa các thuộc tính của lớp cha. Nó được sử dụng trong CSS để xác định hệ thống phân cấp từ cấp cao nhất đến cấp dưới. Các thuộc tính được thừa hưởng có thể được ghi đè bởi lớp trẻ em nếu đứa trẻ sử dụng cùng tên.

  • Q. Làm thế nào để bạn xử lý sự khác biệt của trình duyệt trong cơ sở người dùng của bạn?
  • Truy vấn 
      p {
      color: red;
  }
  
  a {
      color: blue;
  }
    12 trong CSS có thể rất hữu ích để quét nếu trình duyệt hiện tại của người dùng có một tính năng nhất định. Quy tắc 
      p {
      color: red;
  }
  
  a {
      color: blue;
  }
    12 cho phép bạn chỉ định các khai báo phụ thuộc vào hỗ trợ của trình duyệt cho một hoặc nhiều tính năng CSS cụ thể. Đây được gọi là một truy vấn tính năng. Quy tắc có thể được đặt ở cấp cao nhất của mã của bạn hoặc được lồng trong bất kỳ nhóm điều kiện nào khác.
  • Q. Cascade là gì?
  • Cascade là một phương pháp xác định trọng lượng (tầm quan trọng) của các quy tắc kiểu dáng riêng lẻ do đó cho phép các quy tắc mâu thuẫn được sắp xếp nếu các quy tắc đó áp dụng cho cùng một bộ chọn.

Hướng dẫn css-interview-questions github - css-phỏng vấn-câu hỏi github

Q. Tiền tố nhà cung cấp CSS là gì?

Các tiền tố của nhà cung cấp là các phần mở rộng cho các tiêu chuẩn CSS có thể được thêm vào các tính năng này để ngăn chặn sự không tương thích phát sinh khi tiêu chuẩn được mở rộng. Tiền tố nhà cung cấp CSS cho một số nền tảng phổ biến được liệt kê dưới đây.

-webkit-: Android, Chrome, iOS và Safari

Phương phápSự mô tả
getEuityByid ()Phương pháp này được sử dụng để có được một phần tử duy nhất bằng ID của nó.
getElementsByClassName ()Phương thức này trả về một mảng các yếu tố.
getElementsByTagName ()Phương pháp này được sử dụng để có được một phần tử bằng tên thẻ của nó
Truy vấnSelector ()Phương thức này trả về phần tử đầu tiên phù hợp với bộ chọn CSS được chỉ định. Nó có thể nhận các phần tử theo ID, lớp, thẻ và tất cả các bộ chọn CSS hợp lệ khác.
Truy vấnSelectorall ()Phương thức này hoàn toàn giống với Truy vấnSelector () ngoại trừ việc nó trả về tất cả các yếu tố phù hợp với bộ chọn CSS.

Thay đổi các yếu tố HTML

Thuộc tính bên trong có thể được sử dụng để thay đổi nội dung của phần tử HTML. Trong ví dụ này, chúng tôi có được phần tử với ID tiêu đề và đặt nội dung bên trong thành "Hello World!".

div {
  color: blue;
  text-align: justify;
}
39

Thay đổi giá trị của một thuộc tính

Chúng ta cũng có thể thay đổi giá trị của một thuộc tính bằng cách sử dụng DOM.

div {
  color: blue;
  text-align: justify;
}
40

Thay đổi phong cách

Để thay đổi phong cách của một yếu tố HTML, chúng ta cần thay đổi thuộc tính kiểu của các yếu tố của chúng ta. Các thuộc tính CSS cần được viết trong Camelcase thay vì tên thuộc tính CSS bình thường.

div {
  color: blue;
  text-align: justify;
}
41

Thêm và xóa các yếu tố

Thêm các yếu tố

Tạo một phần tử Div bằng phương thức 

  p {
      color: red;
  }
  
  a {
      color: blue;
  }
14 lấy tên tagName làm tham số và lưu nó vào một biến. Sau đó, chúng tôi chỉ cần cung cấp cho nó một số nội dung và sau đó chèn nó vào tài liệu DOM của chúng tôi.

div {
  color: blue;
  text-align: justify;
}
42

Ở đây chúng tôi tạo nội dung bằng phương thức 

  p {
      color: red;
  }
  
  a {
      color: blue;
  }
15 lấy một chuỗi làm tham số và sau đó chúng tôi chèn phần tử div mới của chúng tôi trước một div đã tồn tại trong tài liệu của chúng tôi.

Xóa các yếu tố

Ở đây chúng tôi nhận được một phần tử và xóa nó bằng phương pháp 

  p {
      color: red;
  }
  
  a {
      color: blue;
  }
16.

div {
  color: blue;
  text-align: justify;
}
43

Thay thế các yếu tố

div {
  color: blue;
  text-align: justify;
}
44

Ở đây chúng tôi thay thế một phần tử bằng phương pháp 

  p {
      color: red;
  }
  
  a {
      color: blue;
  }
17. Đối số đầu tiên là phần tử mới và đối số thứ hai là phần tử mà chúng tôi muốn thay thế.

Viết trực tiếp vào luồng đầu ra HTML

Chúng ta cũng có thể viết các biểu thức HTML và JavaScript trực tiếp vào luồng đầu ra HTML bằng phương pháp 

  p {
      color: red;
  }
  
  a {
      color: blue;
  }
18. Phương pháp 
  p {
      color: red;
  }
  
  a {
      color: blue;
  }
18 cũng có thể lấy nhiều đối số sẽ được nối vào tài liệu theo thứ tự xảy ra.

div {
  color: blue;
  text-align: justify;
}
45

Người xử lý sự kiện

HTML DOM cũng cho phép JavaScript phản ứng với các sự kiện HTML. Ví dụ: nhấp chuột, tải trang, di chuyển chuột, thay đổi trường đầu vào, v.v.

Gán các sự kiện

Bạn có thể xác định các sự kiện trực tiếp trong mã JS của bạn. Dưới đây là một ví dụ về một sự kiện Onclick:

div {
  color: blue;
  text-align: justify;
}
46

Gán các sự kiện người nghe

Ở đây, chúng tôi chỉ gán một clickevent gọi phương thức RunEvent khi phần tử BTN của chúng tôi được nhấp.

div {
  color: blue;
  text-align: justify;
}
47

Mối quan hệ nút

Các nút trong tài liệu DOM có mối quan hệ phân cấp với nhau. Điều này có nghĩa là các nút được cấu trúc giống như một cây. Chúng tôi sử dụng các thuật ngữ cha mẹ, anh chị em và con để mô tả mối quan hệ giữa các nút.

Nút trên cùng được gọi là gốc và là nút duy nhất không có cha. Root trong tài liệu HTML bình thường là thẻ 

  p {
      color: red;
  }
  
  a {
      color: blue;
  }
20 vì nó không có cha mẹ và là thẻ hàng đầu của tài liệu.

Điều hướng giữa các nút

Chúng ta có thể điều hướng giữa các nút bằng cách sử dụng các thuộc tính này:

  • cha mẹ
  • Trẻ em
  • FirstChild
  • con cuối cùng
  • Nextsibling

Example:

div {
  color: blue;
  text-align: justify;
}
48

Q. Giải thích việc sử dụng thuộc tính "bảng đặt bảng"?

Thuộc tính CSS đặt bảng đặt thuật toán được sử dụng để bố trí các ô, hàng và cột ____331.table-layout CSS property sets the algorithm used to lay out 

>
<html>
  <head>
    <title>Internal CSS Exampletitle>
  <style>
    p {
        color: red;
    }
    
    a {
        color: blue;
    }
style>
...
31 cells, rows, and columns.

Cú pháp

div {
  color: blue;
  text-align: justify;
}
49

Giá trị tài sản

Giá trịSự mô tả
Tự động:Nó được sử dụng để đặt bố cục bảng tự động trên trình duyệt. Thuộc tính này đặt chiều rộng cột bằng nội dung không thể phá vỡ trong các ô.
đã sửa:Nó được sử dụng để đặt bố cục bảng cố định. Độ rộng của bảng và cột được đặt theo chiều rộng của bảng và COL hoặc theo chiều rộng của hàng ô đầu tiên. Các ô trong các hàng khác không ảnh hưởng đến chiều rộng cột. Nếu không có chiều rộng nào có ở hàng đầu tiên, chiều rộng cột được chia đều nhau trên bảng theo nội dung của bảng.
ban đầu:Nó được sử dụng để đặt giá trị mặc định của nó.
thừa kế:Nó được sử dụng để kế thừa tài sản từ cha mẹ của nó.

Example:

div {
  color: blue;
  text-align: justify;
}
50

Bản demo trực tiếp: thuộc tính Layout bảng: Table-layout Property

Lưu ý: Lợi ích chính của 

  p {
      color: red;
  }
  
  a {
      color: blue;
  }
22 là bảng kết xuất nhanh hơn nhiều. Trên các bảng lớn, người dùng sẽ không thấy bất kỳ phần nào của bảng cho đến khi trình duyệt đã hiển thị toàn bộ bảng. Vì vậy, nếu bạn sử dụng 
  p {
      color: red;
  }
  
  a {
      color: blue;
  }
23, người dùng sẽ thấy phần trên cùng của bảng trong khi trình duyệt tải và hiển thị phần còn lại của bảng. Điều này mang lại ấn tượng rằng trang tải nhanh hơn rất nhiều!

Q. Biên độ lợi nhuận hoặc đáy lề có ảnh hưởng đến các yếu tố nội tuyến không

Lợi nhuận trên và dưới không ảnh hưởng đến các phần tử nội tuyến vì các phần tử nội tuyến chảy với nội dung trên trang. Bạn có thể đặt lề trái và bên phải/đệm trên một phần tử nội tuyến nhưng không phải trên hoặc dưới cùng vì nó sẽ phá vỡ luồng nội dung. Bạn có thể đặt lề trên khối (hoặc khối nội tuyến nhưng nó sẽ chỉ trông đúng nếu bạn đặt căn chỉnh dọc đúng) vì các phần tử cấp khối phá vỡ luồng nội dung.

Example:

div {
  color: blue;
  text-align: justify;
}
51

Bản demo trực tiếp: Các yếu tố nội tuyến: Inline Elements

Q. Làm thế nào để calc () hoạt động?

Hàm 

  p {
      color: red;
  }
  
  a {
      color: blue;
  }
24 có thể được sử dụng để thực hiện các tính toán bổ sung, trừ, nhân và phân chia với các giá trị thuộc tính số. Cụ thể, nó có thể được sử dụng với 
<p style="font-weight:bold;">Bold Fontp>
10, 
  p {
      color: red;
  }
  
  a {
      color: blue;
  }
26, 
  p {
      color: red;
  }
  
  a {
      color: blue;
  }
27, 
  p {
      color: red;
  }
  
  a {
      color: blue;
  }
28, 
<p style="font-weight:bold;">Bold Fontp>
08 hoặc 
<p style="font-weight:bold;">Bold Fontp>
07.

Example:

div {
  color: blue;
  text-align: justify;
}
52

Q. Các biến thuộc tính tùy chỉnh CSS có nghĩa là gì?

Các thuộc tính tùy chỉnh (đôi khi được gọi là biến CSS hoặc biến xếp tầng) là các thực thể được xác định bởi các tác giả CSS có chứa các giá trị cụ thể sẽ được sử dụng lại trong suốt tài liệu. Chúng được đặt bằng ký hiệu thuộc tính tùy chỉnh (ví dụ: 

  p {
      color: red;
  }
  
  a {
      color: blue;
  }
31) và được truy cập bằng hàm 
  p {
      color: red;
  }
  
  a {
      color: blue;
  }
32 (ví dụ: 
  p {
      color: red;
  }
  
  a {
      color: blue;
  }
33).CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., 
  p {
      color: red;
  }
  
  a {
      color: blue;
  }
31) and are accessed using the 
  p {
      color: red;
  }
  
  a {
      color: blue;
  }
32 function (e.g., 
  p {
      color: red;
  }
  
  a {
      color: blue;
  }
33).

Tên thuộc tính được đặt trước với 

  p {
      color: red;
  }
  
  a {
      color: blue;
  }
34, như 
  p {
      color: red;
  }
  
  a {
      color: blue;
  }
35, đại diện cho các thuộc tính tùy chỉnh có chứa giá trị có thể được sử dụng trong các khai báo khác bằng hàm 
  p {
      color: red;
  }
  
  a {
      color: blue;
  }
32.

Cú pháp

div {
  color: blue;
  text-align: justify;
}
53

Example:

div {
  color: blue;
  text-align: justify;
}
54

div {
  color: blue;
  text-align: justify;
}
55

Bản demo trực tiếp: Biến thuộc tính tùy chỉnh: Custom Properties Variables

Q. Sự khác biệt giữa các biến CSS và các biến tiền xử lý (SASS, LESS, Stylus) là gì?

Các biến SASS được thay thế bằng các giá trị của chúng vì bộ tiền xử lý tạo ra đầu ra CSS của nó từ lâu trước khi trình duyệt diễn giải mã, trong khi các thuộc tính tùy chỉnh CSS được trình duyệt đánh giá trong thời gian chạy.

Ví dụ: Biến tiền xử lý Preprocessor Variable

div {
  color: blue;
  text-align: justify;
}
56

Mã trên sẽ không làm gì trong trình duyệt. Trình duyệt sẽ không hiểu các tuyên bố và ném chúng ra. Bộ tiền xử lý cần phải biên dịch thành CSS để được sử dụng. Mã này sẽ biên dịch thành:

div {
  color: blue;
  text-align: justify;
}
57

Đây là CSS hợp lệ. Biến là một phần của ngôn ngữ tiền xử lý, không phải CSS. Khi mã biên dịch, các biến đã biến mất.

Ví dụ: Thuộc tính tùy chỉnh CSS CSS Custom Property

CSS gốc đã bắt đầu hỗ trợ các biến CSS hoặc "Thuộc tính tùy chỉnh CSS". Nó cho phép bạn làm việc với các biến trực tiếp trong CSS. Không có biên dịch.

div {
  color: blue;
  text-align: justify;
}
58

Q. Nhà cung cấp-Prefixes là gì?

Tiền tố nhà cung cấp CSS, đôi khi cũng được gọi là hoặc tiền tố trình duyệt CSS, là một cách để các nhà sản xuất trình duyệt thêm hỗ trợ cho các tính năng CSS mới trước khi các tính năng đó được hỗ trợ đầy đủ trong tất cả các trình duyệt.

Ví dụ: 

  p {
      color: red;
  }
  
  a {
      color: blue;
  }
37 thuộc tính 
  p {
      color: red;
  }
  
  a {
      color: blue;
  }
37 property

div {
  color: blue;
  text-align: justify;
}
59

Tiền tố CSS

Các trình duyệt chính sử dụng các tiền tố sau:

  •   p {
      color: red;
  }
  
  a {
      color: blue;
  }
    38 (Chrome, Safari, phiên bản Opera mới hơn, gần như tất cả các trình duyệt iOS bao gồm Firefox cho iOS; Về cơ bản, bất kỳ trình duyệt dựa trên WebKit nào)
  •   p {
      color: red;
  }
  
  a {
      color: blue;
  }
    39 (Firefox)
  •   p {
      color: red;
  }
  
  a {
      color: blue;
  }
    40 (Phiên bản tiền Webkit cũ của Opera)
  •   p {
      color: red;
  }
  
  a {
      color: blue;
  }
    41 (Internet Explorer và Microsoft Edge)

Q. Thuộc tính được sử dụng để kiểm soát việc cuộn hình ảnh là gì?

Thuộc tính gắn nền trong CSS được sử dụng để chỉ định loại đính kèm của hình nền đối với thùng chứa của nó. Nó có thể được đặt thành cuộn hoặc duy trì cố định. Nó có thể được áp dụng cho tất cả các yếu tố HTML.background-attachment property in CSS is used to specify the kind of attachment of the background image with respect to its container. It can be set to scroll or remain fixed. It can be applied to all HTML elements.

Cú pháp

div {
  color: blue;
  text-align: justify;
}
60

Bản demo trực tiếp: Biến thuộc tính tùy chỉnh

Q. Sự khác biệt giữa các biến CSS và các biến tiền xử lý (SASS, LESS, Stylus) là gì?Các biến SASS được thay thế bằng các giá trị của chúng vì bộ tiền xử lý tạo ra đầu ra CSS của nó từ lâu trước khi trình duyệt diễn giải mã, trong khi các thuộc tính tùy chỉnh CSS được trình duyệt đánh giá trong thời gian chạy.
Ví dụ: Biến tiền xử lý
div {
  color: blue;
  text-align: justify;
}
56
Mã trên sẽ không làm gì trong trình duyệt. Trình duyệt sẽ không hiểu các tuyên bố và ném chúng ra. Bộ tiền xử lý cần phải biên dịch thành CSS để được sử dụng. Mã này sẽ biên dịch thành:Đây là CSS hợp lệ. Biến là một phần của ngôn ngữ tiền xử lý, không phải CSS. Khi mã biên dịch, các biến đã biến mất.
Ví dụ: Thuộc tính tùy chỉnh CSSCSS gốc đã bắt đầu hỗ trợ các biến CSS hoặc "Thuộc tính tùy chỉnh CSS". Nó cho phép bạn làm việc với các biến trực tiếp trong CSS. Không có biên dịch.
Q. Nhà cung cấp-Prefixes là gì?Tiền tố nhà cung cấp CSS, đôi khi cũng được gọi là hoặc tiền tố trình duyệt CSS, là một cách để các nhà sản xuất trình duyệt thêm hỗ trợ cho các tính năng CSS mới trước khi các tính năng đó được hỗ trợ đầy đủ trong tất cả các trình duyệt.
Ví dụ: 
  p {
      color: red;
  }
  
  a {
      color: blue;
  }
37 thuộc tính		Tiền tố CSS

Example:

div {
  color: blue;
  text-align: justify;
}
61

Các trình duyệt chính sử dụng các tiền tố sau:: CSS background-attachment

p { color: red; } a { color: blue; }38 (Chrome, Safari, phiên bản Opera mới hơn, gần như tất cả các trình duyệt iOS bao gồm Firefox cho iOS; Về cơ bản, bất kỳ trình duyệt dựa trên WebKit nào)

  p {
      color: red;
  }
  
  a {
      color: blue;
  }
39 (Firefox)

Cú pháp

div {
  color: blue;
  text-align: justify;
}
62

Bản demo trực tiếp: Biến thuộc tính tùy chỉnh

Q. Sự khác biệt giữa các biến CSS và các biến tiền xử lý (SASS, LESS, Stylus) là gì?Các biến SASS được thay thế bằng các giá trị của chúng vì bộ tiền xử lý tạo ra đầu ra CSS của nó từ lâu trước khi trình duyệt diễn giải mã, trong khi các thuộc tính tùy chỉnh CSS được trình duyệt đánh giá trong thời gian chạy.
Ví dụ: Biến tiền xử lý
div {
  color: blue;
  text-align: justify;
}
56
Mã trên sẽ không làm gì trong trình duyệt. Trình duyệt sẽ không hiểu các tuyên bố và ném chúng ra. Bộ tiền xử lý cần phải biên dịch thành CSS để được sử dụng. Mã này sẽ biên dịch thành:Đây là CSS hợp lệ. Biến là một phần của ngôn ngữ tiền xử lý, không phải CSS. Khi mã biên dịch, các biến đã biến mất.
Ví dụ: Biến tiền xử lý
div {
  color: blue;
  text-align: justify;
}
56
Mã trên sẽ không làm gì trong trình duyệt. Trình duyệt sẽ không hiểu các tuyên bố và ném chúng ra. Bộ tiền xử lý cần phải biên dịch thành CSS để được sử dụng. Mã này sẽ biên dịch thành:Đây là CSS hợp lệ. Biến là một phần của ngôn ngữ tiền xử lý, không phải CSS. Khi mã biên dịch, các biến đã biến mất.
Q. Nhà cung cấp-Prefixes là gì?Tiền tố nhà cung cấp CSS, đôi khi cũng được gọi là hoặc tiền tố trình duyệt CSS, là một cách để các nhà sản xuất trình duyệt thêm hỗ trợ cho các tính năng CSS mới trước khi các tính năng đó được hỗ trợ đầy đủ trong tất cả các trình duyệt.
Ví dụ: 
  p {
      color: red;
  }
  
  a {
      color: blue;
  }
37 thuộc tính		Tiền tố CSS
Các trình duyệt chính sử dụng các tiền tố sau:
  p {
      color: red;
  }
  
  a {
      color: blue;
  }
38 (Chrome, Safari, phiên bản Opera mới hơn, gần như tất cả các trình duyệt iOS bao gồm Firefox cho iOS; Về cơ bản, bất kỳ trình duyệt dựa trên WebKit nào)
  p {
      color: red;
  }
  
  a {
      color: blue;
  }
39 (Firefox)
  p {
      color: red;
  }
  
  a {
      color: blue;
  }
40 (Phiên bản tiền Webkit cũ của Opera)

Example:

div {
  color: blue;
  text-align: justify;
}
63

p { color: red; } a { color: blue; }41 (Internet Explorer và Microsoft Edge)

Q. Thuộc tính được sử dụng để kiểm soát việc cuộn hình ảnh là gì?

Cú pháp

div {
  color: blue;
  text-align: justify;
}
64

Bản demo trực tiếp: Biến thuộc tính tùy chỉnh

Q. Sự khác biệt giữa các biến CSS và các biến tiền xử lý (SASS, LESS, Stylus) là gì?Các biến SASS được thay thế bằng các giá trị của chúng vì bộ tiền xử lý tạo ra đầu ra CSS của nó từ lâu trước khi trình duyệt diễn giải mã, trong khi các thuộc tính tùy chỉnh CSS được trình duyệt đánh giá trong thời gian chạy.
Ví dụ: Biến tiền xử lý
div {
  color: blue;
  text-align: justify;
}
56
Mã trên sẽ không làm gì trong trình duyệt. Trình duyệt sẽ không hiểu các tuyên bố và ném chúng ra. Bộ tiền xử lý cần phải biên dịch thành CSS để được sử dụng. Mã này sẽ biên dịch thành:Đây là CSS hợp lệ. Biến là một phần của ngôn ngữ tiền xử lý, không phải CSS. Khi mã biên dịch, các biến đã biến mất.
Q. Nhà cung cấp-Prefixes là gì?Tiền tố nhà cung cấp CSS, đôi khi cũng được gọi là hoặc tiền tố trình duyệt CSS, là một cách để các nhà sản xuất trình duyệt thêm hỗ trợ cho các tính năng CSS mới trước khi các tính năng đó được hỗ trợ đầy đủ trong tất cả các trình duyệt.
Ví dụ: 
  p {
      color: red;
  }
  
  a {
      color: blue;
  }
37 thuộc tính		Tiền tố CSS

Example:

div {
  color: blue;
  text-align: justify;
}
65

Bản demo trực tiếp: thuộc tính bao bọc từ: The word-wrap Property

Q. Khả năng truy cập (A11Y) trong một ứng dụng web là gì?

Khả năng truy cập đề cập đến cách kết hợp phần mềm hoặc phần cứng được thiết kế để làm cho hệ thống có thể truy cập được cho người khuyết tật, chẳng hạn như:

  • Khiếm thị
  • Mất thính lực
  • Sự khéo léo hạn chế

Ví dụ, một trang web được phát triển với khả năng truy cập trong tâm trí có thể có khả năng hoặc đầu ra bằng văn bản thành giọng nói cho phần cứng chữ nổi đặc biệt hướng đến những người bị khiếm thị.

Q. UI/UX là gì?

1) Giao diện UI hoặc người dùng: Là cách một sản phẩm hoặc trang web được đặt ra và cách bạn tương tác với nó: nơi các nút ở đâu, phông chữ lớn như thế nào và các menu được tổ chức như thế nào là tất cả các yếu tố của UI.: is how a product or website is laid out and how you interact with it: Where the buttons are, how big the fonts are, and how menus are organized are all elements of UI.

2) UX hoặc Trải nghiệm người dùng: Là cách bạn cảm nhận về việc sử dụng sản phẩm hoặc trang web. Vì vậy, tình yêu của bạn đối với cách mà Apple Watch mới trông hoặc sự phấn khích của bạn mà cuối cùng có một chiếc iPhone có kích thước bằng máy tính bảng để xem những video Corgi mà bạn bị ám ảnh bởi những phản ánh của UX. Vì vậy, giao diện mới của nguồn cấp tin tức trên Facebook liên quan đến việc thay đổi UI và cách bạn điều hướng trang mới đó là UX.: is how you feel about using a product or a website. So, your love for the way the new Apple Watch looks or your excitement that there’s finally a tablet-sized iPhone to watch those Corgi videos you’re obsessed with are reflections of UX. So the new look of the Facebook news feed involves a change to UI, and the way you navigate that new page is the UX.

Q. Làm thế nào để bạn phục vụ các trang của bạn cho các trình duyệt bị hạn chế tính năng? Bạn sử dụng những kỹ thuật nào?

  • Sự xuống cấp duyên dáng: Việc thực hành xây dựng một ứng dụng cho các trình duyệt hiện đại trong khi đảm bảo nó vẫn hoạt động trong các trình duyệt cũ hơn.: The practice of building an application for modern browsers while ensuring it remains functional in older browsers.
  • Tăng cường tiến bộ: Thực tiễn xây dựng một ứng dụng cho mức độ cơ sở của trải nghiệm người dùng, nhưng thêm các cải tiến chức năng khi trình duyệt hỗ trợ nó.: The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.
  • Caniuse: Để kiểm tra hỗ trợ tính năng.: to check for feature support.
  • Autoprefixer: Để chèn tiền tố nhà cung cấp tự động.: for automatic vendor prefix insertion.
  • Phát hiện tính năng: Sử dụng Modernizr.: using Modernizr.
  • Truy vấn tính năng CSS: Sử dụng @support: using @support

Q. Các cách khác nhau để ẩn nội dung trực quan (và chỉ có sẵn cho đầu đọc màn hình) là gì?

Những kỹ thuật này có liên quan đến khả năng tiếp cận (A11Y).

  •   p {
      color: red;
  }
  
  a {
      color: blue;
  }
    42: Tuy nhiên, phần tử vẫn nằm trong luồng của trang và vẫn chiếm không gian.
  •   p {
      color: red;
  }
  
  a {
      color: blue;
  }
    43: Làm cho phần tử không chiếm bất kỳ khoảng trống nào trên màn hình, dẫn đến việc không hiển thị nó.
  •   p {
      color: red;
  }
  
  a {
      color: blue;
  }
    44: Định vị nó bên ngoài màn hình.
  •   p {
      color: red;
  }
  
  a {
      color: blue;
  }
    45: Điều này chỉ hoạt động trên văn bản trong các yếu tố 
      p {
      color: red;
  }
  
  a {
      color: blue;
  }
    46.
  • Siêu dữ liệu: Ví dụ bằng cách sử dụng lược đồ.org, RDF và JSON-LD.: For example by using Schema.org, RDF, and JSON-LD.
  • WAI-ARIA: Một đặc tả kỹ thuật của W3C chỉ định cách tăng khả năng truy cập của các trang web.: A W3C technical specification that specifies how to increase the accessibility of web pages.

Q. Tách tệp là gì? Nó được sử dụng khi nào?

Một tập tin nguyên khối là tốt cho các nhà phát triển solo hoặc các dự án rất nhỏ. Đối với các dự án lớn, các vị trí với nhiều bố cục và loại nội dung, hoặc nhiều thương hiệu dưới cùng một chiếc ô thiết kế, đó là thông minh hơn để sử dụng phương pháp mô -đun và chia CSS của bạn trên nhiều tệp.

  • RESET.CSS: Kiểu đặt lại và chuẩn hóa; Màu tối thiểu, đường viền hoặc khai báo liên quan đến phông chữ: reset and normalization styles; minimal color, border, or font-related declarations
  • typography.css: mặt phông chữ, trọng lượng, độ cao dòng, kích thước và kiểu dáng cho các tiêu đề và văn bản cơ thể: font faces, weights, line heights, sizes, and styles for headings and body text
  • Bố cục.css: Kiểu quản lý bố cục và phân đoạn trang, bao gồm cả lưới: styles that manage page layouts and segments, including grids
  • Forms.css: Kiểu cho các điều khiển biểu mẫu và nhãn: styles for form controls and labels
  • lists.css: Kiểu cụ thể danh sách: list-specific styles
  • Bảng.css: Kiểu cụ thể theo bảng: table-specific styles
  • Carousel.css: Kiểu cần thiết cho các thành phần băng chuyền: styles required for carousel components
  • accordion.css: Kiểu cho các thành phần accordion: styles for accordion components

Các khung CSS như Foundation và Bootstrap sử dụng phương pháp này. Cả hai trở nên khá chi tiết với các tệp riêng biệt cho các thanh tiến trình, đầu vào phạm vi, nút đóng và chú giải công cụ. Điều này cho phép các nhà phát triển chỉ bao gồm các thành phần mà họ cần cho một dự án.

Q. Dom Reflow là gì?

Reflow là tên của quy trình trình duyệt web để tính toán lại các vị trí và hình học của các phần tử trong tài liệu, với mục đích hiển thị lại phần hoặc tất cả các tài liệu.

Reflow xảy ra khi

  • Chèn, xóa hoặc cập nhật một phần tử trong DOM
  • Sửa đổi nội dung trên trang, ví dụ: văn bản trong hộp đầu vào
  • Di chuyển một phần tử DOM
  • làm động một phần tử DOM
  • thực hiện các phép đo của một yếu tố như OffSetheight hoặc GetComputedStyle
  • Thay đổi kiểu CSS
  • Thay đổi tên lớp của một phần tử
  • Thêm hoặc xóa một bảng kiểu
  • Thay đổi kích thước cửa sổ
  • cuộn

Tối thiểu hóa trình duyệt phản xạ

  • Giảm độ sâu DOM không cần thiết. Những thay đổi ở một cấp độ trong cây Dom có ​​thể gây ra những thay đổi ở mọi cấp độ của cây - tất cả các cách lên đến gốc và tất cả các cách xuống trẻ em của nút đã được sửa đổi. Điều này dẫn đến nhiều thời gian hơn để thực hiện Reflow.
  • Giảm thiểu các quy tắc CSS và xóa các quy tắc CSS chưa sử dụng.
  • Nếu bạn thực hiện các thay đổi kết xuất phức tạp như hình ảnh động, hãy làm như vậy ra khỏi luồng. Sử dụng vị trí-absolute hoặc cố định vị trí để thực hiện điều này.
  • Tránh các bộ chọn CSS phức tạp không cần thiết - đặc biệt là bộ chọn Hậu duệ - đòi hỏi nhiều năng lượng CPU hơn để phù hợp với bộ chọn.

Q. CSS hoạt động như thế nào dưới mui xe?

Ngôn ngữ CSS được thiết kế để được sử dụng cùng với ngôn ngữ "đánh dấu" như HTML. CSS xác định cách các phần tử HTML được định dạng - kiểm soát bố cục, màu sắc, phông chữ của chúng, v.v. Khi trình duyệt hiển thị tài liệu, nó phải kết hợp nội dung của tài liệu với thông tin kiểu của nó. Nó xử lý tài liệu trong một số giai đoạn mà chúng tôi đã liệt kê dưới đây.

  1. Trình duyệt tải HTML (ví dụ: nhận nó từ mạng).
  2. Nó chuyển đổi HTML thành DOM (mô hình đối tượng tài liệu).
  3. Sau đó, trình duyệt tìm kiếm hầu hết các tài nguyên được liên kết bởi tài liệu HTML, chẳng hạn như hình ảnh và video nhúng và CSS được liên kết.
  4. Trình duyệt phân tích các CSS được tìm nạp và sắp xếp các quy tắc khác nhau theo các loại chọn của chúng thành các "thùng" khác nhau, ví dụ: yếu tố, lớp, id, v.v. Dựa trên các bộ chọn mà nó tìm thấy, nó sẽ áp dụng các quy tắc nào nên được áp dụng cho các nút trong DOM và gắn kiểu cho chúng theo yêu cầu (bước trung gian này được gọi là cây kết xuất).
  5. Cây kết xuất được đặt trong cấu trúc nó sẽ xuất hiện sau khi các quy tắc đã được áp dụng cho nó.
  6. Màn hình trực quan của trang được hiển thị trên màn hình (giai đoạn này được gọi là vẽ).

Biểu đồ sau đây cũng cung cấp một cái nhìn đơn giản về quy trình.

Hướng dẫn css-interview-questions github - css-phỏng vấn-câu hỏi github

DOM và CSSOM:

Một DOM có cấu trúc giống như cây. Mỗi phần tử, thuộc tính và đoạn văn bản trong ngôn ngữ đánh dấu trở thành một nút DOM trong cấu trúc cây. Các nút được xác định bởi mối quan hệ của chúng với các nút DOM khác. Một số yếu tố là cha mẹ của các nút con và các nút con có anh chị em. Trình duyệt trải qua một quy trình bao gồm chuyển đổi, mã thông báo, từ vựng và phân tích cú pháp cuối cùng xây dựng DOM và CSSOM.

  • Chuyển đổi: Đọc các byte thô của HTML và CSS ngoài đĩa hoặc mạng.: Reading raw bytes of HTML and CSS off the disk or network.
  • Mã thông báo: Breaking Input vào các khối (ví dụ: thẻ bắt đầu, thẻ kết thúc, tên thuộc tính, giá trị thuộc tính), các ký tự không liên quan sọc như khoảng trắng và ngắt dòng.: Breaking input into chunks (ex: start tags, end tags, attribute names, attribute values), striping irrelevant characters such as whitespace and line breaks.
  • Lexing: Giống như tokenizer, nhưng nó cũng xác định loại mã thông báo (mã thông báo này là một số, mã thông báo là một chuỗi theo nghĩa đen, mã thông báo khác là một toán tử bình đẳng).: Like the tokenizer, but it also identifies the type of each token (this token is a number, that token is a string literal, this other token is an equality operator).
  • Phân tích cú pháp: Lấy luồng mã thông báo từ Lexer, diễn giải các mã thông báo bằng cách sử dụng một ngữ pháp cụ thể và biến nó thành một cây cú pháp trừu tượng.: Takes the stream of tokens from the lexer, interprets the tokens using a specific grammar, and turns it into an abstract syntax tree.

Ví dụ: Đại diện DOM DOM Representation

div {
  color: blue;
  text-align: justify;
}
66

Trong DOM, nút tương ứng với phần tử 

div {
  color: blue;
  text-align: justify;
}
88 của chúng tôi là cha mẹ. Trẻ em của nó là một nút văn bản và ba nút tương ứng với các yếu tố 
<p style="font-weight:bold;">Bold Fontp>
32 của chúng tôi. Các nút nhịp cũng là cha mẹ, với các nút văn bản là con cái của họ:

div {
  color: blue;
  text-align: justify;
}
67

Áp dụng CSS cho DOM

div {
  color: blue;
  text-align: justify;
}
68

Khi cả hai cấu trúc cây được tạo, công cụ kết xuất sau đó gắn các cấu trúc dữ liệu vào cái được gọi là cây kết xuất như là một phần của quá trình bố cục. Cây kết xuất là một biểu diễn trực quan của tài liệu cho phép vẽ nội dung của trang theo thứ tự chính xác của chúng.

Kết xuất xây dựng cây theo thứ tự sau:

  • Bắt đầu từ gốc của cây dom, đi qua từng nút có thể nhìn thấy.
  • Bỏ qua các nút không nhìn thấy được.
  • Đối với mỗi nút hiển thị, hãy tìm các quy tắc CSSOM phù hợp và áp dụng chúng.
  • Phát ra các nút có thể nhìn thấy với nội dung và kiểu tính toán của chúng.
  • Cuối cùng, xuất ra một cây kết xuất chứa cả thông tin nội dung và kiểu dáng của tất cả nội dung hiển thị trên màn hình.

programming css Java-interview questions GitHub CSS interview questions Sudheer github JavaScript Interview Questions HTML Interview Questions

Bài Viết Liên Quan

Ôn tập tập làm văn lớp 9 kì 1 năm 2024
Ôn tập tập làm văn lớp 9 kì 1 năm 2024

mẹo hay
Bài tập nâng cao tổng hợp và phân tích lực năm 2024
Bài tập nâng cao tổng hợp và phân tích lực năm 2024

mẹo hay Khỏe Đẹp Bài tập Cryto Phân tích
Tổng hợp tài liệu chuyên ngành tiếng anh là gì năm 2024
Tổng hợp tài liệu chuyên ngành tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh
Các bài toán tính nhanh lớp 6 violet năm 2024
Các bài toán tính nhanh lớp 6 violet năm 2024

mẹo hay
Các ngân hàng nào có mã thanh toán qr pay năm 2024
Các ngân hàng nào có mã thanh toán qr pay năm 2024

mẹo hay Khoa Học Ngân hà
Bãi đỗ xe tự động ở lê văn lương năm 2024
Bãi đỗ xe tự động ở lê văn lương năm 2024

mẹo hay
Ngứa lỗ tai trái là bệnh gì năm 2024
Ngứa lỗ tai trái là bệnh gì năm 2024

là ai Ngứa tai phải
Giáo trình hóa học xanh phan thanh sơn nam năm 2024
Giáo trình hóa học xanh phan thanh sơn nam năm 2024

mẹo hay Học Tốt Học
Inox 304 khác inox 201 như thế nào năm 2024
Inox 304 khác inox 201 như thế nào năm 2024

mẹo hay Hỏi Đáp Thế nào
Paint the town red là gì năm 2024
Paint the town red là gì năm 2024

là ai Hỏi Đáp Là gì Tape là gì
Câu hỏi trắc nghiệm toán 6 chương 1 violet năm 2024
Câu hỏi trắc nghiệm toán 6 chương 1 violet năm 2024

mẹo hay
Khoa kinh doanh quốc tế tên tiếng anh là gì năm 2024
Khoa kinh doanh quốc tế tên tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh International business
Lich su hoat dong trai nghiem môn hóa học tailieu.vn năm 2024
Lich su hoat dong trai nghiem môn hóa học tailieu.vn năm 2024

mẹo hay Học Tốt Học Giới Tính Trai
Bài 162 trang 65 sgk lớp.6 tập 2 năm 2024
Bài 162 trang 65 sgk lớp.6 tập 2 năm 2024

mẹo hay
Giải bài 4 trang 100 sgk toán 9 tập 1 năm 2024
Giải bài 4 trang 100 sgk toán 9 tập 1 năm 2024

mẹo hay
Đau đầu vào buổi chiều tối là bệnh gì năm 2024
Đau đầu vào buổi chiều tối là bệnh gì năm 2024

là ai Đau đỉnh đầu
Bằng fe được lái những loại xe nào năm 2024
Bằng fe được lái những loại xe nào năm 2024

mẹo hay
Phương pháp nhân giống thuần chủng là gì năm 2024
Phương pháp nhân giống thuần chủng là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Phương pháp
Bài tập 3 trang 92 địa lí 10 năm 2024
Bài tập 3 trang 92 địa lí 10 năm 2024

mẹo hay Khỏe Đẹp Bài tập
Soạn văn bài học đường đời đầu tiên lớp 6 năm 2024
Soạn văn bài học đường đời đầu tiên lớp 6 năm 2024

mẹo hay Học Tốt Học

Quảng Cáo

Có thể bạn quan tâm

Giải bài tập sách giáo khoa lớp 6 năm 2024
1 ngày trước . bởi OutdatedAbsurdity
Đèn thái cực và đèn lưỡng nghi là gì năm 2024
1 ngày trước . bởi UnsuspectingAssembly
Cf ai3 vực tử thần nên dùng súng nào năm 2024
1 ngày trước . bởi WashedRedemption
Cơ sở giáo dục thường xuyên là gì năm 2024
1 ngày trước . bởi ConcentricRunoff
Sửa lỗi gõ mất chữ tiếng việt trong năm 2024
1 ngày trước . bởi AuburnObserver
Nữ 1986 hợp làm ăn với tuổi nào năm 2024
1 ngày trước . bởi UnfulfilledTechnology
Trung tâm công nghiệp lớn nhất nước ta là gì năm 2024
1 ngày trước . bởi StarkSpoiler
Ca ch che p văn hay khi phân ti ch năm 2024
1 ngày trước . bởi PerfunctoryCovering
Chứng từ hàng hóa gia công trong nước năm 2024
1 ngày trước . bởi AnalogousViewpoint

Toplist được quan tâm

#1
Top 9 tập bản đồ lớp 8 bài 31 2023
6 tháng trước
#2
Top 6 kết quả thi hsg đà nẵng 2022 2023
6 tháng trước
#3
Top 9 tủ nhựa đài loan 4 cánh 3d 2023
6 tháng trước
#4
Top 9 chất khí có thể làm mất màu dung dịch nước brom là: a. so2. b. co2. c. o2. d. hcl. 2023
6 tháng trước
#5
Top 8 tìm việc làm tiện, phay bảo q7 2023
6 tháng trước
#6
Top 3 tôi xuyên thành tiểu kiều the của lão đại phản 2 2023
6 tháng trước
#7
Top 9 đổi mới phong cách, thái độ phục vụ của cán bộ y tế hướng tới sự hài lòng của người bệnh 2023
6 tháng trước
#8
Top 2 bài the dục phát triển chung lớp 6 2022 2023
6 tháng trước
#9
Top 3 bài giảng vũ điệu sắc màu (lớp 4) 2023
6 tháng trước

Quảng cáo

Xem Nhiều

Bài tập cấu hình electron nguyên tử khó năm 2024
1 tuần trước . bởi HumidTiger
Nghiệp vụ tín dụng ngân hàng là gì năm 2024
1 tuần trước . bởi NutritionalBuilding
Lý luận mác lênin có phải đã lỗi thời năm 2024
2 ngày trước . bởi HereticalEmperor
Mục đích sử dụng đất 2l 19 năm là gì năm 2024
1 tuần trước . bởi UnreliableBounds
Lỗi font chữ trong tiêu đề thư trong outlook 2007 năm 2024
3 ngày trước . bởi DetectableRefrigerator
Ngày 14 3 là ngày gì năm 2024
1 tuần trước . bởi UnrealConspiracy
Lỗi không cài dat dirve may in sp7000 năm 2024
3 ngày trước . bởi LaxMetaphysics
Viết một đoạn văn tả cây bóng mát năm 2024
2 ngày trước . bởi DeposedAircraft
Lỗi trùng chưng minh thư của người phụ thuộc năm 2024
2 ngày trước . bởi UnholyFrigate
Phí chuyển đổi quỹ liên kết đơn vị là gì năm 2024
1 tuần trước . bởi High-riseCoaster

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 Xây Nhà Inc.