Làm sạch css

Sử dụng các định dạng trực tiếp trong HTML Mất nhiều thời gian thiết kế mã cũng như dung lượng lưu trữ. Trong khi CSS đó đưa ra phương thức áp dụng một khuôn mẫu chuẩn từ một tệp CSS bên ngoài. Có hiệu quả đồng bộ khi bạn tạo một trang web có hàng trăm trang hoặc cả khi bạn muốn thay đổi một thuộc tính trình bày nào đó

CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh vi hơn.
3. Học CSS cần những gì?

• Có  kiến thức về HTML
• Một trình soạn thảo văn bản để bạn có thể viết mã CSS. Nên sử dụng một trình soạn thảo đơn giản như Notepad trong Windows hay Pico trong Linux, Simple Text trong Mac. Hay từ các chương trình khác nhau như. DreamWeaver, FrontPage, Golive, hoặc soạn thảo trực tuyến theo liên kết. Soạn thảo trực tuyến,. Bạn có thể xem ví dụ minh họa bằng cách nhấp vào nút   trong bài học có phần ví dụ
• Web browser.  

CSS hướng dẫn

Hướng dẫn học CSS hoặc hướng dẫn học CSS 3 cung cấp các khái niệm cơ bản và nâng cao về công nghệ CSS. Hiệp sĩ CNTT đã thiết kế bài học thiết lập chương trình CSS từ cơ bản đến khả năng cao

Các điểm chính của CSS

• CSS là viết tắt của Cascading Style Sheet
• CSS được sử dụng để thiết kế các thẻ HTML
• CSS là một ngôn ngữ được sử dụng rộng rãi trên web
• HTML, CSS và JavaScript được sử dụng để thiết kế web. Nó giúp các nhà thiết kế web áp dụng phong cách trên các thẻ HTML

Ví dụ đầu tiên về CSS

  
  
  
  
  
  
Đây là CSS đầu tiên  
Đây là một đoạn văn bản gọi CSS.
  
  
  

Xem ví dụ

Hướng dẫn CSS 3

Trong hướng dẫn này, bạn sẽ nhận được thông tin chi tiết về tất cả các thuộc tính CSS như nền, đường viền, phông chữ, float, hiển thị, lề, độ mờ, phần đệm, căn chỉnh văn bản, căn chỉnh dọc, vị trí, màu sắc,…

Ngày nay CSS đã trở thành một công nghiệp chuẩn để xây dựng các trang web. Dù bạn là nhà phát triển hay nhà thiết kế web thì bạn cũng nên biết cơ bản về nó. CSS là cầu kết nối giữa lập trình và thiết kế, và bất kỳ ai làm về Web cũng phải có kiến ​​thức chung về CSS. Nếu bạn mới bắt đầu làm việc với CSS, hãy bắt đầu với một trình soạn thảo yêu thích và làm theo các hướng dẫn mà chúng tôi trình bày trong bài này và các bài thực hành sử dụng CSS

---

Nội dung

TỔNG QUÂN. NH XUẤT VẤN ĐỀ TÀI SẼ TRÌNH BÀY

Chúng ta sẽ bắt đầu với những vấn đề về cơ bản và tiềm năng của CSS, một trong những vấn đề về CSS mà chúng ta thường hay gặp và hay sử dụng trong việc xây dựng các trang web

MỘT SỐ ỨNG DỤNG DÙNG CSS

---

1. Padding và Margin

Hầu hết những người mới bắt đầu thường lộn xộn giữa padding và margin và sử dụng chúng không đúng cách. Các bài thực thi sử dụng thuộc tính chiều cao để tạo phần đệm hoặc lề cũng dẫn đến các lỗi hoặc lỗi không hệ thống nhất trong ứng dụng. Hiểu về padding và margins là tiền đề để sử dụng CSS

PADDING AND MARGIN LÀ GÌ?

Padding là phần không gian bên trong của một phần tử, và lề là phần không gian bên ngoài của một phần tử

Sự khác biệt nên rõ ràng khi bạn áp dụng các màu nền (nền) và đường biên (đường viền) tới một phần tử. Not same as padding, margin không bao phủ bởi cả hai loại màu nền hoặc đường biên vì chúng là khoảng không gian bên ngoài của phần tử hiện tại

Nhìn vào hình trực tiếp bên dưới

Giá trị của lề và phần đệm được thiết lập theo chiều kim đồng hồ, bắt đầu từ đỉnh.  

Ví dụ thực tế. Đây là thẻ tiêu đề

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

8 nằm giữa hai đoạn văn. Nếu bạn có thể thấy, hãy tạo khoảng trắng giữa các đoạn văn bản và phần đệm (nơi bạn thấy màu nền xám)  cung cấp cho một khoảng trống trống cho thẻ này

CÁC GIÁ TRỊ CHO MARGIN VÀ PADDING

Ví dụ ở trên của thẻ tiêu đề

, các giá trị cho margin và padding là:margin: 15px 0 15px 0; padding: 15px 15px 15px 15px;Để tối ưu hóa các mã dòng, chúng ta có thể sử dụng một kỹ thuật tối ưu ưu tiên gọi là “tốc ký”, mà sẽ giảm đi các dòng mã lặp lại. Áp dụng kỹ thuật đoạn mã này ở trên sẽ được viết ngắn lại như saumargin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/ padding: 15px; /*--top, right, bottom and left = 15px --*/Đây là một CSS hoàn chỉnh cho thẻ nóng chủ đề ở trênh2 { background: #f0f0f0; border: 1px solid #ddd; margin: 15px 0; padding: 15px; }MẠNG NHỎHãy nhớ rằng phần đệm sẽ bổ sung thêm chiều rộng cho phần tử của bạn. Ví dụ, nếu bạn chỉ định chiều rộng phần tử là 100 pixel, và bạn đặt phần đệm bên trái và bên phải là 10 pixel, thì bạn sẽ dành tổng cộng 120 pixel cho phần phản hồi này100px (nội dung) + 10px (phần đệm bên trái) + 10px (phần đệm bên phải) = 120px (tổng độ rộng phần tử)Tuy nhiên, lề sẽ mở rộng các khung xung quanh nhưng không trực tiếp ảnh hưởng đến chính phần tử đó. mẹo này đặc biệt hữu ích khi sắp xếp các cột định vị trong một bố cụcXem thêm các bài viếtMô hình hộpLề và phần đệmHướng dẫn dứt khoát để sử dụng lợi nhuận âmHướng dẫn tốc ký CSSKý quỹ CSSĐệm CSS2. phao nổi

Floats là phần tử nền tảng CSS cơ sở trong quá trình xây dựng trang web và có thể được sử dụng để căn chỉnh ảnh và bố trí các bố cục và cột. Bạn đã từng căn chỉnh các phần tử bên trái và bên phải trong HTML, thì float cũng làm việc tương tự như vậy

Theo HTML Dog, thuộc tính 

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

9 “xác định độ rộng cố định của hộp được thả nổi, dịch chuyển nó về bên phải hoặc bên trái, với xung quanh là nội dung

Giá trị 

h2 {
background: #f0f0f0;
border: 1px solid #ddd;
margin: 15px 0;
padding: 15px;
}

0 căn chỉnh các phần tử về bên trái và cũng có thể được sử dụng như một hộp chứa đặc biệt để bố trí các bố cục và các cột. Chúng ta hãy nhìn vào một ví dụ thực tế bên dưới sử dụng 

h2 {
background: #f0f0f0;
border: 1px solid #ddd;
margin: 15px 0;
padding: 15px;
}

0

h2 {
background: #f0f0f0;
border: 1px solid #ddd;
margin: 15px 0;
padding: 15px;
}

2 căn chỉnh các phần tử về bên phải, các phần tử xung quanh sẽ đặt bên trái

tip nhỏ. Bởi vì một khối các phần tử thường xuyên trải dài theo 100% độ rộng của container cha, float một phần tử bên phải sẽ đưa nó xuống một dòng mới. Điều này cũng xảy ra với dữ liệu là văn bản vì vậy float phần tử này sẽ không thể ép nó nằm trên cùng một ví dụ được sử dụng như dưới đây

Bạn có thể sửa lỗi này theo một trong hai cách sau

1. Đảo ngược thứ tự của thẻ đánh dấu HTML, tức là bạn gọi phần tử float đầu tiền rồi sau đó gọi phần tử ở bên cạnh
   
2. Chỉ định độ mở rộng chính cho phần tử bên cạnh rồi đặt phần tử thứ hai, chú ý độ mở rộng kết hợp của cả hai phải nhỏ hơn hoặc bằng độ rộng của vùng chứa chứa nó
   

Chú thích. với Internet Explorer 6 (IE6) gấp đôi lề của các phần tử đang sử dụng float. Vì vậy nếu bạn đặt lề là 5 pixel thì nó sẽ trở thành 10 pixel trong IE6

Một thủ thuật đơn giản để tránh lỗi này được bổ sung thuộc tính

h2 {
background: #f0f0f0;
border: 1px solid #ddd;
margin: 15px 0;
padding: 15px;
}

3 vào phần tử gắn nổi, như sau

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

0

Xem thêm các bài viết

• phao nổi
• Xóa phao
• Lý thuyết nổi CSS. Những điều bạn nên biết
• Thủ thuật CSS. Tất cả về phao
• chứa phao
• W3Schools. Xa lạ
• W3Schools. Trôi nổi

---

3. Căn chỉnh vào giữa

Thẻ 

h2 {
background: #f0f0f0;
border: 1px solid #ddd;
margin: 15px 0;
padding: 15px;
}

4 của HTML đã lâu không còn được sử dụng. Chúng ta có những cách khác nhau để căn cứ vào giữa một phần tử

CĂN CHỈNH THEO CHIỀU NGANG (NGANG)

Bạn có thể căn chỉnh theo chiều ngang của văn bản trong các thẻ HTML sử dụng thuộc tính

h2 {
background: #f0f0f0;
border: 1px solid #ddd;
margin: 15px 0;
padding: 15px;
}

5. Đây là cách làm khá đơn giản, nhưng hãy nhớ khi bạn muốn căn chỉnh giữa các phần tử nội tuyến thì bạn phải thêm

h2 {
background: #f0f0f0;
border: 1px solid #ddd;
margin: 15px 0;
padding: 15px;
}

6. Điều này cho phép trình duyệt xác định ranh giới để làm cơ sở điều chỉnh phần tử của bạn

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

4

Để căn chỉnh theo chiều ngang của các phần tử không chứa văn bản, hãy sử dụng các thuộc tính ______47

nói rằng, “Nếu cả hai 

h2 {
background: #f0f0f0;
border: 1px solid #ddd;
margin: 15px 0;
padding: 15px;
}

8 và 

h2 {
background: #f0f0f0;
border: 1px solid #ddd;
margin: 15px 0;
padding: 15px;
}

9 

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

00, chúng sử dụng giá trị bằng nhau. Căn chỉnh theo chiều ngang này sẽ vào giữa phần tử với các liên quan đến các khối ngăn chứa nó. ”

Căn chỉnh theo chiều ngang có thể đạt được thì với việc thiết lập lề trái và lề phải là

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

00. Đây là một phương pháp lý tưởng để sắp xếp theo chiều ngang của các phần tử không phải là văn bản như bố cục và ảnh. Nhưng khi căn chỉnh giữa một bố cục hoặc phần tử không chỉ định độ rộng, bạn phải đặt độ rộng theo thứ tự để nó hoạt động đúng.

To setting between a layout

margin: 15px 0 15px 0;
padding: 15px 15px 15px 15px;

0

To edit between a image

margin: 15px 0 15px 0;
padding: 15px 15px 15px 15px;

1

CĂN CHỈNH THEO CHIỀU DỌC (VERTICAL)

Bạn có thể căn chỉnh theo chiều dọc dữ liệu văn bản của các phần tử sử dụng thuộc tính  

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

02, trong đó quy định khoảng cách không gian giữa các dòng văn bản. Điều này là lý tưởng để căn cứ điều chỉnh các tiêu đề và định dạng dữ liệu văn bản của các phần tử. Đơn giản chỉ cần phù hợp với chiều cao của dòng (line-height) với chiều cao của phần tử (chiều cao phần tử)

margin: 15px 0 15px 0;
padding: 15px 15px 15px 15px;

3

Để căn chỉnh theo chiều dọc các phần tử không phải là văn bản, hãy sử dụng đặt vị trí tuyệt đối

Thủ thuật với kỹ thuật này là bạn phải xác định chiều cao chính xác và độ mở rộng trung tâm của phần tử

Với thuộc tính

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

03, một phần tử được đặt theo vị trí cơ sở của nó(0,0. góc trên bên trái). Trong hình ảnh bên dưới, điểm màu đỏ chỉ gốc 0,0 của phần tử, trước khi các lề âm được áp dụng

Với việc áp dụng các âm thanh ở trên cùng và bên trái, chúng ta có thể căn chỉnh toàn bộ phần tử này theo cả hai chiều ngang và dọc

Đây là CSS hoàn chỉnh cho căn chỉnh theo chiều ngang và chiều dọc

margin: 15px 0 15px 0;
padding: 15px 15px 15px 15px;

5

Bài viết liên quan

• Định tâm theo chiều dọc với CSS
• Căn giữa mọi thứ
• Định tâm CSS 101
• Định tâm CSS. Niềm vui cho tất cả.  
• Hai cách đơn giản để căn chỉnh theo chiều dọc bằng CSS

---

4. Các loại danh sách (list)

Một danh sách có thứ tự (Đã đặt hàng), 

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

04, là một danh sách các mục được đánh dấu bằng các số

Một danh sách không có thứ tự (Không có thứ tự), 

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

05, là một danh sách các mục được đánh dấu bằng các dấu đầu dòng (dấu đầu dòng)

Mặc định, cả hai lại danh sách các mục này là mục đầu tiên ở dạng đơn giản. Với sự trợ giúp của CSS, bạn có thể dễ dàng chỉnh sửa chúng

Về ngữ nghĩa của mã, danh sách chỉ nên sử dụng cho những nội dung đã được chia thành từng nhóm theo một kiểu danh sách. Nhưng chúng có thể được mở rộng cho nhiều cột hoặc các menu điều hướng

TINH CHỈNH DANH SÁCH KHÔNG CÓ THỨ TỰ

Các mục tiêu mặc định là đơn giản và không thể thu hút sự chú ý với nội dung đi kèm. Bạn có thể giải quyết vấn đề này bằng một kỹ thuật đơn giản nhưng hiệu quả. loại bỏ các mục tiêu mặc định và thay thế bằng một ảnh nên cho mỗi mục trong danh sách

Đây là CSS tinh chỉnh các mục đầu tiên

margin: 15px 0 15px 0;
padding: 15px 15px 15px 15px;

8

Các bài viết liên quan

• Danh sách theo kiểu CSS. Hơn 20 bản trình diễn, hướng dẫn và các phương pháp hay nhất
• Tạo kiểu cho danh sách đã đặt hàng của bạn
• Thiết kế CSS. Danh sách thuần hóa

SỬ DỤNG DANH SÁCH KHÔNG SẮP XẾP CHO MENU Điều tra

Hầu hết các menu điều hướng được xây dựng dưới dạng danh sách kết hợp với CSS. Dưới đây là phân cách biến danh sách thông thường thành menu điều hướng theo chiều ngang

HTML. bắt đầu với một danh sách không được sắp xếp đơn giản với các liên kết cho từng mục trong danh sách

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

0

CSS. chúng ta loại bỏ các mục đầu mục mặc định (vì chúng ta đã làm các mục tinh chỉnh đầu mục) bằng cách đặt 

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

06. Sau đó chúng ta đặt từng mục của danh sách sang bên trái, do đó menu điều hướng sẽ xuất hiện theo chiều ngang, chạy từ trái sang phải

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

1

Tham khảo thêm các bài viết

• Menu điều hướng dựa trên CSS. Giải pháp hiện đại
• 30 kỹ thuật điều hướng CSS đặc biệt
• Sử dụng CSS và các mục danh sách không có thứ tự để làm bất cứ điều gì
• Thủ thuật điều hướng tiện lợi bằng CSS
• Căn giữa các mục danh sách theo chiều ngang
• Digg-Like Thanh điều hướng sử dụng CSS

---

5. Tạo kiểu cho các tiêu đề (Heading)

Thẻ tiêu đề trong HTML là quan trọng đối với SEO. Nhưng các tiêu đề có thể nhìn không nổi. Tại sao chúng ta không tinh chỉnh chúng với CSS và phần thưởng của chúng?

Một khi bạn có thuộc tính kiểu thiết lập chính cho các tiêu đề, bạn có thể đặt nó nội tuyến trong các phần tử này để mở rộng kiểu cho phần văn bản trong thẻ tiêu đề

HTML của bạn có thể giống như sau

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

2

And your CSS

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

3

Các bài viết khác liên quan

• 10 ví dụ về kiểu chữ CSS đẹp và cách họ đã làm điều đó
• 12 công cụ CSS và hướng dẫn để tạo kiểu chữ web đẹp
• Hiệu ứng văn bản chuyển màu CSS
• 50 Công Cụ Thiết Kế Hữu Ích Cho Web Typography Đẹp
• 6 cách để cải thiện kiểu chữ web của bạn
• Kiểu chữ CSS. Kỹ thuật Tương phản, Hướng dẫn và Thực tiễn Tốt nhất
• 8 cách đơn giản để cải thiện kiểu chữ trong thiết kế của bạn
• Cách định cỡ văn bản trong CSS

---

6. Tràn ra

Thuộc tính 

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

07có thể được sử dụng theo các cách khác nhau và là một trong các thuộc tính rất hữu ích trong kho CSS

TRÀN LÀ GÌ?

Theo W3Schools. com, thuộc tính tràn định nghĩa cách thực hiện nếu nội dung không thể chứa nén trong hộp của một phần tử (bị tràn)

Vui lòng xem các ví dụ dưới đây để hiểu cách làm việc của họ

Về mặt trực quan, 

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

08 trông giống như một khung nội tuyến nhưng nó hữu ích hơn và thân thiện với SEO. Nó tự động thêm thanh cuộn (thanh ngang, thanh dọc hoặc cả hai) khi nội dung của một phần từ vượt quá kích thước hoặc đường biên của phần tử

Thuộc tính 

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

09 làm công việc tương tự như trên nhưng chúng luôn xuất hiện bất kể nội dung có quá đường biên của phần tử hay không

Và thuộc tính 

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

40 thuộc tính che hhay ẩn đi nội dung của phần tử nếu nó vượt quá đường biên của phần tử

Mạch nhỏ. Có bao giờ bạn có một phần tử cha mà không chứa toàn bộ phần tử con của nó không?

Tuy nhiên, trong một vài trường hợp việc đặt float bên trái hoặc bên phải không phải là giải pháp khả thi. Ví dụ, nếu bạn muốn căn giữa vùng chứa hoặc không muốn chỉ định độ rộng chính xác. Trong sự hợp nhất này, sử dụng

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

40 trên vùng chứa cha để chứa toàn bộ các phần tử chứa trong đó

Đọc thêm các bài

• Con chó HTML. Tràn ra
• W3Schools. Tràn ra
• Quả cầu CSS. Tạo hình thu nhỏ thay đổi kích thước
• Thủ thuật CSS. Sự cố tràn CSS

---

7. Chức vụ

Định vị trí (tương đối, tuyệt đối hay cố định – tương đối, tuyệt đối và cố định) là một trong các thuộc tính hữu ích nhất trong CSS. Nó cho phép bạn đặt vị trí của một phần tử sử dụng cho mức độ chính xác, trả lại cho bạn sự tự do và sáng tạo để thiết lập các bên ngoài phạm vi của phần tử

You must doing ba công việc cơ bản khi sử dụng định vị

1. Setting to the speed (ví dụ như xác định mức độ x và y)
2. Select the true value for each problems. tương đối, tuyệt đối, cố định hay tĩnh
3. Thuộc tính setting z-index. to create layer of the element (tuỳ chọn)

Với 

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

42, một phần tử được đặt ở vị trí tự nhiên của nó. Ví dụ, nếu vị trí tương đối của phần tử đặt bên trái của một ảnh, thiết lập mức độ bên trái là 10px, thì sẽ chuyển phần tử này  chỉ 10 pixel ở trên và 10 pixel từ bên trái của điểm gốc này

Vị trí tương đối đối cũng thường được sử dụng để xác định điểm gốc mới (với độ x và y) của các phần tử cư trú bên trong vị trí tuyệt đối. Mặc định, vị trí cơ sở của mỗi phần tử nằm ở góc trên bên trái (0,0) của khung nhìn trình duyệt. Khi bạn đặt một phần tử với vị trí tương đối, vị trí sẽ được đặt tương đối theo phần tử cha. Ví dụ dưới mức 0,0 của phần tử con bây giờ là mức góc trên bên trái của phần tử cha, không phải là mức khung nhìn của trình duyệt

Một phần tử với giá trị 

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

03 có thể đặt ở bất kỳ đâu sử dụng cho tốc độ x và y. Mặc định, vị trí cơ sở (0,0) nằm ở góc trên bên trái của khung nhìn trình duyệt. Nó bỏ qua tất cả các quy tắc dòng chảy tự nhiên và không ảnh hưởng bởi các phần tử xung quanh

Vị trí của một phần tử với giá trị  

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

44 là góc trên bên trái của khung nhìn trình duyệt. Sự khác biệt với vị trí cố định là phần tử này sẽ được xác định tại vị trí của nó và nằm trong các khung nhìn ngay cả khi người dùng sử dụng cuộn thanh cuộn lên hoặc xuống. giá trị này cũng là góc trên cùng bên trái của cổng xem của trình duyệt. Sự khác biệt với định vị cố định là phần tử sẽ được cố định vào vị trí của nó và vẫn ở chế độ xem ngay cả khi người dùng cuộn lên hoặc xuống

Thuộc tính 

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

45 xác định thứ tự ngăn xếp của một phần tử. thuộc tính chỉ định thứ tự ngăn xếp của một phần tử. Phần tử có giá trị cao hơn sẽ xuất hiện

Để dễ dàng hình dung việc sắp xếp các lớp với z-index. Xem ví dụ bên dưới

Xem thêm bài viết

• W3Schools. Định vị CSS
• Thủ thuật CSS. Định vị tuyệt đối, tương đối, cố định
• Ngừng hoảng loạn định vị CSS
• Tìm hiểu định vị CSS trong mười bước
• Bảo hiểm chuyên sâu về các lớp CSS, Chỉ mục Z, Định vị tương đối và tuyệt đối

MỘT SỐ ỨNG DỤNG DÙNG CSS

Bây giờ bạn đã hiểu những kiến ​​thức cơ bản, bước tiếp theo là thêm một chút hương vị với CSS của bạn. Bên dưới là một số kỹ thuật cơ bản cho cải thiện và đánh bóng bố cục và ảnh của trang web. Chúng cũng sẽ là cảm thức với bạn để tạo ra các trang web riêng của bạn từ việc sử dụng CSS ngay từ đầu

---

1. Ảnh nền

Các ảnh nền có rất nhiều hữu ích cho nhiều hiệu ứng hình ảnh. Mặc dù bạn thêm các ảnh đã được lặp lại để bao phủ toàn bộ một diện tích hoặc thêm các kiểu biểu tượng vào menu điều hướng, những hình ảnh này làm trang web của bạn sinh động hơn

Chú ý mặc định mặc định thiết lập mặc định trong ấn loại bỏ các thuộc tính nền. Vì vậy khi tạo các trang trong, hãy lưu tâm đến các phần tử có ảnh nền và bao gồm cả các thẻ ảnh

SỬ DỤNG CÁC ẢNH NỀN LÊN

Với kích thước màn hình ngày càng trở nên lớn hơn, hình nền ngày càng phổ biến cho các trang web

Xem chi tiết tài liệu hướng dẫn bởi Nick La của WebDesigner Wall để biết cách đạt được hiệu ứng này

Ngoài ra, bạn có thể đọc bài viết trên Webdesigner Depot về chủ đề “Những điều nên làm và không nên làm đối với nền trang web lớn. ”

THẦY THẾ VĂN BẢN

Bạn có thể thấy rằng hầu hết các trình duyệt chuẩn đều hỗ trợ các Font đã tinh chỉnh trên các Website. Nhưng bản có thể thay thế phần văn bản bởi một bức ảnh theo các cách khác nhau. Một kỹ thuật khá đơn giản là sử dụng thuộc tính 

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

46

Thường gặp các tiêu đề, kỹ thuật này thay thế cấu trúc văn bản HTML bằng một ảnh

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

4

Đôi khi bạn có thể chỉ định chiều rộng và chiều cao (như _____46 nếu phân tử là nội tuyến)

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

5

Các bài viết nói về thay thế văn bản

• Chín kỹ thuật thay thế hình ảnh CSS
• Sử dụng hình nền để thay thế văn bản
• Vị trí hình ảnh so với. Thay thế hình ảnh
• Thay thế hình ảnh đã sửa đổi

TẠP CHÍ CSS

CSS Sprites là một kỹ thuật mà bạn sử dụng để định vị ảnh nền để có thể hiển thị trên một phần diện tích nhỏ với một ảnh nền lớn hơn (ảnh lớn hơn này thực tế là nhiều ảnh được đặt trên một lưới và có ranh giới

CSS Sprites thường được sử dụng với các biểu tượng và các biểu tượng chuột và ảnh của các giả quốc tế được sử dụng để thay thế các liên kết hoặc các mục điều hướng

Tại sao sử dụng CSS Sprites? . Để biết nhiều hơn về CSS Sprites, hãy xem thêm các tài nguyên bên dưới

Các bài viết về CSS Sprites

• Bí ẩn của CSS Sprites. Kỹ thuật, Công cụ và Hướng dẫn
• Menu CSS nâng cao
• Hướng dẫn Điều hướng CSS Sprite
• Tạo CSS Sprites dễ dàng và hữu ích
• Xây dựng trang web nhanh hơn với CSS Sprites
• CSS Sprite. Image Slicing's Kiss of Death
• CSS Sprite. Yahoo như thế nào. com và AOL. com Cải thiện hiệu suất web
• CSS Sprites là gì?

---

2. image variable

Bạn có thể định dạng các kiểu ảnh với CSS theo các cách khác nhau, và một số người thiết kế phải bỏ qua rất nhiều công sức để tạo ra rất nhiều khuân mẫu (template) của ảnh

Một thủ thuật đơn giản là kỹ thuật viền kép không yêu cầu thêm bất kỳ hình ảnh nào và là CSS thuần túy

HTML of you same as after

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

6

And your CSS

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

7

WebDesigner Wall có một bài hướng dẫn rất hay về các thủ thuật thông minh để cải thiện ảnh của bạn. Please try to see it

---

3. PSD to HTML

Bây giờ bạn đã học được những nguyên tắc cơ bản của CSS, giờ là lúc kiểm tra kỹ năng của bạn và xây dựng trang web của riêng bạn từ đầu. Dưới đây là một vài bài hướng dẫn được lựa chọn từ các Web tốt nhất

• Mã hóa một thiết kế web rõ ràng và minh họa từ đầu
  
• Xây dựng một trang web danh mục đầu tư đẹp mắt từ đầu
  
• Cách xây dựng trang web danh mục đầu tư một trang của riêng bạn
  
• Chuyển đổi một Mockup Photoshop. Phần Hai, Tập Một
  

---

Kết luận

Xây dựng một nền tảng chắc chắn là rất quan trọng để làm chủ CSS. Với sự phát triển nhanh chóng của web công nghệ tiên tiến, không có gì là xu hướng và chuẩn cuối cùng

Hy vọng những kỹ thuật mà chúng tôi thu thập ở đây sẽ giúp bạn có điểm bắt đầu để trở nên thành thạo với CSS. Chúc may mắn, giữ đam mê và duy trì việc học liên tục