Có nhiều cách để thêm CSS vào trang web.

Dẫn link từ file bên ngoài

<link rel="stylesheet" type="text/css" href="mystyles.css" />

Nhúng với thẻ <style>

<style type="text/css">

/*Add style rules here*/

</style>

Thêm trực tiếp vào phần tử HTML nhờ thuộc tính style

<h2 style="color:red;background:black">Inline Style</h2>

CSS Selector giống như là đường đẫn, chỉ định để cho CSS biết bạn đang muốn điều chỉnh, tạo kiểu cho phần tử HTML nào vậy.

Universal Selector: hoạt động như một ký tự đại diện cho tất cả phần tử trong trang. Trong ví dụ này, các style được cung cấp sẽ được áp dụng cho tất cả các phần tử trên trang.

* {
    color: "green";
    font-size: 20px;
    line-height: 25px;
}

Element Type Selector: selector loại này ứng với một hoặc nhiều phần tử HTML cùng tên. Trong ví dụ này, các style được cung cấp sẽ được áp dụng cho tất cả các phần tử ul trên trang.

ul {
    line-style: none;
    border: solid 1px #ccc;
}

ID Selector: selector này ứng với bất kỳ phần tử HTML nào có thuộc tính ID có cùng giá trị với giá trị của selector. Trong ví dụ này, các style được cung cấp sẽ được áp dụng cho tất cả các phần tử có ID trùng trên trang.

#container {
    width: 960px;
    margin: 0 auto;
}

<div id="container"></div>

Class Selector: tương tự như ID Selector nhưng thay vì ứng với ID thì nó ứng với thuộc tính class. Trong ví dụ này, các style được cung cấp sẽ áp dụng cho tất cả phần tử có cùng tên lớp.

.box {
    padding: 10px;
    margin: 10px;
    width: 240px;
}

<div class="box"></div>

Descendant Combinator: giúp bạn kết hợp hai hoặc nhiều selector để có thể chỉ định phần tử cụ thể.

#container .box {
	float: left;
	padding-bottom: 15px;
} 

<div id="container">
	<div class="box"></div>
	
	<div class="box-2"></div>
</div>

<div class="box"></div>

Khối khai báo này sẽ áp dụng cho tất cả các phần tử có lớp box nằm bên trong phần tử có ID là container. Cần lưu ý rằng phần tử .box không nhất thiết phải là phần tử con, nó có thể có một phần tử khác bao bọc .box và các style vẫn sẽ áp dụng.

Child Combinator: selector sử dụng bộ child combinator tương tự như descendant combinator, ngoại trừ việc nó chỉ nhắm đến các phần tử con.

#container> .box {
	float: left;
	padding-bottom: 15px;
}

<div id="container">
	<div class="box"></div>
	
	<div>
		<div class="box"></div>
	</div>
</div>

Selector sẽ ứng với tất cả phần tử có lớp box và là phần tử con của phần tử có id là container. Điều đó có nghĩa là các phần tử lớp box không phải là phần tử con của container sẽ không được áp dụng.

General Sibling Combinator: selector này so với các phần tử có quan hệ anh chị em với phần tử tương ứng.

h2 ~ p {
	margin-bottom: 20px;
}

<h2>Title</h2>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<div class="box">
	<p>Paragraph example.</p>
</div>

Trong ví dụ này, tất cả các phần tử văn bản (<p>) sẽ được áp dụng style với các quy tắc đã chỉ định, nhưng chỉ khi chúng là anh chị em của các phần tử <h2>. Có thể có các phần tử khác ở giữa <h2> và <p> và các style sẽ vẫn áp dụng.

Adjacent Sibling Combinator:: selector sử dụng ký tự + và gần giống với General Sibling Combinator. Sự khác biệt là phần tử được nhắm phải là anh chị ruột thịt chứ không phải enh chị em chung chung.

p + p {
	text-indent: 1.Sem;
	margin-bottom: 0;
}

<h2>Title</h2>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<p>Paragraph example.</p>

<div class=”box”>
	<p>Paragraph example.</p>
	<p>Paragraph example.</p>
</div>

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

Attribute Selector: nhắm đến các phần tử dựa trên sự xuất hiện và giá trị của thuộc tính HTML. Được khai báo bằng dấu ngoặc vuông.

input [type=”text”] {
	background-color: #444;
	width: 200px;
}

<input type="text">

• id là duy nhất. Mỗi phần tử chỉ có thể có một id và trang HTML chỉ có thể có một phần tử có id đó
• class thì ngược lại. Bạn có thể sử dụng cùng một class trên nhiều phần tử và một phần tử có thể có nhiều class.
• Mọi thông tin tạo kiểu cần được áp dụng cho nhiều đối tượng trên một trang nên được thực hiện với một class.

Block: Các phần tử block luôn bắt đầu trên một dòng mới. Chúng cũng sẽ chiếm không gian trên toàn bộ hàng hay chiều rộng. Danh sách các phần tử block là <div>, <p>.

Inline: Các phần tử inline không bắt đầu trên dòng mới, mà nó xuất hiện cùng dòng với các thẻ bên cạnh chúng. Ví dụ các phần tử inline là <span>, <strong> và <img>.

Inline Block: Các phần tử inline-block tương tự inline, ngoại trừ chúng có thể có phần padding và margin và đặt các giá trị height và width.

CSS box model là một mô hình bố cục hình chữ nhật cho các phần tử HTML bao gồm những điều sau:

• Content - Nội dung của box, nơi text và images xuất hiện.
• Padding - Vùng trong suốt bao quanh content (tức là khoảng cách giữa border và content).
• Border - Đường viền bao quanh padding (nếu có) và content.
• Margin - Một vùng trong suốt bao quanh border (tức là khoảng cách giữa border và bất kỳ phần tử lân cận nào).

Chúng ta có thể sử dụng thuộc tính font-family để thực hiện được điều này. Thuộc tính font-family được sử dụng để chỉ định phông chữ nào cần được áp dụng trên phần tử DOM. Nó có thể chứa một số tên phông chữ như một phần của cơ chế “dự phòng” trong trường hợp trình duyệt không hỗ trợ phông chữ. Ví dụ, chúng ta có thể sử dụng:

p {
    font-family: "Times New Roman", Times, serif;
}

Trong đoạn code trên, ta đang áp dụng thuộc tính font-family cho phần tử đoạn văn.

• Nó yêu cầu trình duyệt tìm kiếm phông chữ “Times New Roman” và áp dụng nó.
• Nếu phông chữ “Times New Roman” không được cài đặt hoặc hỗ trợ, thì nó sẽ yêu cầu trình duyệt sử dụng phông chữ Times.
• Nếu cả “Times New Roman” và “Times” đều không được hỗ trợ, thì nó sẽ yêu cầu trình duyệt sử dụng bất kỳ phông chữ chung nào được hỗ trợ thuộc serif.

Nếu bạn không muốn font-face của phần tử văn bản là phông chữ Times New Roman/ Times/serif và bạn muốn sử dụng phông chữ Arial/Helvetica/sans-serif, thì ta có thể cập nhật thuộc tính CSS của phần tử văn bản như:

p {
    font-family: Arial, Helvetica, sans-serif;
}

Phần tử pseudo cho phép ta tạo các mục thường không tồn tại trong DOM.

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

Trong ví dụ bên dưới, màu sẽ xuất hiện ở dòng đầu tiên trong đoạn văn

p::first-line {
	color: #ffOOOO;
	font-variant: small-caps;
}

Lớp pseudo chọn các phần tử thông thường nhưng trong các điều kiện nhất định như khi người dùng di chuột qua liên kết.

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

Trong ví dụ này, màu xuất hiện khi bạn di chuyển chuột qua thẻ liên kết.

/* mouse over link */
a:hover {
	color: #FFOOFF;
}

CSS hoạt động khác biệt cho từng trình duyệt

Với những thay đổi ban đầu của CSS trên một website rất dễ dàng. Tuy nhiên, khi thay đổi đã được thực hiện đòi hỏi chúng ta phải xác nhận được tính tương thích khi CSS hiển thị hiệu ứng thay đổi tương tự cho từng trình duyệt. Điều này xuất hiện do CSS sẽ hoạt động khác biệt cho từng trình duyệt cụ thể.

Khá khó khăn cho người mới

Ngôn ngữ lập trình phát triển đa dạng và vô cùng phúc tạp, đặc biệt là khó khăn với những người mới bắt đầu. Bởi thế, với nhiều cấp độ của CSS thì việc tìm hiểu, có thể nắm bắt để sử dụng càng trở nên khó khăn hơn.

Định dạng của web có khả năng gặp rủi ro

CSS là hệ thống dựa trên văn bản mở nên việc truy cập khá dễ dàng. Điều này khiến định dạng toàn bộ của web hoàn toàn có thể chịu tổn thương, gặp gián đoạn khi có hành động, hoặc tai nạn nào xảy ra với tệp. Lúc này nó sẽ yêu cầu truy cập đọc hoặc ghi vào web dự định để có thể ghi đè lên được các thay đổi.

Trong CSS, các khung framework đơn giản là các thư viện của các tệp được tạo trước có thể được sử dụng trong thiết kế các trang web yêu cầu một số thiết kế CSS mặc định, phổ biến hơn.

Đây là một đơn vị CSS được sử dụng để đo chiều cao và chiều rộng theo tỷ lệ phần trăm đối với viewport. Nó được sử dụng chủ yếu trong các kỹ thuật thiết kế reponsive. Số đo VH bằng 1/100 chiều cao của viewport. Nếu chiều cao của trình duyệt là 1000px, thì 1vh bằng 10px. Tương tự, nếu chiều rộng là 1000px, thì 1 vw bằng 10px.

• Cách 1: sử dụng opacity: 0;
• Cách 2: sử dụng visibility: hidden;
• Cách 3: sử dụng display: none;

• Tiết kiệm thời gian, công sức trong việc code web/xây dựng giao diện; kiểm soát dễ dàng các lỗi không đáng có trên web
• CSS cung cấp nhiều thuộc tính cụ thể hơn HTML giúp tạo ra nhiều style khác nhau và có thể áp dụng được cho nhiều loại web.
• CSS giúp tốc độ tải trang web nhanh chóng hơn, dễ dàng bảo trì, tương thích với các thiết bị di động.
• CSS thiết lập nhiều kiểu chữ khác nhau giúp website của bạn trở nên khác biệt hơn; tự động sắp xếp chữ khi chèn hình ảnh (thuộc tính shape-outsite); đặt nội dung theo các chiều khác nhau/ thay đổi chế độ viết theo mong muốn của mình (thuộc tính write-mode); có thể tạo chữ lớn ở đầu dòng (thuộc tính first-letter)…

Margin: Nó là không gian xung quanh một phần tử. Margin được sử dụng để di chuyển một phần tử lên hoặc xuống trên một trang cũng như sang trái hoặc sang phải. Margin hoàn toàn trong suốt và không có bất kỳ màu nền nào. Mục đích chính của margin là đẩy các phần tử liền kề ra xa khỏi phần tử có chứa thuộc tính margin.

Ta có các thuộc tính sau cho margin:

• margin-top
• margin-right
• margin-bottom
• margin-left

Các giá trị mà thuộc tính có thể có:

• auto – Trình duyệt tự động tính toán margin khi ta sử dụng.
• length – Giá trị có thể là px, pt, cm, em,… các giá trị có thể âm hoặc dương.
• % - Ta cũng có thể cung cấp giá trị phần trăm cho margin
• inherit - sử dụng giá trị từ phần tử cha.

Padding : Nó là khoảng trống giữa phần tử và nội dung liên quan bên trong nó. Padding xác định các phần tử sẽ trông như thế nào và cách chúng sẽ được đặt bên trong một container.Khi phần tử có thuộc tính padding thì khoảng trống giữa nội dung bên trong phần tử với lề của phần tử đó sẽ tăng lên và background của padding sẽ phụ thuộc vào background của phần tử. Khi thêm padding thì kích thước của phần tử có thể thay đổi, mặc định thì kích thước của nó sẽ tăng lên.

Padding có các thuộc tính con sau:

• padding-top
• padding-right
• padding-bottom
• padding-left

Lưu ý: padding không có giá trị âm.

Cascading Style Sheets (thường được gọi đơn giản là CSS ) là ngôn ngữ được sử dụng để giải thích và mô tả cách thức những cái được viết bằng ngôn ngữ đánh dấu (như HTML) nên được hiển thị.

Nói một cách đơn giản, CSS được sử dụng để trực quan hóa những thứ được viết bằng HTML, chẳng hạn như hình ảnh, phông chữ, hình nền, v.v.

Khi nói đến các câu hỏi phỏng vấn CSS cơ bản như vậy, các nhà tuyển dụng thường tìm kiếm những người có thể giải thích bằng ngôn từ của chính họ chứ không phải là đọc thuộc lòng như robot. Đó là lý do tại sao bạn nên cố gắng học CSS từ các định nghĩa đơn giản nhất!

• Khi học về CSS, bạn sẽ biết được là có hai cách chỉ định màu - RGB (red-đỏ, green-xanh lá, và blue-xanh lam) và mã hexadecimal color (mã màu thập lục phân).
• RGB (red, green, and blue) là viết tắt của màu đỏ, xanh lá cây và xanh dương. Sự kết hợp khác nhau của các màu này (tùy thuộc vào tỷ lệ phần trăm của mỗi màu được sử dụng) có thể tạo ra nhiều màu sắc khác nhau.
• Mã hexadecimal color (mã màu thập lục phân) là một mã đại diện cho một màu sắc cụ thể. Các mã này được tạo thành từ sáu chữ cái và số khác nhau (mỗi sự kết hợp đại diện cho một màu khác nhau).

Dùng để đặt các thẻ HTML theo hướng nằm ngang, float thường dùng 2 giá trị left và right.

• div, p: chọn tất cả các thẻ div và tất cả các thẻ p.
• div p: chọn tất cả các thẻ p nằm trong thẻ div.
• div > p: chọn tất cả thẻ p có thẻ cha trực tiếp là thẻ div.
• div + p: chọn tất cả thẻ p cùng cấp với thẻ div và được đặt trực tiếp sau thẻ div.
• div ~ p: chọn tất cả thẻ p cùng cấp với thẻ div

Đơn vị tương đối - Relative Units

• % (percentages): Đơn vị tương đối về kích thước của phần tử con so với phần tử mẹ (parrent). Ví dụ: Nếu phần tử mẹ có thuộc tính width:500px, phần tử con có thuộc tính width:50% thì có nghĩa là phần tử con có thuộc tính width:250px
• em: Là đơn vị tương đối dựa vào thuộc tính font-size của phần tử mẹ. Ví dụ: Nếu phần tử mẹ có thuộc tính font-size:16px, phần tử con có thuộc tính font-size:2em thì có nghĩa là phần tử con có thuộc tính font-size:32px
• rem(root em): Là đơn vị tương đối dựa vào thuộc tính font-size của phần html (root element). Ví dụ: Nếu phần tử html có thuộc tính font-size:12px phần tử mẹ có thuộc tính font-size:16px, phần tử con có thuộc tính font-size:2rem thì có nghĩa là phần tử con có thuộc tính font-size:24px; Tức là đơn vị rem không phụ thuộc vào phần tử mẹ.

Đơn vị tuyệt đối - Absolute Units

• px *: pixels (1px = 1/96th of 1in)
• pt: points (1pt = 1/72 of 1in)
• pc: picas (1pc = 12 pt)
• cm: centimeters
• mm: millimeters
• in: inches (1in = 96px = 2.54cm)

Có nhiều cách khác nhau để chỉ định các đơn vị trong CSS như px, em, pt, phần trăm (%).

• Pixel (px) cung cấp khả năng kiểm soát chi tiết và duy trì căn chỉnh vì 1 hoặc nhiều px được đảm bảo sự sắc nét. px không phân tầng.

• em duy trì kích thước tương đối. Bạn có thể có phông chữ reponse. Em, sẽ xếp tầng 1em bằng kích thước phông chữ hiện tại của phần tử hoặc mặc định của trình duyệt. Nếu bạn để font-size thành 16px thì 1em = 16px. Thực tế phổ biến là đặt kích thước phông chữ nội dung mặc định thành 62,5% (bằng 10px).

• pt (điểm) thường được sử dụng trong in ấn. 1pt = 1/72 inch và nó là một đơn vị có kích thước cố định.

• % (phần trăm) đặt kích thước phông chữ so với kích thước phông của nội dung. Do đó, bạn phải đặt kích thước phông chữ của phần nội dung thành kích thước hợp lý.

Ta có thể dùng thuộc tính text-align: center bên trong div cha, để căn chỉnh nội dung nằm ngay trung tâm theo chiều ngang. Nhưng không ngay trung tâm chiều dọc. Để chỉnh nó theo chiều dọc ta cần làm gán position của phần tử cha là relative và ở phần tử con là absolute. Các phần tử con có giá trị top, bottom, left, right là 0 để nó nằm ở giữa theo chiều dọc. Sau đó ta thiết lập margin là auto. Nó giả sử cả phần tử con và cha sẽ có giá trị height và width.

Xem như ta có height và width của phần tử div là 20% kích cỡ màn hình. Ta có height văn bản là 1.2em và width là 20%. Nếu muốn chỉnh văn bản nằm ở trung tâm div ta làm như sau:

div {
    position : relative;  // Make position relative
    height : 20%;
    width : 20%;
    text-align : center; //Align to center horizontally
}
p {
    position : absolute; // Make position absolute
    top:0;                // Give values of top, bottom,left, right to 0
    bottom:0;
    left:0;
    right:0;
    margin : auto;        // Set margin as auto
    height : 1.2 em;
    width : 20%;
}

Opacity ám chỉ mức độ nội dung trong suốt hoặc không trong suốt. Chúng ta có thể sử dụng thuộc tính có tên opacity nhận các giá trị từ 0 đến 1. 0 chỉ định rằng phần tử là hoàn toàn trong suốt, trong khi 1 có nghĩa là phần tử hoàn toàn không trong suốt. Chúng ta có thể sử dụng thuộc tính opacity như sau:

div { 
    opacity: 0.6;
}

Trong ví dụ trên, độ mờ 60% được áp dụng cho phần div. Thuộc tính opacity không được trình duyệt internet explorer hỗ trợ. Để làm cho nó hoạt động ở đó, chúng ta cần sử dụng thuộc tính filter là polyfill như ví dụ bên dưới.

div { 
    opacity: 0.6;
    filter: alpha(opacity=60);
}

Một số tính năng nổi bật được bổ sung thêm trong CSS3:

• animation: Xác định chuyển động của một thành phần
• appearance: Định dạng cho thành phần trông như giao diện chuẩn gần với người dùng.
• backface-visibility: Xác định bề mặt sau của thành phần khi thực hiện một chuyển động xoay.
• background-clip: Xác định vùng background được cắt bớt theo vùng được giới hạn.
• background-origin: Xác định giá trị tương đối của background giới hạn theo vùng giới hạn.
• background gradient: Tạo màu sắc cho background theo biên độ giảm dần đều.
• multiple background: Sử dụng để khai báo nhiều background khác nhau trong cùng một tag.
• border-image: Dùng để định dạng các border bằng hình ảnh.
• border-radius: Dùng để định dạng các dạng bo góc của border.
• box-align: Xác định vị trí cho thành phần thoe chiều dọc hoặc theo chiều thẳng đứng.
• box-direction: Xác định hướng cho thành phần.
• box-flex: Xác định sự ưu tiên linh hoạt theo các thành phần khác.
• box-ordinal-group: Cho biết thứ tự ưu tiên của các thành phần.
• box-orient: Xác định thành phần theo mép rìa của thành phần.
• box-sizing: Xác định lại chiều rộng và chiều cao của thành phần.
• box-shadow: Định dạng bóng cho thành phần.
• column: Dùng để chia nội dung thành phần thành nhiều cột khác nhau.
• @font-face: Định dạng các dạng font chữ khác nhau theo các dạng font riêng.
• font-size-adjust: Dùng để định dạng điều chỉnh cho font chữ, độ lớn của chữ được thể hiện bởi phép nhân.
• @keyframes: Dùng để điều khiển diễn biến một hoạt động của thành phần, được dùng kèm với thuộc tính animation
• nav: Di chuyển qua lại giữa các thành phần điều hướng (navigate) bằng ác di chuyển các phím mũi tên
• opacity: Hiển thị cấp độ trong suốt cho thành phần.
• perspective: Cho ta thấy được chiều sâu của thành phần trong khai báo 3D.
• perspective-origin: Định nghĩa trục quay cho thành phần sử dụng perspective.
• resize: Định dạng cho vùng nội dung mà người dụng có thể thay đổi được kích thước.
• text-justify: Tăng hoặc giảm khoảng cách giữa các từ và giữa các ký tự sao cho dàn đều thành phần.
• text-overflow: Xác định vùng text được cắt bớt.
• text-shadow: Xác định đổ bóng cho text.
• transform: Xác định một quá trình chuyển đổi khi có một hành động.
• word-break: Sẽ làm cho những hữ trong một từ không còn là một thể thống nhất, nghĩa là có thể xuống dòng bất cứ vị trí nào trong từ.
• word-wrap: Sẽ làm cho những từ dài xuống hàng mà không làm vỡ layout.

Thẻ span với thuộc tính display: inline và thẻ div với thuộc tính display:block. Chúng ta thường dùng thẻ span khi muốn các element nằm trên cùng 1 line. Không được đặt thẻ block vào trong thẻ inline được, nhưng ngược lại có thể đặt thẻ inline trong thẻ block. Ví dụ:

<div>
  Hi<span
    >I'm the start of the span element
    <div>I'm illegal</div>,
    I'm the end of the span</span
  >
  Bye I'm the end of the div
</div>

Các style có từ khoá important sẽ được ưu tiên cao nhất và ghi đè lên các thuộc tính bị trùng.

p {
 	color: red !important;
}
#thing {
 	color: green;
} 
<p id="thing">Will be RED.</p>

Không, nó không ảnh hưởng đến các phần tử inline. Các phần tử inline ở cùng dòng với nội dung của trang.

• Auto sẽ đạt điểm độ rộng đầy đủ và sẽ trừ đi độ rộng của border, margin, padding,…
• 100% sẽ buộc thẻ đó bằng độ rộng của thẻ cha và tự động nới rộng ra them nếu có them các border, padding, margin,… điều đó sẽ gây ra một số vấn đề không mong muốn)

z-index được sử dụng để chỉ định cách xếp chồng theo chiều sâu của các phần tử chồng lên nhau xảy ra tại thời điểm định vị nó. Nó chỉ định thứ tự ngăn xếp theo chiều sâu của các phần tử được định vị giúp xác định cách hiển thị các phần tử diễn ra như thế nào trong trường hợp chồng chéo.

Giá trị mặc định của thuộc tính này là 0 và có thể là số dương hoặc số âm. Ngoài 0, các giá trị của z-index có thể là:

• Auto: Thứ tự ngăn xếp bằng với phần tử cha.
• Number: Có thể là dương hoặc âm. Nó xác định thứ tự ngăn xếp.
• Initial: Giá trị mặc định là 0.
• Inherit: Kế thừa giá trị từ phần tử cha.

Các phần tử có giá trị z-index nhỏ hơn được xếp chồng thấp hơn các phần tử có z-index cao hơn.

Từ hình trên, chúng ta có thể thấy rằng khi giá trị của z-index tăng dọc theo trục z, thứ tự xếp chồng sẽ hướng về phía trên cùng của các phần tử khác dọc theo trục tung.

• Relative: Định vị trí tuyệt đối (vị trí bao ngoài), lúc này các thẻ HTML bên trong sẽ coi nó là thẻ cha.
• Absolute: Định vị trí tương đối theo thẻ cha (thẻ khai báo relative) hoặc thẻ body nếu ko có khai báo.
• Fixed: Định vị trí tương đối cho của sổ Browser của trình duyệt (khi kéo scroll nó sẽ không bị ẩn đi).
• Static: Dạng mặc định - sẽ hiển thị theo đúng thứ tự của nó (thường dùng để hủy các thuộc tính bên dưới).

import được sử dụng phổ biến nhất ở đầu tập tin vì việc ghi đè các bộ quy tắc đã tồn tại là một nỗi lo lớn. Bằng cách đặt import lên hàng đầu sẽ thường tránh được vấn đề này.

Ta có :

<div class="cn"><div class="inner">your content</div></div>

• Căn giữa với Table

.cn {
	display: table-cell;
	width: 500px;
	height: 500px;
	vertical-align: middle;
	text-align: center;
}

.inner {
	display: inline-block;
	width: 200px; height: 200px;
}

• Căn giữa với Transform

.cn {
	position: relative;
	width: 500px;
	height: 500px;
}

.inner {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
	width: 200px;
	height: 200px;
}

• Căn giữa với Flexbox

.cn {
	display: flex;
	justify-content: center;
	align-items: center;
}

• Căn giữa với Grid

<div class="wrap_grid">
	<div id="container">vertical aligned text<br />some more text here
	</div>
</div>

.wrap-grid {
	display: grid;
	place-content: center;
}

CSS Preprocessor là các phiên bản mở rộng của ngôn ngữ CSS (ngôn ngữ tiền xử lý CSS) được viết xử lý trước sau đó sẽ biên dịch ra các đoạn mã CSS thông thường. Nhiệm vụ của các CSS Preprocessor là giúp bạn logic hóa và cấu trúc các đoạn mã CSS, từ đó đưa CSS trở nên gần hơn với 1 ngôn ngữ lập trình. Bạn có thể viết CSS theo thứ tự rõ ràng, quản lý các biến đã được định nghĩa sẵn, có thể tự động nén tập tin CSS lại để bạn tiết kiệm dung lượng. Hiện tại có thể có rất nhiều CSS Preprocessor nhưng có phỗ biến nhất trong số đó là SASS, LESS và Stylus.

SASS

Là viết tắt của Syntactically Awesome Style Sheets. SASS có thể được viết theo hai cú pháp là SASS và SCSS.

• SASS dựa trên thụt lề còn SCSS (Sassy CSS) thì không.
• SASS sử dụng phần mở rộng .sass trong khi SCSS sử dụng phần mở rộng .scss.
• SASS không sử dụng dấu ngoặc nhọn hoặc dấu chấm phẩy. SCSS sử dụng nó, giống như CSS.

Cú pháp SASS

$font-color: #fff 
$bg-color: #00f

#box
	color: $font-color
	background: $bg-color

Cú pháp SCSS

$font-color: #fff;
$bg-color: #00f;

#box{
	color: $font-color;
	background: $bg-color;
}

LESS

Là viết tắt của Leaner Stylesheets. LESS có thể được thêm dễ dàng vào bất kỳ dự án javascript nào bằng cách sử dụng NPM hoặc file less.js. Nó sử dụng phần mở rộng .less.

Cú pháp LESS giống như SCSS với một số ngoại lệ. LESS sử dụng @ để xác định các biến.

@font-color: #fff;
@bg-color: #00f

#box{
	color: @font-color;
	background: @bg-color;
}

Stylus

Stylus cung cấp rất nhiều tính linh hoạt trong việc viết cú pháp, hỗ trợ CSS thuần cũng như cho phép bỏ qua dấu ngoặc, dấu hai chấm và dấu chấm phẩy. Nó không sử dụng @ hoặc $ để xác định các biến.

/* STYLUS SYNTAX WRITTEN LIKE NATIVE CSS */
font-color= #fff;
bg-color = #00f;

#box {
	color: font-color;
	background: bg-color;
}

/* OR */

/* STYLUS SYNTAX WITHOUT CURLY BRACES */
font-color= #fff;
bg-color = #00f;

#box
	color: font-color;
	background: bg-color;

1. All -> Thuộc tính mặc định dùng cho tất cả thiết bị.
2. Screen -> sử dụng màn hình máy tính, điện thoại.
3. Print -> Sử dụng cho máy in.
4. Speech -> Sử dụng cho màn hình người đọc.

Ý nghĩa của chúng như sau:

• div, p: Selector này ngụ ý chọn tất cả các phần tử div và tất cả các phần tử p.

<h1>Heading 1</h1>
<div>
	Division 1
	<p> paragraph 1</p> <!-- Will be selected -->
</div>
<p> paragraph 2</p> 
<p> paragraph 3</p> 
<div>
	Division 2
</div>
<span> Span 1 </span>

Ở đây, tất cả các phần tử div và phần tử p sẽ được trình duyệt chọn bất kể cha mẹ của chúng hay chúng được đặt ở đâu. Các thẻ còn lại như h1 và span bị bỏ qua.

• div p: Selector cho biết chọn tất cả các phần tử p nằm bên trong các phần tử div. Hãy xem xét một ví dụ dưới đây:

<h1>Heading 1</h1>
<div>
    Division 1
    <p> paragraph 1</p> <!-- Will be selected -->
    <div>
        <p> Inner Div Paragraph </p> <!-- Will be selected -->
    </div>
</div>
<p> paragraph 2</p>
<p> paragraph 3</p>
<div>
    Division 2
</div>
<span> Span 1 </span>

Ở dây, <p> paragraph 1</p> và <p> Inner Div Paragraph </p> sẽ được chọn bởi trình duyệt và thuộc tính được áp dụng. Phần còn lại sẽ không được chọn.

• div ~ p: Selector này chọn tất cả các phần tử p có phần tử div đứng trước ở bất kỳ đâu.

<h1>Heading 1</h1>
<div>
   Division 1
   <p> paragraph 1</p>
</div>
<p> paragraph 2</p> <!-- Will be selected -->
<p> paragraph 3</p> <!-- Will be selected -->
<div>
   Division 2
</div>
<span> Span 1 </span>

Ở đây, các phần tử của paragraph 2 và paragraph 3 sẽ được chọn như được đánh dấu trong đoạn code trên.

• div + p: Selector nàychọn tất cả các phần tử p được đặt ngay sau phần tử div.

<h1>Heading 1</h1>
<div>
	Division 1
	<p> paragraph 1</p>
</div>
<p> paragraph 2</p> <!-- Will be selected -->
<p> paragraph 3</p> 
<div>
	Division 2
</div>
<span> Span 1 </span>

Trong trường hợp này, chúng ta có phần tử paragraph 2 ngay sau thẻ div. Do đó, chỉ phần tử đó sẽ được chọn.

• div > p: Selector này chọn tất cả các phần tử p có div là cha trực tiếp. Trong cùng một ví dụ dưới đây:

<h1>Heading 1</h1>
<div>
	Division 1
	<p> paragraph 1</p> <!-- Will be selected -->
</div>
<p> paragraph 2</p> 
<p> paragraph 3</p> 
<div>
	Division 2
</div>
<span> Span 1 </span>

Chỉ <p> paragraph 1</p> được chọn trong trường hợp này vì nó có div là cha trực tiếp.

Flexbox Layout (hay còn gọi là Flexible Box) là một kiểu bố cục trang có khả năng tự cân đối kích thước, thay đổi chiều rộng/chiều cao và thứ tự phần tử bên trong để phù hợp với tất cả các loại thiết bị hiển thị và kích thước màn hình.

Với bố cục thông thường, bạn cần phải thiết lập kích thước của phần tử, thiết lập hiển thị dạng block hay inline, cho nó float, còn với Flexbox bạn chỉ cần thiết lập phần hiển thị theo chiều ngang hay chiều dọc, lúc đó các phần tử bên trong có thể hiển thị theo ý muốn.

Các thuộc tính flexbox:

• flex-direction: Thuộc tính này giúp xác định hướng container sẽ xếp chồng các mục cho linh hoạt. Các giá trị của thuộc tính này có thể là:
  • row: xếp các mục theo chiều ngang từ trái sang phải trong flex container.
  • column: xếp các mục theo chiều dọc từ trước ra sau trong flex container.
  • row-reverse: xếp các mục theo chiều ngang từ phải sang trái trong flex container.
  • column-reverse: xếp các mục theo chiều dọc từ sau ra trước trong flex container.
• flex-wrap: Thuộc tính này chỉ định các mục flex nên được bọc hay không. Giá trị có thể là:
  • wrap: mục flex nên được bọc.
  • nowrap: giá trị mặc định này là mục không được bọc.
  • wrap-reverse: chỉ định này cho biết mục sẽ được bọc nếu cần nhưng theo thứ tự ngược.
• flex-flow: thuộc tính này thiết lập cả flex-direction và flex-wrap trong một dòng.
• justify-content: dùng cho căn chỉnh mục. Các giá trị có thể:
  • center: có nghĩa là các mục hiện ở trung tâm của container.
  • flex-start: đây là giá trị mặc định, sẽ được căn chỉnh từ điểm bắt đầu container.
  • flex-end: các mục sẽ được căn chỉnh từ điểm cuối của container.
  • space-around: các mục sẽ được căn chỉnh với khoảng trắng giữa, trước và xung quanh các mục.
  • space-between: các mục sẽ được căn chỉnh với khoảng trắng giữa các mục.
• align-items: sử dụng cho căn chỉnh mục flex.
• align-content: sử dụng cho căn chỉnh dòng flex.

CSS Grid layout là một hệ thống layout 2 chiều (x,y) được dùng trong thiết kế UI. Theo định nghĩa từ Mozilla, grid (lưới) là một tổ hợp của những đường ngang và dọc cắt nhau – một nhóm xác định các cột và nhóm kia xác định các hàng. Các phần tử có thể được đặt lên grid, dựa vào các đường hàng và cột này.

• Grid Item: Phần container bao gồm các grid items.
• Grid Line: Đường thẳng theo chiều dọc và ngang để xây dựng cấu trúc grid.
• Grid Cell: Đơn vị nhỏ nhất trong grid. Nó là không gian giữa các hàng và cột.
• Rows: Là đường nằm ngang trong grid.
• Columns: Là đường nằm dọc trong grid.
• Gutter: Là độ rộng không gian của hàng hay cột trong grid.

Thuộc tính float được sử dụng để định vị các phần tử HTML theo chiều ngang về phía bên trái hoặc bên phải của container. Ví dụ,

float-demo {
	float: right;
}

Ở đây, phần tử mà lớp được áp dụng đảm bảo rằng phần tử được định vị ở bên phải của container. Nếu bạn chỉ định giá trị của float ở bên trái, thì phần tử sẽ được đặt ở bên trái của container.

Biết được cả những ưu điểm và nhược điểm của ngôn ngữ lập trình trong các câu hỏi phỏng vấn CSS là rất quan trọng đối với một người học CSS. Điều đó cho thấy bạn có kiến thức chuyên sâu khi học CSS.

Điều quan trọng nhất là kiểm tra một trang web trong các trình duyệt khác nhau khi bạn thiết kế lần đầu tiên hoặc khi thực hiện các thay đổi lớn. Tuy nhiên, điều quan trọng là phải lặp lại các kiểm tra này theo định kỳ, vì các trình duyệt thường xuyên có các bản cập nhật và thay đổi.

• Nó điều chỉnh tất cả phần tử có bao gồm padding, border trong không gian phần tử cho tính toàn chiều dài và chiều rộng.
• Trong box-sizing: border-box, chiều cao phần tử được tính toán với: height + padding dọc + độ dài border dọc. Còn chiều dài là width + padding ngang + độ dài border ngang.

:root selector cho phép bạn chỉ đến phần tử “cha” cao nhất trong DOM, hoặc cây document. Nó được xác định trong tài liệu đặc tả CSS Selectors Level 3.

Bản thân khái niệm đơn giản có nghĩa là các quy tắc CSS nhất định thay thế (ghi đè) các quy tắc khác bằng cách cụ thể hơn. Đây là một khái niệm khó vì có thể gây ra một số vấn đề sau này - sử dụng quá nhiều loại quy tắc có tính đặc trưng cao có thể gây khó khăn khi thấy cần thay đổi điều gì đó sau khi hoàn thành công việc.

Có ba cấp độ của specificity (độ đặc trưng) cần biết trong các câu hỏi phỏng vấn CSS - type (loại), class (lớp) và ID (identification). Bộ chọn type có độ đặc trưng thấp nhất, trong khi ID loại là cao nhất.

Trong CSS3, hàm calc() cho phép ta thực hiện các phép tiến trên giá trị thuộc tính. Thay vì khai báo trực tiếp, với width là giá trị tĩnh ta có thể dùng calc() để chỉ định giá trị width bằng các phép tính trên các giá trị số.

.foo {
	width: calc(100px + 50px)
}

• Sử dụng thuộc tính display: none. Phần tử sẽ không xuất hiện trong DOM.
• Sử dụng thuộc tính visibility: hidden, phần tử có xuất hiện trong DOM, nhưng không hiển thị trên màn hình cho người dùng.
• Sử dụng thuộc tính position: absolute. Khả dụng bên ngoài màn hình.

File splitting (Chia tách tệp) cho phép chia các tệp lớn thành các tệp nhỏ hơn nhằm mục đích giúp chương trình chạy nhanh hơn và mượt mà hơn. Để có thể phân chia các tệp, bạn sẽ cần một bộ tiền xử lý CSS.

Các tập tin có thể được chia theo bất kỳ cách nào bạn muốn, nhưng nên giữ gọn gàng và phân chia có logic. Điều này sẽ giúp quản lý trang web nhanh hơn mà không cần phải chờ các tải các trang định dạng thừa.

Absolute là một cơ chế định vị mạnh mẽ cho phép người dùng đặt bất kỳ phần tử ở đâu vào một vị trí chính xác. Thuộc tính CSS như right, left, top, bottom sẽ xác định vị trí chính xác cần đặt phần tử. Trong absolute cần xem xét các điểm sau:

• Các phần tử được áp dụng absolute sẽ bị xoá khỏi luồng thông thường của HTML document.
• Bố cục HTML sẽ không tạo bất kỳ không gian nào cho các phần tử này trong bố cục trang.
• Các phần tử sẽ được định vị relative với phần tử cha (tổ tiên) gần nhất. Nếu không có phần tử cha nào nó sẽ được đặt tương ứng với container ban đầu.
• Vị trí cuối cùng của phần tử được xác định dựa trên các giá trị top, left, right và bottom được cung cấp.

Từ khoá initial có thể được dùng để khôi phục giá trị mặc định.

CSS Sprite dùng cho kết hợp nhiều hình ảnh thành một hình ảnh lớn. Nó thường dùng cho biểu diễn icons. Các ưu điểm của nó là:

• Giảm số lượng yêu cầu HTTP để lấy nhiều ảnh vì nó cho phép chỉ gửi một yêu cầu.
• Nó giúp tải trước các nội dung giúp hiển thị các icon hoặc hình ảnh khi di chuột và các pseudo-state khác.
• Khi có nhiều hình ảnh, trình duyệt sẽ thực hiện các lệnh gọi riêng biệt để lấy hình ảnh cho từng hình ảnh đó.

Sử dụng sprites, các hình ảnh được kết hợp thành một và chúng ta chỉ cần gọi hình ảnh đó bằng một lệnh gọi.

Hãy xem xét một ví dụ trong đó ứng dụng của chúng ta yêu cầu 3 hình ảnh như hình dưới đây (Không có Section Sprites). Nếu chúng ta đang cố gắng tải các hình ảnh một cách độc lập, chúng ta cần 3 yêu cầu HTTP khác nhau để lấy dữ liệu. Nhưng nếu chúng ta có CSS Sprites trong đó cả 3 hình ảnh được kết hợp thành 1 được phân tách bằng một số khoảng trắng, thì chúng ta chỉ yêu cầu 1 HTTP Request.

<!DOCTYPE html>
<html>
	<head>
		<style>
			#home-icon {
				left: 0px;
				width: 46px;
				background: url('spriteFile.gif') 0 0;
			}

			#prev-icon {
				left: 63px;
				width: 43px;
				background: url('spriteFile.gif') -47px 0;
			}

			#next-icon {
				left: 129px;
				width: 43px;
				background: url('spriteFile.gif') -91px 0;
			}
		</style>
	</head>
	<body>

		<img id="home-icon" src="spriteFile.gif" width="1" height="1">    <!-- To display home icon here -->
		<img id="next-icon" src="spriteFile.gif" width="1" height="1">    <!-- To display next icon icon here -->
		<img id="prev-icon" src="spriteFile.gif" width="1" height="1">    <!-- To display previous icon icon here -->

	</body>
</html>

Trong đoạn code trên, chúng ta đang cố gắng truy cập từng phần tử - home, previous và next - từ file sprite bằng cách sử dụng thuộc tính left, width. Hình ảnh được hiển thị trong phần img nhờ thuộc tính background. Lưu ý rằng nguồn của hình ảnh (thuộc tính src của thẻ img) chỉ là một file là spriteFile.gif và tùy thuộc vào các quy tắc được chỉ định trong id selector, hình ảnh được tải tương ứng.

1. CSS Grid là hệ thống dựng layout 2 chiều, có nghĩa là chúng ta có thể xử lý theo cột và hàng, không giống như Flexbox là hệ thống layout 1 chiều. ( xử lý theo 1 cột hoặc 1 hàng ).

2. Điểm khác biệt cốt lõi giữa CSS Grid và Flexbox đó là: CSS Grid tiếp cận theo hướng bố cục (layout) dung còn Flexbox tiếp cận theo hướng nội dung. Nếu bạn biết được rõ trước nội dung mình cần trình bày hãy dùng CSS Flexbox ngược lại thì chọn CSS Grid.

3. Flexbox phù hợp với các website có bố cục đơn giản, CSS Grid phù hợp với website có bố cục phức tạp hơn.

4. Nếu bạn chỉ cần dựng layout theo 1 hàng hoặc 1 cột thì Flexbox sẽ phù hợp hơn. Ngược lại, nếu bạn muốn xác định grid và điều chỉnh nội dung theo 2 chiều - CSS Grid sẽ là lựa chọn của bạn.

Ví dụ

<!DOCTYPE html>
<html>
  <head>
    <title>Grid vs Flexbox Layout</title>
  </head>
  <style>
    /* Grid layout */
    .row {
        display: grid;
        grid-template-columns: auto auto auto;
        background-color: #2196f3;
        padding: 5px;
    }

    .col-item {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 10px;
        font-size: 30px;
        text-align: center;
    }

    /* Flexbox layout */
    .wrapper {
        border: 2px solid #f76707;
        border-radius: 5px;
        background-color: #fff4e6;
    }

    .wrapper > div {
        border: 2px solid #ffa94d;
        border-radius: 5px;
        background-color: #ffd8a8;
        padding: 1em;
        color: #d9480f;
    }

    .wrapper {
        display: flex;
        width: 500px;
        flex-wrap: wrap;
    }

    .wrapper > div {
        flex: 1 1 150px;
    }
  </style>
  <body>
    <p><h1>Grid Layout Example<hr/></h1></p>
    <div class="row">
        <div class="col-item">Column - 1</div>
        <div class="col-item">Column - 2</div>
        <div class="col-item">Column - 3</div>
        <div class="col-item">Column - 1</div>
        <div class="col-item">Column - 2</div>
        <div class="col-item">Column - 3</div>
        <div class="col-item">Column - 1</div>
        <div class="col-item">Column - 2</div>
        <div class="col-item">Column - 3</div>
    </div>

    <p><h1><br/>Flexbox Layout Example<hr/></h1></p>
    <div class="wrapper">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
    </div>
  </body>
</html>

Reset CSS: nhằm mục đích xoá tất cả thiết lập style mặc định từ trình duyệt. Ví dụ như margin, padding, font-size của tất cả phần tử đó được reset lại giống nhau.

Normalize CSS: nhằm mục đích làm cho các style mặc định nhất quán trên trình duyệt. Nó cũng sửa các lỗi phổ biến trên trình duyệt.

Thuộc tính overflow trong CSS dùng để xử lý khi kích thước nội dụng vượt qua kích thước container.

Cú pháp:

overflow: visible|hidden|scroll|auto|initial|inherit;

Các thuộc tính:

• visible: phần nội dung tràn sẽ được hiển thị bên ngoài box phần tử.
• hidden: phần nội dung tràn bị ẩn đi.
• scroll: phần nội dung tràn được cắt, những sẽ được hiển thị khi scroll xuống.
• auto: tương tự như scroll
• initial: thiết lập giá trị mặc định
• inherit: kế thừa thuộc tính của phần tử cha
• overflow-x: chỉ định đỉnh trái/phải của nội dung nếu nội dung tràn khỏi phạm vi của nó.
• overflow-y: chỉ định đỉnh trên/dưới của nội dung nếu nội dung tràn khỏi phạm vi của nó.

Ví dụ:

<!DOCTYPE html>
<html>
	<head>
		<title>CSS Overflow Property</title>
		<style>
		div {
			background-color: #eee;
			width: 200px;
			height: 100px;
			border: 1px dotted black;
			overflow: scroll;
			padding: 10px;
		}
		</style>
	</head>
	<body>
		<h2>CSS Overflow Property</h2>
		<p>Setting the overflow value to scroll, the overflow is clipped and a scrollbar
			is added to scroll inside the box.
		</p>

		<div>You can use the overflow property when you want to have better control of 
			the layout. The overflow property specifies what happens if content overflows 
			an element's box.
		</div>
	</body>
</html>

Điều quan trọng cần biết trong các câu hỏi phỏng vấn CSS đó là rule sets. Những bộ quy tắc (rule sets) được tạo từ các khối khai báo tuân theo các bộ chọn cụ thể. Các bộ quy tắc này cho máy chủ biết một tài liệu nhất định có hình thức như thế nào.

Reflow là tên của quá trình mà trình duyệt web tính toán lại vị trí và hình dạng của các phần tử trong document, nhằm mục đích hiển thị lại một phần hoặc toàn bộ document.

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 nhập liệu.
• Di chuyển một phần tử DOM.
• Tạo hoạt ảnh cho một phần tử DOM.
• Thực hiện các phép đo một phần tử như offsetHeight hoặc getComputedStyle.
• Thay đổi kiểu CSS.

CSS Preprocessors được Việt hóa bằng một cái tên rất hoành tráng: “ngôn ngữ tiền xử lý CSS”. Đây là một ngôn ngữ kịch bản mở rộng của CSS và được biên dịch thành cú pháp CSS giúp bạn viết CSS nhanh hơn và có cấu trúc rõ ràng hơn. Nó có nhiệm vụ giúp bạn logic hóa và cấu trúc các đoạn mã CSS để cho CSS tiến đến gần hơn với một ngôn ngữ lập trình.

Hiểu đơn giản CSS preprocessors là một ngôn ngữ kịch bản mở rộng của CSS. Nó cho phép developer viết mã từ một ngôn ngữ nào đó, ngôn ngữ đó ở đây chính là SASS/SCSS, LESS hay một ngôn ngữ tương tự, sau đó biên dịch nó thành CSS.

Sự lợi hại của CSS preprocessors được mình tổng hợp như sau:

• Tiết kiệm thời gian viết code: Với các quy tắc mở rộng, CSS preprocessors giúp bạn có thể tái cấu trúc lại mã nguồn CSS một cách logic và rõ ràng. Từ đó tránh được việc viết đi viết lại một đoạn code, tiết kiệm thời gian viết code, tăng năng suất và nhanh chóng hoàn thành sản phẩm.
• Dễ dàng bảo trì và phát triển CSS: Xã hội không ngừng đổi mới và website cũng không ngừng phát triển. Nhưng nếu bạn cứ thêm CSS vào khi cần thì về lâu dài rất khó quản lý tập tin CSS và gây khó khăn khi bạn cần thiết kế lại website hay nâng cấp nó. Vì sẽ có nhiều đoạn CSS bị trùng hoặc không được sắp xếp đúng cách. Các CSS preprocessors giúp bạn tạo ra các biến trong CSS và sử dụng nhanh chóng. Ngoài ra nó cũng giúp bạn dễ dàng viết CSS cho nhóm vùng chọn tốt hơn, dễ dàng bảo trì về sau cũng như dễ dàng viết CSS thêm cho các phần tử khác có cùng đối tượng.
• Các tập tin CSS được tổ chức một cách rõ ràng: Để thuận tiện cho việc quản lý và phát triển file CSS về sau, bạn cần phải xây dựng được một cấu trúc khoa học, rõ ràng và dễ truy vấn. Bạn có thể chia nhỏ thành nhiều file CSS khác nhau ứng với mỗi công dụng của nó. Ví dụ file button.scss sẽ chứa code CSS cho thành phần button, block.scss sẽ chứa code CSS cho thành phần là các khối block, … Việc chia nhỏ ra các file như vậy giúp code được phân tách rõ ràng cho từng phần, sau này khi ta muốn sửa chữa, thay đổi hay viết thêm CSS thì điều đó trở nên đơn giản hơn rất nhiều thay vì viết tập trung hết code vào chung một file CSS.

Cả hai đều là pseudo-classes.

nth-child() được dùng để so khớp các phần tử dựa trên số đại diện cho vị trí của một phần tử dựa trên các phần tử anh chị em.

Ví dụ, trong đoạn code dưới đây, ta cung cấp nth-child(4) thì phần tử con thứ 4 sẽ được chọn bất kể loại.

.example:nth-child(4) {   
    background: black; 
}

<div class="example">
	<p>This is a paragraph.</p>
	<p>This is a paragraph.</p>
	<p>This is a paragraph.</p>
	<div>This is a div.</div> <!-- 4th Element to select and apply style-->
	<div>This is a div.</div> 
	<p>This is a paragraph.</p>
	<p>This is a paragraph.</p>
	<div>This is a div.</div>
</div>

nth-of-type() cũng tương tự nhưng chỉ so khớp với các phần tử anh chị em cùng loại. Số để xác định trong nth-of-type() có thể là một hàm hoặc từ khoá như odd hay even.

Ví dụ: nếu ta cấp p:nth-of-type(even) thì các thẻ <p> và số thứ tự chẵn được áp dụng.

.example p:nth-of-type(even) { 
    background: black; 
}

<div class="example">
	<p>This is a paragraph.</p> 
	<p>This is a paragraph.</p> <!-- Select this and apply style-->
	<p>This is a paragraph.</p> 
	<div>This is a div.</div>
	<div>This is a div.</div> 
	<p>This is a paragraph.</p> <!-- Select this and apply style-->
	<p>This is a paragraph.</p> 
	<div>This is a div.</div>
	<p>This is a paragraph.</p> <!-- Select this and apply style-->
	<div>This is a div.</div>
</div>

Bạn học HTML thì chắc cũng thừa biết là mặc định trình duyệt đã tự mặc định hiển thị một số thẻ HTML thành một đoạn văn bản đã được markup đầy đủ, ngoài ra thì nó cũng mặc định thêm một số quy tắc trên trang tài liệu web HTML như có chứa padding, margin,…và một cái quan trọng là mỗi loại trình duyệt đều có những quy tắc riêng nên việc hiển thị mặc định sẽ không giống nhau.

Do vậy khi viết CSS cho website, bạn nên đưa tất cả các giá trị của các phần tử trên website về bằng 0 hết và xóa một số định dạng có sẵn để khi cần chúng ta sẽ dùng CSS viết lại theo ý của mình để đảm bảo nó hiển thị tốt trên tất cả các trình duyệt. Việc làm này người ta gọi là Reset CSS.

Reset CSS như thế nào?

Nếu bạn muốn tự reset CSS đơn giản nhất thì hãy viết đoạn sau vào tập tin CSS là có thể đưa toàn bộ giá trị liên quan tới Box Model về 0.

* {
  padding: 0;
  margin: 0;
  border: none;
}

Nhưng như vậy có vẻ không tối ưu cho lắm, thay vì reset CSS như vậy thì chúng ta sẽ dùng các bộ Reset CSS có sẵn mà nhiều designer/developer chuyên nghiệp thường sử dụng.

Một số bộ Reset CSS thông dụng

Bạn có thể sử dụng các bộ reset CSS thông dụng dưới đây để tiết kiệm thời gian và tối ưu hơn. Cách sử dụng là copy code bỏ vào đầu file CSS của bạn.

• normalize.css: Đây là bộ reset CSS thông dụng nhất hiện tại, phù hợp với cả HTML5 và CSS3. Đặc điểm của bộ này là sẽ điều chỉnh các phần tử trong website hiển thị phù hợp với tất cả các trình duyệt thông dụng, xóa bỏ toàn bộ margin và padding mặc định, có sẵn style cho các thẻ khá có ích như <sub>, <sup>, <code>,…

• Reset CSS 2.0 by Eric Meyer: Nếu bạn cần một đoạn reset CSS đưa toàn bộ các phần tử website về “thời đồ đá”, không có bất cứ một định dạng gì thì có thể sử dụng bộ này. Bộ reset CSS này thích hợp cho những ai muốn tự mình viết lại CSS cho toàn bộ các thành phần trong website, kể cả việc thiết lập kích thước chữ cho các thẻ tiêu đề.

Cascanding hay xếp tầng, đề cập đến quá trình xem xét các khai báo kiểu và xác định trọng lượng hoặc tầm quan trọng của các quy tắc tạo kiểu giúp trình duyệt chọn quy tắc nào phải được áp dụng trong thời gian xung đột. Xung đột ở đây đề cập đến nhiều quy tắc có thể áp dụng cho một phần tử HTML cụ thể. Trong những trường hợp như vậy, chúng ta cần cho trình duyệt biết phong cách nào cần được áp dụng cho phần tử. Điều này được thực hiện bằng cách xếp tầng danh sách các phần tử khai báo kiểu.

Ví dụ:

p {
    color:white;
}

và chúng ta cũng có khai báo sau bên dưới nó hoặc trong một biểu định kiểu khác đã được liên kết với trang:

p {
    color:black;
}

Ỏ đây, chúng ta có xung đột về thuộc tính màu cho các phần tử của đoạn văn. Trình duyệt chỉ cần phân tầng để xác định đâu là kiểu mới nhất và cụ thể nhất và áp dụng kiểu đó. Vì ta có color:black; như một khai báo cụ thể nhất, màu đen được áp dụng cho các phần tử của đoạn văn. Bây giờ nếu bạn muốn đảm bảo màu trắng được áp dụng cho đoạn văn, chúng ta có thể xác định trọng số cho kiểu đó bằng cách thêm !important như hình dưới đây:

p {
    color:white !important;
}

!important đảm bảo rằng thuộc tính có trọng lượng tối đa khi có các thuộc tính xung đột khác.

content-box là thuộc tính xác định giá trị mặc định cho kích thước hộp. Thuộc tính width và height chỉ bao gồm nội dung bằng cách loại trừ border và padding. Hãy xem xét một ví dụ như sau:

div{
    width:300px;
    height:200px;
    padding:15px;
    border: 5px solid grey;
    margin:30px;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
}

Ở đây, kích thước hộp cho phần tử div được cung cấp dưới dạng content-box. Điều đó có nghĩa là height và width được xem xét cho nội dung div sẽ loại trừ padding và border. Chúng ta sẽ nhận được đầy đủ các thông số chiều cao và chiều rộng được chỉ định cho nội dung như trong hình bên dưới.

border-box là thuộc tính bao gồm nội dung và padding, border trong thuộc tính height và width. Hãy xem ví dụ sau:

div{
    width:300px;
    height:200px;
    padding:15px;
    border: 5px solid grey;
    margin:30px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

Ở đây, kích thước hộp cho phần tử div được cung cấp dưới dạng border-box. Điều đó có nghĩa là height và width được xem xét cho nội dung div cũng sẽ bao gồm phần border và padding. Điều này có nghĩa là chiều cao thực của nội dung div sẽ là:

Khi cố gắng chọn phông chữ cho trang web của mình, bạn nên nhớ rằng không phải mọi trình duyệt web đều có thể nhận diện được tất cả các loại phông chữ khác nhau - đây là nơi phông chữ web-safe được lựa chọn sử dụng. Những phông chữ này được sử dụng phổ biến và tốt nhất. những loại được biết đến như Times New Roman, Arial hoặc Calibri. Nếu vì một lý do nào đó, trình duyệt web của bạn không nhận ra các phông chữ này (mặc dù không phải vậy) thì đã có các phông chữ fallback - đây là các phông chữ mà trình duyệt sẽ tự động chọn.

Các loại phông chữ có thể là một trong số câu hỏi phỏng vấn CSS phổ biến hơn, vì vậy hãy ghi nhớ chúng thật tốt.

Để reponsive một trang web có nghĩa là các phần tử sẽ thay đổi kích thước hoặc chức năng tuỳ theo kích thước màn hình của thiết bị, thường là thay đổi chiều rộng (width), thông qua các truy vấn media CSS, chẳng hạn như làm nhỏ kích thước phông chữ trên các thiết bị nhỏ hơn.

@media (min-width: 601px) {
  .my-class {
    font-size: 24px;
  }
}
@media (max-width: 600px) {
  .my-class {
    font-size: 12px;
  }
}

Chiến lược mobile-first là một reponsive mà ta nên xác định các style trên thiết bị di động và chỉ thay đổi quy tắc cho các thiết bị khác sau. Ví dụ như:

.my-class {
  font-size: 12px;
}

@media (min-width: 600px) {
  .my-class {
    font-size: 24px;
  }
}

Chiến lược mobile-first có hai ưu điểm:

• Nó hoạt động hiệu quả hơn trên thiết bị di động, vì tất cả các quy tắc áp dụng cho chúng không cần phải được xác thực dựa trên bất kỳ truy vấn media nào.
• Nó buộc phải viết code rõ ràng hơn liên quan đến các quy tắc CSS reponsive.

Ví dụ

<!DOCTYPE html>
<html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Media Query</title>
  <style>
    body {
        background-color: lightgreen;
    }

    @media only screen and (max-width: 800px) {
        body {
            background-color: rgb(233, 50, 18);
        }
    }
  </style>
  </head>
<body>
    <h1>Resize the browser window</h1>
    <h2>When the width of this document is 800px or less, the background-color is "green", 
      otherwise it is "Red".</h2>
</body>
</html>

Thuộc tính CSS box-sizing quy định cách tính tổng chiều rộng và chiều cao của một phần tử.

• Context-box: 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ử. Padding và border nằm ở bên ngoài hộp.
• Padding-box: 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ử và padding của nó. Border nằm ở bên ngoài hộp. Hiện tại chỉ có Firefox hỗ trợ padding-box.
• Border-box: Giá trị chiều rộng và chiều cao áp dụng cho nội dung, padding và border.

Tính đặc hiệu hay độ ưu tiên (specificity) là cách mà trình duyệt quyết định sẽ áp dụng thuộc tính css nào với một phần tử khi có nhiều quy tắc css cùng trỏ đến phần tử đó.

Inline style sẽ được ưu tiên so với ID rồi đến giá trị lớp (pseudo-class hoặc attribute selector), universal selector (*) sẽ không có độ ưu tiên. ID Selector có độ ưu tiên cao hơn attribute selector.

Tuỳ chỉnh thuộc tính (thỉnh thoảng đề cập đến biến CSS) được định nghĩa bởi người dùng bao gồm giá trị cụ thể để sử dụng nhiều lần trong document. Giá trị là một tập hợp sử dụng ký hiệu —. Và giá trị được truy cập bằng hàm var().

:root {
	--main-bg-color: brown
}

.one {
	color: white;
	background-color· var (--main-bg-color);
	margin: l0px,
	width: 50px,
	height: 5Opx;
	display: inline-block;
}

• Biến CSS có thể dùng mà không cần preprocessor. Đồng thời, tất cả trình duyệt đều hỗ trợ biến CSS.
• Biến CSS có tác động nối tiếp. Còn preprocessor không cần.
• Biến CSS có thể truy cập và quản lý trong JavaScript

Sử dụng @supports trong CSS để biết trình duyệt có hỗ trợ tính năng hay không.

@supports (display: grid) {
	div {
		display: grid;
	}
}

Ta có thể dùng khái niệm CSS counter (bộ đếm). Điều này cho phép chúng ta điều chỉnh hình thức của nội dung dựa trên vị trí trong document. Để sử dụng nó, trước tiên chúng ta cần khởi tạo giá trị của thuộc tính counter-reset, giá trị này là 0 theo mặc định. Thuộc tính tương tự cũng được sử dụng để thay đổi giá trị thành bất kỳ số nào mà chúng ta cần. Sau khi khởi tạo, giá trị của bộ đếm có thể tăng hoặc giảm bằng cách sử dụng thuộc tính counter-increment. Tên của bộ đếm không được là các từ khóa CSS như none, initial, inherit, v.v. Nếu các từ khóa CSS được sử dụng, thì khai báo sẽ bị bỏ qua.

Ví dụ:

body {
  	counter-reset: header;   /* define counter named 'header' whose initial value is 0 by default */
}

h2::before {
	counter-increment: header;   /* The value of header counter by 1.*/
	content: "Header " counter(header) ": ";  /* To display word Header and the value of the counter with colon before it.*/
}

Ngôn ngữ CSS được thiết kế để 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, … Khi trình duyệt hiển thị một document, nó phải kết hợp nội dung của document với thông tin style của nó. Nó xử lý document theo một số giai đoạn, mà chúng ta đã liệt kê bên dưới.

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.
3. Sau đó, trình duyệt sẽ tìm nạp hầu hết các tài nguyên được liên kết với tài liệu HTML, chẳng hạn như hình ảnh và video được nhúng và CSS được liên kết.
4. Trình duyệt phân tích cú pháp CSS đã nạp và sắp xếp các quy tắc khác nhau theo kiểu selector của chúng thành các “nhóm” khác nhau, ví dụ: phần tử, lớp, ID, … Dựa trên các selector mà nó tìm thấy, nó sẽ tìm ra các quy tắc nên được áp dụng cho các nút nào trong DOM và đính kèm kiểu cho chúng theo yêu cầu (bước trung gian này được gọi là cây render).
5. Cây render được bố trí trong cấu trúc mà nó sẽ xuất hiện sau khi các quy tắc đã được áp dụng cho nó.
6. Hiển thị trực quan của trang được hiển thị trên màn hình.

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

DOM và CSSOM

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 sẽ 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ố phần tử là nút cha 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 quá trình bao gồm conversion, tokenization, lexing và parsing, cuối cùng tạo nên DOM và CSSOM.

• Conversion: Đọc các byte raw của HTML và CSS trên đĩa hoặc mạng.
• Tokenization: Chia nhỏ đầu vào thành nhiều đoạn (ví dụ: thẻ bắt đầu, thẻ kết thúc, tên thuộc tính, giá trị thuộc tính), loại bỏ các ký tự không liên quan như khoảng trắng và ngắt dòng.
• Lexing: Giống như tokenizer, nhưng nó cũng xác định loại của mỗi mã thông báo (một số, một chuỗi ký tự hay một toán tử bình đẳng).
• Parsing: Lấy dòng mã thông báo từ lexer, diễn giải 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.

Ví dụ:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

Trong DOM, nút tương ứng với phần tử <p> là cha. Các con của nó là nút text và 3 nút tương ứng là phần tử <span>. Quan hệ phân cấp của nó như sau:

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"

Áp dụng CSS vào DOM:

span {
  border: 1px solid black;
  background-color: lime;
}

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

Cây render xây dựng theo thứ tự sau:

• Bắt đầu từ gốc của cây DOM, đi qua từng nút hiển thị.
• Bỏ qua các nút không hiển thị.
• Đố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 hiển thị với nội dung và kiểu tính toán của chúng.
• Cuối cùng, xuất một cây render chứa cả thông tin nội dung và style của tất cả nội dung hiển thị trên màn hình.

Translate() không làm cho trình duyệt kích hoạt vẽ lại layout, mà chỉ thực hiện soạn thảo. Còn position: absolute làm trình duyệt phải vẽ lại các luồng DOM. Thế nền translate() đem về hiệu suất tốt hơn.

Progressive rendering là một kỹ thuật sử dụng để cải thiện hiệu suất trang web (cụ thể là cải thiện thời gian tải web) để render nội dung cho hiển thị nhanh nhất có thể.

Ta có thể triển khai progressive rendering bằng cách lazy loading với hình ảnh. Ta sử dụng Intersection Observer API cho lazy load ảnh. API giúp đơn giản hoá việc phát hiện một phần tử đi vào viewport và thực hiện hành động khi phần tử đó thực hiện hành động. Khi image vào viewport, ta mới bắt đầu tải ảnh.

Ví dụ:

<img class="lazy"
src="placeholder-image.jpg"
data-src="image-to-lazy-load-1x.jpg"
data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x"
alt="I'm an image!">

document.addEventListener("DOMContentLoaded", function() {
	var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

	if ("IntersectionObserver" in window) {
		let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
			entries.forEach(function(entry) {
				if (entry.isIntersecting) {
				let lazyImage = entry.target;
				lazyImage.src = lazyImage.dataset.src;
				lazyImage.srcset = lazyImage.dataset.srcset;
				lazyImage.classList.remove("lazy");
				lazyImageObserver.unobserve(lazyImage);
				}
			});
		});

		lazyImages.forEach(function(lazyImage) {
			lazyImageObserver.observe(lazyImage);
		});
	} else {
		// Possibly fall back to event handlers here
	}
});

Tweening là quá trình lấp đầy khoảng trống giữa các chuỗi khóa, tức là giữa các keyframes đã được tạo. Keyframes là những frame đại diện cho điểm bắt đầu và điểm kết thúc của hành động hoạt ảnh. Tweening liên quan đến việc tạo keyframe giữa hai hình ảnh để tạo ấn tượng rằng hình ảnh đầu tiên đã di chuyển mượt mà sang hình ảnh thứ hai. Với mục đích này, chúng ta sử dụng các thuộc tính như transforms - matrix, translate, scale, rotate,…

Trong đoạn code bên dưới, ta tạo frame trung gian của các phần tử <p> để chuyển từ đầu đến phía bên trái của trình duyệt.

p {
	animation-duration: 2s;
	animation-name: slidethrough;
}

@keyframes slidethrough {
	from {
		margin-left: 100%;
		width: 300%; 
	}

	to {
		margin-left: 0%;
		width: 100%;
	}
}

Ở đây, phần tử đoạn văn chỉ định rằng quá trình hoạt ảnh sẽ mất 2 giây để thực hiện từ đầu đến cuối. Điều này được thực hiện bằng cách sử dụng thuộc tính animation-duration. Tên hoạt ảnh của @keyframes được xác định bằng cách sử dụng thuộc tính animation-name. Keyframe trung gian được xác định bằng cách sử dụng quy tắc @keyframes.

Trong ví dụ, chúng ta chỉ có 2 keyframe. Keyframe đầu tiên bắt đầu ở 0% và chạy cho đến lề trái 100%, là cạnh ngoài cùng bên phải của phần tử container. Keyframe thứ hai bắt đầu ở 100% trong đó lề trái được đặt là 0% và chiều rộng được đặt là 100%, kết quả là kết thúc hoạt ảnh nghiêng về phía bên trái của container.

DOM (Document Object Model) là một interface lập trình cho HTML và XML. Nó xác định cấu trsuc của document và cách mà document được hiển thị và quản lý. Document này cho phép javascript truy cập và quản lý phần tử và style của web. Mô hình được xây dựng theo cấu trúc cây đối tượng và xác định:

• Các phần tử HTML là đối tượng
• Thuộc tính của tất cả phần tử HTML
• Phương thức truy cập đến tất cả phần tử HTML
• Sự kiện với tất cả phần tử HTML

DOM Document

Là chủ sở hữu tất cả đối tượng trong web. Nếu bạn muốn truy cập đến bất kỳ phần tử nào đều phải bắt đầu với document. Nó còn chứa các thuộc tính và phương thức quan trọng cho truy cập và chỉnh sửa trang web.

Tìm kiếm phần tử HTML

Thay đổi phần tử HTML

Thuộc tính innerHTML có thể dùng cho thay đổi nội dung của phần tử HTML. Trong ví dụ này ta lấy phần tử với id của header và thiết lập nội dung trong nó là “Hello World”

// Example: Using text
document.getElementById("#header").innerHTML = "Hello World!";

// Example: Using text with tag
document.getElementsByTagName("div").innerHTML = "<h1>Hello World!</h1>"

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

Ta cũng có thể thay đổi giá trị thuộc tính như sau:

document.getElementsByTag("img").src = "image.jpg";

Thay đổi style

Để đổi style cho một phần tử HTML ta cần thay đổi thuộc tính style của phần tử. Ta có thể viết như sau:

document.getElementsByTag("h1").style.borderBottom = "solid 3px #000";

Thêm và xoá phần tử

Thêm phần tử: tạo một phần tử div sử dụng phương thức createElement() để lấy tên tag như tham số và lưu nó vào biến. Sau đó ta thêm nội dung và chèn nó vào DOM

var div = document.createElement("div");

var newContent = document.createTextNode("Hello World!"); 
div.appendChild(newContent);
document.body.insertBefore(div, currentDiv);

Ở đây ta dùng phương thức createTextNode() để lấy một chuỗi làm tham số sau đó chèn phần tử div mới trước một div đã tồn tại trong document.

Xoá phần tử: dùng phương thức removeChild()

var elem = document.querySelector('#header');
elem.parentNode.removeChild(elem);

Thay thế phần tử

var div = document.querySelector('#div');
var newDiv = document.createElement('div');

newDiv.innerHTML = "Hello World2";
div.parentNode.replaceChild(newDiv, div);

Ở đây ta dùng phương thức replaceChild() nhận tham số thứ nhất là phần tử mới và tham số thứ hai là phần tử cần thay thế.

Viết trức tiếp vào HTML output string

Ta có thể viết biểu thức HTML và JS trức tiếp vào HTML output stream bằng cách phương thức write(). Phương thức write() có thế nhận nhiều tham số sẽ xuất hiện trong document theo thứ tự của chúng.

// HTML Content
document.write("<h1>Hello World!</h1><p>This is a paragraph!</p>");

// date object
document.write(Date());

Xử lý sự kiện

HTML DOM cho phép JavaScript phản ứng với sự kiện HTML, ví dụ tải trang, nhập trường input, click chuột,…

Gán sự kiện

document.getElementById("btn").onclick = changeText();

Lắng nghe sự kiện

document.getElementById("btn").addEventListener('click', runEvent);

Quan hệ giữa các nút

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

Nút cao nhất được gọi là root và không có cha. Root trong HTML thường là thẻ <tag> vì nó không có thẻ nào trên nó.

Để di chuyển giữa các nút, ta có thể dùng các thuộc tính:

• parentNode
• childNodes
• firstChild
• lastChild
• nextSibling

Ví dụ:

var parent = document.getElementById("heading").parentNode