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ó 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 …
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;
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;
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 …
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ó …
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 …
Thuộc tính word-wrap dùng để ngắt những từ quá dài, mà nếu bạn không dùng đến nó sẽ gây ra tình trạng phá vỡ layout (bố cục) của trang. Cách đơn giản nhất để hiểu thuộc tính này là thông qua ví dụ, chẳng hạn tôi có một danh sách các tên miền ưa thích như sau: 1.vnexpress.net2.dantri.vn3.www.google.com4.www.freehost.page Bạn dễ dàng thấy tên miền www.freehost.page bị tràn ra khỏi layout, sở dĩ như vậy vì nó dài hơn chiều rộng của box chứa nó. Để khắc phục tình trạng này ta dùng word-wrap với giá trị là break-word, code mẫu: …
Box-shadow là thuộc tính mới trong CSS, nằm trong phiên bản CSS3. Nó có tác dụng tạo bóng cho hộp (xem thêm mô hình hộp trong CSS). Ví dụ: Kết quả: Khi sử dụng box-shadow có một số lưu ý sau: Bóng là một hộp có kích thước tương tự hộp ban đầu; Màu sắc mặc định của bóng là đen (mã màu: #000000); box-shadow: 20px 10px; quy định độ dịch chuyển của bóng so với vị trí gốc, theo đó giá trị đầu là dịch chuyển theo chiều ngang (20px), giá trị tiếp theo là dọc (10px); Bạn có …
Trong khi thao tác CSS, bộ chọn (selector) là cái được viết ra đầu tiên. Nó là đối tượng mà chúng ta muốn tác động, tiếp theo mới viết các khai báo, trong khai báo có thuộc tính và giá trị (xem thêm cú pháp của CSS). Đễ cho dễ tưởng tượng hơn, giả dụ bạn là thợ sơn chuyên nghiệp, khách hàng alo cho bạn, anh ta muốn sơn ngôi nhà có màu xanh, và các viền cửa màu nâu. OK, chuyện đó chẳng khó gì với bạn, thế nhưng nếu khách hàng không cho biết địa chỉ cụ …