8 Code css cơ bản cần nhớ cho người mới bắt đầu học làm web

Chỉ cần bỏ ra vài phút là bạn có thể học được những đoạn code css cơ bản và bạn sẽ tối ưu được website của mình sao cho đẹp và chuyên nghiệp nhất. Và với những đoạn code này bạn sẽ giúp website của mình thêm nổi bật với người nhìn và thân thiện với google.

Những đoạn code sau có thể giúp bạn học css cơ bản 1 cách dễ dàng chỉ với vài lần test thử là bạn sẽ biết công dụng của nó và áp dụng đúng. Và không dài dòng hãy đi vào css toàn tập với các đoạn code sau

Giới thiệu đến bạn 8 đoạn code css cơ bản và dễ sử dụng

Xóa gạch chân liên kết

Để dấu gạch chân sẽ chỉ rõ đâu là liên kết nhưng nếu bỏ đi sẽ thấy gọn hơn và đẹp hơn. Và sử dụng CSS này xóa gạch chân trên liên kết.

Và nếu bạn muốn gạch chân nó khi người dùng lia chuột ngang qua nó? Chỉ cần thêm:

Tạo một liên kết button

4 dòng chữ xanh trên đảm bảo nút sẽ không bị biến mất khi người dùng di chuyển hay click vào nó.

• Padding là kích thước của hộp, 10px chiều dọc – 25px theo chiều ngang.
• Text – align( Căn chỉnh văn bản): center
• Text – decoration: bỏ gạch chân
• Display: cho bạn đặt chiều cao và rộng của đối tượng

Thay màu đoạn văn bản

Và văn bản sẽ là màu xám đen thay vì màu đen. Code CSS cho điều này là:

Khi bạn dùng đoạn code này thì tất cả các trình duyệt hiển thị một đoạn văn bản thì văn bản sẽ có kích thước 120% và màu sắc là màu dimgrey (xám).

Thay đổi màu liên kết

4 màu liên kết: màu đã truy cập, màu tiêu chuẩn, màu di chuột và màu hoạt động của nó (khi bạn click vào nó). Và bạn có thể thay 4 màu liên kết bằng mã này.

Tạo đường viền đoạn văn bản

Code trên tạo ra đường viền màu tím, rộng 5pixel, xung quanh bất kỳ đoạn quan trọng nào.

Để tạo 1 đoạn kế thừa những thuộc tính trên chỉ cần khai báo như hình:

Code CSS dưới đây xác định độ dày của mỗi đường viền

Như hình đường viền trên cùng dày 5 pixel, phải 8px, trái 9px và đường cuối 3px.

Các yếu tố trung tâm

Với những phần tử khối (như hình ảnh), hãy sử dụng thuộc tính lề:

Như hình thì phần tử hiển thị dạng khối và lề ở mỗi bên được đặt tự động.

Nếu bạn muốn canh giữa tất cả hình ảnh của trang và bạn có thể thêm lề auto như hình vào thẻ img:

Nhưng nếu muốn tập trung văn bản bằng CSS thì sử dụng mẫu này

Code làm bảng và lưới bản đẹp hơn

Code CSS sẽ làm cho các lưới bảng đẹp hơn so lưới mặc định. Và bạn có thể thêm màu sắc chỉnh đường viền và làm bảng phù hợp với bản di động. Đây là code làm nổi bật các hàng của bảng khi bạn rê chuột qua chúng:

Code làm mờ và trong suốt ảnh

CSS này sẽ hiển thị hình ảnh ở độ mờ dưới mức tối đa, vì thế chúng xuất hiện 1 chút. Khi bạn rê chuột qua hình ảnh thì chúng sẽ mờ hoàn toàn:

Và hình ảnh hơi trong suốt code sẽ khiến chúng mờ hoàn toàn như biến mất khi rê chuột qua:

Trên chỉ là những bài tập css cơ bản cũng như code của nó để bạn dễ hình dung. Nhưng nếu bạn muốn học css từ cơ bản đến nâng cao bạn có thể học ở các trung tâm hoặc rãnh thời gian bạn tìm hiểu trên Google nhé. Chúc bạn tạo website chuyên nghiệp.