Tóm Tắt
CSS là gì
CSS là ngôn ngữ dùng để làm đẹp cho trang web – Cascading Style Sheet language. Nó dùng để định dạng và phân phối cho những yếu tố được viết dưới dạng ngôn ngữ đánh dấu, như là HTML. Nó có thể điều khiển định dạng của nhiều trang web cùng lúc để tiết kiệm công sức cho người viết web. Nó phân biệt cách hiển thị của trang web với nội dung chính của trang bằng cách điều khiển bố cục, màu sắc, và font chữ. Mục đích chính là làm cho website của bạn được thu hút hơn, đẹp hơn.
Xem thêm: CSS là gì? Những điều cần biết về CSS
Ngày xưa, chúng ta phụ thuộc rất nhiều vào các nhà phát triển và lập trình viên để giúp cập nhật trang web, ngay cả khi đó chỉ là một lỗi nhỏ. Nhờ CSS và tính linh hoạt của nó, các kiểu có thể được trích xuất độc lập khỏi các mã. Giờ đây, với một số hiểu biết cơ bản về CSS, ngay cả một người mới cũng có thể dễ dàng thay đổi phong cách của một trang web.
Cho dù bạn có quan tâm đến việc chọn CSS để tạo trang web của riêng mình hay chỉ để điều chỉnh giao diện blog của bạn một chút - luôn luôn tốt khi bắt đầu với các nguyên tắc cơ bản để có được nền tảng vững chắc hơn. Chúng ta hãy xem một số Mẹo CSS mà chúng tôi nghĩ có thể hữu ích cho người mới bắt đầu học thiết kế website.
Sử dụng reset.css
Khi nói đến kết xuất kiểu CSS, các trình duyệt như Firefox và Internet Explorer có các cách xử lý khác nhau. Reset css lại cài đặt tất cả các kiểu cơ bản đồng nhất các trình duyệt với nhau để không bị các cấu hình mặt định của các trình duyệt làm thay đổi style guide của minhf. Vì vậy bạn bắt đầu với một css mới thực sự trống không.
Sử dụng CSS rút gọn
CSS rút gọn cung cấp cho bạn cách viết mã CSS ngắn hơn và quan trọng nhất - nó làm cho mã rõ ràng và dễ hiểu hơn.
Thay vì tạo CSS như thế này
.header {
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
}Nó có thể được viết tay ngắn như sau:
.header {
background: #fff url(image.gif) no-repeat top left
}
Hiểu Class và ID
Hai bộ chọn này thường gây nhầm lẫn cho người mới bắt đầu. Trong CSS, classđược biểu thị bằng dấu chấm "." while idlà hàm băm '# ". Tóm lại, idđược sử dụng theo kiểu duy nhất và không lặp lại, classmặt khác, có thể được sử dụng lại.
Sức mạnh của <li>
<li> là danh sách liên kết, rất hữu ích khi chúng được sử dụng chính xác với <ol>hoặc <ul>, cụ thể để tạo kiểu cho menu điều hướng.
Không sử dụng <table>, hãy thử <div>
Một trong những lợi thế lớn nhất của CSS là việc sử dụng <div>để đạt được sự linh hoạt hoàn toàn về mặt kiểu dáng. <div>không giống như <table>,nơi nội dung bị 'khóa' trong <td>ô của. Có thể nói rằng hầu hết các <table>bố cục đều có thể đạt được với việc sử dụng <div>và tạo kiểu phù hợp, có thể ngoại trừ nội dung dạng bảng lớn.
Công cụ gỡ lỗi CSS
Luôn luôn tốt để có được bản xem trước tức thì của bố cục trong khi điều chỉnh CSS, nó giúp hiểu và gỡ lỗi các kiểu CSS tốt hơn. Dưới đây là một số công cụ gỡ lỗi CSS miễn phí mà bạn có thể cài đặt trên trình duyệt của mình: FireFox Web Developer , DOM Inspector , Internet Explorer Developer Thanh công cụ và Fireorms .
Tránh chọn lọc thừa
Đôi khi khai báo CSS của bạn có thể đơn giản hơn, có nghĩa là nếu bạn thấy mình viết mã như sau:
ul li { ... }
ol li { ... }
table tr td { ... }Chúng có thể được rút ngắn xuống chỉ
li { ... }
td { ... }Giải thích: <li>sẽ chỉ tồn tại bên trong <ul>hoặc <ol>và <td>sẽ chỉ ở bên trong <tr>và <table>vì vậy thực sự không cần thiết phải chèn lại chúng.
Biết !important
Bất kỳ kiểu nào được đánh dấu !importantsẽ được đưa vào sử dụng bất kể nếu có quy tắc ghi đè bên dưới nó.
.page { background-color:blue !important; background-color:red;}Trong ví dụ trên, background-color:bluesẽ được điều chỉnh vì nó được đánh dấu !important, ngay cả khi có phần background-color:red;bên dưới. !importantđược sử dụng trong trường hợp bạn muốn tạo kiểu mà không cần ghi đè lên kiểu nào, tuy nhiên nó có thể không hoạt động trong Internet Explorer.
Thay thế văn bản bằng hình ảnh
Điều này thường được thực hành để thay thế <h1>title</h1>từ một tiêu đề dựa trên văn bản thành một hình ảnh. Đây là cách bạn làm điều đó.
h1 {
text-indent:-9999px;
background:url("title.jpg") no-repeat;
width:100px;
height:50px;
}Giải thích:text-indent:-9999px; ném tiêu đề văn bản của bạn ra khỏi màn hình, thay thế bằng một hình ảnh được khai báo bằng background: {...}một cố định width và height.
Hiểu định vị CSS
Bài viết sau đây cung cấp cho bạn một sự hiểu biết rõ ràng trong việc sử dụng định vị CSS - position: {...}
Thêm - Tìm hiểu định vị CSS trong mười bước
CSS @importvs<link>
Có 2 cách để gọi một tệp CSS bên ngoài - tương ứng bằng cách sử dụng @importvà <link>. Nếu bạn không chắc nên sử dụng phương pháp nào, thì đây là một vài bài viết giúp bạn quyết định.
