Cách căn giữa ảnh bằng CSS: cứ tưởng thế nào!

Căn giữa chữ rất dễ, bạn chỉ cần sử dụng thuộc tính text-align: center; là OK.Còn căn giữa ảnh thì lại không dễ như thế! Đã rất nhiều lần tôi vò đầu bứt tai vì chẳng căn giữa nổi! Thực ra kỹ thuật không có gì đặc biệt, nhưng cần mẹo nhỏ thì mới được. Đấy là đặc điểm chung của mẹo, biết thì rất dễ mà không biết thì khó vô cùng (chém gió tí!) Giả dụ tôi có cái ảnh như này: Theo mặc định, giống như trên, bức ảnh sẽ dạt về bên trái, vậy làm thế …

Đọc thêm

Danh mục CSS

Selector thuộc tính trong CSS

Có rất nhiều kiểu Selector khác nhau trong CSS, với tôi Selector thuộc tính là cái vô cùng thú vị. Bởi vì khi mới học bạn sẽ thấy mình ít dùng nó, nhưng khi học nâng cao hơn thì ngược lại, và đôi khi nhờ nó bạn đỡ tốn thời gian tạo id hoặc class mới. Code mẫu CSS: HTML: Kết quả: Họ và tên: Email: Cách dùng Về cơ bản ý tưởng về selector thuộc tính rất đơn giản, thay vì dùng id hay class để xác định đối tượng cần tác động CSS, chúng ta dùng ngay các …

Đọc thêm

Danh mục CSS

Selector :after trong CSS

Bộ chọn after trong CSS được dùng để chèn nội dung bất kỳ sau một nội dung của thẻ nào đó. Ví dụ: CSS: Đoạn code ở trên sẽ chèn dòng chữ (freehost.page) sau bất kỳ thẻ p nào. Trình duyệt hỗ trợ Tất cả các trình duyệt phổ thông gồm Chrome, FireFox, Opera, Safari và IE đều hỗ trợ Selector :after Danh sách bộ chọn Selector :before; Selector thuộc tính; Lớp giả (ví dụ first-letter); Id và Class; Selector :after (bài bạn đang đọc) Tổng hợp các Selector;

Danh mục CSS

Selector :before trong CSS

Bộ chọn before trong CSS được dùng để chèn nội dung bất kỳ trước một nội dung của thẻ nào đó. Ví dụ, CSS: HTML: Đoạn code ở trên sẽ chèn dòng chữ (Kiến càng) trước bất kỳ thẻ p nào. Trình duyệt hỗ trợ Tất cả các trình duyệt phổ thông gồm Chrome, FireFox, Opera, Safari và IE đều hỗ trợ Selector :before Danh sách bộ chọn Selector :before (bài bạn đang đọc); Selector thuộc tính; Lớp giả (ví dụ first-letter); Id và Class; Selector :after; Tổng hợp các Selector;

Danh mục CSS

Lớp giả first-letter trong CSS

First-letter là lớp giả dùng để lấy ký tự đầu tiên trong thẻ bất kỳ nào đó. Giả dụ chúng ta có đoạn code sau: CSS: Mã đánh dấu HTML: Thế thì bất kỳ ký tự đầu tiên nào nằm trong thẻ h5 đều được bôi đậm, có màu xanh và có kích thước gấp 2,5 lần bình thường. Kết quả: Xin chào đến với Blog Kiến càng Tôi tên là Nguyễn Đức Anh Tôi sống ở Hà Nội, Việt Nam Tôi thích thiết kế web, và các công nghệ liên quan Trình duyệt hỗ trợ Tất cả các trình …

Đọc thêm

Danh mục CSS

Lớp giả first-child trong CSS

First-child dịch ra tiếng Việt là đứa con cả, và trong CSS, điều này có nghĩa là nó sẽ tác động đến thẻ đầu tiên của thẻ cha.  Giả dụ tôi có 3 thẻ p như thế này: Giờ nếu tôi viết trong CSS như thế này: Thì dòng chữ đầu tiên Họ và tên: Nguyễn Đức Anh sẽ có màu xanh. Có một chú ý nhỏ, đó là câu lệnh: Sẽ tác động đến tất cả thẻ p mà là con cả, chẳng hạn nếu chúng ta có mã đánh dấu như sau: Theo bạn những đoạn văn bản nào sẽ có …

Đọc thêm

Danh mục CSS

Danh sách các thẻ trong HTML

Bạn muốn có danh sách ngắn gọn các thẻ trong HTML? Bạn muốn xem lại bất cứ khi nào mình muốn? Thế thì bạn đã đến đúng nơi! Trong bài viết này Kiến càng sẽ cung cấp cho bạn thông tin đơn giản nhưng đầy đủ về các thẻ HTML. Tài Liệu HTML chuẩn <!DOCTYPE html><html><head><title>Tiêu đề bài viết</title></head> <body>Nội dung bài viết…</body> </html> Các thẻ cơ bản <h1>Thẻ quan trọng nhất, có kích thước lớn nhất</h1><h2> . . . </h2><h3> . . . </h3><h4> . . . </h4><h5> . . . </h5><h6>Thẻ quan trọng kém nhất, có kích thước …

Đọc thêm

CSS cho thẻ table: một trong những thành phần quan trọng nhất mà bạn cần nắm rõ

Table là thẻ thường dùng trong HTML. Trong các bố cục kiểu Excel có hàng và cột thì table luôn được ưu tiên sử dụng mặc dù thẻ div cũng làm được điều tương tự về mặt hiển thị – lý do là vì div không thể hiện được sự liên quan giữa các dữ liệu với nhau. Nhưng mục đích chính của bài này lại ở phần khác, đó là trang trí cho thẻ table bằng CSS. Tạo đường viền cho table CSS: Kết quả: Họ tên Năm sinh Nguyễn Đức Anh 1987 Tham khảo thêm câu lệnh border …

Đọc thêm

Danh mục CSS

Các thuộc tính trong HTML

Các thuộc tính trong HTML cung cấp thông tin bổ sung cho các thẻ. Nội dung của nó rất quan trọng, tuy nhiên sẽ không có ý nghĩa nhiều lắm nếu bạn chưa có tí kinh nghiệm nào với HTML và CSS. Đặc điểm Các thẻ HTML có thể chứa một hoặc nhiều thuộc tính Các thuộc tính cung cấp thông tin bổ sung cho các thẻ Các thuộc tính luôn nằm trong các thẻ mở (chứ không phải thẻ đóng nhé) Các thuộc tính thường xuất hiện dưới dạng cặp tên/giá trị kiểu như: tên=”giá trị” Trong ví dụ …

Đọc thêm